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