More work on making the Journal's module actually useful

src/routes/journals/+layout.svelte

@@ -81,6 +81,11 @@ if (browser) {
     <button
 
         onclick={() => {
+            // Confirm before clearing
+            if (!confirm("Are you sure you want to clear all app data and settings? This will reload the page.")) {
+                return;
+            }
+            console.log("Clearing local and session storage, and reloading the page...");
 
             // Clear the local and session storage. Clearing the localStorage will force it to be re-created.
             localStorage.clear();

src/routes/journals/[journal_id]/+layout.svelte

@@ -37,6 +37,8 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     }
     let results = await db_journals.journal
         .get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
+
+    $journals_slct.journal_obj = results;
     console.log(`lq__journal_obj: results = `, results);
 
     return results;
@@ -120,10 +122,11 @@ async function handle_update_journal() {
             transition
             "
         >
-        <!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals -->
-        <!-- <span class="fas fa-arrow-left m-1"></span> -->
         <BookHeart class="mx-1" />
-        View Other Journals
+        <span class="hidden md:inline">
+            View Other Journals
+        </span>
+
     </a>
 
     {#if $journals_slct?.journal_entry_id}
@@ -137,7 +140,10 @@ async function handle_update_journal() {
             "
         >
         <Notebook />
-        Back to Journal Entries
+        <span class="hidden md:inline">Back to</span>
+        <span class="font-bold">
+            {$lq__journal_obj?.name || 'Journal'}
+        </span>
     </a>
     {:else}
     <!-- Edit Journal button. Creates a modal to edit the journal. -->
@@ -210,7 +216,9 @@ async function handle_update_journal() {
             >
             <FilePlus class="mx-1" />
             <!-- <span class="fas fa-plus m-1"></span> -->
-            New Journal Entry
+            <span class="hidden sm:inline">
+                New Journal Entry
+            </span>
         </button>
 
         <!-- Give list of categories to base the new entry on -->
@@ -261,7 +269,7 @@ async function handle_update_journal() {
     >
     <div class="modal">
         <div class="modal-box">
-            <h3 class="font-bold text-lg">Edit Journal</h3>
+            <!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
             <div class="py-4">
                 <input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
                 <input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-full mb-2" />
@@ -335,6 +343,31 @@ async function handle_update_journal() {
                     </div>
                 </div>
 
+                <!-- Select max height options (Tailwind CSS) -->
+                <div>
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Entry List Max Height:
+                    </span>
+                    <select
+                        class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-96"
+                        bind:value={$journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height}
+                        title="Select maximum height for journal entries in the list"
+                        onchange={(event) => {
+                            $journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height = event.target.value;
+                            console.log('Selected max height:', $journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height);
+                        }}
+                        >
+                        <option value="">Default (auto)</option>
+                        <!-- <option value="none">None (no limit)</option> -->
+                        <option value="max-h-8">Small (8)</option>
+                        <option value="max-h-16">Medium (16)</option>
+                        <option value="max-h-32">Large (32)</option>
+                        <option value="max-h-96">Extra Large (96)</option>
+                        <option value="max-h-full">Full (no limit)</option>
+
+                    </select>
+                </div>
+
 
                 <!-- textarea for json_cfg editing -->
             </div>

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -1,26 +1,24 @@
 <script lang="ts">
 // *** Import Svelte specific
 import { goto } from '$app/navigation';
-
+import { clipboard } from '@skeletonlabs/skeleton';
-// import { createIcons, icons } from 'lucide';
-// createIcons({ icons });
 
 import {
-        ArrowDown01, ArrowDownUp,
+        ArrowDown01, ArrowDown10, ArrowDownUp,
         BookHeart, BriefcaseBusiness,
-        CalendarClock, CalendarOff,
+        CalendarClock, CalendarOff, CodeXml,
         Eye, EyeOff,
-        Flag, FlagOff, Fingerprint,
+        Flag, FlagOff, FileX, Fingerprint,
         Globe, Group,
         MessageSquareWarning, Minus,
         NotebookPen, NotebookText,
-        Pencil,
+        Pencil, Plus,
-        Plus, Search,
+        RemoveFormatting,
+        Search,
         Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
         Tags, Trash2
     } 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';
@@ -152,6 +150,50 @@ $effect(() => {
             </span>
 
         </h2>
+
+        <!-- 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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+            title="Copy the markdown content"
+            >
+            <span class="fas fa-copy mx-1"></span>
+            <RemoveFormatting />
+            <span class="hidden">
+            Copy Plaintext Markdown
+            </span>
+        </button>
+
+        <!-- Button to copy the rendered to HTML version -->
+        <button
+            type="button"
+            onclick={() => {
+                // Copy the rendered HTML content to clipboard
+                const htmlContent = $lq__journal_entry_obj?.content_md_html || '';
+                navigator.clipboard.writeText(htmlContent).then(() => {
+                    alert('Rendered 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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+            title="Copy the rendered HTML content"
+            >
+            <span class="fas fa-copy mx-1"></span>
+            <CodeXml />
+            <span class="hidden">
+            Copy Rendered HTML
+            </span>
+        </button>
     </span>
 
 
@@ -628,10 +670,13 @@ $effect(() => {
     {:else}
         <FlagOff strokeWidth="1" color="gray" />
     {/if}
+    <span class="hidden lg:inline">
+        Priority
+    </span>
 </button>
 
 <!-- Set sort order (number) -->
- <span class="flex flex-row items-center justify-center border border-gray-300 rounded-lg">
+ <span class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
 <button
     type="button"
     onclick={() => {
@@ -657,7 +702,12 @@ $effect(() => {
     <Plus strokeWidth="2.5" color="blue" />
 </button>
 <span class="mx-1">
-    {$lq__journal_entry_obj?.sort}
+    {#if $lq__journal_entry_obj?.sort}
+        {$lq__journal_entry_obj.sort}
+    {:else}
+        <!-- <ArrowDown01 /> -->
+        <ArrowDown10 />
+    {/if}
 </span>
 <button
     type="button"
@@ -709,7 +759,7 @@ $effect(() => {
         });
     }}
     class="input input-sm input-bordered w-24"
-    title="Set group of this journal entry"
+    title="Set group (for sorting) of this journal entry"
     />
 
 
@@ -765,6 +815,7 @@ $effect(() => {
             alert('Failed to 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"
     >
@@ -782,9 +833,14 @@ $effect(() => {
     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
@@ -799,21 +855,38 @@ $effect(() => {
             });
         }
     }}
+    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"
     >
-    <Trash2 strokeWidth="2.5" color="red" class="inline-block" />
+
-    <span class="hidden md:inline">Delete</span>
+    {#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>
 
 
-{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
+<span class="flex flex-row items-center justify-center text-sm text-gray-500">
-    <span class="flex flex-row items-center justify-center text-sm text-gray-500">
+{#if !$ae_loc.edit_mode}
-    {ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
+    <span class="">
-    {$lq__journal_entry_obj?.updated_on ?
+        {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>
+
 </div>
 
 {/if}

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -4,7 +4,15 @@ let log_lvl: number = 1;
 // *** Import Svelte specific
 import { goto, invalidate, pushState, replaceState } from '$app/navigation';
 
-import { CalendarClock, Flag, FlagOff, NotebookPen, NotebookText, Shapes, Siren, Tags } from '@lucide/svelte';
+import {
+        CalendarClock, CodeXml,
+        Eye, EyeOff,
+        Flag, FlagOff,
+        NotebookPen, NotebookText,
+        RemoveFormatting,
+        Shapes, Siren,
+        Tags
+    } from '@lucide/svelte';
 
 
 // *** Import Aether specific variables and functions
@@ -13,6 +21,7 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
+import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 
 interface Props {
     lq__journal_entry_obj_li: any;
@@ -24,6 +33,8 @@ let ae_promises: key_val = $state({});
 // let ae_tmp: key_val = {};
 // let ae_triggers: key_val = {};
 
+let tmp_entry_obj: key_val = $state({});
+
 </script>
 
 
@@ -41,12 +52,15 @@ let ae_promises: key_val = $state({});
 
     <div
         class="container journal journal_entry_obj border border-1 p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center bg-white rounded-lg"
-        class:dim={journals_journal_entry_obj.hide}
+        class:dim={!journals_journal_entry_obj.enable}
         class:bg-warning-100={!journals_journal_entry_obj?.enable}
         >
-
         <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
-            <h3 class="journal__name h4">
+            <span class="flex flex-row flex-wrap gap-1">
+            <h3
+                class:dim={journals_journal_entry_obj.hide}
+                class="journal__name h4"
+                >
                 <span class="journal_entry__name">
                     {#if (journals_journal_entry_obj.alert)}
                         <Siren class="mx-1 inline-block text-red-500"/>
@@ -64,6 +78,55 @@ let ae_promises: key_val = $state({});
                 </span>
             </h3>
 
+            <!-- Button to copy the Markdown version -->
+            <button
+                type="button"
+                onclick={() => {
+                    let tmp_entry_obj = journals_journal_entry_obj;
+
+                    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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+                title="Copy the markdown content"
+                >
+                <span class="fas fa-copy mx-1"></span>
+                <RemoveFormatting />
+                <span class="hidden">
+                Copy Plaintext Markdown
+                </span>
+            </button>
+
+            <!-- Button to copy the rendered to HTML version -->
+            <button
+                type="button"
+                onclick={() => {
+                    // Copy the rendered HTML content to clipboard
+                    // const htmlContent = $lq__journal_entry_obj?.content_md_html || '';
+                    let htmlContent = journals_journal_entry_obj.content_md_html || '';
+
+                    navigator.clipboard.writeText(htmlContent).then(() => {
+                        alert('Rendered 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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+                title="Copy the rendered HTML content"
+                >
+                <span class="fas fa-copy mx-1"></span>
+                <CodeXml />
+                <span class="hidden">
+                Copy Rendered HTML
+                </span>
+            </button>
+            </span>
+
             <div class="flex flex-row gap-2 items-center justify-end">
                 <!-- Tags for journal entry. Comma delimited list. -->
                 {#if journals_journal_entry_obj.tags && journals_journal_entry_obj.tags.length}
@@ -126,7 +189,13 @@ let ae_promises: key_val = $state({});
 
 
         {#if journals_journal_entry_obj.content}
-            <div class="journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap">
+            <div
+                class:hidden={journals_journal_entry_obj.hide}
+                class="
+                    journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap
+                    {$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
+                    "
+                >
             {@html journals_journal_entry_obj.content}
             </div>
         {/if}
@@ -202,7 +271,7 @@ let ae_promises: key_val = $state({});
 
         <section
             class="ae_meta mt-2 flex flex-col sm:flex-row gap-2 items-center justify-center text-xs text-gray-500"
-            class:hidden={!$ae_loc.administrator_access}
+            class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
             >
             <!-- <span
                 class="journal_entry__journal_entry_type"
@@ -225,6 +294,41 @@ let ae_promises: key_val = $state({});
                     {ae_util.iso_datetime_formatter(journals_journal_entry_obj.updated_on, 'datetime_12_long')}
                 </span>
             </span>
+
+            <!-- Set/unset hide (boolean) -->
+                <button
+                    type="button"
+                    onclick={() => {
+                        let data_kv = {
+                            hide: journals_journal_entry_obj?.hide ? false : true
+                            };
+                        journals_func.update_ae_obj__journal_entry({
+                            api_cfg: $ae_api,
+                            journal_entry_id: journals_journal_entry_obj.journal_entry_id,
+                            data_kv: data_kv,
+                            log_lvl: log_lvl,
+                        }).then(() => {
+                            // Optionally, you can provide feedback to the user
+                            // alert('Journal entry updated successfully!');
+                        }).catch((error) => {
+                            console.error('Error updating journal entry:', error);
+                            alert('Failed to update journal entry.');
+                        });
+                    }}
+                    class:hidden={!$ae_loc.edit_mode}
+                    class="btn btn-sm variant-soft-warning hover:variant-filled-warning transition py-1 px-2"
+                    title={`Set entry as ${journals_journal_entry_obj.hide ? 'visible' : 'hidden'}`}
+                    >
+                    {#if journals_journal_entry_obj.hide}
+                        <EyeOff strokeWidth="1" color="hsla( 0, 100%, 50%, .5)"
+                            class="inline-block" />
+                        <span class="hidden md:inline">Hidden</span>
+                    {:else}
+                        <Eye strokeWidth="2.5" color="hsla( 120, 100%, 25%, .5)"
+                            class="inline-block" />
+                        <span class="hidden lg:inline">Visible</span>
+                    {/if}
+                </button>
         </section>
 
     </div>

src/routes/journals/ae_comp__journal_obj_li.svelte

@@ -63,26 +63,6 @@ let { lq__journal_obj_li }: Props = $props();
                     </span>
                 {/if}
             </a>
-
-            <!-- {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
-                <button
-                    type="button"
-                    disabled={!$ae_loc.administrator_access}
-                    onclick={() => {
-                        $journals_slct.journal_id = journals_journal_obj.journal_id;
-                        $journals_slct.journal_obj = journals_journal_obj;
-
-                        $journals_sess.journals.show__modal_view__journal_id = false;
-                        $journals_sess.journals.show__modal_edit__journal_id = $journals_slct.journal_id;
-
-                        goto(`/journals/${journals_journal_obj?.journal_id}`);
-                    }}
-                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
-                    title={`Edit journal: ${journals_journal_obj.name}`}
-                    >
-                    <span class="fas fa-edit m-1"></span> Edit Journal
-                </button>
-            {/if} -->
         </div>
 
         <section