style(journals): standardize configuration interfaces across module

- Refactored Module, Journal, and Entry configs to use consistent tabbed layouts.
- Adopted unified 'Aether Orange' aesthetic with Skeleton UI and Lucide icons.
- Replaced overcrowded inline settings menu with 'ModalJournalEntryConfig'.
- Cleaned up Header component logic and improved visual consistency.

src/routes/journals/JournalEntry_Header.svelte

@@ -1,21 +1,17 @@
 <script lang="ts">
     /**
      * JournalEntry_Header.svelte
-     * Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
+     * Standardized Journal Entry Header.
-     * Handles name, tags, categories, and the 3-state toggle (View/Eye/Save).
+     * Manages name, sync status, and triggers the modular config.
      */
     import { 
-        Save, Eye, Pencil, Tags, Shapes, 
+        Save, Eye, Pencil, 
-        Siren, MessageSquareWarning, Skull, 
+        Fingerprint, LockKeyhole, LockKeyholeOpen, Settings,
-        Fingerprint, LockKeyhole, LockKeyholeOpen, Menu,
+        ChevronLeft, CircleCheck, CircleX, Loader2, RefreshCw
-        Globe, BookHeart, BriefcaseBusiness,
-        CircleCheck, CircleX, Loader2, RefreshCw
     } from '@lucide/svelte';
     import { ae_util } from '$lib/ae_utils/ae_utils';
-    import { ae_loc } from '$lib/stores/ae_stores';
     import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
     import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
-    import JournalEntry_SettingsMenu from './JournalEntry_SettingsMenu.svelte';
 
     interface Props {
         entry: ae_JournalEntry;
@@ -23,260 +19,118 @@
         journals_li?: ae_Journal[];
         tmp_entry_obj: any; // Bindable
         has_changed: boolean;
+        save_status?: 'saved' | 'unsaved' | 'saving';
         onSave: () => void;
         onDecrypt: () => void;
-        onDecryptHistory: () => void;
+        onShowConfig: () => void;
-        onChangeJournal: () => void;
-        onAppend?: () => void;
-        onPrepend?: () => void;
-        onShowExport?: () => void;
-        save_status?: 'saved' | 'unsaved' | 'saving';
         log_lvl?: number;
     }
 
     let { 
         entry, 
         journal, 
-        journals_li = [],
         tmp_entry_obj = $bindable(), 
         has_changed,
+        save_status = 'saved',
         onSave,
         onDecrypt,
-        onDecryptHistory,
+        onShowConfig,
-        onChangeJournal,
-        onAppend,
-        onPrepend,
-        onShowExport,
-        save_status = 'saved',
         log_lvl = 0 
     }: Props = $props();
 
+    const is_decrypted = $derived($journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted === true);
+
     function toggle_edit_mode() {
         const isEditing = $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
-        
         if (isEditing) {
-            if (has_changed) {
+            if (has_changed) onSave();
-                onSave();
+            else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
-            } else {
-                $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
-            }
         } else {
             $journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
         }
     }
-
-    function toggle_property(prop: string) {
-        (tmp_entry_obj as any)[prop] = !entry[prop as keyof ae_JournalEntry];
-        onSave();
-    }
 </script>
 
