From d1853f51f4b0ac38410afb17dd015bfc71f92ea7 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 8 Jan 2026 19:05:33 -0500
Subject: [PATCH] Refactor Journal Entry view: Extract Header and clean up
 Editor bindings

---
 .../journals/JournalEntry_Editor.svelte       |    4 +-
 .../ae_comp__journal_entry_obj_id_view.svelte | 1302 ++---------------
 2 files changed, 139 insertions(+), 1167 deletions(-)

diff --git a/src/routes/journals/JournalEntry_Editor.svelte b/src/routes/journals/JournalEntry_Editor.svelte
index cb50b42e..4eb41fca 100644
--- a/src/routes/journals/JournalEntry_Editor.svelte
+++ b/src/routes/journals/JournalEntry_Editor.svelte
@@ -42,7 +42,7 @@
                 readonly={true}
                 content={tmp_entry_obj?.content ?? ''}
                 bind:new_content={tmp_entry_obj.content}
-                bind:theme_mode={$ae_loc.theme_mode}
+                theme_mode={$ae_loc.theme_mode}
                 placeholder="No content..."
                 class="p-2 preset-outlined-success-400-600 shadow-lg rounded-lg w-full max-w-6xl"
             />
@@ -87,7 +87,7 @@
                     content={tmp_entry_obj?.content ?? ''}
                     bind:new_content={tmp_entry_obj.content}
                     bind:editorView
-                    bind:theme_mode={$ae_loc.theme_mode}
+                    theme_mode={$ae_loc.theme_mode}
                     placeholder="Write using Markdown..."
                     class="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
                 />
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index e992e3e8..42f05020 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -5,43 +5,7 @@
     import { goto } from '$app/navigation';
 
     // *** Import secondary libraries
-    import {
-        ArrowDown10,
-        BookHeart,
-        Bot,
-        BriefcaseBusiness,
-        Clock,
-        CodeXml,
-        Copy,
-        Eye,
-        EyeOff,
-        FileDown,
-        FileX,
-        Fingerprint,
-        Flag,
-        Globe,
-        History,
-        LockKeyhole,
-        LockKeyholeOpen,
-        MessageSquareWarning,
-        Menu,
-        Minus,
-        NotepadTextDashed,
-        Pencil,
-        PenLine,
-        Plus,
-        RemoveFormatting,
-        Save,
-        Shapes,
-        ShieldCheck,
-        Siren,
-        Skull,
-        SquareLibrary,
-        Tags,
-        Trash2,
-        TypeOutline,
-        X
-    } from '@lucide/svelte';
+    import { marked } from 'marked';
 
     // *** Import Aether components and helpers
     import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
@@ -66,6 +30,7 @@
     import AE_ObjectFlags from '$lib/ae_elements/AE_ObjectFlags.svelte';
     import AE_MetadataFooter from '$lib/ae_elements/AE_MetadataFooter.svelte';
     import JournalEntry_Editor from './JournalEntry_Editor.svelte';
+    import JournalEntry_Header from './JournalEntry_Header.svelte';
 
     // *** Props
     interface Props {
@@ -122,55 +87,61 @@
         return !obj || typeof obj !== 'object' || Object.keys(obj).length === 0;
     }
 
