feat(journals): implement auto-save toggle and visual status

- Added 'auto_save' preference to journals store
- Added toggle and status indicators (Check/X/Loader) to JournalEntry_Header
- Implemented auto-save logic with debounce in Journal Entry view
This commit is contained in:
Scott Idem
2026-01-13 23:52:42 -05:00
parent b1e9902285
commit 0143f18ebb
3 changed files with 62 additions and 1 deletions

View File

@@ -8,7 +8,8 @@
Save, Eye, Pencil, Tags, Shapes,
Siren, MessageSquareWarning, Skull,
Fingerprint, LockKeyhole, LockKeyholeOpen, Menu,
Globe, BookHeart, BriefcaseBusiness
Globe, BookHeart, BriefcaseBusiness,
CircleCheck, CircleX, Loader2, RefreshCw
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
@@ -28,6 +29,7 @@
onChangeJournal: () => void;
onAppend?: () => void;
onPrepend?: () => void;
save_status?: 'saved' | 'unsaved' | 'saving';
log_lvl?: number;
}
@@ -43,6 +45,7 @@
onChangeJournal,
onAppend,
onPrepend,
save_status = 'saved',
log_lvl = 0
}: Props = $props();
@@ -96,6 +99,34 @@ p-2 md:p-3 rounded-lg shadow-md
{/if}
</button>
<!-- Auto Save Toggle & Status -->
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
<div class="flex items-center gap-1 border-r border-surface-500/20 pr-2 mr-1">
<button
type="button"
class="btn btn-icon btn-icon-sm transition-all"
class:text-primary-500={$journals_loc.entry.auto_save}
class:opacity-50={!$journals_loc.entry.auto_save}
onclick={() => $journals_loc.entry.auto_save = !$journals_loc.entry.auto_save}
title="Toggle Auto Save"
>
<RefreshCw size="1.1em" class={$journals_loc.entry.auto_save ? '' : ''} />
</button>
{#if $journals_loc.entry.auto_save}
<div class="flex items-center" title="Auto Save Status: {save_status}">
{#if save_status === 'saving'}
<Loader2 size="1.1em" class="animate-spin text-primary-500" />
{:else if save_status === 'saved'}
<CircleCheck size="1.1em" class="text-success-500" />
{:else}
<CircleX size="1.1em" class="text-surface-400" />
{/if}
</div>
{/if}
</div>
{/if}
<h2 class="journal_entry__name text-base md:text-lg font-bold truncate max-w-[200px] md:max-w-md">
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] == 'current'}
<input