fix(journals): standardize component naming, props, and libraries
- Renamed all Journal components to follow the ae_comp__* snake_case convention. - Normalized all custom event handler props from PascalCase (onSave) to snake_case (on_save) across the module. - Migrated all icon imports from @lucide/svelte to lucide-svelte for consistency. - Resolved ReferenceErrors and file corruption issues in Journals config and entry views. - Updated qry__journal_entry logic to support category filtering. - Verified module integrity and component interop.
This commit is contained in:
Scott Idem
136
src/routes/journals/ae_comp__journal_entry_header.svelte
Normal file
136
src/routes/journals/ae_comp__journal_entry_header.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* ae_comp__journal_entry_header.svelte
|
||||
* Standardized Journal Entry Header.
|
||||
* Manages name, sync status, and triggers the modular config.
|
||||
*/
|
||||
import {
|
||||
Save, Eye, Pencil,
|
||||
Fingerprint, LockKeyhole, LockKeyholeOpen, Settings,
|
||||
ChevronLeft, CircleCheck, CircleX, Loader2, RefreshCw
|
||||
} from 'lucide-svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
|
||||
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
|
||||
|
||||
interface Props {
|
||||
entry: ae_JournalEntry;
|
||||
journal: ae_Journal;
|
||||
journals_li?: ae_Journal[];
|
||||
tmp_entry_obj: any; // Bindable
|
||||
has_changed: boolean;
|
||||
save_status?: 'saved' | 'unsaved' | 'saving';
|
||||
on_save: () => void;
|
||||
on_decrypt: () => void;
|
||||
on_show_config: () => void;
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let {
|
||||
entry,
|
||||
journal,
|
||||
tmp_entry_obj = $bindable(),
|
||||
has_changed,
|
||||
save_status = 'saved',
|
||||
on_save,
|
||||
on_decrypt,
|
||||
on_show_config,
|
||||
log_lvl = 0
|
||||
}: Props = $props();
|
||||
|
||||
const is_decrypted = $derived($journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted === true);
|
||||
|
||||
function toggle_edit_mode() {
|
||||
const isEditing = $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
|
||||
if (isEditing) {
|
||||
if (has_changed) on_save();
|
||||
else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
|
||||
} else {
|
||||
$journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="flex flex-col md:flex-row items-center justify-between gap-4 p-3 bg-surface-100/50 dark:bg-surface-900/50 rounded-xl border border-surface-500/20 backdrop-blur-md shadow-sm w-full">
|
||||
<div class="flex items-center gap-3 w-full md:w-auto">
|
||||
<a href="/journals/{journal.journal_id}" class="btn-icon btn-icon-sm variant-soft-surface" title="Back to Journal">
|
||||
<ChevronLeft size="1.2em" />
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-2 grow">
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggle_edit_mode}
|
||||
class="btn-icon btn-icon-sm transition-all {has_changed && $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current' ? 'variant-filled-success' : 'variant-soft-surface'}"
|
||||
>
|
||||
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
|
||||
{#if has_changed}<Save size="1.2em" />{:else}<Eye size="1.2em" />{/if}
|
||||
{:else}
|
||||
<Pencil size="1.2em" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] == 'current'}
|
||||
<input
|
||||
type="text"
|
||||
bind:value={tmp_entry_obj.name}
|
||||
class="input input-sm variant-form-material font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
|
||||
placeholder="Entry Title..."
|
||||
onchange={on_save}
|
||||
/>
|
||||
{:else}
|
||||
<h2 class="text-base md:text-lg font-bold truncate max-w-md">
|
||||
{entry.name || ae_util.iso_datetime_formatter(entry.created_on, 'datetime_iso_12_no_seconds')}
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 w-full md:w-auto justify-end">
|
||||
<!-- Auto-Save indicator -->
|
||||
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
|
||||
<div class="flex items-center gap-1 px-2 border-r border-surface-500/20 mr-1">
|
||||
<button
|
||||
class="btn-icon btn-icon-sm { $journals_loc.entry.auto_save ? 'text-primary-500' : 'opacity-30'}"
|
||||
onclick={() => $journals_loc.entry.auto_save = !$journals_loc.entry.auto_save}
|
||||
title="Toggle Auto Save"
|
||||
>
|
||||
<RefreshCw size="1em" />
|
||||
</button>
|
||||
{#if $journals_loc.entry.auto_save}
|
||||
{#if save_status === 'saving'}<Loader2 size="1em" class="animate-spin text-primary-500" />
|
||||
{:else if save_status === 'saved'}<CircleCheck size="1em" class="text-success-500" />
|
||||
{:else}<CircleX size="1em" class="opacity-30" />{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Decrypt Toggle (Lock) -->
|
||||
{#if entry.private}
|
||||
<button
|
||||
class="btn-icon btn-icon-sm transition-all {is_decrypted ? 'variant-filled-success shadow-lg shadow-success-500/20' : 'variant-soft-warning'}"
|
||||
onclick={on_decrypt}
|
||||
title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
|
||||
>
|
||||
{#if is_decrypted}<LockKeyholeOpen size="1.2em" />{:else}<LockKeyhole size="1.2em" />{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div>
|
||||
|
||||
<!-- Unified Config Button -->
|
||||
<button
|
||||
class="btn btn-sm variant-soft-primary font-bold"
|
||||
onclick={on_show_config}
|
||||
>
|
||||
<Settings size="1.1em" class="mr-2" /> Config
|
||||
</button>
|
||||
|
||||
<!-- Explicit Save (Mobile/Backup) -->
|
||||
{#if has_changed && save_status !== 'saving'}
|
||||
<button class="btn btn-sm variant-filled-primary shadow-lg" onclick={on_save}>
|
||||
<Save size="1.1em" class="mr-2" /> Save
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user