From c3a346cc9a91072202801b58fe2efce65576bdea Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 4 May 2026 17:42:13 -0400
Subject: [PATCH] Add responsive journal sidebar

---
 .../ae_comp__journal_entry_editor.svelte      |   3 +-
 .../ae_comp__journal_entry_metadata.svelte    |   4 +-
 .../ae_comp__journal_entry_obj_id_view.svelte | 124 +++++++++---------
 3 files changed, 66 insertions(+), 65 deletions(-)

diff --git a/src/routes/journals/ae_comp__journal_entry_editor.svelte b/src/routes/journals/ae_comp__journal_entry_editor.svelte
index acf9a8f7..ed92a5f9 100644
--- a/src/routes/journals/ae_comp__journal_entry_editor.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_editor.svelte
@@ -65,6 +65,7 @@ const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered')
             {:else}
                 <div
                     class="prose dark:prose-invert w-full max-w-none overflow-x-auto rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+                    <!-- The rendered HTML branch is intentionally trusted input from the journal editor pipeline. -->
                     {@html tmp_entry_obj?.content_md_html || ''}
                 </div>
             {/if}
@@ -123,7 +124,7 @@ const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered')
                 type="button"
                 onclick={on_save}
                 disabled={!has_changed}
-                class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-72 right-6 z-20 min-w-32 shadow-xl transition-all"
+                class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-72 right-6 z-20 hidden min-w-32 shadow-xl transition-all md:inline-flex"
                 class:hidden={!has_changed}>
                 <Save size="1.2em" class="mr-2" /> Save
             </button>
diff --git a/src/routes/journals/ae_comp__journal_entry_metadata.svelte b/src/routes/journals/ae_comp__journal_entry_metadata.svelte
index bbf148ca..0b575fb4 100644
--- a/src/routes/journals/ae_comp__journal_entry_metadata.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_metadata.svelte
@@ -18,8 +18,8 @@ let { entry }: Props = $props();
 <section class="journal-metadata w-full space-y-4">
     <!-- System Timestamps -->
     <div
