From 231462e3ad40a98212c1474efe93b3d031a23d33 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 12 Aug 2025 17:59:37 -0400
Subject: [PATCH] Working to make the dark mode look better. Work on the help
 tech component. General clean up.

---
 src/app.css                                   |   7 +
 src/lib/ae_stores.ts                          |   3 +-
 src/lib/e_app_help_tech.svelte                | 227 +++++++++++++-----
 src/routes/idaa/(idaa)/archives/+page.svelte  |   2 +
 .../(idaa)/archives/[archive_id]/+page.svelte |   2 +
 .../bb/ae_idaa_comp__post_options.svelte      |   2 +
 .../recovery_meetings/[event_id]/+page.svelte |   2 +
 .../ae_idaa_comp__event_obj_qry.svelte        |   2 +
 src/routes/journals/+layout.svelte            |  19 +-
 src/routes/journals/+page.svelte              |   6 +-
 .../journals/[journal_id]/+layout.svelte      |  14 ++
 src/routes/journals/[journal_id]/+page.svelte |  63 ++++-
 .../entry/[journal_entry_id]/+page.svelte     |  67 +++++-
 .../ae_comp__journal_entry_obj_id_view.svelte |   4 +-
 .../ae_comp__journal_entry_obj_li.svelte      |   6 +-
 .../ae_comp__journal_obj_id_view.svelte       |   2 +-
 .../journals/ae_comp__journal_obj_li.svelte   |   9 +-
 17 files changed, 350 insertions(+), 87 deletions(-)

diff --git a/src/app.css b/src/app.css
index c3d7d8a7..702dcac0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -885,6 +885,13 @@ img.qr_code:focus {
 
 }
 
