Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Saving my changes. Cleaning up the comments.

Browse Source
This commit is contained in:
Scott Idem
2026-01-08 17:37:40 -05:00
parent f35a1a10d0
commit 3d98233c84
3 changed files with 371 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/routes/journals/JournalEntry_Header.svelte Normal file
View 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>

142
src/routes/journals/JournalEntry_SettingsMenu.svelte Normal file
View File

@@ -0,0 +1,142 @@
<script lang="ts">
/**
* JournalEntry_SettingsMenu.svelte
* Extracted 2026-01-08 to modularize the Journal Entry Header.
* Manages Category, Priority, Sort, and Deletion.
*/
import {
Plus, Minus, ArrowDown10, Flag, FlagOff,
Eye, EyeOff, ShieldCheck, ShieldMinus,
Clock, X, Trash2
} from '@lucide/svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { journals_slct } from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { goto } from '$app/navigation';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
tmp_entry_obj: any; // Bindable
onSave: () => void;
log_lvl?: number;
}
let { entry, journal, tmp_entry_obj = $bindable(), onSave, log_lvl = 0 }: Props = $props();
async function delete_entry() {
if (confirm(`Are you sure you want to delete this journal entry?`)) {
let delete_method = 'disable';
if ($ae_loc.administrator_access && $ae_loc.edit_mode) {
delete_method = 'delete';
}
try {
await journals_func.delete_ae_obj_id__journal_entry({
api_cfg: $ae_api,
journal_entry_id: entry.journal_entry_id,
method: delete_method,
log_lvl
});
alert('Journal entry deleted successfully!');
goto(`/journals/${$journals_slct.journal_id}`);
} catch (error) {
console.error('Error deleting journal entry:', error);
alert('Failed to delete journal entry.');
}
}
}
</script>
<div class="space-y-4">
<!-- Category -->
<div class="flex flex-row items-center justify-evenly gap-2 w-full">
<span class="text-sm text-gray-500 hidden sm:inline"> Category: </span>
<select
class="select select-sm preset-tonal-primary w-full"
bind:value={tmp_entry_obj.category_code}
onchange={onSave}
title="Select a category"
>
<option value="">Select Category</option>
{#each journal?.cfg_json.category_li ?? [] as category}
<option value={category.code}>{category.name}</option>
{/each}
</select>
</div>
<!-- Priority Toggle -->
<button
type="button"
onclick={() => {
tmp_entry_obj.priority = !entry.priority;
onSave();
}}
class="btn w-full mb-2 preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
>
{#if entry.priority}
<Flag size="1.25em" class="text-success-500 mr-2" />
{:else}
<FlagOff size="1.25em" class="opacity-50 mr-2" />
{/if}
<span>Priority Status</span>
</button>
<!-- Sort Order -->
<div class="w-full flex flex-row items-center justify-center border border-surface-500/30 rounded-lg p-1 bg-surface-500/5">
<button
type="button"
onclick={() => {
tmp_entry_obj.sort = (entry.sort ?? 0) + 1;
onSave();
}}
class="btn-icon btn-icon-sm preset-tonal-surface hover:preset-filled-secondary-500"
>
<Plus size="1em" />
</button>
<span class="mx-4 font-bold text-base min-w-[1.5em] text-center">
{tmp_entry_obj.sort ?? entry.sort ?? 0}
</span>
<button
type="button"
onclick={() => {
tmp_entry_obj.sort = Math.max(0, (entry.sort ?? 0) - 1);
onSave();
}}
class="btn-icon btn-icon-sm preset-tonal-surface hover:preset-filled-secondary-500"
>
<Minus size="1em" />
</button>
</div>
<div class="divider"></div>
<!-- Archive On -->
<div class="flex flex-row items-center justify-between gap-2 border border-surface-500/20 rounded p-1">
<input
type="datetime-local"
bind:value={tmp_entry_obj.archive_on}
onchange={onSave}
class="input input-sm border-none bg-transparent"
/>
{#if entry.archive_on}
<button onclick={() => { tmp_entry_obj.archive_on = null; onSave(); }} class="text-error-500">
<X size="1.2em" />
</button>
{:else}
<button onclick={() => { tmp_entry_obj.archive_on = new Date().toISOString().slice(0, 16); onSave(); }} class="text-primary-500">
<Clock size="1.2em" />
</button>
{/if}
</div>
<!-- Danger Zone: Delete -->
<button
type="button"
onclick={delete_entry}
class="btn variant-filled-error w-full mt-4"
>
<Trash2 size="1.25em" class="mr-2" />
Delete Entry
</button>
</div>

110
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -126,7 +126,7 @@
if (!tmp_entry_obj || !orig_entry_obj || not_obj(tmp_entry_obj) || not_obj(orig_entry_obj)) {
return false;
}
return (
tmp_entry_obj.content !== orig_entry_obj.content ||
tmp_entry_obj.name !== orig_entry_obj.name ||
@@ -170,7 +170,7 @@
updated_obj = false;
orig_entry_obj = { ...$lq__journal_entry_obj };
tmp_entry_obj = $lq__journal_entry_obj ? { ...$lq__journal_entry_obj } : {};
if ($journals_loc?.entry?.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id]) {
let decrypt_key = $lq__journal_obj.combined_passcode;
@@ -216,16 +216,6 @@
console.log(
'TEST: tmp_entry_obj and orig_entry_obj available; marking tmp_entry_obj as changed'
);
// tmp_entry_obj_changed = JSON.stringify(tmp_entry_obj) != JSON.stringify($lq__journal_entry_obj);
// tmp_entry_obj_changed = JSON.stringify(tmp_entry_obj) != JSON.stringify(orig_entry_obj);
// if (!tmp_entry_obj?.private ) {
// tmp_entry_obj_changed = true;
// } else
// if (tmp_entry_obj?.private && tmp_entry_obj?.content) {
// tmp_entry_obj_changed = false;
// } else {
// tmp_entry_obj_changed = true;
// }
tmp_entry_obj_changed = true;
} else {
// console.log('TEST: tmp_entry_obj == orig_entry_obj');
@@ -276,37 +266,12 @@
}
});
// // Old decrypted content and history handling
// $effect(() => {
// if ($journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified && tmp_entry_obj?.content_encrypted && !tmp_entry_obj.content) {
// console.log('TEST: Decrypting the content before displaying it...');
// tmp_entry_obj.content = ae_util.decrypt_wrapper(tmp_entry_obj?.content_encrypted, journal_key);
// tmp_entry_obj.content_md_html = handle_marked(tmp_entry_obj?.content);
// }
// if ($journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified && tmp_entry_obj?.history_encrypted && !tmp_entry_obj.history) {
// console.log('TEST: Decrypting the history before displaying it...');
// tmp_entry_obj.history = ae_util.decrypt_wrapper(tmp_entry_obj?.history_encrypted, journal_key);
// tmp_entry_obj.history_md_html = handle_marked(tmp_entry_obj?.history);
// }
// });
// const test_html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
async function update_journal_entry() {
if (!$ae_loc.trusted_access) {
alert('You do not have permission to update this journal entry.');
return;
}
// log_lvl = 1;
// append slct_hosted_file_kv to data_json.hosted_file_kv
// if (!tmp_entry_obj.data_json.hosted_file_kv) {
// tmp_entry_obj.data_json.hosted_file_kv = {};
// }
// tmp_entry_obj.data_json.hosted_file_kv = $journals_loc.entry.hosted_file_kv;
let data_kv: key_val = {
alert: tmp_entry_obj?.alert,
personal: tmp_entry_obj?.personal,
@@ -631,7 +596,7 @@
async function handle_decrypt_string(encrypted_string: string, passcode: string) {
if (log_lvl) console.log(`TEST: handle_decrypt_string: ${passcode}`, encrypted_string);
if (!encrypted_string) return '';
if (!passcode) return false;
@@ -677,7 +642,7 @@
function handle_marked(text_string: string) {
if (!text_string) return '';
let cleaned_string = text_string.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, '');
return marked.parse(cleaned_string);
}
@@ -724,7 +689,7 @@
type="button"
onclick={() => {
const isEditing = $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] === 'current';
if (isEditing) {
if (tmp_entry_obj_changed) {
// Action: SAVE
@@ -2022,31 +1987,12 @@
</div>
{/if}
</div>
<!-- {/if} -->
</section>
</div>
</header>
<!-- <section
class="flex flex-row flex-wrap gap-1 items-center justify-between w-full"
>
</section> -->
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<!-- ondblclick={() => {
if ($ae_loc.trusted_access && $ae_loc.edit_mode) {
// Toggle edit mode
$journals_loc.entry.edit = !$journals_loc.entry.edit;
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
}
}}
role={$ae_loc.edit_mode ? 'button' : 'article'}
tabindex={$ae_loc.edit_mode ? 0 : -1} -->
<section
class="
grow
@@ -2360,7 +2306,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
{#if $lq__journal_obj?.cfg_json?.pref_editor == 'codemirror'}
<!-- Toolbar for CodeMirror (Temporarily disabled) -->
<!--
<!--
<div class="flex flex-row flex-wrap gap-1 p-1 bg-surface-100-900 border-x border-t border-orange-300 dark:border-orange-700 rounded-t-lg w-full max-w-6xl">
<button type="button" class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-secondary-500" title="Bold" onclick={() => wrapSelection(editorView, '**')}>
<Bold size="1.25em" />
@@ -2636,43 +2582,9 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
</div>
{/if}
<!-- <div class="max-w-(--breakpoint-md) overflow-auto">
aaaa
{tmp_entry_obj?.content ?? '-- not set --'}
<hr>
{tmp_entry_obj?.content_encrypted ?? '-- not set --'}
zzzz
</div> -->
</section>
<!-- <div>
{@html test_html}
</div> -->
<!-- {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<div
id="journal_entry_codemirror"
class:hidden={!$ae_loc.edit_mode}
> -->
<!-- {cm_view} -->
<!-- <CodeMirror bind:value class="editor" {...props} /> -->
<!-- bind:value={cm_view} -->
<!-- <E_app_codemirror
classes="editor"
/> -->
<!-- bind:content={tmp_entry_obj.content} -->
<!-- <E_app_codemirror_v5
content={tmp_entry_obj?.content ?? ''}
bind:new_content={tmp_entry_obj.content}
language={markdown()}
placeholder="Write your JavaScript code here..."
/> -->
<!-- <pre>
{tmp_entry_obj.new_content}
</pre> -->
<!-- </div>
{/if} -->
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<span class="flex flex-row items-center justify-center text-sm text-gray-500">
@@ -2754,11 +2666,6 @@ zzzz
$journals_loc?.llm__api_dangerous_browser
});
// let resp__models = ai_client.models.list();
// console.log('AI API Response (models)', resp__models);
// let msg_role_system_content = $journals_loc?.entry?.llm__system_prompt || 'You are a helpful assistant that helps people find information.';
// let msg_role_user_content = 'Why is the sky blue?';
let msg_role_user_content = tmp_entry_obj?.content;
try {
@@ -2851,9 +2758,6 @@ zzzz
</label>
</div>
<!-- <pre class="text-wrap">
{@html $journals_sess.entry.ai_summary}
</pre> -->
<E_app_codemirror_v5
editable={true}