From bdba092de077f483dc968622375d4ed646a6ad2c Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 8 May 2026 17:15:52 -0400
Subject: [PATCH] Polish journal entry save buttons and header controls

- Add hover titles to all save buttons
- Match warning color scheme across floating, inline, and header save buttons
- Fix floating save button visibility (Tailwind v4 hidden/md:inline-flex conflict)
- Hide floating save when no unsaved changes using {#if}
- Hide Config button when not in admin edit mode
- Remove the mobile/backup explicit Save button from header (redundant)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/ae_elements/AE_AITools.svelte         |  3 +-
 .../ae_comp__journal_entry_editor.svelte      | 32 +++++++++++-----
 .../ae_comp__journal_entry_header.svelte      | 38 +++++++++++++------
 3 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/lib/ae_elements/AE_AITools.svelte b/src/lib/ae_elements/AE_AITools.svelte
index 491ddbeb..a8d6b4db 100644
--- a/src/lib/ae_elements/AE_AITools.svelte
+++ b/src/lib/ae_elements/AE_AITools.svelte
@@ -165,7 +165,7 @@ function handle_save() {
             <span class="text-sm">Processing...</span>
         {:then}
             <BotMessageSquare class="mr-1 inline-block" size="1.2em" />
-            <span class="text-sm">Summarize</span>
+            <span class="text-sm hidden">Summarize</span>
         {:catch}
             <span class="text-sm text-red-500">Error</span>
         {/await}
@@ -181,6 +181,7 @@ function handle_save() {
         class="btn btn-sm preset-tonal-surface shadow-md"
         title="AI Settings">
         <Settings size="1.2em" />
+        <span class="text-sm hidden">Settings</span>
     </button>
 
     <!-- Unified AI Modal -->
diff --git a/src/routes/journals/ae_comp__journal_entry_editor.svelte b/src/routes/journals/ae_comp__journal_entry_editor.svelte
index 77627bf3..aece1fb3 100644
--- a/src/routes/journals/ae_comp__journal_entry_editor.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_editor.svelte
@@ -4,7 +4,9 @@
  * Extracted 2026-01-08 to modularize the massive Journal Entry view.
  * Handles: CodeMirror vs Plain vs Rendered HTML for both View and Edit modes.
  */
-import { LockKeyhole, RefreshCcw, Save } from '@lucide/svelte';
+import {
+    LockKeyhole, RefreshCcw, Save
+} from '@lucide/svelte';
 import { ae_loc } from '$lib/stores/ae_stores';
 import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
 import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
@@ -67,6 +69,7 @@ const preferred_viewer = $derived(
                 <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. -->
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     {@html tmp_entry_obj?.content_md_html || ''}
                 </div>
             {/if}
@@ -120,21 +123,30 @@ const preferred_viewer = $derived(
                     placeholder="Edit content..."></textarea>
             {/if}
 
-            <!-- Floating Save Button -->
-            <button
-                type="button"
-                onclick={on_save}
-                disabled={!has_changed}
-                class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-84 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>
+            <!-- Floating Save Button (desktop only) -->
+            {#if has_changed}
+                <button
+                    type="button"
+                    onclick={on_save}
+
+                    class="
+                        btn btn-sm md:btn-md lg:btn-lg preset-tonal-warning hover:preset-filled-warning-500
+                        fixed top-84 right-6 z-20
+                        min-w-32 shadow-xl
+                        max-sm:hidden
+                        "
+                    title="Save changes"
+                    >
+                    <Save size="1.2em" class="" />Save
+                </button>
+            {/if}
 
             <!-- Inline Save Button (Mobile/Context) -->
             <button
                 type="button"
                 onclick={on_save}
                 disabled={!has_changed}
+                title="Save changes"
                 class="btn preset-tonal-warning hover:preset-filled-warning-500 mt-4 w-full max-w-96"
                 class:invisible={!has_changed}>
                 <Save size="1.2em" class="mr-2" /> Save Changes
diff --git a/src/routes/journals/ae_comp__journal_entry_header.svelte b/src/routes/journals/ae_comp__journal_entry_header.svelte
index b5890682..64ca9c92 100644
--- a/src/routes/journals/ae_comp__journal_entry_header.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_header.svelte
@@ -9,7 +9,7 @@ import {
     CircleCheck,
     CircleX,
     Eye,
-    Fingerprint,
+    // Fingerprint,
     LoaderCircle,
     LockKeyhole,
     LockKeyholeOpen,
@@ -19,6 +19,7 @@ import {
     Settings
 } 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
@@ -83,10 +84,13 @@ function toggle_edit_mode() {
             <button
                 type="button"
                 onclick={toggle_edit_mode}
+                title={$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
+                    ? (has_changed ? 'Save & exit edit mode' : 'Exit edit mode')
+                    : 'Edit entry'}
                 class="btn-icon btn-icon-sm transition-colors duration-150 {has_changed &&
                 $journals_loc.entry.edit_kv[entry.journal_entry_id] ===
                     'current'
-                    ? 'preset-filled-success'
+                    ? 'preset-tonal-warning hover:preset-filled-warning-500'
                     : 'preset-tonal-surface'}">
                 {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
                     {#if has_changed}<Save size="1.2em" />{:else}<Eye
@@ -160,24 +164,34 @@ function toggle_edit_mode() {
             </button>
         {/if}
 
-        <div class="bg-surface-500/20 mx-1 h-6 w-px"></div>
-
         <!-- Unified Config Button -->
         <button
             type="button"
-            class="btn btn-sm preset-tonal-primary font-bold transition-colors duration-150"
-            onclick={on_show_config}>
-            <Settings size="1.1em" class="mr-2" /> Config
+            onclick={on_show_config}
+            class:hidden={!$ae_loc.edit_mode}
+            class="
+                btn btn-sm preset-tonal-primary font-bold transition-colors duration-150
+                "
+            title="Entry Configuration"
+            >
+            <Settings size="1.1em" />Config
         </button>
 
         <!-- Explicit Save (Mobile/Backup) -->
-        {#if has_changed && save_status !== 'saving'}
+        <!-- {#if has_changed && save_status !== 'saving'}
             <button
                 type="button"
-                class="btn btn-sm preset-filled-primary transition-colors duration-150"
-                onclick={on_save}>
-                <Save size="1.1em" class="mr-2" /> Save
+                onclick={on_save}
+                class="
+                    btn btn-sm
+                    preset-filled-primary
+                    transition-colors duration-150
+                    md:hidden
+                    "
+                title="Save changes"
+                >
+                <Save size="1.1em" class="" />Save
             </button>
-        {/if}
+        {/if} -->
     </div>
 </header>