style(journals): standardize configuration interfaces across module
- Refactored Module, Journal, and Entry configs to use consistent tabbed layouts. - Adopted unified 'Aether Orange' aesthetic with Skeleton UI and Lucide icons. - Replaced overcrowded inline settings menu with 'ModalJournalEntryConfig'. - Cleaned up Header component logic and improved visual consistency.
This commit is contained in:
Scott Idem
@@ -1,21 +1,17 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* JournalEntry_Header.svelte
|
||||
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
|
||||
* Handles name, tags, categories, and the 3-state toggle (View/Eye/Save).
|
||||
* Standardized Journal Entry Header.
|
||||
* Manages name, sync status, and triggers the modular config.
|
||||
*/
|
||||
import {
|
||||
Save, Eye, Pencil, Tags, Shapes,
|
||||
Siren, MessageSquareWarning, Skull,
|
||||
Fingerprint, LockKeyhole, LockKeyholeOpen, Menu,
|
||||
Globe, BookHeart, BriefcaseBusiness,
|
||||
CircleCheck, CircleX, Loader2, RefreshCw
|
||||
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 { ae_loc } from '$lib/stores/ae_stores';
|
||||
import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
|
||||
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
|
||||
import JournalEntry_SettingsMenu from './JournalEntry_SettingsMenu.svelte';
|
||||
|
||||
interface Props {
|
||||
entry: ae_JournalEntry;
|
||||
@@ -23,260 +19,118 @@
|
||||
journals_li?: ae_Journal[];
|
||||
tmp_entry_obj: any; // Bindable
|
||||
has_changed: boolean;
|
||||
save_status?: 'saved' | 'unsaved' | 'saving';
|
||||
onSave: () => void;
|
||||
onDecrypt: () => void;
|
||||
onDecryptHistory: () => void;
|
||||
onChangeJournal: () => void;
|
||||
onAppend?: () => void;
|
||||
onPrepend?: () => void;
|
||||
onShowExport?: () => void;
|
||||
save_status?: 'saved' | 'unsaved' | 'saving';
|
||||
onShowConfig: () => void;
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let {
|
||||
entry,
|
||||
journal,
|
||||
journals_li = [],
|
||||
tmp_entry_obj = $bindable(),
|
||||
has_changed,
|
||||
save_status = 'saved',
|
||||
onSave,
|
||||
onDecrypt,
|
||||
onDecryptHistory,
|
||||
onChangeJournal,
|
||||
onAppend,
|
||||
onPrepend,
|
||||
onShowExport,
|
||||
save_status = 'saved',
|
||||
onShowConfig,
|
||||
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) {
|
||||
onSave();
|
||||
} else {
|
||||
$journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
|
||||
}
|
||||
if (has_changed) onSave();
|
||||
else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
|
||||
} else {
|
||||
$journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
|
||||
}
|
||||
}
|
||||
|
||||
function toggle_property(prop: string) {
|
||||
(tmp_entry_obj as any)[prop] = !entry[prop as keyof ae_JournalEntry];
|
||||
onSave();
|
||||
}
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="
|
||||
ae_header journal_entry__header
|
||||
flex flex-row flex-wrap gap-2
|
||||
items-center justify-between
|
||||
w-full
|
||||
bg-gray-100 dark:bg-gray-800
|
||||
p-2 md:p-3 rounded-lg shadow-md
|
||||
"
|
||||
>
|
||||
<div class="flex-1 flex flex-row flex-wrap gap-2 items-center justify-start min-w-[200px]">
|
||||
<!-- Toggle edit for journal entry -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggle_edit_mode}
|
||||
class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-primary-500 transition-all"
|
||||
class:preset-filled-success-500={has_changed && $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
|
||||
title="Toggle view/edit/save mode"
|
||||
>
|
||||
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
|
||||
{#if has_changed}
|
||||
<Save size="1.25em" />
|
||||
<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}
|
||||
<Eye size="1.25em" />
|
||||
<Pencil size="1.2em" />
|
||||
{/if}
|
||||
{:else}
|
||||
<Pencil size="1.25em" />
|
||||
{/if}
|
||||
</button>
|
||||
</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
|
||||
type="text"
|
||||
bind:value={tmp_entry_obj.name}
|
||||
class="input input-sm md:input-md input-bordered w-full"
|
||||
placeholder="Journal Entry 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={onSave}
|
||||
/>
|
||||
{:else}
|
||||
<span>
|
||||
{#if entry.name}
|
||||
{@html entry.name}
|
||||
{:else}
|
||||
{ae_util.iso_datetime_formatter(entry.created_on, 'datetime_iso_12_no_seconds')}
|
||||
{/if}
|
||||
</span>
|
||||
<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}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center justify-end">
|
||||
<!-- Toggles Container -->
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-end">
|
||||
|
||||
<!-- Quick Category Display -->
|
||||
{#if entry.category_code && $journals_loc.entry.edit_kv[entry.journal_entry_id] !== 'current'}
|
||||
<span class="hidden md:flex items-center gap-1 text-xs font-semibold px-2 py-1 bg-surface-500/10 rounded">
|
||||
<Shapes size="1em" />
|
||||
{entry.category_code}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
|
||||
<!-- Public Toggle -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={journal?.cfg_json?.hide_btn_public}
|
||||
onclick={() => toggle_property('public')}
|
||||
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
||||
title="Toggle public visibility"
|
||||
>
|
||||
<Globe size="1.1em" class={entry.public ? 'text-success-500' : 'opacity-50'} />
|
||||
</button>
|
||||
|
||||
<!-- Personal Toggle -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={journal?.cfg_json?.hide_btn_personal}
|
||||
onclick={() => toggle_property('personal')}
|
||||
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
||||
title="Toggle personal visibility"
|
||||
>
|
||||
<BookHeart size="1.1em" class={entry.personal ? 'text-success-500' : 'opacity-50'} />
|
||||
</button>
|
||||
|
||||
<!-- Professional Toggle -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={journal?.cfg_json?.hide_btn_professional}
|
||||
onclick={() => toggle_property('professional')}
|
||||
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
||||
title="Toggle professional visibility"
|
||||
>
|
||||
<BriefcaseBusiness size="1.1em" class={entry.professional ? 'text-success-500' : 'opacity-50'} />
|
||||
</button>
|
||||
|
||||
<span class="flex flex-row flex-wrap gap-0.5 items-center justify-center border-l border-surface-500/20 pl-1">
|
||||
<!-- Private/Encryption Toggle -->
|
||||
<button
|
||||
type="button"
|
||||
class:hidden={journal?.cfg_json?.hide_btn_private || (entry.private && !$ae_loc.edit_mode)}
|
||||
onclick={async () => {
|
||||
if (!entry.private && entry.content) {
|
||||
if (confirm('Encrypt and resave this entry?')) {
|
||||
tmp_entry_obj.private = true;
|
||||
onSave();
|
||||
}
|
||||
} else if (entry.private && entry.content_encrypted) {
|
||||
// CRITICAL: Ensure we have the decrypted content before we turn OFF privacy
|
||||
if (!tmp_entry_obj.content) {
|
||||
console.log('Header: Content not decrypted. Attempting decryption before toggle.');
|
||||
await onDecrypt();
|
||||
}
|
||||
|
||||
// Check again after attempted decryption
|
||||
if (tmp_entry_obj.content) {
|
||||
if (confirm('Decrypt and resave as plain text?')) {
|
||||
tmp_entry_obj.private = false;
|
||||
onSave();
|
||||
}
|
||||
} else {
|
||||
alert('Cannot convert to plain text: Entry is not decrypted. Please enter passcode first.');
|
||||
}
|
||||
}
|
||||
}}
|
||||
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
||||
title="Toggle privacy"
|
||||
>
|
||||
<Fingerprint size="1.1em" class={entry.private ? 'text-success-500' : 'opacity-50'} />
|
||||
</button>
|
||||
|
||||
{#if entry.private && entry.content_encrypted}
|
||||
<button
|
||||
type="button"
|
||||
onclick={onDecrypt}
|
||||
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500"
|
||||
title="Toggle decryption"
|
||||
>
|
||||
{#if tmp_entry_obj?.content}
|
||||
<LockKeyholeOpen size="1.1em" class="text-success-500" />
|
||||
{:else}
|
||||
<LockKeyhole size="1.1em" class="text-error-500" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<!-- Settings Menu Trigger -->
|
||||
<section class="relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($journals_sess.entry.show_menu = !$journals_sess.entry.show_menu)}
|
||||
class="btn btn-sm variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 transition-all"
|
||||
class:preset-filled-warning-500={$journals_sess.entry.show_menu}
|
||||
>
|
||||
<Menu size="1.25em" class="inline-block" />
|
||||
<span class="hidden md:inline ml-1">Menu</span>
|
||||
</button>
|
||||
|
||||
{#if $journals_sess.entry.show_menu}
|
||||
<div class="absolute top-12 right-0 p-4 z-50 bg-white dark:bg-gray-800 border border-surface-500 shadow-xl rounded-lg min-w-72">
|
||||
<JournalEntry_SettingsMenu
|
||||
{entry}
|
||||
{journal}
|
||||
{journals_li}
|
||||
bind:tmp_entry_obj={tmp_entry_obj}
|
||||
{onSave}
|
||||
{onDecryptHistory}
|
||||
{onChangeJournal}
|
||||
{onAppend}
|
||||
{onPrepend}
|
||||
{onShowExport}
|
||||
{log_lvl}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</span>
|
||||
</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={onDecrypt}
|
||||
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 Settings Button -->
|
||||
<button
|
||||
class="btn btn-sm variant-soft-primary font-bold"
|
||||
onclick={onShowConfig}
|
||||
>
|
||||
<Settings size="1.1em" class="mr-2" /> Settings
|
||||
</button>
|
||||
|
||||
<!-- Explicit Save (Mobile/Backup) -->
|
||||
{#if has_changed && save_status !== 'saving'}
|
||||
<button class="btn btn-sm variant-filled-primary shadow-lg" onclick={onSave}>
|
||||
<Save size="1.1em" class="mr-2" /> Save
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user