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:
@@ -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 -->
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user