-<header
+<header class="flex flex-col md:flex-row items-center justify-between gap-4 p-3 bg-surface-100/50 dark:bg-surface-900/50 rounded-xl border border-surface-500/20 backdrop-blur-md shadow-sm w-full">
-    class="
+    <div class="flex items-center gap-3 w-full md:w-auto">
-ae_header journal_entry__header
+        <a href="/journals/{journal.journal_id}" class="btn-icon btn-icon-sm variant-soft-surface" title="Back to Journal">
-flex flex-row flex-wrap gap-2
+            <ChevronLeft size="1.2em" />
-items-center justify-between
+        </a>
-w-full
+        
-bg-gray-100 dark:bg-gray-800
+        <div class="flex items-center gap-2 grow">
-p-2 md:p-3 rounded-lg shadow-md
+            <button
-"
+                type="button"
->
+                onclick={toggle_edit_mode}
-    <div class="flex-1 flex flex-row flex-wrap gap-2 items-center justify-start min-w-[200px]">
+                class="btn-icon btn-icon-sm transition-all {has_changed && $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current' ? 'variant-filled-success' : 'variant-soft-surface'}"
-        <!-- Toggle edit for journal entry -->
+            >
-        <button
+                {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
-            type="button"
+                    {#if has_changed}<Save size="1.2em" />{:else}<Eye size="1.2em" />{/if}
-            onclick={toggle_edit_mode}
-            class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-primary-500 transition-all"
-            class:preset-filled-success-500={has_changed && $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
-            title="Toggle view/edit/save mode"
-        >
-            {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
-                {#if has_changed}
-                    <Save size="1.25em" />
                 {:else}
-                    <Eye size="1.25em" />
+                    <Pencil size="1.2em" />
                 {/if}
-            {:else}
+            </button>
-                <Pencil size="1.25em" />
-            {/if}
-        </button>
 
-        <!-- Auto Save Toggle & Status -->
-        {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
-            <div class="flex items-center gap-1 border-r border-surface-500/20 pr-2 mr-1">
-                <button
-                    type="button"
-                    class="btn btn-icon btn-icon-sm transition-all"
-                    class:text-primary-500={$journals_loc.entry.auto_save}
-                    class:opacity-50={!$journals_loc.entry.auto_save}
-                    onclick={() => $journals_loc.entry.auto_save = !$journals_loc.entry.auto_save}
-                    title="Toggle Auto Save"
-                >
-                    <RefreshCw size="1.1em" class={$journals_loc.entry.auto_save ? '' : ''} />
-                </button>
-                
-                {#if $journals_loc.entry.auto_save}
-                    <div class="flex items-center" title="Auto Save Status: {save_status}">
-                        {#if save_status === 'saving'}
-                            <Loader2 size="1.1em" class="animate-spin text-primary-500" />
-                        {:else if save_status === 'saved'}
-                            <CircleCheck size="1.1em" class="text-success-500" />
-                        {:else}
-                            <CircleX size="1.1em" class="text-surface-400" />
-                        {/if}
-                    </div>
-                {/if}
-            </div>
-        {/if}
-
-        <h2 class="journal_entry__name text-base md:text-lg font-bold truncate max-w-[200px] md:max-w-md">
             {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] == 'current'}
                 <input
                     type="text"
                     bind:value={tmp_entry_obj.name}
-                    class="input input-sm md:input-md input-bordered w-full"
+                    class="input input-sm variant-form-material font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
-                    placeholder="Journal Entry Name"
+                    placeholder="Entry Title..."
+                    onchange={onSave}
                 />
             {:else}
-                <span>
+                <h2 class="text-base md:text-lg font-bold truncate max-w-md">
-                    {#if entry.name}
+                    {entry.name || ae_util.iso_datetime_formatter(entry.created_on, 'datetime_iso_12_no_seconds')}
-                        {@html entry.name}
+                </h2>
-                    {:else}
-                        {ae_util.iso_datetime_formatter(entry.created_on, 'datetime_iso_12_no_seconds')}
-                    {/if}
-                </span>
             {/if}
-        </h2>
-    </div>
-
-    <div class="flex flex-row flex-wrap gap-2 items-center justify-end">
-        <!-- Toggles Container -->
-        <div class="flex flex-row flex-wrap gap-1 items-center justify-end">
-            
-            <!-- Quick Category Display -->
-            {#if entry.category_code && $journals_loc.entry.edit_kv[entry.journal_entry_id] !== 'current'}
-                <span class="hidden md:flex items-center gap-1 text-xs font-semibold px-2 py-1 bg-surface-500/10 rounded">
-                    <Shapes size="1em" />
-                    {entry.category_code}
-                </span>
-            {/if}
-
-            <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
-                <!-- Public Toggle -->
-                <button
-                    type="button"
-                    class:hidden={journal?.cfg_json?.hide_btn_public}
-                    onclick={() => toggle_property('public')}
-                    class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                    title="Toggle public visibility"
-                >
-                    <Globe size="1.1em" class={entry.public ? 'text-success-500' : 'opacity-50'} />
-                </button>
-
-                <!-- Personal Toggle -->
-                <button
-                    type="button"
-                    class:hidden={journal?.cfg_json?.hide_btn_personal}
-                    onclick={() => toggle_property('personal')}
-                    class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                    title="Toggle personal visibility"
-                >
-                    <BookHeart size="1.1em" class={entry.personal ? 'text-success-500' : 'opacity-50'} />
-                </button>
-
-                <!-- Professional Toggle -->
-                <button
-                    type="button"
-                    class:hidden={journal?.cfg_json?.hide_btn_professional}
-                    onclick={() => toggle_property('professional')}
-                    class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                    title="Toggle professional visibility"
-                >
-                    <BriefcaseBusiness size="1.1em" class={entry.professional ? 'text-success-500' : 'opacity-50'} />
-                </button>
-
-                <span class="flex flex-row flex-wrap gap-0.5 items-center justify-center border-l border-surface-500/20 pl-1">
-                    <!-- Private/Encryption Toggle -->
-                    <button
-                        type="button"
-                        class:hidden={journal?.cfg_json?.hide_btn_private || (entry.private && !$ae_loc.edit_mode)}
-                        onclick={async () => {
-                            if (!entry.private && entry.content) {
-                                if (confirm('Encrypt and resave this entry?')) {
-                                    tmp_entry_obj.private = true;
-                                    onSave();
-                                }
-                            } else if (entry.private && entry.content_encrypted) {
-                                // CRITICAL: Ensure we have the decrypted content before we turn OFF privacy
-                                if (!tmp_entry_obj.content) {
-                                    console.log('Header: Content not decrypted. Attempting decryption before toggle.');
-                                    await onDecrypt();
-                                }
-
-                                // Check again after attempted decryption
-                                if (tmp_entry_obj.content) {
-                                    if (confirm('Decrypt and resave as plain text?')) {
-                                        tmp_entry_obj.private = false;
-                                        onSave();
-                                    }
-                                } else {
-                                    alert('Cannot convert to plain text: Entry is not decrypted. Please enter passcode first.');
-                                }
-                            }
-                        }}
-                        class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                        title="Toggle privacy"
-                    >
-                        <Fingerprint size="1.1em" class={entry.private ? 'text-success-500' : 'opacity-50'} />
-                    </button>
-
-                    {#if entry.private && entry.content_encrypted}
-                        <button
-                            type="button"
-                            onclick={onDecrypt}
-                            class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500"
-                            title="Toggle decryption"
-                        >
-                            {#if tmp_entry_obj?.content}
-                                <LockKeyholeOpen size="1.1em" class="text-success-500" />
-                            {:else}
-                                <LockKeyhole size="1.1em" class="text-error-500" />
-                            {/if}
-                        </button>
-                    {/if}
-                </span>
-
-                <!-- Settings Menu Trigger -->
-                <section class="relative">
-                    <button
-                        type="button"
-                        onclick={() => ($journals_sess.entry.show_menu = !$journals_sess.entry.show_menu)}
-                        class="btn btn-sm variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 transition-all"
-                        class:preset-filled-warning-500={$journals_sess.entry.show_menu}
-                    >
-                        <Menu size="1.25em" class="inline-block" />
-                        <span class="hidden md:inline ml-1">Menu</span>
-                    </button>
-
-                    {#if $journals_sess.entry.show_menu}
-                        <div class="absolute top-12 right-0 p-4 z-50 bg-white dark:bg-gray-800 border border-surface-500 shadow-xl rounded-lg min-w-72">
-                            <JournalEntry_SettingsMenu 
-                                {entry} 
-                                {journal} 
-                                {journals_li}
-                                bind:tmp_entry_obj={tmp_entry_obj} 
-                                {onSave}
-                                {onDecryptHistory}
-                                {onChangeJournal}
-                                {onAppend}
-                                {onPrepend}
-                                {onShowExport}
-                                {log_lvl}
-                            />
-                        </div>
-                    {/if}
-                </section>
-            </span>
         </div>
     </div>
+
+    <div class="flex items-center gap-2 w-full md:w-auto justify-end">
+        <!-- Auto-Save indicator -->
+        {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
+            <div class="flex items-center gap-1 px-2 border-r border-surface-500/20 mr-1">
+                <button
+                    class="btn-icon btn-icon-sm { $journals_loc.entry.auto_save ? 'text-primary-500' : 'opacity-30'}"
+                    onclick={() => $journals_loc.entry.auto_save = !$journals_loc.entry.auto_save}
+                    title="Toggle Auto Save"
+                >
+                    <RefreshCw size="1em" />
+                </button>
+                {#if $journals_loc.entry.auto_save}
+                    {#if save_status === 'saving'}<Loader2 size="1em" class="animate-spin text-primary-500" />
+                    {:else if save_status === 'saved'}<CircleCheck size="1em" class="text-success-500" />
+                    {:else}<CircleX size="1em" class="opacity-30" />{/if}
+                {/if}
+            </div>
+        {/if}
+
+        <!-- Decrypt Toggle (Lock) -->
+        {#if entry.private}
+            <button
+                class="btn-icon btn-icon-sm transition-all {is_decrypted ? 'variant-filled-success shadow-lg shadow-success-500/20' : 'variant-soft-warning'}"
+                onclick={onDecrypt}
+                title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
+            >
+                {#if is_decrypted}<LockKeyholeOpen size="1.2em" />{:else}<LockKeyhole size="1.2em" />{/if}
+            </button>
+        {/if}
+
+        <div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div>
+
+        <!-- Unified Settings Button -->
+        <button 
+            class="btn btn-sm variant-soft-primary font-bold"
+            onclick={onShowConfig}
+        >
+            <Settings size="1.1em" class="mr-2" /> Settings
+        </button>
+
+        <!-- Explicit Save (Mobile/Backup) -->
+        {#if has_changed && save_status !== 'saving'}
+            <button class="btn btn-sm variant-filled-primary shadow-lg" onclick={onSave}>
+                <Save size="1.1em" class="mr-2" /> Save
+            </button>
+        {/if}
+    </div>
 </header>

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -25,6 +25,7 @@
     import JournalEntry_Metadata from './JournalEntry_Metadata.svelte';
     import JournalEntry_AITools from './JournalEntry_AITools.svelte';
     import AeCompModalJournalEntryAppend from './ae_comp__modal_journal_entry_append.svelte';
+    import ModalJournalEntryConfig from './modal_journal_entry_config.svelte';
     
     // Icons
     import { AlertCircle, XCircle, Loader2 } from '@lucide/svelte';
@@ -54,6 +55,7 @@
     let decryption_error: string | null = $state(null);
     let auto_save_timer: ReturnType<typeof setTimeout>;
     let is_processing = $state(false);
+    let show_config_modal = $state(false);
 
     // *** Helpers
     function deep_copy(obj: any) {
@@ -91,7 +93,7 @@
         
         if (content_changed || name_changed || private_changed) return true;
 
-        const other_fields = ['tags', 'category_code', 'public', 'personal', 'professional'];
+        const other_fields = ['tags', 'category_code', 'public', 'personal', 'professional', 'archive_on', 'sort'];
         for (const field of other_fields) {
             if (normalize(tmp_entry_obj[field]) !== normalize(orig_entry_obj[field])) return true;
         }
@@ -252,7 +254,8 @@
             enable: tmp_entry_obj.enable,
             sort: tmp_entry_obj.sort,
             group: tmp_entry_obj.group,
-            data_json: tmp_entry_obj.data_json
+            data_json: tmp_entry_obj.data_json,
+            archive_on: tmp_entry_obj.archive_on
         };
 
         const decrypt_key = $lq__journal_obj.combined_passcode;
@@ -363,11 +366,7 @@
             has_changed={has_unsaved_changes}
             onSave={update_journal_entry}
             onDecrypt={handle_content_decryption}
-            onDecryptHistory={() => {}}
+            onShowConfig={() => show_config_modal = true}
-            onChangeJournal={change_journal_id}
-            onAppend={() => { modal_mode = 'append'; show_append_modal = true; }}
-            onPrepend={() => { modal_mode = 'prepend'; show_append_modal = true; }}
-            {onShowExport}
             {save_status}
             {log_lvl}
         />
@@ -408,7 +407,7 @@
             />
         </section>
 
-        <JournalEntry_Metadata entry={tmp_entry_obj} />
+        <JournalEntry_Metadata entry={tmp_entry_obj as any} />
 
         <AeCompModalJournalEntryAppend
             bind:open={show_append_modal}
@@ -419,6 +418,19 @@
             onUpdate={() => { show_append_modal = false; }}
             {log_lvl}
         />
+
+        <ModalJournalEntryConfig
+            bind:show={show_config_modal}
+            entry={$lq__journal_entry_obj}
+            journal={$lq__journal_obj}
+            bind:tmp_entry_obj
+            onSave={update_journal_entry}
+            onForceReset={handle_force_reset}
+            {onShowExport}
+            onAppend={() => { modal_mode = 'append'; show_append_modal = true; }}
+            onPrepend={() => { modal_mode = 'prepend'; show_append_modal = true; }}
+            {log_lvl}
+        />
     {:else}
         <div class="p-20 text-center opacity-50 flex flex-col items-center gap-4">
             <Loader2 class="animate-spin" size="4em" />

src/routes/journals/modal_journal_entry_config.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+    /**
+     * modal_journal_entry_config.svelte
+     * Standardized Journal Entry-level configuration.
+     */
+    import {
+        Check,
+        Settings,
+        X,
+        Database,
+        CodeXml,
+        ShieldCheck,
+        Fingerprint,
+        Trash2,
+        Clock,
+        Shapes,
+        ArrowUpToLine,
+        ArrowDownToLine,
+        FileDown,
+        Copy,
+        RefreshCcw,
+        Tag,
+        Plus,
+        Minus
+    } from '@lucide/svelte';
+    import { Modal } from 'flowbite-svelte';
+    import { ae_loc, ae_api } from '$lib/stores/ae_stores';
+    import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
+    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+    import AE_ObjectFlags from '$lib/ae_elements/AE_ObjectFlags.svelte';
+
+    interface Props {
+        log_lvl?: number;
+        show?: boolean;
+        entry: any;
+        journal: any;
+        tmp_entry_obj: any; // Bindable
+        onSave: () => void;
+        onForceReset?: () => void;
+        onShowExport?: () => void;
+        onAppend?: () => void;
+        onPrepend?: () => void;
+    }
+
+    let {
+        log_lvl = $bindable(0),
+        show = $bindable(false),
+        entry,
+        journal,
+        tmp_entry_obj = $bindable(),
+        onSave,
+        onForceReset,
+        onShowExport,
+        onAppend,
+        onPrepend
+    }: Props = $props();
+
+    let tab: 'actions' | 'meta' | 'security' | 'json' = $state('actions');
+
+    const normalize_date = (val: string | null) => val ? val.slice(0, 16) : null;
+</script>
+
+<Modal
+    bind:open={show}
+    autoclose={false}
+    placement="top-center"
+    size="lg"
+    class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
+    headerClass="flex flex-row gap-2 items-center justify-between w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-t-lg border-b border-orange-200 dark:border-orange-800"
+    footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
+>
+    {#snippet header()}
+        <h3 class="flex items-center gap-2 text-lg font-bold">
+            <Settings class="text-primary-500" />
+            <span>Entry Settings: {tmp_entry_obj.name || '--'}</span>
+        </h3>
+    {/snippet}
+
+    <div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
+        <!-- Navigation Tabs -->
+        <div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm">
+            <button class="btn btn-sm transition-all {tab === 'actions' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'actions')}>
+                Quick Actions
+            </button>
+            <button class="btn btn-sm transition-all {tab === 'meta' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'meta')}>
+                Metadata
+            </button>
+            <button class="btn btn-sm transition-all {tab === 'security' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'security')}>
+                Security
+            </button>
+            <button class="btn btn-sm transition-all {tab === 'json' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'json')}>
+                JSON
+            </button>
+        </div>
+
+        {#if tab === 'actions'}
+            <div class="space-y-6 animate-in fade-in duration-300">
+                <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <button class="btn variant-soft-secondary w-full" onclick={() => { show = false; onPrepend?.(); }}>
+                        <ArrowUpToLine size="1.2em" class="mr-2"/> Prepend Content
+                    </button>
+                    <button class="btn variant-soft-secondary w-full" onclick={() => { show = false; onAppend?.(); }}>
+                        <ArrowDownToLine size="1.2em" class="mr-2"/> Append Content
+                    </button>
+                    <button class="btn variant-soft-surface w-full" onclick={() => { show = false; onShowExport?.(); }}>
+                        <FileDown size="1.2em" class="mr-2"/> Export Entry
+                    </button>
+                    <button class="btn variant-soft-surface w-full" onclick={() => { /* Clone logic here */ alert('Clone not yet implemented in modal'); }}>
+                        <Copy size="1.2em" class="mr-2"/> Clone Entry
+                    </button>
+                </section>
+
+                <section class="space-y-4 pt-4 border-t border-surface-500/20">
+                    <h4 class="text-xs font-bold uppercase opacity-50">Quick Category</h4>
+                    <div class="flex flex-wrap gap-2">
+                        {#each journal?.cfg_json?.category_li ?? [] as cat}
+                            <button 
+                                class="btn btn-sm {tmp_entry_obj.category_code === cat.code ? 'variant-filled-primary' : 'variant-soft-primary'}"
+                                onclick={() => { tmp_entry_obj.category_code = cat.code; onSave(); }}
+                            >
+                                {cat.name}
+                            </button>
+                        {/each}
+                    </div>
+                </section>
+            </div>
+
+        {:else if tab === 'meta'}
+            <div class="space-y-6 animate-in fade-in duration-300">
+                <label class="label">
+                    <span class="text-sm font-bold opacity-70">Category</span>
+                    <select class="select variant-form-material" bind:value={tmp_entry_obj.category_code} onchange={onSave}>
+                        <option value="">None</option>
+                        {#each journal?.cfg_json?.category_li ?? [] as cat}
+                            <option value={cat.code}>{cat.name}</option>
+                        {/each}
+                    </select>
+                </label>
+
+                <label class="label">
+                    <span class="text-sm font-bold opacity-70">Tags (Comma separated)</span>
+                    <div class="flex gap-2 items-center">
+                        <Tag size="1.2em" class="opacity-30" />
+                        <input type="text" bind:value={tmp_entry_obj.tags} class="input variant-form-material grow" placeholder="meeting, urgent, ideas" onchange={onSave} />
+                    </div>
+                </label>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <label class="label">
+                        <span class="text-sm font-bold opacity-70">Archive On</span>
+                        <input type="datetime-local" value={normalize_date(tmp_entry_obj.archive_on)} onchange={(e) => { tmp_entry_obj.archive_on = e.currentTarget.value; onSave(); }} class="input variant-form-material" />
+                    </label>
+                    <label class="label">
+                        <span class="text-sm font-bold opacity-70">Sort Priority</span>
+                        <div class="flex items-center gap-2">
+                            <button class="btn-icon btn-icon-sm variant-soft-surface" onclick={() => { tmp_entry_obj.sort = (tmp_entry_obj.sort ?? 0) - 1; onSave(); }}><Minus size="1em"/></button>
+                            <span class="font-mono font-bold w-8 text-center">{tmp_entry_obj.sort ?? 0}</span>
+                            <button class="btn-icon btn-icon-sm variant-soft-surface" onclick={() => { tmp_entry_obj.sort = (tmp_entry_obj.sort ?? 0) + 1; onSave(); }}><Plus size="1em"/></button>
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+        {:else if tab === 'security'}
+            <div class="space-y-6 animate-in fade-in duration-300">
+                <section class="space-y-4">
+                    <h4 class="text-xs font-bold uppercase opacity-50">Privacy Flags</h4>
+                    <AE_ObjectFlags 
+                        bind:obj={tmp_entry_obj} 
+                        onToggle={onSave}
+                        hideAlert={journal?.cfg_json?.hide_btn_alert}
+                        hidePrivate={journal?.cfg_json?.hide_btn_private}
+                        hidePublic={journal?.cfg_json?.hide_btn_public}
+                        hidePersonal={journal?.cfg_json?.hide_btn_personal}
+                        hideProfessional={journal?.cfg_json?.hide_btn_professional}
+                        hideTemplate={journal?.cfg_json?.hide_btn_template}
+                    />
+                </section>
+
+                {#if tmp_entry_obj.private && !tmp_entry_obj.content && tmp_entry_obj.content_encrypted}
+                    <section class="pt-8 border-t border-error-500/20">
+                        <div class="bg-error-500/10 p-4 rounded-lg border border-error-500/30">
+                            <h4 class="text-error-500 font-bold flex items-center gap-2 mb-2">
+                                <RefreshCcw size="1.2em" /> Disaster Recovery
+                            </h4>
+                            <p class="text-xs opacity-70 mb-4 italic">If the encryption passcode is lost, the data is unrecoverable. You can force a reset to plain text to reuse this entry ID.</p>
+                            <button class="btn btn-sm variant-filled-error w-full font-bold" onclick={() => { show = false; onForceReset?.(); }}>
+                                Force Reset to Plain Text
+                            </button>
+                        </div>
+                    </section>
+                {/if}
+
+                <section class="pt-12">
+                    <button class="btn btn-sm variant-soft-error w-full" onclick={() => { alert('Delete logic handled in parent component'); }}>
+                        <Trash2 size="1.1em" class="mr-2" /> Delete Entry
+                    </button>
+                </section>
+            </div>
+
+        {:else if tab === 'json'}
+            <div class="h-full min-h-[400px]">
+                <E_app_codemirror_v5
+                    editable={false}
+                    readonly={true}
+                    content={JSON.stringify(tmp_entry_obj, null, 2)}
+                    theme_mode={$ae_loc.theme_mode}
+                    class="rounded-lg border border-surface-500/30"
+                />
+            </div>
+        {/if}
+    </div>
+
+    {#snippet footer()}
+        <button class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]" onclick={() => (show = false)}>
+            <Check size="1.2em" class="mr-2" />
+            Done
+        </button>
+    {/snippet}
+</Modal>

src/routes/journals/modal_journals_config.svelte

@@ -1,81 +1,42 @@
 <script lang="ts">
-    interface Props {
+    /**
-        log_lvl?: number;
+     * modal_journals_config.svelte
-        show?: boolean;
+     * Standardized Global/Module configuration for Journals.
-        tab?: string;
+     */
-    }
-
-    let {
-        log_lvl = $bindable(0),
-        show = $bindable(true),
-        tab = $bindable('form') // form, local_json, session_json
-    }: Props = $props();
-
     import {
-        ArrowDown01,
-        ArrowDown10,
-        ArrowDownUp,
-        BetweenVerticalEnd,
-        BetweenVerticalStart,
-        Bot,
-        BookHeart,
-        BookImage,
-        Bookmark,
-        BookOpenText,
-        BriefcaseBusiness,
         CalendarClock,
         Check,
-        Copy,
+        Settings,
-        Expand,
+        X,
-        Eye,
+        Database,
-        EyeOff,
+        CodeXml,
-        Flag,
-        FlagOff,
-        FilePlus,
-        Fingerprint,
-        Globe,
-        Library,
-        MessageSquareWarning,
-        Minus,
-        Notebook,
-        Pencil,
-        Plus,
-        RefreshCcw,
-        RemoveFormatting,
-        SquareLibrary,
-        Shapes,
-        Share2,
         ShieldCheck,
-        ShieldMinus,
+        BookOpenText,
-        Siren,
+        MousePointerClick
-        Skull,
-        Tags,
-        Target,
-        ToggleLeft,
-        ToggleRight,
-        Trash2,
-        TypeOutline,
-        X
     } from '@lucide/svelte';
     import { Modal } from 'flowbite-svelte';
 
     import {
-        ae_snip,
         ae_loc,
-        ae_sess,
+        ae_api
-        ae_api,
-        ae_trig,
-        slct,
-        slct_trigger
     } from '$lib/stores/ae_stores';
     import {
         journals_loc,
-        journals_sess,
+        journals_sess
-        journals_slct,
-        journals_prom,
-        journals_trig
     } from '$lib/ae_journals/ae_journals_stores';
     import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
+
+    interface Props {
+        log_lvl?: number;
+        show?: boolean;
+    }
+
+    let {
+        log_lvl = $bindable(0),
+        show = $bindable(false)
+    }: Props = $props();
+
+    let tab: 'form' | 'local_json' | 'session_json' = $state('form');
 </script>
 
 <Modal
@@ -83,102 +44,52 @@
     autoclose={false}
     placement="top-center"
     size="xl"
-    class="
+    class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
-        top-center
+    headerClass="flex flex-row gap-2 items-center justify-between w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-t-lg"
-        relative
+    footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg"
-        flex flex-col
-        mx-auto w-full
-        bg-white dark:bg-gray-800
-        text-gray-800 dark:text-gray-200
-        border border-orange-300 dark:border-orange-700 rounded-lg
-        shadow-xl
-        "
-    headerClass="
-        flex flex-row gap-2 items-center justify-between
-        w-full
-        bg-orange-100 dark:bg-orange-900
-        "
-    footerClass="
-        flex flex-row gap-2 items-center justify-center
-        w-full
-        bg-orange-100 dark:bg-orange-900
-        "
 >
     {#snippet header()}
-        <h3>
+        <h3 class="flex items-center gap-2 text-lg font-bold">
-            <span class="text-base font-semibold">
+            <Settings class="text-primary-500" />
-                <span class="text-primary-500">
+            <span>&AElig; Journals Module Settings</span>
-                    <BookOpenText class="inline-block mr-1" />
-                </span>
-                &AElig; Journals Settings:
-            </span>
-            {$journals_loc?.name ?? '-- not set --'}
         </h3>
     {/snippet}
 
-    <div class="modal h-full md:pb-24">
+    <div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
-        <div class="modal-box space-y-2">
+        <!-- Navigation Tabs -->
-            <!-- Menu to toggle between viewing JSON and the form view -->
+        <div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto">
-            <div class="flex flex-row gap-1 items-center justify-center">
+            <button
-                <button
+                class="btn btn-sm transition-all {tab === 'form' ? 'variant-filled-primary' : 'variant-soft-surface'}"
-                    type="button"
+                onclick={() => (tab = 'form')}
-                    class:preset-outlined-surface-200-800={tab === 'form'}
-                    class="
-            btn btn-sm
-            preset-outlined-surface-50-950
-            transition-all
-            "
-                    onclick={() => (tab = 'form')}
-                >
-                    <span class="fas fa-cog mr-1"></span>
-                    Config
-                </button>
-                <button
-                    type="button"
-                    class:preset-outlined-surface-200-800={tab === 'local_json'}
-                    class="
-            btn btn-sm
-            preset-outlined-surface-50-950
-            transition-all
-            "
-                    onclick={() => (tab = 'local_json')}
-                >
-                    <span class="fas fa-code mr-1"></span>
-                    Local JSON
-                </button>
-                <button
-                    type="button"
-                    class:preset-outlined-surface-200-800={tab === 'session_json'}
-                    class="
-            btn btn-sm
-            preset-outlined-surface-50-950
-            transition-all
-            "
-                    onclick={() => (tab = 'session_json')}
-                >
-                    <span class="fas fa-code mr-1"></span>
-                    Session JSON
-                </button>
-            </div>
-
-            <!-- Section for the configuration form -->
-            <div
-                class:hidden={tab !== 'form'}
-                class="flex flex-col gap-6 items-start justify-start p-2"
             >
-                <div class="w-full space-y-4">
+                <Settings size="1.1em" class="mr-1" /> Config
-                    <h2 class="h2 text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+            </button>
-                        <CalendarClock class="text-primary-500" />
+            <button
-                        Date and Time Settings
+                class="btn btn-sm transition-all {tab === 'local_json' ? 'variant-filled-primary' : 'variant-soft-surface'}"
-                    </h2>
+                onclick={() => (tab = 'local_json')}
+            >
+                <Database size="1.1em" class="mr-1" /> Local JSON
+            </button>
+            <button
+                class="btn btn-sm transition-all {tab === 'session_json' ? 'variant-filled-primary' : 'variant-soft-surface'}"
+                onclick={() => (tab = 'session_json')}
+            >
+                <CodeXml size="1.1em" class="mr-1" /> Session JSON
+            </button>
+        </div>
 
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {#if tab === 'form'}
+            <div class="space-y-8 animate-in fade-in duration-300">
+                <!-- Date/Time Section -->
+                <section class="space-y-4">
+                    <h2 class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+                        <CalendarClock size="1.2em" class="text-primary-500" />
+                        Date and Time Display
+                    </h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-2">
                         <label class="label">
-                            <span>DateTime Format</span>
+                            <span class="text-sm font-bold opacity-70">DateTime Format</span>
-                            <select
+                            <select bind:value={$journals_loc.datetime_format} class="select select-sm variant-form-material">
-                                bind:value={$journals_loc.datetime_format}
-                                class="select"
-                            >
                                 <option value="datetime_12_short">MMM D, YY hh:mm A</option>
                                 <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
                                 <option value="datetime_short">MMM D, YY HH:mm</option>
@@ -187,67 +98,86 @@
                                 <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
                             </select>
                         </label>
-
                         <label class="label">
-                            <span>Time Format</span>
+                            <span class="text-sm font-bold opacity-70">Time-Only Format</span>
-                            <select
+                            <select bind:value={$journals_loc.time_format} class="select select-sm variant-form-material">
-                                bind:value={$journals_loc.time_format}
+                                <option value="time_12_short">12-hour short (3:30 PM)</option>
-                                class="select"
+                                <option value="time_12_long">12-hour long (3:30:45 PM)</option>
-                            >
+                                <option value="time_short">24-hour short (15:30)</option>
-                                <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
+                                <option value="time_long">24-hour long (15:30:45)</option>
-                                <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
-                                <option value="time_short">24-hour short (e.g., 15:30)</option>
-                                <option value="time_long">24-hour long (e.g., 15:30:45)</option>
                             </select>
                         </label>
                     </div>
-                </div>
+                </section>
-            </div>
 
-            <!-- Section for viewing (and direct editing???) the raw localStorage JSON configuration -->
+                <!-- UI Section -->
-            <div class:hidden={tab !== 'local_json'} class="">
+                <section class="space-y-4">
+                    <h2 class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+                        <MousePointerClick size="1.2em" class="text-primary-500" />
+                        User Interface Preferences
+                    </h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-2">
+                        <label class="flex items-center space-x-3 cursor-pointer p-2 rounded-lg bg-surface-500/5 border border-surface-500/10">
+                            <input type="checkbox" bind:checked={$journals_loc.entry.auto_save} class="checkbox" />
+                            <div class="space-y-0.5">
+                                <span class="font-bold">Enable Auto-Save</span>
+                                <p class="text-xs opacity-60">Automatically sync changes while editing</p>
+                            </div>
+                        </label>
+                        <label class="flex items-center space-x-3 cursor-pointer p-2 rounded-lg bg-surface-500/5 border border-surface-500/10">
+                            <input type="checkbox" bind:checked={$journals_loc.show_id_random} class="checkbox" />
+                            <div class="space-y-0.5">
+                                <span class="font-bold">Show Technical IDs</span>
+                                <p class="text-xs opacity-60">Display UUIDs in metadata footers</p>
+                            </div>
+                        </label>
+                    </div>
+                </section>
+
+                <!-- Security Section -->
+                <section class="space-y-4">
+                    <h2 class="text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+                        <ShieldCheck size="1.2em" class="text-primary-500" />
+                        Security & Encryption
+                    </h2>
+                    <div class="p-4 bg-orange-500/5 rounded-lg border border-orange-500/20 space-y-4">
+                        <div class="text-sm opacity-80 italic">
+                            Global security overrides for the journal module.
+                        </div>
+                        <label class="flex items-center space-x-3 cursor-pointer">
+                            <input type="checkbox" bind:checked={$journals_sess.enable_session_passcode_cache} class="checkbox checkbox-primary" />
+                            <span class="text-sm font-bold">Cache Passcodes in Session</span>
+                        </label>
+                    </div>
+                </section>
+            </div>
+        {:else if tab === 'local_json'}
+            <div class="h-full min-h-[400px]">
                 <E_app_codemirror_v5
                     editable={false}
                     readonly={true}
                     content={JSON.stringify($journals_loc, null, 2)}
-                    show_line_numbers={false}
+                    theme_mode={$ae_loc.theme_mode}
-                    placeholder=""
+                    class="rounded-lg border border-surface-500/30"
-                    class="
-            p-1
-            preset-outlined-surface-100-900
-            rounded-lg
-            "
                 />
-                <!-- <pre class="text-wrap">
-    {JSON.stringify($journals_loc, null, 2)}
-    </pre> -->
             </div>
-
+        {:else if tab === 'session_json'}
-            <!-- Section for viewing (and direct editing???) the raw sessionStorage JSON configuration -->
+            <div class="h-full min-h-[400px]">
-            <div class:hidden={tab !== 'session_json'} class="">
                 <E_app_codemirror_v5
                     editable={false}
                     readonly={true}
                     content={JSON.stringify($journals_sess, null, 2)}
-                    show_line_numbers={false}
+                    theme_mode={$ae_loc.theme_mode}
-                    placeholder=""
+                    class="rounded-lg border border-surface-500/30"
-                    class="
-            p-1
-            preset-outlined-surface-100-900
-            rounded-lg
-            "
                 />
-                <!-- <pre class="text-wrap">
-    {JSON.stringify($journals_sess, null, 2)}
-    </pre> -->
             </div>
-        </div>
+        {/if}
     </div>
 
     {#snippet footer()}
-        <button class="btn btn-sm btn-outline btn-primary" onclick={() => (show = false)}>
+        <button class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]" onclick={() => (show = false)}>
-            <X class="inline-block mr-1" />
+            <Check size="1.2em" class="mr-2" />
-            Close
+            Done
         </button>
     {/snippet}
 </Modal>