From 13b8255055fc657c0f9744153d8abb5518287175 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 6 May 2025 17:07:10 -0400
Subject: [PATCH] Work on encryption and other clean up.

---
 .../ae_comp__journal_entry_obj_id_view.svelte |  70 ++--
 .../journals/ae_comp__obj_core_props.svelte   | 322 ++++++++++++++++++
 2 files changed, 363 insertions(+), 29 deletions(-)
 create mode 100644 src/routes/journals/ae_comp__obj_core_props.svelte

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 08f721ee..12188670 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
@@ -2,7 +2,7 @@
 // *** Import Svelte specific
 import { goto } from '$app/navigation';
 // import { clipboard } from '@skeletonlabs/skeleton';
-
+import { marked } from 'marked';
 import {
         ArrowDown01, ArrowDown10, ArrowDownUp,
         BookHeart, BriefcaseBusiness,
@@ -12,7 +12,7 @@ import {
         Globe, Group,
         History,
         LockKeyhole, LockKeyholeOpen,
-        MessageSquareWarning, Minus,
+        MessageSquareWarning, Menu, Minus,
         NotebookPen, NotebookText, NotepadTextDashed,
         Pencil, PenLine, Plus,
         RemoveFormatting,
@@ -193,7 +193,7 @@ async function update_journal_entry() {
                 decrypted_history = tmp_entry_obj?.history;
             }
 
-            data_kv.history = decrypted_history + '\n' + cut_out_string;
+            data_kv.history = decrypted_history ?? '' + '\n' + cut_out_string;
             data_kv.history_encrypted = null;
             decrypted_history = '';
         } else if (tmp_entry_obj?.private) {
@@ -211,7 +211,7 @@ async function update_journal_entry() {
             decrypted_history = await handle_decrypt_string(tmp_entry_obj?.history_encrypted, journal_key);
 
             if (tmp_entry_obj?.history) {
-                data_kv.history = tmp_entry_obj?.history + '\n' + decrypted_history + '\n' + cut_out_string;
+                data_kv.history = tmp_entry_obj?.history ?? '' + '\n' + decrypted_history + '\n' + cut_out_string;
             } else {
                 data_kv.history = decrypted_history + '\n' + cut_out_string;
             }
@@ -284,12 +284,12 @@ async function update_journal_entry() {
 
         // // // Encrypt the content
         // // let encrypted_base64 = await ae_util.encrypt_content(content, journal_key);
-        // // encrypted_base64_content = encrypted_base64.base64;
+        // // encrypted_base64_string = encrypted_base64.base64;
         // // encryption_iv = encrypted_base64.iv;
-        // // console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_content}`);
+        // // console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_string}`);
 
         // // // Combine the IV and encrypted content
-        // // const combined_data = Array.from(encryption_iv).map(byte => byte.toString(16).padStart(2, '0')).join('') + ':' + encrypted_base64_content;
+        // // const combined_data = Array.from(encryption_iv).map(byte => byte.toString(16).padStart(2, '0')).join('') + ':' + encrypted_base64_string;
 
         // let combined_data = await handle_encrypt_string(content, journal_key);
 
@@ -405,7 +405,7 @@ let journal_key = $derived(() => {
 });
 // console.log('TEST: journal_key', journal_key);
 let content = ''; // "This is my test content to encrypt and decrypt.";
-let encrypted_base64_content: string = $state('');
+let encrypted_base64_string: string = $state('');
 let encryption_iv: null|Uint8Array<ArrayBuffer> = $state(null);
 let decrypted_content: string = $state('');
 let trigger_decrypt: boolean = $state(false);
@@ -431,10 +431,10 @@ $effect(() => {
 //     //     content = tmp_entry_obj?.content;
 
 //     //     let encrypted_base64 = await ae_util.encrypt_content(content, journal_key);
-//     //     encrypted_base64_content = encrypted_base64.base64;
+//     //     encrypted_base64_string = encrypted_base64.base64;
 //     //     encryption_iv = encrypted_base64.iv;
 
-//     //     let decrypted = await ae_util.decrypt_content(encrypted_base64_content, encryption_iv, journal_key);
+//     //     let decrypted = await ae_util.decrypt_content(encrypted_base64_string, encryption_iv, journal_key);
 //     //     decrypted_content = decrypted;
 //     //     if (log_lvl) {
 //     //         console.log('Decrypted content:', decrypted_content);
@@ -450,21 +450,21 @@ $effect(() => {
 //         console.log('TEST: handle_decrypt_content');
 //     }
 //     let combined_data = tmp_entry_obj?.content_encrypted;
-//     let [encryption_iv_hex, encrypted_base64_content] = combined_data.split(':');
+//     let [encryption_iv_hex, encrypted_base64_string] = combined_data.split(':');
 //     encryption_iv = new Uint8Array(encryption_iv_hex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
 //     if (log_lvl) {
-//         console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_content}`);
+//         console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_string}`);
 //     }
 
 //     let decrypted: string|null = null;
 //     try {
-//         decrypted = await ae_util.decrypt_content(encrypted_base64_content, encryption_iv, journal_key);
+//         decrypted = await ae_util.decrypt_content(encrypted_base64_string, encryption_iv, journal_key);
 //     } catch (error) {
 //         console.error('Error decrypting content:', error);
 //         alert('Failed to decrypt content. Please check the passcode.');
 //         return;
 //     }
-//     // let decrypted = await ae_util.decrypt_content(encrypted_base64_content, encryption_iv, journal_key);
+//     // let decrypted = await ae_util.decrypt_content(encrypted_base64_string, encryption_iv, journal_key);
 //     // decrypted_content = 'XXX '+decrypted+' XXX';
 
 //     if (!decrypted) {
@@ -497,21 +497,24 @@ async function handle_decrypt_string(encrypted_string: string, passcode: string)
     }
 
     let combined_data = encrypted_string;
-    let [encryption_iv_hex, encrypted_base64_content] = combined_data.split(':');
+    let [encryption_iv_hex, encrypted_base64_string] = combined_data.split(':');
     encryption_iv = new Uint8Array(encryption_iv_hex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
     if (log_lvl) {
-        console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_content}`);
+        console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_string}`);
     }
 
     // Decrypt the string using the journal key
     let decrypted_string = '';
     try {
-        decrypted_string = await ae_util.decrypt_content(encrypted_base64_content, encryption_iv, passcode);
+        decrypted_string = await ae_util.decrypt_content(encrypted_base64_string, encryption_iv, passcode);
     } catch (error) {
-        console.error('Error decrypting content:', error);
-        alert('Failed to decrypt content. Please check the passcode.');
+        console.error('Error decrypting string:', error);
+        alert('Failed to decrypt string. Please check the passcode.');
         return;
     }
+    if (log_lvl) {
+        console.log('Decrypted string:', decrypted_string);
+    }
     return decrypted_string;
 }
 
@@ -531,12 +534,12 @@ async function handle_encrypt_string(text_string: string, passcode: string) {
 
     // Encrypt the string using the journal key
     let encrypted_base64 = await ae_util.encrypt_content(text_string, passcode);
-    let encrypted_base64_content = encrypted_base64.base64;
+    let encrypted_base64_string = encrypted_base64.base64;
     let encryption_iv = encrypted_base64.iv;
-    console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_content}`);
+    console.log(`IV: ${encryption_iv}; Encrypted: ${encrypted_base64_string}`);
 
     // Combine the IV and encrypted content
-    const combined_data = Array.from(encryption_iv).map(byte => byte.toString(16).padStart(2, '0')).join('') + ':' + encrypted_base64_content;
+    const combined_data = Array.from(encryption_iv).map(byte => byte.toString(16).padStart(2, '0')).join('') + ':' + encrypted_base64_string;
 
     return combined_data;
 }
@@ -636,7 +639,7 @@ function handle_cut_string(old_string: string) {
             >
             {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
                 <!-- <Pencil strokeWidth="2.5" color="blue" /> -->
-                <PenLine strokeWidth="2.5" color="blue" />
+                <PenLine strokeWidth="2.5" color="red" />
             {:else}
                 <Pencil strokeWidth="1" color="gray" />
             {/if}
@@ -1196,7 +1199,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
     }} -->
 
     <!-- {@html encrypt_content($lq__journal_entry_obj?.content, journal_key)} -->
-    <!-- --{@html encrypted_base64_content}-- -->
+    <!-- --{@html encrypted_base64_string}-- -->
     <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
 
 {:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
@@ -1362,24 +1365,33 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
             }
 
             if (tmp_entry_obj?.history_encrypted) {
+                let history_cleaned: null|string = null;
+                let history_md_html: null|string = null;
+
                 decrypted_history = await handle_decrypt_string(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 cleaned:', history_cleaned);
+                console.log('History md html:', history_md_html);
             }
         }}
         class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
         title="Toggle edit mode for history of this journal entry"
         >
         {#if $journals_sess.show__content__journal_entry_history == 'view'}
-            <PenLine strokeWidth="2.5" color="blue" class="inline-block" />
-        {:else if $journals_sess.show__content__journal_entry_history == 'edit'}
             <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 == 'view'}
-                Edit
+                Edit?
             {:else if $journals_sess.show__content__journal_entry_history == 'edit'}
-                View
+                View?
             {/if}
         </span>
     </button>
@@ -1419,7 +1431,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
                 prose-li:m-0 prose-li:p-0 prose-li:line-height-none
                 "
             >
-            {@html $lq__journal_entry_obj?.history_md_html}
+            {@html tmp_entry_obj?.history_md_html}
         </article>
     {:else if $journals_sess?.show__content__journal_entry_history == 'edit'}
         <textarea
diff --git a/src/routes/journals/ae_comp__obj_core_props.svelte b/src/routes/journals/ae_comp__obj_core_props.svelte
new file mode 100644
index 00000000..d797c6aa
--- /dev/null
+++ b/src/routes/journals/ae_comp__obj_core_props.svelte
@@ -0,0 +1,322 @@
+<script lang="ts">
+// *** Import Svelte specific
+
+import {
+        ArrowDown01, ArrowDown10, ArrowDownUp,
+        BookHeart, BriefcaseBusiness,
+        CalendarClock, CalendarOff, Clock, CodeXml, Copy,
+        Eye, EyeOff,
+        Flag, FlagOff, FileX, Fingerprint,
+        Globe, Group,
+        History,
+        LockKeyhole, LockKeyholeOpen,
+        MessageSquareWarning, Minus,
+        NotebookPen, NotebookText, NotepadTextDashed,
+        Pencil, PenLine, Plus,
+        RemoveFormatting,
+        Search,
+        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
+        SquareLibrary,
+        Tags, Trash2, TypeOutline,
+        X
+    } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+
+interface Props {
+    log_lvl?: number;
+    obj_priority: any;
+    obj_sort: any;
+    obj_group: any;
+    obj_archive_on: any;
+    obj_hide: any;
+    obj_enable: any;
+    obj_delete: any;
+}
+
+let {
+    log_lvl = 0,
+    obj_priority,
+    obj_sort,
+    obj_group,
+    obj_archive_on,
+    obj_hide,
+    obj_enable,
+    obj_delete
+}: Props = $props();
+
+let ae_promises: key_val = $state({});
+
+
+</script>
+
+<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
+<!-- {$lq__journal_entry_obj?.priority}
+{$lq__journal_entry_obj?.sort}
+{$lq__journal_entry_obj?.group}
+{obj_hide}
+{obj_enable} -->
+
+<!-- Set/unset priority (boolean) -->
+<button
+    type="button"
+    onclick={() => {
+        obj_priority = !obj_priority;
+        // update_journal_entry();
+    }}
+    class="btn-icon btn-icon-sm md:btn-icon-base variant-soft-tertiary transition hover:variant-filled-tertiary"
+    title="Toggle priority of this journal entry"
+    >
+    {#if 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="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
+<button
+    type="button"
+    onclick={() => {
+        obj_sort = obj_sort ? obj_sort + 1 : 1;
+        // update_journal_entry();
+    }}
+    class="btn-icon-sm variant-soft-tertiary transition hover:variant-filled-tertiary"
+    title="Increment sort order of this journal entry"
+    >
+    <Plus strokeWidth="2.5" color="blue" />
+</button>
+<span class="mx-1">
+    {#if obj_sort}
+        {obj_sort}
+    {:else}
+        <!-- <ArrowDown01 /> -->
+        <ArrowDown10 />
+    {/if}
+</span>
+<button
+    type="button"
+    onclick={() => {
+        obj_sort = obj_sort ? obj_sort - 1 : 0;
+        // update_journal_entry();
+    }}
+    class="btn-icon-sm variant-soft-tertiary transition hover:variant-filled-tertiary"
+    title="Decrement sort order of this journal entry"
+    >
+    <Minus strokeWidth="2.5" color="blue" />
+</button>
+</span>
+
+
+<!-- Set group (string) -->
+<input
+    type="text"
+    bind:value={obj_group}
+    placeholder="Group"
+    onchange={() => {
+        // update_journal_entry();
+    }}
+    class:hidden={!$ae_loc.edit_mode}
+    class="input input-sm input-bordered w-24"
+    title="Set group (for sorting) of this journal entry"
+    />
+
+<!-- Set archive datetime (string) -->
+<span class="flex flex-row flex-wrap items-center justify-center border border-gray-200 rounded-lg">
+
+    <input
+        type="datetime-local"
+        bind:value={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 obj_archive_on}
+        <!-- Button to clear the datetime -->
+        <button
+            type="button"
+            onclick={() => {
+                obj_archive_on = null;
+                // update_journal_entry();
+            }}
+            class:hidden={!$ae_loc.edit_mode}
+            class="btn btn-icon btn-icon-sm variant-glass-warning hover:variant-filled-warning 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);
+                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 variant-glass-warning hover:variant-filled-warning 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={() => {
+        obj_hide = !obj_hide;
+        update_journal_entry();
+    }}
+    class="btn btn-sm md:btn-md variant-soft-warning hover:variant-filled-warning transition"
+    title="Toggle visibility of this journal entry"
+    >
+    {#if 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={() => {
+        obj_enable = !obj_enable;
+        // update_journal_entry();
+    }}
+    class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
+    class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
+    title="Toggle enable status of this journal entry"
+    >
+    {#if 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(() => {
+                $journals_slct.journal_id = null;
+                $journals_slct.journal_obj = null;
+                goto(`/journals/${$lq__journal_entry_obj?.journal_id}`);
+            });
+        }
+    }}
+    class:hidden={!$ae_loc.edit_mode}
+    class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error 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>
+
+
+<span class="flex flex-row items-center justify-center text-sm text-gray-500">
+{#if !$ae_loc.edit_mode}
+    <span class="">
+        {ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
+        {$lq__journal_entry_obj?.updated_on ?
+        ` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_12_no_seconds')}` : ''}
+    </span>
+{:else}
+    <span class="">
+        {ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_tz')}
+        {$lq__journal_entry_obj?.updated_on ?
+            ` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_tz')}` : ''}
+    </span>
+{/if}
+</span>
+
+
+<!-- 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="flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg">
+
+    <SquareLibrary size="1em" class="mx-1"/>
+    <span class="text-sm text-gray-500 hidden sm:inline">
+        Journal:
+    </span>
+    <select
+        class="novi_btn btn btn-secondary btn-sm
+        variant-soft-primary
+        hover:variant-filled-primary
+        transition
+        text-xs
+        border-none
+        "
+        bind:value={tmp_entry_obj.journal_id}
+        onchange={(event) => {
+            tmp_entry_obj.journal_id = event.target.value;
+            console.log('Selected journal:', tmp_entry_obj.journal_id);
+            if (confirm(`Are you sure you want to change the journal for this entry?`)) {
+                change_journal_id();
+            }
+        }}
+        title="Select a different journal for this entry"
+        >
+        <option value="">Select Journal</option>
+        {#each $lq__journal_obj_li as journal}
+            <option value={journal.journal_id}
+                title={`Journal: ${journal.name}`}
+                >
+                {journal.name}
+            </option>
+        {/each}
+    </select>
+</div>
+{/if}
+
+
+</section>