+.iframe .novi_m0 {
+    margin: 0;
+}
+.iframe .novi_p0 {
+    padding: 0;
+}
+
 .iframe .dark .novi_label {
     color: white;
 }
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 6693f40b..717d5780 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -122,11 +122,12 @@ const ae_app_local_data_defaults: key_val = {
     // Added 2025-04-04
     person_id: null, // The current person_id of the logged-in user (if any)
     person: {
+        // WARNING: We need to add some logic on sign in to only include needed fields. 2025-08-12
         id: null, // The current person_id of the logged-in user
         // profile_id: null, // The current person_profile_id of the logged-in user
         // pronouns: null,
         // informal_name: null,
-        // given_name: null,
+        given_name: null,
         // family_name: null,
         // professional_title: null,
         full_name: null, // convenience
diff --git a/src/lib/e_app_help_tech.svelte b/src/lib/e_app_help_tech.svelte
index 4802cc6d..e411db42 100644
--- a/src/lib/e_app_help_tech.svelte
+++ b/src/lib/e_app_help_tech.svelte
@@ -7,6 +7,8 @@ interface Props {
     e_class?: string;
     e_title?: string;
     e_text?: string;
+    e_class_h1?: string;
+    e_class_h2?: string;
     e_class_form_hidden?: string;
     e_class_form_showing?: string;
     btn_text?: string;
@@ -23,6 +25,8 @@ let {
     e_class = '',
     e_title = 'Technical Help',
     e_text = 'Request technical help for this application.',
+    e_class_h1 = $bindable(''),
+    e_class_h2 = $bindable(''),
     e_class_form_hidden = $bindable(''),
     e_class_form_showing = $bindable(''),
     btn_text = 'Technical Help',
@@ -33,11 +37,13 @@ let {
 }: Props = $props();
 
 // *** Import Svelte specific
+import { goto } from '$app/navigation';
 
 // *** Import other supporting libraries
 import {
     // ArrowBigRight,
     BadgeQuestionMark,
+    ChevronDown, ChevronRight,
     // CircleX,
     // Copy,
     // Eye, EyeOff,
@@ -46,8 +52,9 @@ import {
     // LogIn, LogOut, LockKeyhole,
     // Mail, MailCheck,
     // Menu,
-    // RefreshCw, RefreshCcw, RefreshCcwDot,
+    RefreshCw, RefreshCcw, RefreshCcwDot,
     // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
+    SquareX,
     // User, UserCheck
 } from '@lucide/svelte';
 
@@ -130,13 +137,10 @@ function send_help_tech_email() {
 
 <div
     class="
-        m-2
-        mx-auto
-        p-2
         flex flex-row
         items-center justify-center
         rounded-lg shadow-2xl
-        border-2 border-transparent
+        border-1 border-transparent
         transition-all
         {e_class}
         {!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
@@ -144,6 +148,9 @@ function send_help_tech_email() {
         "
         class:w-xl={$ae_sess.show_help_tech}
         class:w-fit={!$ae_sess.show_help_tech}
+        class:mx-auto={$ae_sess.show_help_tech}
+        class:m-2={$ae_sess.show_help_tech}
+        class:p-2={$ae_sess.show_help_tech}
         class:hover:border-blue-400={$ae_sess.show_help_tech}
         class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
         class:hover:shadow-blue-200={$ae_sess.show_help_tech}
@@ -168,20 +175,21 @@ function send_help_tech_email() {
                     w-full
                     "
                 >
-                <h3
+                <h1
                     class="
-
+                        h1
                         text-base font-semibold text-gray-800 dark:text-gray-200
                         w-fit
+                        {e_class_h1}
                         "
                     >
                     {#if e_success}
-                        <span class="text-green-800 dark:text-green-200 font-semibold">
+                        <span class="text-lg text-green-800 dark:text-green-200 font-semibold">
                             <BadgeQuestionMark class="inline-block mr-2" />
                             Help Requested
                         </span>
                     {:else}
-                        <span class="text-gray-800 dark:text-gray-200 font-semibold">
+                        <span class="text-lg text-gray-800 dark:text-gray-200 font-semibold">
                             <BadgeQuestionMark class="inline-block mr-2" />
                             <!-- Request Technical Help -->
                             Notify Technical Support
@@ -192,16 +200,22 @@ function send_help_tech_email() {
                     {/if}
 
                     <!-- Cancel button -->
-                </h3>
+                </h1>
                 <button
+                    type="button"
                     onclick={() => ($ae_sess.show_help_tech = false)}
                     class="
-                        btn btn-base preset-tonal-tertiary
+                        btn btn-base
+                        preset-tonal-tertiary
+                        preset-outlined-tertiary-100-900
+                        hover:preset-filled-tertiary-200-800
+                        transition-all
                         {btn_class}
                         "
                     title="Close Help Request Form"
                     >
-                    <span class="fas fa-times"></span>
+                    <!-- <span class="fas fa-times"></span> -->
+                    <SquareX size="1em" />
                     <span class="sr-only">Close</span>
                 </button>
             </div>
@@ -223,19 +237,31 @@ function send_help_tech_email() {
                     alert('Notification sent to the IT team.');
                 })}
                 >
+
                 <textarea
-                    class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded text-gray-950 dark:text-gray-50"
+                    class="
+                        form-control
+                        w-full max-w-lg h-24 p-2
+                        border border-gray-300 rounded
+                        text-gray-950 dark:text-gray-50
+                        bg-white dark:bg-gray-500
+                        hover:dark:bg-gray-50
+                        hover:dark:text-gray-950
+                        "
                     placeholder="Send with or without a description...."
                     bind:value={help_tech_text}
                     ></textarea>
+
                 <button
                     type="submit"
                     class="
                         btn btn-lg
                         m-1
                         preset-tonal-warning
-                        hover:preset-tonal-success
-                        preset-outlined-warning-600-400
+                        preset-outlined-warning-100-900
+                        hover:preset-filled-warning-200-800
+
+
                         transition-all
                         {btn_class}
                         "
@@ -278,19 +304,20 @@ function send_help_tech_email() {
                         w-full
                         "
                     >
-                    <h4
+                    <h2
                         class="
-                            novi_white
+                            h2
                             text-base font-semibold text-gray-800 dark:text-gray-200
-                            flex flex-row gap-1 items-center justify-center
+                            {e_class_h2}
                             "
                         >
+                        <span class="text-base font-semibold text-gray-800 dark:text-gray-200">
                         Additional Information Included
-
-
-                    </h4>
+                        </span>
+                    </h2>
                     <!-- Button to expand and show additional information -->
                     <button
+                        type="button"
                         class="
                             btn btn-sm preset-tonal-tertiary
                             {btn_class}
@@ -300,46 +327,48 @@ function send_help_tech_email() {
                         >
                         <span>
                         {#if hide_additional_info}
-                            <span class="fas fa-caret-right"></span>
+                            <!-- <span class="fas fa-caret-right"></span> -->
+                            <ChevronRight size="1em" class="inline-block" />
                             Show
                         {:else}
-                            <span class="fas fa-caret-down"></span>
+                            <!-- <span class="fas fa-caret-down"></span> -->
+                            <ChevronDown size="1em" class="inline-block" />
                             Hide
                         {/if}
                         </span>
                     </button>
                 </div>
                 <ul
-                    class="list-disc list-inside text-gray-800 text-sm"
+                    class="list-disc list-inside text-sm text-gray-800 dark:text-gray-200"
                     class:hidden={hide_additional_info}
                     >
-                    <li><span class="text-sm text-gray-500">Datetime =</span> {new Date().toISOString()}</li>
-                    <li><span class="text-sm text-gray-500">URL =</span> {window.location.href}</li>
-                    <li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
-                    <li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
-                    <li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
-                    <li><span class="text-sm text-gray-500">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
-                    <li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
-                    <li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
-                    <li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
-                    <li><span class="text-sm text-gray-500">Account ID =</span> {$slct.account_id}</li>
-                    <li><span class="text-sm text-gray-500">Access Type =</span> {$ae_loc?.access_type}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Datetime =</span> {new Date().toISOString()}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">URL =</span> {window.location.href}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Browser =</span> {navigator.userAgent}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">In iframe =</span> {$ae_loc?.iframe}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Name =</span> {$ae_loc?.theme_name}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Account ID =</span> {$slct.account_id}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">Access Type =</span> {$ae_loc?.access_type}</li>
                     {#if $ae_loc?.person_id}
-                        <li><span class="text-sm text-gray-500">person_id =</span> {$ae_loc?.person_id}</li>
-                        <li><span class="text-sm text-gray-500">full_name =</span> {$ae_loc?.full_name}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">person_id =</span> {$ae_loc?.person_id}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">full_name =</span> {$ae_loc?.full_name}</li>
                     {/if}
                     {#if $ae_loc?.user_id}
-                        <li><span class="text-sm text-gray-500">user_id =</span> {$ae_loc?.user_id}</li>
-                        <li><span class="text-sm text-gray-500">username =</span> {$ae_loc?.username}</li>
-                        <li><span class="text-sm text-gray-500">email =</span> {$ae_loc?.email}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">user_id =</span> {$ae_loc?.user_id}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">username =</span> {$ae_loc?.username}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">email =</span> {$ae_loc?.email}</li>
                     {/if}
-                    <li><span class="text-sm text-gray-500">API Base URL =</span> {$ae_api.base_url}</li>
+                    <li><span class="text-sm text-gray-500 dark:text-gray-400">API Base URL =</span> {$ae_api.base_url}</li>
 
                     {#if additional_kv && Object.keys(additional_kv).length > 0}
                         <h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
                     <ul class="list-disc list-inside text-gray-800 text-sm">
                     {#each Object.entries(additional_kv) as [key, value]}
-                        <li><span class="text-sm text-gray-500">{key} =</span> {value ?? '-- not set --'}</li>
+                        <li><span class="text-sm text-gray-500 dark:text-gray-400">{key} =</span> {value ?? '-- not set --'}</li>
                     {/each}
                     </ul>
                     {/if}
@@ -351,31 +380,115 @@ function send_help_tech_email() {
 
             </div>
 
-        <!-- Cancel button -->
-        <button
-            onclick={() => ($ae_sess.show_help_tech = false)}
-            class="
-                btn btn-sm preset-tonal-tertiary
-                m-1
-                {btn_class}
-                "
-            title="Close Help Request Form"
-            >
-            <span class="fas fa-times"></span>
-            <span class="">Cancel</span>
-        </button>
+            <div
+                class="
+                    flex flex-row gap-2 items-center justify-around
+                    w-full
+                    mt-2
+                    "
+                >
+                <button
+                    type="button"
+                    onclick={() => {
+                        if ($ae_loc.edit_mode) {
+                            // Confirm before clearing
+                            if (!confirm("Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.")) {
+                                return;
+                            }
 
+                            console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
+
+                            // Clear Indexed DB
+                            indexedDB.deleteDatabase('ae_archives_db'); // Archives module
+                            indexedDB.deleteDatabase('ae_core_db');
+                            indexedDB.deleteDatabase('ae_events_db'); // Events module
+                            indexedDB.deleteDatabase('ae_journals_db'); // Journals module
+                            indexedDB.deleteDatabase('ae_posts_db'); // Posts module
+                            indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
+
+                            // Clear localStorage and sessionStorage
+                            // Clearing the localStorage will force it to be re-created.
+                            localStorage.clear();
+                            sessionStorage.clear();
+
+                            goto('/', {invalidateAll: true});
+
+                            // window.location.reload(true);
+                        } else {
+                            // Confirm before clearing
+                            if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) {
+                                return;
+                            }
+
+                            console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
+
+                            // Clear Indexed DB
+                            indexedDB.deleteDatabase('ae_archives_db'); // Archives module
+                            indexedDB.deleteDatabase('ae_core_db');
+                            indexedDB.deleteDatabase('ae_events_db'); // Events module
+                            indexedDB.deleteDatabase('ae_journals_db'); // Journals module
+                            indexedDB.deleteDatabase('ae_posts_db'); // Posts module
+                            indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
+
+                            window.location.reload(true);
+                        }
+
+                        // This does not seem to work fast enough or something?
+                        // goto('/', {invalidateAll: true});
+
+                        // The page does usually seem to reload correctly?
+                        // window.location.reload(true); // true only works with Firefox
+                        // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
+                    }}
+                    class="
+                        btn btn-sm
+                        preset-tonal-surface
+                        preset-outlined-warning-100-900
+                        hover:preset-filled-warning-200-800
+                        transition-all
+                        {btn_class}
+                        "
+                    title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
+                    >
+                    <!-- <span class="fas fa-eraser mx-1"></span> -->
+                    <!-- <span class="fas fa-sync mx-1"></span> -->
+                    <RefreshCw size="1em" class="inline-block" />
+                    <span class="md:inline">Clear & Reload</span>
+                </button>
+
+                <!-- Cancel button -->
+                <button
+                    type="button"
+                    onclick={() => ($ae_sess.show_help_tech = false)}
+                    class="
+                        btn btn-sm
+                        preset-tonal-tertiary
+                        preset-outlined-tertiary-100-900
+                        hover:preset-filled-tertiary-100-900
+                        transition-all
+                        {btn_class}
+                        "
+                    title="Close Help Request Form"
+                    >
+                    <!-- <span class="fas fa-times"></span> -->
+                    <SquareX size="1em" class="inline-block" />
+                    <span class="">Cancel</span>
+                </button>
+            </div>
         </div>
 
 
-
     {:else}
 
+
         <button
+            type="button"
             onclick={() => ($ae_sess.show_help_tech = true)}
             class="
                 btn btn-sm
-                border border-blue-400 dark:border-blue-600
+                preset-filled-tertiary-400-600
+                preset-outlined-tertiary-100-900
+                hover:preset-filled-warning-500
                 transition-all
                 {btn_class}
                 {show_btn_class}
diff --git a/src/routes/idaa/(idaa)/archives/+page.svelte b/src/routes/idaa/(idaa)/archives/+page.svelte
index 1d62c7fb..b85df92c 100644
--- a/src/routes/idaa/(idaa)/archives/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/+page.svelte
@@ -133,6 +133,8 @@ function add_activity_log(
 
 <Help_tech
     e_class=""
+    e_class_h1="novi_m0"
+    e_class_h2="novi_m0"
     btn_class="novi_btn"
     show_btn_class="z-10"
     additional_kv={{
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
index 7f72b707..32a4b9c1 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
@@ -297,6 +297,8 @@ onDestroy(() => {
 
     <Help_tech
         e_class=""
+        e_class_h1="novi_m0"
+        e_class_h2="novi_m0"
         btn_class="novi_btn"
         show_btn_class="absolute top-0 right-0 float-right z-10"
         additional_kv={{
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
index f6dfad9f..df774ce4 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
@@ -254,6 +254,8 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
 
     <Help_tech
         e_class=""
+        e_class_h1="novi_m0"
+        e_class_h2="novi_m0"
         e_class_form_hidden="float-right"
         e_class_form_showing="inline-block"
         btn_class="novi_btn"
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
index 64e08ce2..2dd74985 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
@@ -154,6 +154,8 @@ onDestroy(() => {
 
     <Help_tech
         e_class=""
+        e_class_h1="novi_m0"
+        e_class_h2="novi_m0"
         btn_class="novi_btn"
         show_btn_class="absolute top-0 right-0 float-right z-10"
         additional_kv={{
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
index 037268e8..02a521bb 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
@@ -227,6 +227,8 @@ function preventDefault(fn) {
 
     <Help_tech
         e_class=""
+        e_class_h1="novi_m0"
+        e_class_h2="novi_m0"
         e_class_form_hidden="float-right"
         e_class_form_showing="float-none"
         btn_class="novi_btn"
diff --git a/src/routes/journals/+layout.svelte b/src/routes/journals/+layout.svelte
index 55689407..8190f0e6 100644
--- a/src/routes/journals/+layout.svelte
+++ b/src/routes/journals/+layout.svelte
@@ -23,6 +23,7 @@ import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
 import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
 // import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 import Element_data_store from '$lib/element_data_store_v2.svelte';
+import Help_tech from '$lib/e_app_help_tech.svelte';
 
 // *** Setup Svelte properties
 interface Props {
@@ -76,7 +77,11 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 <!-- These are needed: h-full overflow-auto -->
 <div
     class:iframe={$ae_loc?.iframe}
-    class="ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
+    class="
+        ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto
+        bg-gray-50 dark:bg-gray-900
+        text-gray-800 dark:text-gray-200
+        "
     >
 
 <nav
@@ -175,6 +180,18 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
         <RefreshCw />
         <span class="hidden md:inline">Clear & Reload</span>
     </button>
+
+    <Help_tech
+        e_class=""
+        e_class_form_hidden=""
+        e_class_form_showing="inline-block"
+        btn_class=""
+        show_btn_class="btn-info"
+        additional_kv={{
+            'test': true,
+        }}
+        >
+    </Help_tech>
 </nav>
 
 
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index 30801160..6e13f4b8 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -166,10 +166,12 @@ async function create_journal() {
     "
     >
 
-<h1 class="h1 text-center">
+<h1 class="h1 text-4xl text-center text-gray-800 dark:text-gray-200">
     <!-- <Library size="1em" class="mx-1 inline-block" /> -->
-    <SquareLibrary size="1em" class="mx-1 inline-block text-gray-500"/>
+    <SquareLibrary size="1em" class="mx-1 inline-block text-neutral-800/60"/>
     Journals for {$ae_loc.account_name ?? 'Æ loading...'}
+    {$ae_loc.person.given_name ? `- ${$ae_loc.person.given_name}` : ''}
+
 </h1>
 
 <div
diff --git a/src/routes/journals/[journal_id]/+layout.svelte b/src/routes/journals/[journal_id]/+layout.svelte
index e3f4bfc6..546d534d 100644
--- a/src/routes/journals/[journal_id]/+layout.svelte
+++ b/src/routes/journals/[journal_id]/+layout.svelte
@@ -65,6 +65,20 @@ let lq__journal_obj = $derived(liveQuery(async () => {
         console.log(`lq__journal_obj: results = `, results);
     }
 
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_obj && results) {
+        if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
+            $journals_slct.journal_obj = { ...results };
+            if (log_lvl) {
+                console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
+            }
+        } else {
+            if (log_lvl) {
+                console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
+            }
+        }
+    }
+
     return results;
 }));
 
diff --git a/src/routes/journals/[journal_id]/+page.svelte b/src/routes/journals/[journal_id]/+page.svelte
index c0f55c8c..e309171e 100644
--- a/src/routes/journals/[journal_id]/+page.svelte
+++ b/src/routes/journals/[journal_id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-let log_lvl: number = $state(0);
+let log_lvl: number = $state(1);
 
 // *** Import Svelte specific
 import { browser } from '$app/environment';
@@ -42,10 +42,22 @@ let { data }: Props = $props();
 // Variables
 // *** Quickly pull out data from parent(s)
 let ae_acct = data[$slct.account_id];
-if (log_lvl) {
+if (log_lvl > 1) {
     console.log(`ae_acct = `, ae_acct);
+
 }
 
+$inspect(log_lvl, `log_lvl = ${log_lvl}`);
+$inspect($journals_slct.journal_id, `$journals_slct.journal_id = ${$journals_slct.journal_id}`);
+$inspect($journals_slct.journal_entry_id, `$journals_slct.journal_entry_id = ${$journals_slct.journal_entry_id}`);
+
+// $inspect($journals_slct.journal_entry_id).with((type, val) => {
+//     if (type === 'update') {
+//         // debugger; // or `console.trace`, or whatever you want
+//         console.log('$journals_slct.journal_entry_id updated:', val);
+//     }
+// });
+
 // For some reason data.params.journal_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
 $journals_slct.journal_id = ae_acct.slct.journal_id;
 // $journals_slct.journal_obj = ae_acct.slct.journal_obj;
@@ -56,12 +68,27 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
     }
+
     let results = await db_journals.journal
         .get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
     if (log_lvl) {
         console.log(`lq__journal_obj: results = `, results);
     }
 
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_obj && results) {
+        if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
+            $journals_slct.journal_obj = { ...results};
+            if (log_lvl) {
+                console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
+            }
+        } else {
+            if (log_lvl) {
+                console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
+            }
+        }
+    }
+
     return results;
 }));
 
@@ -72,10 +99,14 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
         console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
         console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
     }
+
     if ($journals_sess.entry_li_trigger && !$journals_sess?.entry_li) {
         $journals_sess.entry_li = null;
         $journals_sess.entry_li_trigger = false;
     }
+
+    let results;
+
     if ($journals_sess?.entry_li && $journals_sess?.entry_li?.length) {
         // $journals_sess.entry_li_trigger = false;
         let journal_entry_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
@@ -87,12 +118,11 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
         }
         // let journal_entry_id_random_li = tmp_li;
 
-        let results = await db_journals.journal_entry
+        results = await db_journals.journal_entry
             .bulkGet(journal_entry_id_random_li);
 
-        return results;
     } else if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
-        let results = await db_journals.journal_entry
+        results = await db_journals.journal_entry
             // .orderBy('updated_on')
             .where('journal_id')
             .equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
@@ -101,35 +131,46 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
             .sortBy('updated_on');
             // .sortBy('title');
 
-        return results;
     } else if ($journals_loc.filter__category_code && $journals_loc.filter__category_code.length > 0) {
         if (log_lvl) {
             // console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
             console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
         }
-        let results = await db_journals.journal_entry
+        results = await db_journals.journal_entry
             .where('journal_id')
             .equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
             .and(entry => entry.category_code === $journals_loc.filter__category_code)
             .reverse()
             .sortBy('tmp_sort_1');
 
-        return results;
     } else {
         if (log_lvl) {
             // console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
             console.log(`$journals_slct?.journal_id - default query using journal_id: ${$journals_slct?.journal_id}`);
         }
-        let results = await db_journals.journal_entry
+        results = await db_journals.journal_entry
             .where('journal_id')
             .equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
             .reverse()
             .sortBy('tmp_sort_1');
             // .sortBy('updated_on');
 
-        return results;
     }
 
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_entry_obj_li && JSON.stringify($journals_slct.journal_entry_obj_li) !== JSON.stringify(results)) {
+        $journals_slct.journal_entry_obj_li = [...results];
+        if (log_lvl) {
+            console.log(`Session slct li stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_entry_obj_li);
+        }
+    } else {
+        if (log_lvl > 1) {
+            console.log(`Session slct li stored version has not changed for ID = ${$journals_slct.journal_id}`);
+        }
+    }
+
+    return results;
+
 }));
 
 
@@ -174,8 +215,6 @@ if ($journals_trig.journal_entry_li) {
 });
 
 if (browser) {
-    // console.log('Browser environment detected.');
-
     let message = {'journal_id': $journals_slct?.journal_id ?? null};
     window.parent.postMessage(message, "*");
 }
diff --git a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
index 077b0ca5..0e92bef3 100644
--- a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
+++ b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 /** @type {import('./$types').PageData} */
-let log_lvl: number = 0;
+let log_lvl: number = $state(1);
 
 // *** Import Svelte specific
 // import { browser } from '$app/environment';
@@ -42,20 +42,59 @@ if (log_lvl) {
 
 $journals_slct.journal_id = ae_acct.slct.journal_id;
 let lq__journal_obj = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
+    }
+
     let results = await db_journals.journal
-        .where('id')
-        .equals($journals_slct.journal_id)
-        .first();
+        .get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
+        // .where('id')
+        // .equals($journals_slct.journal_id)
+        // .first();
+    if (log_lvl) {
+        console.log(`lq__journal_obj: results = `, results);
+    }
+
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_obj && results) {
+        if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
+            $journals_slct.journal_obj = { ...results };
+            if (log_lvl) {
+                console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
+            }
+        } else {
+            if (log_lvl) {
+                console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
+            }
+        }
+    }
 
     return results;
 }));
 
 let lq__journal_obj_li = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`lq__journal_obj_li: person_id = ${$ae_loc.person_id}`);
+    }
+
     let results = await db_journals.journal
         .where('person_id')
         .equals($ae_loc.person_id)
         .reverse()
-        .sortBy('tmp_sort_2')
+        .sortBy('tmp_sort_2');
+
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_obj_li && JSON.stringify($journals_slct.journal_obj_li) !== JSON.stringify(results)) {
+        $journals_slct.journal_obj_li = [...results];
+        if (log_lvl) {
+            console.log(`Session slct li stored version has changed for ID = ${$ae_loc.person_id}`, $journals_slct.journal_obj_li);
+        }
+    } else {
+        if (log_lvl > 1) {
+            console.log(`Session slct li stored version has not changed for ID = ${$ae_loc.person_id}`);
+        }
+    }
+
     return results;
 }));
 
@@ -69,7 +108,23 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
     }
     let results = await db_journals.journal_entry
         .get($journals_slct.journal_entry_id ?? ''); // null or undefined does not reset things like '' does
-    // console.log(`lq__journal_entry_obj: results = `, results);
+    if (log_lvl) {
+        console.log(`lq__journal_entry_obj: results = `, results);
+    }
+
+    // Check if results are different than the current session version stored under $journals_slct
+    if ($journals_slct.journal_entry_obj && results) {
+        if (JSON.stringify($journals_slct.journal_entry_obj) !== JSON.stringify(results)) {
+            $journals_slct.journal_entry_obj = { ...results};
+            if (log_lvl) {
+                console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_entry_id}`, $journals_slct.journal_entry_obj);
+            }
+        } else {
+            if (log_lvl) {
+                console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_entry_id}`);
+            }
+        }
+    }
 
     return results;
 }));
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 1787dfd2..aaa7ddfd 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
@@ -968,10 +968,10 @@ $effect(() => {
                     />
             {:else}
                 {#if ($lq__journal_entry_obj?.name)}
-                    <NotebookText class="mx-1 inline-block"/>
+                    <NotebookText class="mx-1 inline-block text-neutral-800/60"/>
                     {@html $lq__journal_entry_obj?.name}
                 {:else}
-                    <CalendarClock class="mx-1 inline-block"/>
+                    <CalendarClock class="mx-1 inline-block text-neutral-800/60"/>
                     {ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
                 {/if}
             {/if}
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index a0de39ff..5070c729 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -159,13 +159,13 @@ $effect(() => {
                     >
 
                         {#if journals_journal_entry_obj.template}
-                            <NotepadTextDashed class="mx-1 inline-block" />
+                            <NotepadTextDashed class="mx-1 inline-block text-neutral-800/60" />
                             {@html journals_journal_entry_obj.name ?? '-- no name --'}
                         {:else if (journals_journal_entry_obj.name)}
-                            <NotebookText class="mx-1 inline-block" />
+                            <NotebookText class="mx-1 inline-block text-neutral-800/60" />
                             {@html journals_journal_entry_obj.name}
                         {:else}
-                            <CalendarClock class="mx-1 inline-block" />
+                            <CalendarClock class="mx-1 inline-block text-neutral-800/60" />
                             {ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
                         {/if}
 
diff --git a/src/routes/journals/ae_comp__journal_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
index 68978a9f..75eb6442 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
@@ -102,7 +102,7 @@ function verify_journal_passcode() {
 
 <header class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
     <h2 class="journal__name h3 text-center ">
-        <BookOpenText class="inline-block" />
+        <BookOpenText class="inline-block text-neutral-800/60" />
         {@html $lq__journal_obj?.name ?? 'Loading...'}
         {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
             ({$lq__journal_entry_obj_li?.length ?? '0'}×)
diff --git a/src/routes/journals/ae_comp__journal_obj_li.svelte b/src/routes/journals/ae_comp__journal_obj_li.svelte
index 31bcefdd..980d69d5 100644
--- a/src/routes/journals/ae_comp__journal_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_li.svelte
@@ -6,7 +6,9 @@
 
 // *** Import other supporting libraries
 // import { Spinner } from 'flowbite-svelte';
-import { BookOpenText } from '@lucide/svelte';
+import {
+    BookOpenText, BookType
+} from '@lucide/svelte';
 
 // *** Import Aether specific variables and functions
 import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -27,7 +29,7 @@ let { lq__journal_obj_li }: Props = $props();
 
 {#each $lq__journal_obj_li as journals_journal_obj, index}
     <div
-        class="container journal journal_obj border border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center bg-{journals_journal_obj?.cfg_json.color_scheme}-100"
+        class="container journal journal_obj border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center bg-{journals_journal_obj?.cfg_json.color_scheme}-100"
         class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) && !$ae_loc.trusted_access}
         class:dim={journals_journal_obj.hide}
         class:bg-warning-100={!journals_journal_obj?.enable}
@@ -36,6 +38,9 @@ let { lq__journal_obj_li }: Props = $props();
 
         <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
             <h3 class="journal__name h3">
+
+                <BookType class="m-1 inline-block text-neutral-800/60" />
+
                 <span class="journal__name">{@html journals_journal_obj.name}</span>
             </h3>