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>
This commit is contained in:
Scott Idem
2026-05-08 17:15:52 -04:00
parent 0fa93d7ee5
commit bdba092de0
3 changed files with 50 additions and 23 deletions

View File

@@ -165,7 +165,7 @@ function handle_save() {
<span class="text-sm">Processing...</span> <span class="text-sm">Processing...</span>
{:then} {:then}
<BotMessageSquare class="mr-1 inline-block" size="1.2em" /> <BotMessageSquare class="mr-1 inline-block" size="1.2em" />
<span class="text-sm">Summarize</span> <span class="text-sm hidden">Summarize</span>
{:catch} {:catch}
<span class="text-sm text-red-500">Error</span> <span class="text-sm text-red-500">Error</span>
{/await} {/await}
@@ -181,6 +181,7 @@ function handle_save() {
class="btn btn-sm preset-tonal-surface shadow-md" class="btn btn-sm preset-tonal-surface shadow-md"
title="AI Settings"> title="AI Settings">
<Settings size="1.2em" /> <Settings size="1.2em" />
<span class="text-sm hidden">Settings</span>
</button> </button>
<!-- Unified AI Modal --> <!-- Unified AI Modal -->

View File

@@ -4,7 +4,9 @@
* Extracted 2026-01-08 to modularize the massive Journal Entry view. * Extracted 2026-01-08 to modularize the massive Journal Entry view.
* Handles: CodeMirror vs Plain vs Rendered HTML for both View and Edit modes. * 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 { ae_loc } from '$lib/stores/ae_stores';
import { journals_loc } from '$lib/ae_journals/ae_journals_stores'; import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte'; import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
@@ -67,6 +69,7 @@ const preferred_viewer = $derived(
<div <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"> 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. --> <!-- 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 || ''} {@html tmp_entry_obj?.content_md_html || ''}
</div> </div>
{/if} {/if}
@@ -120,21 +123,30 @@ const preferred_viewer = $derived(
placeholder="Edit content..."></textarea> placeholder="Edit content..."></textarea>
{/if} {/if}
<!-- Floating Save Button --> <!-- Floating Save Button (desktop only) -->
<button {#if has_changed}
type="button" <button
onclick={on_save} type="button"
disabled={!has_changed} onclick={on_save}
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}> class="
<Save size="1.2em" class="mr-2" /> Save btn btn-sm md:btn-md lg:btn-lg preset-tonal-warning hover:preset-filled-warning-500
</button> 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) --> <!-- Inline Save Button (Mobile/Context) -->
<button <button
type="button" type="button"
onclick={on_save} onclick={on_save}
disabled={!has_changed} disabled={!has_changed}
title="Save changes"
class="btn preset-tonal-warning hover:preset-filled-warning-500 mt-4 w-full max-w-96" class="btn preset-tonal-warning hover:preset-filled-warning-500 mt-4 w-full max-w-96"
class:invisible={!has_changed}> class:invisible={!has_changed}>
<Save size="1.2em" class="mr-2" /> Save Changes <Save size="1.2em" class="mr-2" /> Save Changes

View File

@@ -9,7 +9,7 @@ import {
CircleCheck, CircleCheck,
CircleX, CircleX,
Eye, Eye,
Fingerprint, // Fingerprint,
LoaderCircle, LoaderCircle,
LockKeyhole, LockKeyhole,
LockKeyholeOpen, LockKeyholeOpen,
@@ -19,6 +19,7 @@ import {
Settings Settings
} from '@lucide/svelte'; } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
import { import {
journals_loc, journals_loc,
journals_sess journals_sess
@@ -83,10 +84,13 @@ function toggle_edit_mode() {
<button <button
type="button" type="button"
onclick={toggle_edit_mode} 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 && class="btn-icon btn-icon-sm transition-colors duration-150 {has_changed &&
$journals_loc.entry.edit_kv[entry.journal_entry_id] === $journals_loc.entry.edit_kv[entry.journal_entry_id] ===
'current' 'current'
? 'preset-filled-success' ? 'preset-tonal-warning hover:preset-filled-warning-500'
: 'preset-tonal-surface'}"> : 'preset-tonal-surface'}">
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'} {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
{#if has_changed}<Save size="1.2em" />{:else}<Eye {#if has_changed}<Save size="1.2em" />{:else}<Eye
@@ -160,24 +164,34 @@ function toggle_edit_mode() {
</button> </button>
{/if} {/if}
<div class="bg-surface-500/20 mx-1 h-6 w-px"></div>
<!-- Unified Config Button --> <!-- Unified Config Button -->
<button <button
type="button" type="button"
class="btn btn-sm preset-tonal-primary font-bold transition-colors duration-150" onclick={on_show_config}
onclick={on_show_config}> class:hidden={!$ae_loc.edit_mode}
<Settings size="1.1em" class="mr-2" /> Config class="
btn btn-sm preset-tonal-primary font-bold transition-colors duration-150
"
title="Entry Configuration"
>
<Settings size="1.1em" />Config
</button> </button>
<!-- Explicit Save (Mobile/Backup) --> <!-- Explicit Save (Mobile/Backup) -->
{#if has_changed && save_status !== 'saving'} <!-- {#if has_changed && save_status !== 'saving'}
<button <button
type="button" type="button"
class="btn btn-sm preset-filled-primary transition-colors duration-150" onclick={on_save}
onclick={on_save}> class="
<Save size="1.1em" class="mr-2" /> Save btn btn-sm
preset-filled-primary
transition-colors duration-150
md:hidden
"
title="Save changes"
>
<Save size="1.1em" class="" />Save
</button> </button>
{/if} {/if} -->
</div> </div>
</header> </header>