-    $effect(async () => {
-        if ($lq__journal_entry_obj && $lq__journal_entry_obj?.updated_on) {
-            if (log_lvl) console.log(`Journal Entry updated:`, $lq__journal_entry_obj);
+    $effect(() => {
+        (async () => {
+            if ($lq__journal_entry_obj && $lq__journal_entry_obj?.updated_on) {
+                if (log_lvl) console.log(`Journal Entry updated:`, $lq__journal_entry_obj);
 
-            orig_entry_obj = { ...$lq__journal_entry_obj };
-            tmp_entry_obj = $lq__journal_entry_obj ? { ...$lq__journal_entry_obj } : {};
+                orig_entry_obj = { ...$lq__journal_entry_obj };
+                tmp_entry_obj = $lq__journal_entry_obj ? { ...$lq__journal_entry_obj } : {};
 
-            tmp_entry_obj_changed = false;
-            updated_idb = false;
-        } else if (updated_obj && (await $lq__journal_entry_obj)) {
-            if (log_lvl) console.log(`Journal Entry forced update:`, $lq__journal_entry_obj);
-            updated_obj = false;
-            orig_entry_obj = { ...$lq__journal_entry_obj };
-            tmp_entry_obj = $lq__journal_entry_obj ? { ...$lq__journal_entry_obj } : {};
+                tmp_entry_obj_changed = false;
+                updated_idb = false;
+            } else if (updated_obj && (await $lq__journal_entry_obj)) {
+                if (log_lvl) console.log(`Journal Entry forced update:`, $lq__journal_entry_obj);
+                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;
+                if ($journals_loc?.entry?.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id]) {
+                    let decrypt_key = $lq__journal_obj.combined_passcode;
 
-                if (!tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted) {
-                    tmp_entry_obj.content = await ae_util.decrypt_wrapper(
-                        tmp_entry_obj?.content_encrypted,
-                        decrypt_key
-                    );
-                    tmp_entry_obj.content_md_html = handle_marked(tmp_entry_obj?.content);
+                    if (!tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted) {
+                        tmp_entry_obj.content = await ae_util.decrypt_wrapper(
+                            tmp_entry_obj?.content_encrypted,
+                            decrypt_key
+                        );
+                        tmp_entry_obj.content_md_html = handle_marked(tmp_entry_obj?.content);
 
-                    orig_entry_obj.content = await ae_util.decrypt_wrapper(
-                        orig_entry_obj?.content_encrypted,
-                        decrypt_key
-                    );
-                    orig_entry_obj.content_md_html = handle_marked(orig_entry_obj?.content);
+                        if (orig_entry_obj) {
+                            orig_entry_obj.content = await ae_util.decrypt_wrapper(
+                                orig_entry_obj?.content_encrypted,
+                                decrypt_key
+                            );
+                            orig_entry_obj.content_md_html = handle_marked(orig_entry_obj?.content);
+                        }
+                    }
+                    if (!tmp_entry_obj?.history && tmp_entry_obj?.history_encrypted) {
+                        tmp_entry_obj.history = await ae_util.decrypt_wrapper(
+                            tmp_entry_obj?.history_encrypted,
+                            decrypt_key
+                        );
+                        tmp_entry_obj.history_md_html = handle_marked(tmp_entry_obj?.history);
+
+                        if (orig_entry_obj) {
+                            orig_entry_obj.history = await ae_util.decrypt_wrapper(
+                                orig_entry_obj?.history_encrypted,
+                                decrypt_key
+                            );
+                            orig_entry_obj.history_md_html = handle_marked(orig_entry_obj?.history);
+                        }
+                    }
                 }
-                if (!tmp_entry_obj?.history && tmp_entry_obj?.history_encrypted) {
-                    tmp_entry_obj.history = await ae_util.decrypt_wrapper(
-                        tmp_entry_obj?.history_encrypted,
-                        decrypt_key
-                    );
-                    tmp_entry_obj.history_md_html = handle_marked(tmp_entry_obj?.history);
 
-                    orig_entry_obj.history = await ae_util.decrypt_wrapper(
-                        orig_entry_obj?.history_encrypted,
-                        decrypt_key
-                    );
-                    orig_entry_obj.history_md_html = handle_marked(orig_entry_obj?.history);
-                }
+                tmp_entry_obj_changed = false;
+                updated_idb = false;
             }
-
-            tmp_entry_obj_changed = false;
-            updated_idb = false;
-        }
+        })();
     });
 
     $effect(() => {
@@ -196,13 +167,12 @@
             $journals_sess?.journal_kv[$lq__journal_obj?.journal_id]?.journal_passcode_verified &&
             !$journals_sess?.journal_kv[$lq__journal_obj?.journal_id]?.journal_passcode_decrypted
         ) {
+            let journal_key = null;
             if (
                 $journals_sess.journal_kv[$lq__journal_obj?.journal_id]?.typed_journal_passcode
                     ?.length
             ) {
-                journal_key = ae_util.derive_key_from_passcode(
-                    $journals_sess.journal_kv[$lq__journal_obj?.journal_id]?.typed_journal_passcode
-                );
+                journal_key = $journals_sess.journal_kv[$lq__journal_obj?.journal_id]?.typed_journal_passcode;
             } else {
                 journal_key = $lq__journal_obj?.private_passcode;
             }
@@ -217,21 +187,79 @@
             $journals_sess.journal_kv[$lq__journal_obj?.journal_id].journal_passcode_decrypted =
                 'processing';
 
-            content_decrypted = ae_util.decrypt_wrapper(
-                $lq__journal_entry_obj?.content_encrypted,
-                journal_key
-            );
-            console.log('TEST: Decrypted content:', content_decrypted);
+            (async () => {
+                let result = await ae_util.decrypt_wrapper(
+                    $lq__journal_entry_obj?.content_encrypted,
+                    journal_key
+                );
+                content_decrypted = typeof result === 'string' ? result : '';
+                console.log('TEST: Decrypted content:', content_decrypted);
 
-            $journals_sess.journal_kv[$lq__journal_obj?.journal_id].journal_passcode_decrypted =
-                true;
+                $journals_sess.journal_kv[$lq__journal_obj?.journal_id].journal_passcode_decrypted =
+                    true;
 
-            // $journals_slct.journal_entry_obj.content_decrypted = content_decrypted;
-            tmp_entry_obj.content = content_decrypted;
-            tmp_entry_obj.content_md_html = handle_marked(content_decrypted);
+                tmp_entry_obj.content = content_decrypted;
+                tmp_entry_obj.content_md_html = handle_marked(content_decrypted);
+            })();
         }
     });
 
+    async function handle_content_decryption() {
+        if (
+            tmp_entry_obj?.private &&
+            $lq__journal_obj?.combined_passcode &&
+            tmp_entry_obj?.content_encrypted
+        ) {
+            if (!tmp_entry_obj?.content) {
+                let result = await ae_util.decrypt_wrapper(
+                    tmp_entry_obj?.content_encrypted,
+                    $lq__journal_obj?.combined_passcode
+                );
+                tmp_entry_obj.content = typeof result === 'string' ? result : '';
+                tmp_entry_obj.content_md_html = await handle_marked(tmp_entry_obj?.content);
+
+                // Also decrypt history if present
+                if (tmp_entry_obj?.history_encrypted) {
+                    let h_result = await ae_util.decrypt_wrapper(
+                        tmp_entry_obj?.history_encrypted,
+                        $lq__journal_obj?.combined_passcode
+                    );
+                    tmp_entry_obj.history = typeof h_result === 'string' ? h_result : '';
+                    tmp_entry_obj.history_md_html = await handle_marked(tmp_entry_obj?.history);
+                }
+
+                $journals_sess.entry.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id] = true;
+            } else {
+                // Clear
+                tmp_entry_obj.content = null;
+                tmp_entry_obj.content_md_html = null;
+                tmp_entry_obj.history = null;
+                tmp_entry_obj.history_md_html = null;
+                $journals_sess.entry.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id] = false;
+            }
+        }
+    }
+
+    async function handle_history_decryption() {
+        if (tmp_entry_obj?.history_encrypted) {
+            // Determine key
+            let key = $lq__journal_obj?.private_passcode;
+            if (
+                $journals_sess.journal_kv[$lq__journal_obj?.journal_id]?.typed_journal_passcode
+                    ?.length
+            ) {
+                key =
+                    $journals_sess.journal_kv[$lq__journal_obj?.journal_id]?.typed_journal_passcode;
+            }
+            if (!key) key = $lq__journal_obj?.combined_passcode;
+
+            let result = await ae_util.decrypt_wrapper(tmp_entry_obj?.history_encrypted, key);
+            decrypted_history = typeof result === 'string' ? result : '';
+            tmp_entry_obj.history = decrypted_history;
+            tmp_entry_obj.history_md_html = await handle_marked(decrypted_history);
+        }
+    }
+
     async function update_journal_entry() {
         if (!$ae_loc.trusted_access) {
             alert('You do not have permission to update this journal entry.');
@@ -281,7 +309,7 @@
                         tmp_entry_obj?.content_encrypted,
                         decrypt_key
                     );
-                    data_kv.content = decrypted_content;
+                    data_kv.content = typeof decrypted_content === 'string' ? decrypted_content : '';
                 } else {
                     data_kv.content = '';
                 }
