Saving my changes. Cleaning up the comments.
This commit is contained in:
Scott Idem
222
src/routes/journals/JournalEntry_Header.svelte
Normal file
222
src/routes/journals/JournalEntry_Header.svelte
Normal file
@@ -0,0 +1,222 @@
|
||||
<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).
|
||||
*/
|
||||
import {
|
||||
Save, Eye, Pencil, Tags, Shapes,
|
||||
Siren, MessageSquareWarning, Skull,
|
||||
Fingerprint, LockKeyhole, LockKeyholeOpen, Menu,
|
||||
Globe, BookHeart, BriefcaseBusiness
|
||||
} 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;
|
||||
journal: ae_Journal;
|
||||
tmp_entry_obj: any; // Bindable
|
||||
has_changed: boolean;
|
||||
onSave: () => void;
|
||||
onDecrypt: () => void;
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let {
|
||||
entry,
|
||||
journal,
|
||||
tmp_entry_obj = $bindable(),
|
||||
has_changed,
|
||||
onSave,
|
||||
onDecrypt,
|
||||
log_lvl = 0
|
||||
}: Props = $props();
|
||||
|
||||
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;
|
||||
}
|
||||
} 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" />
|
||||
{:else}
|
||||
<Eye size="1.25em" />
|
||||
{/if}
|
||||
{:else}
|
||||
<Pencil size="1.25em" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<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"
|
||||
/>
|
||||
{:else}
|
||||
<span>
|
||||
{#if entry.name}
|
||||
{@html entry.name}
|
||||
{:else}
|
||||
{ae_util.iso_datetime_formatter(entry.created_on, 'datetime_iso_12_no_seconds')}
|
||||
{/if}
|
||||
</span>
|
||||
{/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={() => {
|
||||
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) {
|
||||
if (confirm('Decrypt and resave unencrypted?')) {
|
||||
tmp_entry_obj.private = false;
|
||||
onSave();
|
||||
}
|
||||
}
|
||||
}}
|
||||
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}
|
||||
bind:tmp_entry_obj={tmp_entry_obj}
|
||||
{onSave}
|
||||
{log_lvl}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user