From d8616ea5fd5341331c02b1f62950fc0eb56cf2fa Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 5 May 2026 14:10:12 -0400
Subject: [PATCH] Normalize Journals config tabs

---
 .../ae_comp__modal_journal_config.svelte      | 66 +++++++++----------
 ...ae_comp__modal_journal_entry_config.svelte | 23 ++++---
 2 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/routes/journals/ae_comp__modal_journal_config.svelte b/src/routes/journals/ae_comp__modal_journal_config.svelte
index 61bc3af3..92efc50f 100644
--- a/src/routes/journals/ae_comp__modal_journal_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_config.svelte
@@ -43,6 +43,16 @@ let tmp_config: any = $state({
     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 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';
+
+function tab_button_class(is_active: boolean): string {
+    return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
+}
+
 $effect(() => {
     if (show) {
         untrack(() => {
@@ -66,9 +76,9 @@ function handle_save() {
     dismissable={false}
     placement="top-center"
     size="xl"
-    class="relative mx-auto flex w-full flex-col rounded-lg border border-orange-300 bg-white text-gray-800 shadow-xl dark:border-orange-700 dark:bg-gray-800 dark:text-gray-200"
-    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">
+    class="relative mx-auto flex h-[calc(100dvh-2rem)] max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-surface-200-800 bg-surface-50-900 text-surface-950-50 shadow-xl"
+    headerClass="flex w-full flex-row items-center justify-between gap-2 rounded-t-xl border-b border-surface-200-800 bg-surface-100-900 p-4"
+    footerClass="flex w-full flex-row items-center justify-center gap-2 rounded-b-xl border-t border-surface-200-800 bg-surface-100-900 p-4">
     {#snippet header()}
         <h3 class="flex flex-1 items-center gap-2 text-lg font-bold">
             <Wrench class="text-primary-500" />
@@ -82,31 +92,25 @@ function handle_save() {
         </button>
     {/snippet}
 
-    <div class="h-[60vh] space-y-6 overflow-y-auto px-4 py-2">
+    <div class="min-h-0 flex-1 space-y-6 overflow-y-auto px-4 py-3">
         <!-- Navigation Tabs -->
         <div
             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="btn btn-sm transition-all {tab === 'form'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'form')}
                 onclick={() => (tab = 'form')}>
                 <Settings size="1.1em" class="mr-1" /> Config
             </button>
             <button
                 type="button"
-                class="btn btn-sm transition-all {tab === 'local_json'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'local_json')}
                 onclick={() => (tab = 'local_json')}>
                 <Database size="1.1em" class="mr-1" /> Local JSON
             </button>
             <button
                 type="button"
-                class="btn btn-sm transition-all {tab === 'session_json'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'session_json')}
                 onclick={() => (tab = 'session_json')}>
                 <CodeXml size="1.1em" class="mr-1" /> Session JSON
             </button>
@@ -115,9 +119,8 @@ function handle_save() {
         {#if tab === 'form'}
             <div class="animate-in fade-in space-y-8 duration-300">
                 <!-- Date/Time Section -->
-                <section class="space-y-4">
-                    <h2
-                        class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
                         <CalendarClock size="1.2em" class="text-primary-500" />
                         Date and Time Display
                     </h2>
@@ -162,9 +165,8 @@ function handle_save() {
                 </section>
 
                 <!-- UI Section -->
-                <section class="space-y-4">
-                    <h2
-                        class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
                         <MousePointerClick
                             size="1.2em"
                             class="text-primary-500" />
@@ -202,9 +204,8 @@ function handle_save() {
                 </section>
 
                 <!-- Journal Query Filters Section -->
-                <section class="space-y-4">
-                    <h2
-                        class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
                         <Database size="1.2em" class="text-primary-500" />
                         Journal Query Filters
                     </h2>
@@ -253,9 +254,8 @@ function handle_save() {
                 </section>
 
                 <!-- Entry Query Filters Section -->
-                <section class="space-y-4">
-                    <h2
-                        class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
                         <Database size="1.2em" class="text-primary-500" />
                         Entry Query Filters
                     </h2>
@@ -304,14 +304,12 @@ function handle_save() {
                 </section>
 
                 <!-- Security Section -->
-                <section class="space-y-4">
-                    <h2
-                        class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
+                <section class={panel_class}>
+                    <h2 class={panel_title_class}>
                         <ShieldCheck size="1.2em" class="text-primary-500" />
                         Security & Encryption
                     </h2>
-                    <div
-                        class="space-y-4 rounded-lg border border-orange-500/20 bg-orange-500/5 p-4">
+                    <div class="space-y-4 rounded-lg border border-surface-500/10 bg-surface-500/5 p-4">
                         <div class="text-sm italic opacity-80">
                             Global security overrides for the journal module.
                         </div>
@@ -330,7 +328,7 @@ function handle_save() {
                 </section>
             </div>
         {:else if tab === 'local_json'}
-            <div class="h-full min-h-[400px]">
+            <div class="h-full min-h-100">
                 <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify(tmp_config, null, 2)}
@@ -338,7 +336,7 @@ function handle_save() {
                     class_li="rounded-lg border border-surface-500/30" />
             </div>
         {:else if tab === 'session_json'}
-            <div class="h-full min-h-[400px]">
+            <div class="h-full min-h-100">
                 <AE_Comp_Editor_CodeMirror
                     readonly={true}
                     content={JSON.stringify($journals_sess, null, 2)}
@@ -352,13 +350,13 @@ function handle_save() {
         <div class="flex gap-4">
             <button
                 type="button"
-                class="btn preset-tonal-surface min-w-[100px] font-bold"
+                class="btn preset-tonal-surface min-w-25 font-bold"
                 onclick={() => (show = false)}>
                 <X size="1.2em" class="mr-2" /> Cancel
             </button>
             <button
                 type="button"
-                class="btn preset-filled-primary min-w-[120px] font-bold shadow-lg"
+                class="btn preset-filled-primary min-w-30 font-bold shadow-lg"
                 onclick={handle_save}>
                 <Check size="1.2em" class="mr-2" /> Save Changes
             </button>
diff --git a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
index 0a0a47aa..bf2bfbf6 100644
--- a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
@@ -66,6 +66,13 @@ const normalize_date = (val?: string | Date | null) => {
 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';
+
+function tab_button_class(is_active: boolean): string {
+    return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
+}
 
 async function handle_update_entry() {
     try {
@@ -162,33 +169,25 @@ async function handle_admin_delete_action() {
             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="btn btn-sm transition-all {tab === 'actions'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'actions')}
                 onclick={() => (tab = 'actions')}>
                 <Zap size="1.1em" class="mr-1" /> Quick Actions
             </button>
             <button
                 type="button"
-                class="btn btn-sm transition-all {tab === 'meta'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'meta')}
                 onclick={() => (tab = 'meta')}>
                 <Shapes size="1.1em" class="mr-1" /> Metadata
             </button>
             <button
                 type="button"
-                class="btn btn-sm transition-all {tab === 'security'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'security')}
                 onclick={() => (tab = 'security')}>
                 <ShieldCheck size="1.1em" class="mr-1" /> Status & Security
             </button>
             <button
                 type="button"
-                class="btn btn-sm transition-all {tab === 'json'
-                    ? 'preset-filled-primary'
-                    : 'preset-tonal-surface'}"
+                class={tab_button_class(tab === 'json')}
                 onclick={() => (tab = 'json')}>
                 <CodeXml size="1.1em" class="mr-1" /> JSON
             </button>