-        class="text-surface-500 flex flex-col items-center justify-between gap-2 px-1 text-xs sm:flex-row">
-        <div class="flex gap-4">
+        class="text-surface-500 flex flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-4">
             <span title="Creation date">
                 <span class="font-semibold">Created:</span>
                 {ae_util.iso_datetime_formatter(
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index 82481c74..a55aed23 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -19,8 +19,7 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_api } from '$lib/stores/ae_stores';
 import {
     journals_loc,
-    journals_sess,
-    journals_slct
+    journals_sess
 } from '$lib/ae_journals/ae_journals_stores';
 import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 import { decrypt_journal_entry } from '$lib/ae_journals/ae_journals_decryption';
@@ -154,10 +153,6 @@ $effect(() => {
 
 // 2. Auto-Save Debounce
 $effect(() => {
-    // Track core properties
-    const _content = tmp_entry_obj.content;
-    const _private = tmp_entry_obj.private;
-
     // Isolate logic from secondary dependencies
     const should_save = untrack(
         () => has_unsaved_changes && !is_processing && save_status !== 'saving'
@@ -429,10 +424,9 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
                group-hover/entry-view:opacity-15 dark:opacity-10 dark:group-hover/entry-view:opacity-20">
     </div>
     <section
-        class="ae_view relative flex h-full w-full min-w-0 flex-col gap-2 rounded-xl
-           border border-gray-200
-           bg-white p-2 shadow-xl
-           dark:border-gray-700 dark:bg-gray-900"
+        class="ae_view relative flex h-full w-full min-w-0 flex-col gap-4 rounded-xl
+           border border-surface-200-800
+           bg-surface-50-900 p-2 shadow-xl"
         bind:clientHeight={$ae_loc.iframe_height_modal_body}>
         {#if $lq__journal_entry_obj && $lq__journal_obj}
             <AE_Comp_Journal_Entry_Header
@@ -447,60 +441,66 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
                 {save_status}
                 {log_lvl} />
 
-            {#if decryption_error}
-                <div
-                    class="bg-error-500/20 border-error-500 z-50 flex w-full animate-bounce items-center justify-between rounded-lg border-2 p-4 shadow-2xl">
+            <div class="grid w-full min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
+                <div class="min-w-0 space-y-4">
+                    {#if decryption_error}
+                        <div
+                            class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
+                            <div class="text-error-700 flex items-center gap-4 font-bold">
+                                <CircleAlert size="2.5em" />
+                                <span class="text-xl">{decryption_error}</span>
+                            </div>
+                            <button
+                                type="button"
+                                class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
+                                onclick={() => (decryption_error = null)}>
+                                <CircleX size="1.2em" class="mr-2" /> Dismiss
+                            </button>
+                        </div>
+                    {/if}
+
+                    <!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
+                    <section
+                        class="relative grow overflow-hidden rounded-xl border border-surface-200-800
+                           bg-surface-100-900 p-2 shadow-md min-w-0
+                           {$journals_loc.entry.edit_kv[
+                            $lq__journal_entry_obj?.journal_entry_id
+                        ] == 'current'
+                            ? 'ring-primary-500/40 ring-2 ring-inset'
+                            : ''}">
+                        <div class="absolute top-2 right-2 z-10">
+                            <AE_Comp_Journal_Entry_AiTools
+                                content={tmp_entry_obj.content}
+                                bind:summary={tmp_entry_obj.summary}
+                                on_save={() => update_journal_entry()}
+                                {log_lvl} />
+                        </div>
+
+                        <AE_Comp_Journal_Entry_Editor
+                            entry={$lq__journal_entry_obj}
+                            journal={$lq__journal_obj}
+                            bind:tmp_entry_obj
+                            bind:editor_view
+                            has_changed={has_unsaved_changes}
+                            updated_idb={false}
+                            on_save={() => update_journal_entry()}
+                            on_force_reset={handle_force_reset} />
+                    </section>
+
+                    <AE_Comp_Journal_Entry_ObjFileLi
+                        {log_lvl}
+                        link_to_type="journal_entry"
+                        link_to_id={$lq__journal_entry_obj.journal_entry_id}
+                        {lq__journal_entry_obj} />
+                </div>
+
+                <aside class="min-w-0 space-y-4 lg:sticky lg:top-4 self-start">
                     <div
-                        class="text-error-700 dark:text-error-300 flex items-center gap-4 font-bold">
-                        <CircleAlert size="2.5em" />
-                        <span class="text-xl">{decryption_error}</span>
+                        class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
+                        <AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
                     </div>
-                    <button
-                        type="button"
-                        class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
-                        onclick={() => (decryption_error = null)}>
-                        <CircleX size="1.2em" class="mr-2" /> Dismiss
-                    </button>
-                </div>
-            {/if}
-
-            <!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
-            <section
-                class="relative grow overflow-hidden rounded-lg border border-gray-200
-                   bg-gray-50 p-1
-                   shadow-md dark:border-gray-700 dark:bg-gray-800
-                   w-full min-w-0 items-stretch
-                   {$journals_loc.entry.edit_kv[
-                    $lq__journal_entry_obj?.journal_entry_id
-                ] == 'current'
-                    ? 'ring-primary-500/40 ring-2 ring-inset'
-                    : ''}">
-                <div class="absolute top-2 right-2 z-10">
-                    <AE_Comp_Journal_Entry_AiTools
-                        content={tmp_entry_obj.content}
-                        bind:summary={tmp_entry_obj.summary}
-                        on_save={() => update_journal_entry()}
-                        {log_lvl} />
-                </div>
-
-                <AE_Comp_Journal_Entry_Editor
-                    entry={$lq__journal_entry_obj}
-                    journal={$lq__journal_obj}
-                    bind:tmp_entry_obj
-                    bind:editor_view
-                    has_changed={has_unsaved_changes}
-                    updated_idb={false}
-                    on_save={() => update_journal_entry()}
-                    on_force_reset={handle_force_reset} />
-            </section>
-
-            <AE_Comp_Journal_Entry_ObjFileLi
-                {log_lvl}
-                link_to_type="journal_entry"
-                link_to_id={$lq__journal_entry_obj.journal_entry_id}
-                {lq__journal_entry_obj} />
-
-            <AE_Comp_Journal_Entry_Metadata entry={tmp_entry_obj as any} />
+                </aside>
+            </div>
 
             <AE_Comp_Modal_Journal_Entry_Append
                 bind:open={show_append_modal}