From e5c8500bc15fbc49733258f37f8b7d7e70056ae7 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 5 May 2026 14:56:10 -0400
Subject: [PATCH] Advance journal config modal parity

---
 src/routes/journals/+page.svelte              |   2 +-
 .../ae_comp__modal_journal_config.svelte      | 171 +++++++++++++++---
 2 files changed, 142 insertions(+), 31 deletions(-)

diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index 206afae9..5e6ebb58 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -246,7 +246,7 @@ async function create_journal() {
 
 {#if $journals_sess.show__modal__journals_config}
     <AE_Comp_Modal_Journal_Config
-        show={$journals_sess.show__modal__journals_config} />
+    bind:show={$journals_sess.show__modal__journals_config} />
 {/if}
 
 <AE_Comp_Modal_Journal_Import
diff --git a/src/routes/journals/ae_comp__modal_journal_config.svelte b/src/routes/journals/ae_comp__modal_journal_config.svelte
index 92efc50f..b7da1232 100644
--- a/src/routes/journals/ae_comp__modal_journal_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_config.svelte
@@ -8,12 +8,10 @@ import { untrack } from 'svelte';
 import {
     CalendarClock,
     Check,
+    CircleAlert,
     CodeXml,
     Database,
-    Layout,
-    MonitorPlay,
     MousePointerClick,
-    Palette,
     Settings,
     ShieldCheck,
     Wrench,
@@ -22,7 +20,8 @@ import {
 import { Modal } from 'flowbite-svelte';
 
 // *** Import Aether specific variables and functions
-import { ae_loc, ae_api } from '$lib/stores/ae_stores';
+import { ae_loc } from '$lib/stores/ae_stores';
+import type { key_val } from '$lib/stores/ae_stores';
 import {
     journals_loc,
     journals_sess
@@ -30,21 +29,21 @@ import {
 import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
 
 interface Props {
-    log_lvl?: number;
     show?: boolean;
 }
 
-let { log_lvl = 0, show = $bindable(false) }: Props = $props();
+let { show = $bindable(false) }: Props = $props();
 
 // Internal State
-let tab: 'form' | 'local_json' | 'session_json' = $state('form');
-let tmp_config: any = $state({
+let tab: 'config' | 'local_json' | 'session_json' = $state('config');
+let tmp_config: key_val = $state({
     journal: {},
     entry: {}
 });
 
 const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
 const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
+const field_card_class = 'bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors hover:bg-surface-500/10';
 const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
 const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
 const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
@@ -98,8 +97,8 @@ function handle_save() {
             class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
             <button
                 type="button"
-                class={tab_button_class(tab === 'form')}
-                onclick={() => (tab = 'form')}>
+                class={tab_button_class(tab === 'config')}
+                onclick={() => (tab = 'config')}>
                 <Settings size="1.1em" class="mr-1" /> Config
             </button>
             <button
@@ -116,16 +115,16 @@ function handle_save() {
             </button>
         </div>
 
-        {#if tab === 'form'}
-            <div class="animate-in fade-in space-y-8 duration-300">
+        {#if tab === 'config'}
+            <div class="animate-in fade-in space-y-4 duration-300">
                 <!-- Date/Time Section -->
                 <section class={panel_class}>
                     <h2 class={panel_title_class}>
                         <CalendarClock size="1.2em" class="text-primary-500" />
                         Date and Time Display
                     </h2>
-                    <div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
-                        <label class="label">
+                    <div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-2">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >DateTime Format</span>
                             <select
@@ -145,7 +144,7 @@ function handle_save() {
                                     >ISO (YYYY-MM-DD HH:mm:ss)</option>
                             </select>
                         </label>
-                        <label class="label">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Time-Only Format</span>
                             <select
@@ -172,9 +171,8 @@ function handle_save() {
                             class="text-primary-500" />
                         User Interface Preferences
                     </h2>
-                    <div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
-                        <label
-                            class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
+                    <div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-2">
+                        <label class={field_card_class}>
                             <input
                                 type="checkbox"
                                 bind:checked={tmp_config.entry.auto_save}
@@ -186,8 +184,7 @@ function handle_save() {
                                 </p>
                             </div>
                         </label>
-                        <label
-                            class="bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-2">
+                        <label class={field_card_class}>
                             <input
                                 type="checkbox"
                                 bind:checked={tmp_config.show_id_random}
@@ -209,8 +206,8 @@ function handle_save() {
                         <Database size="1.2em" class="text-primary-500" />
                         Journal Query Filters
                     </h2>
-                    <div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
-                        <label class="label">
+                    <div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-3">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Enabled Status</span>
                             <select
@@ -223,7 +220,7 @@ function handle_save() {
                                     >All (Enabled & Disabled & NULL)</option>
                             </select>
                         </label>
-                        <label class="label">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Hidden Status</span>
                             <select
@@ -235,7 +232,7 @@ function handle_save() {
                                     >All (Visible & Hidden & NULL)</option>
                             </select>
                         </label>
-                        <label class="label">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Query Limit</span>
                             <select
@@ -259,8 +256,8 @@ function handle_save() {
                         <Database size="1.2em" class="text-primary-500" />
                         Entry Query Filters
                     </h2>
-                    <div class="grid grid-cols-1 gap-6 p-2 md:grid-cols-3">
-                        <label class="label">
+                    <div class="grid grid-cols-1 gap-4 p-2 md:grid-cols-3">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Enabled Status</span>
                             <select
@@ -273,7 +270,7 @@ function handle_save() {
                                     >All (Enabled & Disabled & NULL)</option>
                             </select>
                         </label>
-                        <label class="label">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Hidden Status</span>
                             <select
@@ -285,7 +282,7 @@ function handle_save() {
                                     >All (Visible & Hidden & NULL)</option>
                             </select>
                         </label>
-                        <label class="label">
+                        <label class="label flex flex-col items-start gap-1">
                             <span class="text-sm font-bold opacity-70"
                                 >Query Limit</span>
                             <select
@@ -313,8 +310,7 @@ function handle_save() {
                         <div class="text-sm italic opacity-80">
                             Global security overrides for the journal module.
                         </div>
-                        <label
-                            class="flex cursor-pointer items-center space-x-3">
+                        <label class={field_card_class}>
                             <input
                                 type="checkbox"
                                 bind:checked={
@@ -326,6 +322,121 @@ function handle_save() {
                         </label>
                     </div>
                 </section>
+
+                <!-- Alerts Section -->
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
+                        <CircleAlert size="1.2em" class="text-primary-500" />
+                        Alerts & Messaging
+                    </h2>
+                    <div class="space-y-4 rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
+                        <label class="label flex flex-col items-start gap-1">
+                            <span class="text-sm font-bold opacity-70"
+                                >Alert Message</span>
+                            <textarea
+                                bind:value={tmp_config.alert_msg}
+                                class="textarea min-h-24 w-full"
+                                placeholder="Optional alert or notice shown with the journal"
+                            ></textarea>
+                        </label>
+
+                        <label class={field_card_class}>
+                            <input
+                                type="checkbox"
+                                bind:checked={tmp_config.alert}
+                                class="checkbox checkbox-primary" />
+                            <div class="flex flex-col">
+                                <span class="font-bold">Enable Alert</span>
+                                <span class="text-xs opacity-60">
+                                    Mark this journal for attention in lists and
+                                    headers.
+                                </span>
+                            </div>
+                        </label>
+                    </div>
+                </section>
+
+                <!-- Admin Section -->
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
+                        <Settings size="1.2em" class="text-primary-500" />
+                        Admin
+                    </h2>
+                    <div class="space-y-4 rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
+                        <label class="label flex flex-col items-start gap-1">
+                            <span class="text-sm font-bold opacity-70"
+                                >Notes</span>
+                            <textarea
+                                bind:value={tmp_config.notes}
+                                class="textarea min-h-24 w-full"
+                                placeholder="Internal notes for administrators and trusted access"
+                            ></textarea>
+                        </label>
+
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <label class={field_card_class}>
+                                <input
+                                    type="checkbox"
+                                    bind:checked={tmp_config.enable}
+                                    class="checkbox checkbox-primary" />
+                                <div class="flex flex-col">
+                                    <span class="font-bold">Enabled</span>
+                                    <span class="text-xs opacity-60">
+                                        Allow access to this journal.
+                                    </span>
+                                </div>
+                            </label>
+
+                            <label class={field_card_class}>
+                                <input
+                                    type="checkbox"
+                                    bind:checked={tmp_config.hide}
+                                    class="checkbox checkbox-primary" />
+                                <div class="flex flex-col">
+                                    <span class="font-bold">Hidden</span>
+                                    <span class="text-xs opacity-60">
+                                        Hide this journal from standard lists.
+                                    </span>
+                                </div>
+                            </label>
+
+                            <label class={field_card_class}>
+                                <input
+                                    type="checkbox"
+                                    bind:checked={tmp_config.priority}
+                                    class="checkbox checkbox-primary" />
+                                <div class="flex flex-col">
+                                    <span class="font-bold">Priority</span>
+                                    <span class="text-xs opacity-60">
+                                        Pin this journal ahead of the standard
+                                        order.
+                                    </span>
+                                </div>
+                            </label>
+
+                            <label class="bg-surface-500/5 border-surface-500/10 flex items-center justify-between rounded-lg border p-3">
+                                <div class="flex flex-col">
+                                    <span class="text-sm font-bold"
+                                        >Sort Order</span>
+                                    <span class="text-xs opacity-60">
+                                        Lower numbers appear earlier in lists.
+                                    </span>
+                                </div>
+                                <input
+                                    type="number"
+                                    bind:value={tmp_config.sort}
+                                    class="input input-sm w-24 text-right" />
+                            </label>
+                        </div>
+
+                            <div class="rounded-xl border border-surface-500/10 bg-surface-500/5 p-4">
+                                <p class="text-xs italic opacity-70">
+                                    Admin changes apply to the journal module state
+                                    and are saved with the rest of this config.
+                                </p>
+                            </div>
+                    </div>
+                </section>
             </div>
         {:else if tab === 'local_json'}
             <div class="h-full min-h-100">