@@ -319,10 +347,11 @@
                 tmp_entry_obj.content = null;
 
                 if (tmp_entry_obj?.history_encrypted) {
-                    decrypted_history = await ae_util.decrypt_wrapper(
+                    let result = await ae_util.decrypt_wrapper(
                         tmp_entry_obj?.history_encrypted,
                         decrypt_key
                     );
+                    decrypted_history = typeof result === 'string' ? result : '';
                     tmp_entry_obj.history = decrypted_history;
                 }
 
@@ -470,1058 +499,19 @@
     bind:clientHeight={$ae_loc.iframe_height_modal_body}
 >
     {#if $lq__journal_entry_obj}
-        <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={() => {
-                        const isEditing =
-                            $journals_loc.entry.edit_kv[
-                                $lq__journal_entry_obj?.journal_entry_id
-                            ] === 'current';
-
-                        if (isEditing) {
-                            if (tmp_entry_obj_changed) {
-                                // Action: SAVE
-                                update_journal_entry();
-                            } else {
-                                // Action: CANCEL/BACK TO VIEW
-                                $journals_loc.entry.edit_kv[
-                                    $lq__journal_entry_obj?.journal_entry_id
-                                ] = false;
-                            }
-                        } else {
-                            // Action: ENTER EDIT MODE
-                            $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] =
-                                'current';
-                        }
-                    }}
-                    class="
-            btn btn-icon btn-sm
-            preset-tonal-surface hover:preset-filled-primary-500
-            transition-all
-            "
-                    class:preset-filled-success-500={tmp_entry_obj_changed &&
-                        $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] ===
-                            'current'}
-                    title="Toggle view/edit/save mode"
-                >
-                    {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] === 'current'}
-                        {#if tmp_entry_obj_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[$lq__journal_entry_obj?.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 $lq__journal_entry_obj?.name}
-                                {@html $lq__journal_entry_obj?.name}
-                            {:else}
-                                {ae_util.iso_datetime_formatter(
-                                    $lq__journal_entry_obj?.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">
-                <div class="flex flex-row flex-wrap gap-1 items-center justify-end">
-                    <!-- Tags for journal entry. Comma delimited list. -->
-                    {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
-                        <div
-                            class="tags flex flex-row gap-1 items-center justify-start border-l border-gray-200 rounded-lg"
-                        >
-                            <span class="text-sm text-gray-500">
-                                <Tags class="mx-1 inline-block" />
-                                <!-- <span class="hidden sm:inline">Tags:</span> -->
-                            </span>
-
-                            <input
-                                type="text"
-                                bind:value={tmp_entry_obj.tags}
-                                class="input input-bordered inline-block text-sm text-gray-800 dark:text-gray-200"
-                                placeholder="Tags (comma delimited)"
-                                title="Edit the tags for this journal entry"
-                            />
-                        </div>
-                    {:else if $lq__journal_entry_obj.tags && $lq__journal_entry_obj.tags.length}
-                        <div
-                            class="tags flex flex-wrap gap-1 items-center justify-start border border-gray-200 rounded-lg"
-                        >
-                            <span class="text-sm text-gray-500">
-                                <Tags class="mx-1 inline-block" />
-                                <span class="hidden md:inline">Tags</span>
-                            </span>
-                            <!-- <Tags class="m-1 inline-block" />
-                    <span class="text-sm text-gray-500 hidden md:inline">Tags</span> -->
-
-                            {#each $lq__journal_entry_obj.tags.split(',') as tag}
-                                <span
-                                    class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-tertiary border border-tertiary-500 transition py-1 px-2"
-                                    title={`Tag: ${tag.trim()}`}
-                                >
-                                    {tag.trim()}
-                                </span>
-                            {/each}
-                        </div>
-                    {/if}
-
-                    <!-- Currently selected category for Entry; text only -->
-                    {#if $lq__journal_entry_obj.category_code}
-                        <div
-                            class="category flex flex-row gap-1 items-center justify-start border-l border-gray-200 rounded-lg"
-                        >
-                            <span class="text-sm text-gray-500">
-                                <Shapes class="mx-1 inline-block" />
-                                <!-- <span class="hidden sm:inline">Category:</span> -->
-                            </span>
-                            <span
-                                class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-tertiary border border-tertiary-500 transition py-1 px-2"
-                                title={`Category: ${$lq__journal_entry_obj.category_code}`}
-                            >
-                                {$lq__journal_entry_obj.category_code}
-                            </span>
-                        </div>
-                    {/if}
-
-                    <span
-                        class="
-            flex flex-row flex-wrap gap-1 items-center justify-center
-            "
-                    >
-                        <!-- Entry alert status -->
-                        <button
-                            type="button"
-                            class:hidden={$lq__journal_obj?.cfg_json?.hide_btn_alert}
-                            onclick={() => {
-                                if (tmp_entry_obj) {
-                                    tmp_entry_obj.alert = !$lq__journal_entry_obj?.alert;
-                                    update_journal_entry();
-                                }
-                            }}
-                            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                            title="Toggle alert status of this journal entry"
-                        >
-                            {#if $lq__journal_entry_obj?.alert}
-                                <Siren strokeWidth="2.5" color="red" />
-                            {:else}
-                                <MessageSquareWarning strokeWidth="1" color="gray" />
-                            {/if}
-                        </button>
-
-                        <!-- Entry alert message -->
-                        <button
-                            type="button"
-                            onclick={() => {
-                                // tmp_entry_obj.alert_msg = !$lq__journal_entry_obj?.alert_msg;
-                                update_journal_entry();
-                            }}
-                            class:hidden={!$lq__journal_entry_obj?.alert}
-                            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                            title="Toggle alert message of this journal entry"
-                        >
-                            {#if $lq__journal_entry_obj?.alert_msg}
-                                <Skull strokeWidth="2.5" color="red" />
-                            {:else}
-                                <MessageSquareWarning strokeWidth="1" color="gray" />
-                            {/if}
-                        </button>
-
-                        <span class="flex flex-row flex-wrap gap-0.5 items-center justify-center">
-                            <!-- Only show this private toggle if not private or in edit mode. -->
-                            <button
-                                type="button"
-                                class:hidden={$lq__journal_obj?.cfg_json?.hide_btn_private ||
-                                    (tmp_entry_obj?.private && !$ae_loc.edit_mode)}
-                                onclick={() => {
-                                    // Allow for toggle between private (encrypted) and not,
-                                    // and if private, allow for decryption.
-                                    if (
-                                        !$lq__journal_entry_obj?.private &&
-                                        tmp_entry_obj?.content
-                                    ) {
-                                        // Handle converting to private (encrypted) content
-                                        if (
-                                            confirm(
-                                                'Are you sure you want to encrypt and resave this journal entry?'
-                                            )
-                                        ) {
-                                            // Setting private to true will cause the update_journal_entry() function to encrypt the content.
-                                            tmp_entry_obj.private = true;
-                                            update_journal_entry();
-                                        } else {
-                                            return false;
-                                        }
-                                    } else if (
-                                        $lq__journal_entry_obj?.private &&
-                                        tmp_entry_obj?.content_encrypted
-                                    ) {
-                                        // Handle converting to not private (decrypted) content
-                                        if (
-                                            confirm(
-                                                'Are you sure you want to decrypt and resave this journal entry unencrypted?'
-                                            )
-                                        ) {
-                                            // tmp_entry_obj.private = !$lq__journal_entry_obj?.private;
-                                            // update_journal_entry();
-
-                                            // Setting private to false will cause the update_journal_entry() function to decrypt the content. This will also copy it to tmp_entry_obj.content.
-                                            tmp_entry_obj.private = false;
-                                            // tmp_entry_obj.
-                                            // handle_decrypt_content();
-                                            update_journal_entry();
-                                        } else {
-                                            return false;
-                                        }
-                                    }
-                                }}
-                                class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                                title="Toggle private visibility of this journal entry"
-                            >
-                                {#if $lq__journal_entry_obj?.private}
-                                    <Fingerprint strokeWidth="2.5" color="green" />
-                                    <!-- Private (Encrypted) -->
-                                {:else}
-                                    <Fingerprint strokeWidth="1" color="gray" />
-                                    <!-- Not Private -->
-                                {/if}
-                            </button>
-
-                            <!-- Only show this encryption toggle if entry is private. -->
-                            <button
-                                type="button"
-                                onclick={async () => {
-                                    console.log(tmp_entry_obj?.private);
-                                    console.log($lq__journal_obj?.combined_passcode);
-                                    console.log(tmp_entry_obj?.content_encrypted);
-                                    if (
-                                        tmp_entry_obj?.private &&
-                                        $lq__journal_obj?.combined_passcode &&
-                                        tmp_entry_obj?.content_encrypted
-                                    ) {
-                                        if (!tmp_entry_obj?.content) {
-                                            console.log(
-                                                `TEST: key = ${$lq__journal_obj.passcode}:${$lq__journal_obj.private_passcode} OR ${$lq__journal_obj.combined_passcode} OR ${journal_key}`
-                                            );
-
-                                            // let decrypt_key = 'temp-secret-key';
-                                            // let decrypt_key = 'sti-journals-2025:centauri';
-                                            let decrypt_key = $lq__journal_obj?.combined_passcode;
-                                            // let decrypt_key = `${$lq__journal_obj.passcode}:`;
-                                            // let decrypt_key = `${$lq__journal_obj.private_passcode}`;
-
-                                            console.log(
-                                                `TEST: Decrypting the content... ${$lq__journal_obj?.combined_passcode}`
-                                            );
-                                            // WARNING: await is important here
-                                            tmp_entry_obj.content = await ae_util.decrypt_wrapper(
-                                                tmp_entry_obj?.content_encrypted,
-                                                $lq__journal_obj?.combined_passcode
-                                            );
-
-                                            console.log(
-                                                'TEST: Content Markdown render to HTML:',
-                                                tmp_entry_obj?.content
-                                            );
-                                            tmp_entry_obj.content_md_html = await handle_marked(
-                                                tmp_entry_obj?.content
-                                            );
-
-                                            console.log(
-                                                `TEST: Decrypting the history... ${$lq__journal_obj?.combined_passcode}`
-                                            );
-                                            // WARNING: await is important here
-                                            tmp_entry_obj.history = await ae_util.decrypt_wrapper(
-                                                tmp_entry_obj?.history_encrypted,
-                                                $lq__journal_obj?.combined_passcode
-                                            );
-
-                                            console.log(
-                                                'TEST: History Markdown render to HTML:',
-                                                tmp_entry_obj?.history
-                                            );
-                                            tmp_entry_obj.history_md_html = await handle_marked(
-                                                tmp_entry_obj?.history
-                                            );
-
-                                            // TO DO: Use this to toggle and trigger the decryption of the content/history :TO DO
-                                            $journals_sess.entry.decrypt_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = true;
-                                            // TO DO: Use this to toggle and trigger the decryption of the content/history :TO DO
-                                        } else {
-                                            console.log(`TEST: Not decrypting the content...`);
-                                            // Clear out the decrypted content and history to prevent it from being seen.
-                                            tmp_entry_obj.content = null;
-                                            tmp_entry_obj.content_md_html = null;
-                                            tmp_entry_obj.history = null;
-                                            tmp_entry_obj.history_md_html = null;
-
-                                            // TO DO: Use this to toggle and trigger the clearing of the decrypted content/history :TO DO
-                                            $journals_sess.entry.decrypt_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = false;
-                                            // TO DO: Use this to toggle and trigger the clearing of the decrypted content/history :TO DO
-                                        }
-                                    }
-                                    console.log('TEST: tmp_entry_obj:', tmp_entry_obj);
-                                }}
-                                class:hidden={!$lq__journal_entry_obj?.private ||
-                                    !tmp_entry_obj?.content_encrypted}
-                                class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                                title="Toggle viewing/editing of private encrypted content"
-                            >
-                                {#if $lq__journal_entry_obj?.private && tmp_entry_obj?.content}
-                                    <LockKeyholeOpen strokeWidth="2.5" color="red" />
-                                {:else if $lq__journal_entry_obj?.private && tmp_entry_obj?.content_encrypted}
-                                    <LockKeyhole strokeWidth="2.5" color="green" />
-                                    <!-- <Fingerprint strokeWidth="2.5" color="green" /> -->
-                                    <!-- {:else if $lq__journal_entry_obj?.private}
-                    <Fingerprint strokeWidth="2.5" color="green" />
-                {:else}
-                    <Fingerprint strokeWidth="1" color="gray" /> -->
-                                {/if}
-                            </button>
-                        </span>
-
-                        <!-- Entry allowed to be public -->
-                        <button
-                            type="button"
-                            class:hidden={$lq__journal_obj?.cfg_json?.hide_btn_public}
-                            onclick={() => {
-                                if (tmp_entry_obj) {
-                                    tmp_entry_obj.public = !$lq__journal_entry_obj?.public;
-                                    update_journal_entry();
-                                }
-                            }}
-                            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                            title="Toggle public visibility of this journal entry"
-                        >
-                            {#if $lq__journal_entry_obj?.public}
-                                <Globe strokeWidth="2.5" color="green" />
-                            {:else}
-                                <Globe strokeWidth="1" color="gray" />
-                            {/if}
-                        </button>
-
-                        <!-- Entry marked as personal -->
-                        <button
-                            type="button"
-                            class:hidden={$lq__journal_obj?.cfg_json?.hide_btn_personal}
-                            onclick={() => {
-                                if (tmp_entry_obj) {
-                                    tmp_entry_obj.personal = !$lq__journal_entry_obj?.personal;
-                                    update_journal_entry();
-                                }
-                            }}
-                            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                            title="Toggle personal visibility of this journal entry"
-                        >
-                            {#if $lq__journal_entry_obj?.personal}
-                                <BookHeart strokeWidth="2.5" color="green" />
-                            {:else}
-                                <BookHeart strokeWidth="1" color="gray" />
-                            {/if}
-                        </button>
-
-                        <!-- Entry marked as professional -->
-                        <button
-                            type="button"
-                            class:hidden={$lq__journal_obj?.cfg_json?.hide_btn_professional}
-                            onclick={() => {
-                                if (tmp_entry_obj) {
-                                    tmp_entry_obj.professional =
-                                        !$lq__journal_entry_obj?.professional;
-                                    update_journal_entry();
-                                }
-                            }}
-                            class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
-                            title="Toggle professional visibility of this journal entry"
-                        >
-                            {#if $lq__journal_entry_obj?.professional}
-                                <BriefcaseBusiness strokeWidth="2.5" color="green" />
-                            {:else}
-                                <BriefcaseBusiness strokeWidth="1" color="gray" />
-                            {/if}
-                        </button>
-                    </span>
-                </div>
-
-                <!-- <section class="relative"> -->
-                <section class="relative transition-all">
-                    <!-- Menu Button -->
-                    <button
-                        type="button"
-                        onclick={() => (show_menu = !show_menu)}
-                        class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
-                        title="Toggle menu"
-                    >
-                        <Menu size="1.5em" class="inline-block" />
-                        <span class="hidden md:inline">Menu</span>
-                    </button>
-
-                    <!-- Menu -->
-                    <!-- {#if show_menu} -->
-                    <div
-                        class="
-                absolute top-12 right-0
-                p-4 z-50 w-80
-                space-y-0.5
-                bg-white dark:bg-gray-800
-                border border-gray-500
-                shadow-xl rounded-lg
-                min-w-72
-                max-w-fit
-                "
-                        class:hidden={!show_menu}
-                    >
-                        <!-- <div class="flex flex-row flex-wrap gap-1 items-center justify-end"> -->
-
-                        <!-- Category code for journal entry -->
-                        <!-- Give list of categories to base the new entry on -->
-                        <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="novi_btn btn btn-secondary btn-sm
-                        preset-tonal-primary
-                        hover:preset-filled-primary-500
-                        transition
-                        text-sm
-                        w-full
-                        "
-                                bind:value={tmp_entry_obj.category_code}
-                                onchange={(event) => {
-                                    tmp_entry_obj.category_code = (
-                                        event.target as HTMLInputElement
-                                    ).value;
-                                    console.log('Selected category:', tmp_entry_obj.category_code);
-
-                                    update_journal_entry();
-                                }}
-                                title="Select a category for the new journal entry"
-                            >
-                                <option value="">Select Category</option>
-                                {#each $lq__journal_obj?.cfg_json.category_li as category}
-                                    <option
-                                        value={category.code}
-                                        selected={$lq__journal_entry_obj.category_code ==
-                                            category.code}
-                                        title={`Category: ${category.name}`}
-                                    >
-                                        {category.name}
-                                    </option>
-                                {/each}
-                            </select>
-                        </div>
-
-                        <!-- Should tags be here as well? -->
-
-                        <!-- </div> -->
-
-                        <!-- Journal Entry Options: alert, private, public, personal, professional, template -->
-                        <AE_ObjectFlags
-                            bind:obj={tmp_entry_obj}
-                            onToggle={() => update_journal_entry()}
-                            hideAlert={$lq__journal_obj?.cfg_json?.hide_btn_alert}
-                            hidePrivate={$lq__journal_obj?.cfg_json?.hide_btn_private}
-                            hidePublic={$lq__journal_obj?.cfg_json?.hide_btn_public}
-                            hidePersonal={$lq__journal_obj?.cfg_json?.hide_btn_personal}
-                            hideProfessional={$lq__journal_obj?.cfg_json?.hide_btn_professional}
-                            hideTemplate={$lq__journal_obj?.cfg_json?.hide_btn_template}
-                        />
-
-                        <!-- Copy and Clone Buttons -->
-                        <div>
-                            <!-- Button to copy the Markdown version -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    navigator.clipboard
-                                        .writeText(tmp_entry_obj.content)
-                                        .then(() => {
-                                            alert('Markdown content copied to clipboard!');
-                                        })
-                                        .catch((error) => {
-                                            console.error('Failed to copy content:', error);
-                                            alert('Failed to copy content.');
-                                        });
-                                }}
-                                class="btn btn-sm w-full mb-2 p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                                title="Copy the markdown content"
-                            >
-                                <Copy size="1em" />
-                                <RemoveFormatting size="2em" />
-                                <span class="hidden md:inline"> Copy Plaintext Markdown </span>
-                            </button>
-                            <!-- Button to copy the HTML version -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    // Copy the HTML content to clipboard
-                                    const htmlContent =
-                                        $lq__journal_entry_obj?.content_md_html || '';
-                                    navigator.clipboard
-                                        .writeText(htmlContent)
-                                        .then(() => {
-                                            alert('HTML content copied to clipboard!');
-                                        })
-                                        .catch((error) => {
-                                            console.error('Failed to copy HTML content:', error);
-                                            alert('Failed to copy HTML content.');
-                                        });
-                                }}
-                                class="btn btn-sm w-full mb-2 p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                                title="Copy the HTML content"
-                            >
-                                <Copy size="1em" />
-                                <CodeXml size="2em" />
-                                <span class="hidden md:inline"> Copy HTML </span>
-                            </button>
-
-                            <!-- Button to copy the rich text (rendered HTML) version -->
-                            <button
-                                type="button"
-                                onclick={async () => {
-                                    const element = document.getElementById(
-                                        `rendered_journal_entry_content_${$lq__journal_entry_obj?.journal_entry_id}`
-                                    );
-                                    if (!element) {
-                                        console.error(
-                                            'Element not found: rendered_journal_entry_content'
-                                        );
-                                        alert('Failed to copy rich content.');
-                                        return;
-                                    }
-
-                                    try {
-                                        // Get the rendered HTML content
-                                        const htmlContent = element.innerHTML;
-
-                                        // Use the Clipboard API to write the HTML content as rich text
-                                        await navigator.clipboard.write([
-                                            new ClipboardItem({
-                                                'text/html': new Blob([htmlContent], {
-                                                    type: 'text/html'
-                                                })
-                                            })
-                                        ]);
-
-                                        alert('Rendered rich content copied to clipboard!');
-                                    } catch (error) {
-                                        console.error('Failed to copy rich content:', error);
-                                        alert('Failed to copy rich content.');
-                                    }
-                                }}
-                                class="btn btn-sm w-full mb-2 p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                                title="Copy the rich text (rendered HTML) content"
-                            >
-                                <Copy size="1em" />
-                                <TypeOutline size="2em" />
-                                <span class="hidden md:inline"> Copy Rich Text </span>
-                            </button>
-
-                            <!-- Clone entry -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    // Clone the journal entry
-                                    // We only want to clone certain fields from the original journal entry object to avoid conflicts.
-                                    let data_kv = {
-                                        code: $lq__journal_entry_obj?.code,
-                                        category_code: $lq__journal_entry_obj?.category_code,
-                                        name: $lq__journal_entry_obj?.name,
-                                        short_name: $lq__journal_entry_obj?.short_name,
-                                        content: $lq__journal_entry_obj?.content,
-                                        description: $lq__journal_entry_obj?.description,
-                                        tags: $lq__journal_entry_obj?.tags
-                                    };
-
-                                    journals_func
-                                        .create_ae_obj__journal_entry({
-                                            api_cfg: $ae_api,
-                                            journal_id: $lq__journal_entry_obj?.journal_id,
-                                            data_kv: data_kv,
-                                            log_lvl: log_lvl
-                                        })
-                                        .then((result) => {
-                                            alert('Journal entry cloned successfully!');
-                                            goto(
-                                                `/journals/${result.journal_id_random}/entry/${result.journal_entry_id_random}`
-                                            );
-                                        })
-                                        .catch((error) => {
-                                            console.error('Error cloning journal entry:', error);
-                                            alert('Failed to clone journal entry.');
-                                        });
-                                }}
-                                class="btn btn-sm w-full mb-2 p-1 preset-tonal-secondary hover:preset-filled-secondary-500 *:hover:inline lg:text-xs"
-                                title="Clone this journal entry"
-                            >
-                                <!-- class="btn btn-sm variant-soft-surface hover:variant-filled-warning transition py-1 px-2" -->
-                                <!-- <Copy strokeWidth="1" /> -->
-                                <Copy size="2em" />
-                                <span class="hidden md:inline"> Clone Entry </span>
-                            </button>
-                        </div>
-
-                        <!-- Journal Entry history information and options -->
-                        <!-- If there is history, then we want a toggle button to show and hide the history. -->
-                        {#if $lq__journal_entry_obj?.history || $lq__journal_entry_obj?.history_encrypted}
-                            <div
-                                class="
-                    flex flex-row-reverse flex-wrap gap-1 items-center justify-center
-                    "
-                            >
-                                <button
-                                    type="button"
-                                    onclick={async () => {
-                                        if (
-                                            !$journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ]
-                                        ) {
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = 'history';
-                                            $journals_sess.show__content__journal_entry_history =
-                                                'view';
-                                        } else if (
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] == 'current'
-                                        ) {
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = 'history';
-                                            $journals_sess.show__content__journal_entry_history =
-                                                'view';
-                                        } else if (
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] == 'history'
-                                        ) {
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = false;
-                                        } else {
-                                            $journals_loc.entry.edit_kv[
-                                                $lq__journal_entry_obj?.journal_entry_id
-                                            ] = false;
-                                        }
-
-                                        if (tmp_entry_obj?.history_encrypted) {
-                                            decrypted_history = await ae_util.decrypt_wrapper(
-                                                tmp_entry_obj?.history_encrypted,
-                                                journal_key
-                                            );
-                                            console.log('Decrypted history:', decrypted_history);
-                                            tmp_entry_obj.history = decrypted_history;
-                                        }
-                                    }}
-                                    class:preset-filled-secondary-500={$journals_loc.entry.edit_kv[
-                                        $lq__journal_entry_obj?.journal_entry_id
-                                    ] == 'history'}
-                                    class:preset-tonal-secondary={$journals_loc.entry.edit_kv[
-                                        $lq__journal_entry_obj?.journal_entry_id
-                                    ] != 'history'}
-                                    class="btn btn-sm hover:preset-filled-secondary-500 *:hover:inline lg:text-xs w-full"
-                                    title="Toggle history of this journal entry"
-                                >
-                                    {#if !$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
-                                        <History strokeWidth="1" color="gray" />
-                                    {:else if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history'}
-                                        <History strokeWidth="2.5" color="red" />
-                                    {/if}
-                                    <span class="hidden sm:inline text-sm"> Review History</span>
-                                </button>
-
-                                <button
-                                    type="button"
-                                    class:hidden={!(
-                                        $journals_loc.entry.edit_kv[
-                                            $lq__journal_entry_obj?.journal_entry_id
-                                        ] == 'history'
-                                    )}
-                                    onclick={async () => {
-                                        if (
-                                            !$journals_sess?.show__content__journal_entry_history ||
-                                            $journals_sess.show__content__journal_entry_history ==
-                                                'view'
-                                        ) {
-                                            $journals_sess.show__content__journal_entry_history =
-                                                'edit';
-                                        } else if (
-                                            $journals_sess.show__content__journal_entry_history ==
-                                            'edit'
-                                        ) {
-                                            $journals_sess.show__content__journal_entry_history =
-                                                'view';
-                                        }
-                                        console.log(
-                                            'History edit mode:',
-                                            $journals_sess.show__content__journal_entry_history
-                                        );
-
-                                        if (tmp_entry_obj?.history_encrypted) {
-                                            let history_cleaned: null | string = null;
-                                            let history_md_html: null | string = null;
-
-                                            decrypted_history = await ae_util.decrypt_wrapper(
-                                                tmp_entry_obj?.history_encrypted,
-                                                journal_key
-                                            );
-
-                                            console.log('Decrypted history:', decrypted_history);
-                                            tmp_entry_obj.history = decrypted_history;
-
-                                            history_cleaned = decrypted_history.replace(
-                                                /^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,
-                                                ''
-                                            );
-                                            history_md_html =
-                                                (await marked.parse(history_cleaned ?? '')) ?? null;
-                                            tmp_entry_obj.history_md_html = history_md_html;
-                                            console.log('History md html:', history_md_html);
-                                        }
-                                    }}
-                                    class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 *:hover:inline lg:text-xs"
-                                    title="Toggle edit mode for history of this journal entry"
-                                >
-                                    {#if !$journals_sess?.show__content__journal_entry_history || $journals_sess?.show__content__journal_entry_history == 'view'}
-                                        <Pencil
-                                            strokeWidth="2.5"
-                                            color="blue"
-                                            class="inline-block"
-                                        />
-                                    {:else if $journals_sess?.show__content__journal_entry_history == 'edit'}
-                                        <PenLine
-                                            strokeWidth="2.5"
-                                            color="red"
-                                            class="inline-block"
-                                        />
-                                    {/if}
-                                    <span class="hidden sm:inline">
-                                        {#if !$journals_sess?.show__content__journal_entry_history || $journals_sess?.show__content__journal_entry_history == 'view'}
-                                            Edit?
-                                        {:else if $journals_sess.show__content__journal_entry_history == 'edit'}
-                                            View?
-                                        {/if}
-                                    </span>
-                                </button>
-                            </div>
-                        {/if}
-
-                        <!-- AI Summary Logic -->
-
-
-                        <div class="divider my-2"></div>
-
-                        <!-- Core Object Properties -->
-                        <div>
-                            <!-- Set/unset priority (boolean) -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    if (tmp_entry_obj) {
-                                        tmp_entry_obj.priority = !$lq__journal_entry_obj?.priority;
-                                        update_journal_entry();
-                                    }
-                                }}
-                                class="btn w-full mb-2 preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
-                                title="Toggle priority of this journal entry"
-                            >
-                                {#if $lq__journal_entry_obj?.priority}
-                                    <Flag strokeWidth="2.5" color="green" class="inline-block" />
-                                {:else}
-                                    <FlagOff strokeWidth="1" color="gray" class="inline-block" />
-                                {/if}
-                                <span class="hidden lg:inline"> Priority </span>
-                            </button>
-
-                            <!-- Set sort order (number) -->
-                            <span
-                                class:hidden={!$ae_loc.edit_mode}
-                                class="w-full mb-2 flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg"
-                            >
-                                <button
-                                    type="button"
-                                    onclick={() => {
-                                        console.log('Incrementing sort order');
-                                        tmp_entry_obj.sort = $lq__journal_entry_obj?.sort
-                                            ? $lq__journal_entry_obj?.sort + 1
-                                            : 1;
-                                        console.log('Incremented sort order:', tmp_entry_obj.sort);
-                                        update_journal_entry();
-                                    }}
-                                    class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
-                                    title="Increment sort order of this journal entry"
-                                >
-                                    <Plus strokeWidth="2.5" color="blue" />
-                                </button>
-                                <span class="mx-1">
-                                    {#if $lq__journal_entry_obj?.sort}
-                                        {$lq__journal_entry_obj.sort}
-                                    {:else}
-                                        <!-- <ArrowDown01 /> -->
-                                        <ArrowDown10 />
-                                    {/if}
-                                </span>
-                                <button
-                                    type="button"
-                                    onclick={() => {
-                                        console.log('Decrementing sort order');
-                                        tmp_entry_obj.sort = $lq__journal_entry_obj?.sort
-                                            ? $lq__journal_entry_obj?.sort - 1
-                                            : 0;
-                                        console.log('Decremented sort order:', tmp_entry_obj.sort);
-                                        update_journal_entry();
-                                    }}
-                                    class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
-                                    title="Decrement sort order of this journal entry"
-                                >
-                                    <Minus strokeWidth="2.5" color="blue" />
-                                </button>
-                            </span>
-
-                            <!-- Set group (string) -->
-                            <input
-                                type="text"
-                                bind:value={tmp_entry_obj.group}
-                                placeholder="Group"
-                                onchange={() => {
-                                    update_journal_entry();
-                                }}
-                                class:hidden={!$ae_loc.edit_mode}
-                                class="input input-sm input-bordered w-full mb-2"
-                                title="Set group (for sorting) of this journal entry"
-                            />
-
-                            <!-- Set archive datetime (string) -->
-                            <span
-                                class="w-full mb-2 flex flex-row flex-wrap items-center justify-center border border-gray-200 rounded-lg"
-                            >
-                                <input
-                                    type="datetime-local"
-                                    bind:value={tmp_entry_obj.archive_on}
-                                    placeholder="Archive On"
-                                    onchange={() => {
-                                        update_journal_entry();
-                                    }}
-                                    class:hidden={!$ae_loc.edit_mode}
-                                    class="input input-sm input-bordered w-auto border-none"
-                                    title="Set archive on datetime for archiving this journal entry"
-                                />
-
-                                {#if $lq__journal_entry_obj?.archive_on}
-                                    <!-- Button to clear the datetime -->
-                                    <button
-                                        type="button"
-                                        onclick={() => {
-                                            tmp_entry_obj.archive_on = null;
-                                            update_journal_entry();
-                                        }}
-                                        class:hidden={!$ae_loc.edit_mode}
-                                        class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
-                                        title="Clear the archive on datetime for this journal entry"
-                                    >
-                                        <X strokeWidth="2.5" color="red" />
-                                        <!-- <span class="hidden">Clear Archive</span> -->
-                                    </button>
-                                {:else}
-                                    <!-- Button to set the datetime to now -->
-                                    <button
-                                        type="button"
-                                        onclick={() => {
-                                            // tmp_entry_obj.archive_on = new Date().toISOString();
-                                            // console.log('Archive on datetime set to now:', tmp_entry_obj.archive_on);
-                                            tmp_entry_obj = {
-                                                ...tmp_entry_obj,
-                                                archive_on: new Date().toISOString()
-                                            };
-                                            console.log(
-                                                'Archive on datetime set to now:',
-                                                tmp_entry_obj.archive_on
-                                            );
-                                            update_journal_entry();
-                                        }}
-                                        class:hidden={!$ae_loc.edit_mode}
-                                        class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
-                                        title="Set the archive on datetime for this journal entry"
-                                    >
-                                        <Clock strokeWidth="2.5" color="blue" />
-                                        <!-- <span class="hidden">Set Archive</span> -->
-                                    </button>
-                                {/if}
-                            </span>
-
-                            <!-- Set/unset hide (boolean) -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    if (tmp_entry_obj) {
-                                        tmp_entry_obj.hide = !$lq__journal_entry_obj?.hide;
-                                        update_journal_entry();
-                                    }
-                                }}
-                                class="btn btn-sm md:btn-md w-full mb-2 preset-tonal-warning hover:preset-filled-warning-500 transition"
-                                title="Toggle visibility of this journal entry"
-                            >
-                                {#if $lq__journal_entry_obj?.hide}
-                                    <EyeOff strokeWidth="1" color="red" class="inline-block" />
-                                    <span class="hidden md:inline">Hidden</span>
-                                {:else}
-                                    <Eye strokeWidth="2.5" color="green" class="inline-block" />
-                                    <span class="hidden md:inline">Visible</span>
-                                {/if}
-                            </button>
-
-                            <!-- Set/unset enable (boolean) -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    if (tmp_entry_obj) {
-                                        tmp_entry_obj.enable = !$lq__journal_entry_obj?.enable;
-                                        update_journal_entry();
-                                    }
-                                }}
-                                class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
-                                class="btn btn-sm md:btn-md w-full mb-2 preset-tonal-error hover:preset-filled-error-500 transition"
-                                title="Toggle enable status of this journal entry"
-                            >
-                                {#if $lq__journal_entry_obj?.enable}
-                                    <ShieldCheck
-                                        strokeWidth="2.5"
-                                        color="green"
-                                        class="inline-block"
-                                    />
-                                    <span class="hidden md:inline">Enabled</span>
-                                {:else}
-                                    <ShieldMinus strokeWidth="1" color="red" class="inline-block" />
-                                    <span class="hidden md:inline">Disabled</span>
-                                {/if}
-                            </button>
-
-                            <!-- Delete journal entry -->
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    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';
-                                        }
-                                        journals_func
-                                            .delete_ae_obj_id__journal_entry({
-                                                api_cfg: $ae_api,
-                                                journal_entry_id:
-                                                    $lq__journal_entry_obj?.journal_entry_id,
-                                                method: delete_method, // 'delete', 'disable', 'hide'
-                                                log_lvl: log_lvl
-                                            })
-                                            .then(() => {
-                                                // Optionally, you can provide feedback to the user
-                                                alert('Journal entry deleted successfully!');
-                                            })
-                                            .catch((error) => {
-                                                console.error(
-                                                    'Error deleting journal entry:',
-                                                    error
-                                                );
-                                                alert('Failed to delete journal entry.');
-                                            })
-                                            .finally(() => {
-                                                goto(`/journals/${$journals_slct.journal_id}`);
-                                                // $journals_slct.journal_id = null;
-                                                // $journals_slct.journal_obj = null;
-                                            });
-                                    }
-                                }}
-                                class:hidden={!$ae_loc.edit_mode}
-                                class="btn btn-sm md:btn-md w-full mb-2 preset-tonal-error hover:preset-filled-error-500 transition"
-                                title="Delete this journal entry"
-                            >
-                                {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
-                                    <FileX strokeWidth="2.5" color="red" class="inline-block" />
-                                    <span class="hidden md:inline">Delete</span>
-                                {:else}
-                                    <Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
-                                    <span class="hidden md:inline">Remove</span>
-                                {/if}
-                            </button>
-                        </div>
-
-                        <!-- Select option list of Journals to choose from. This is used to assign the Journal Entry to a different Journal ID. -->
-                        {#if $ae_loc.edit_mode && $lq__journal_obj_li?.length}
-                            <div
-                                class="w-full flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg p-1"
-                            >
-                                <span class="w-full text-center">
-                                    <SquareLibrary size="1em" class="mx-1 inline-block text-primary-500" />
-                                    <span class="text-xs text-gray-500 hidden sm:inline uppercase font-bold tracking-wider">
-                                        Move to Journal:
-                                    </span>
-                                </span>
-
-                                <select
-                                    class="select select-sm w-full bg-surface-500/10 border-none text-xs"
-                                    bind:value={tmp_entry_obj.journal_id}
-                                    onchange={() => {
-                                        if (confirm(`Are you sure you want to change the journal for this entry?`)) {
-                                            change_journal_id();
-                                        }
-                                    }}
-                                >
-                                    <option value="">Select Journal</option>
-                                    {#each $lq__journal_obj_li as journal}
-                                        <option value={journal.journal_id}>
-                                            {journal.name}
-                                        </option>
-                                    {/each}
-                                </select>
-                            </div>
-                        {/if}
-                    </div>
-                </section>
-            </div>
-        </header>
+        <JournalEntry_Header
+            entry={$lq__journal_entry_obj}
+            journal={$lq__journal_obj}
+            journals_li={$lq__journal_obj_li}
+            bind:tmp_entry_obj
+            has_changed={tmp_entry_obj_changed}
+            onSave={update_journal_entry}
+            onDecrypt={handle_content_decryption}
+            onDecryptHistory={handle_history_decryption}
+            onChangeJournal={change_journal_id}
+            {log_lvl}
+        />
+        
 
         <section
             class="
@@ -1563,25 +553,7 @@
                 />
             </div>
 
-                        <!-- Main Content Editor/Viewer -->
 
-                        <JournalEntry_Editor
-
-                            entry={$lq__journal_entry_obj}
-
-                            journal={$lq__journal_obj}
-
-                            bind:tmp_entry_obj={tmp_entry_obj}
-
-                            bind:editorView={editorView}
-
-                            has_changed={tmp_entry_obj_changed}
-
-                            updated_idb={updated_idb}
-
-                            onSave={update_journal_entry}
-
-                        />
 
 
 
@@ -1606,7 +578,7 @@
                             readonly={true}
                             content={tmp_entry_obj?.history ?? ''}
                             bind:new_content={tmp_entry_obj.history}
-                            bind:theme_mode={$ae_loc.theme_mode}
+                            theme_mode={$ae_loc.theme_mode}
                             placeholder="History content..."
                             class="p-2 preset-outlined-success-400-600 hover:preset-tonal-surface shadow-lg rounded-lg"
                         />
@@ -1614,7 +586,7 @@
                         <E_app_codemirror_v5
                             content={tmp_entry_obj?.history ?? ''}
                             bind:new_content={tmp_entry_obj.history}
-                            bind:theme_mode={$ae_loc.theme_mode}
+                            theme_mode={$ae_loc.theme_mode}
                             placeholder="Edit history..."
                             class="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg bg-gray-100 text-gray-950 dark:bg-gray-800 dark:text-gray-100"
                         />