Lots of updates. And now with the ability to copy the rendered HTML version!

src/routes/journals/+layout.svelte

@@ -112,50 +112,6 @@ if (browser) {
 </nav>
 
 
-{#if $ae_loc.administrator_access && 1==2}
-<nav
-    class="submenu flex flex-row items-center justify-center"
-    class:hidden={$ae_loc.iframe}
-    >
-
-    <span class="btn-group variant-soft-secondary px-4 py-2">
-    {#each Object.entries(data.submenu) as [key, item]}
-        <!-- <a href="/settings/{item.slug}">{item.title}</a> -->
-        <!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
-        {#if item.disable}
-        <button
-            title={item.title}
-            class="hover:variant-ghost-secondary"
-            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
-            disabled={item.disable}
-
-            onclick={() => {
-                // window.location(item.href);
-                // href={item.href}
-                // invalidateAll
-                goto(item.href, { });
-            }}
-            >
-            {item.name}
-        </button>
-        {:else}
-        <a
-            href={item.href}
-            title={item.title}
-            class="hover:variant-ghost-secondary"
-            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
-            class:disabled={item.disable}
-            >
-            {item.name}
-        </a>
-        {/if}
-    {/each}
-    </span>
-
-</nav>
-{/if}
-
-
 <!-- <section class="status flex flex-col justify-center items-center gap-1">
     {#if $ae_loc.administrator_access}
         <h3 class="h4">Administrator Access - Technical Support</h3>
@@ -170,7 +126,7 @@ if (browser) {
 </section> -->
 
 
-<section class="main_content container">
+<section class="main_content container p-1 pb-28">
     {@render children()}
 </section>
 

src/routes/journals/+page.svelte

@@ -140,6 +140,7 @@ async function create_journal() {
 </script>
 
 
+<!-- Svelte Page for a AE Journals Module main page -->
 <section class="ae_journals md:container h-full mx-auto space-y-2">
 
 <h1 class="h1 text-center">

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

@@ -97,13 +97,13 @@ async function handle_update_journal() {
 </script>
 
 
+<!-- Svelte layout for a Journal ID page and children -->
 <section
     class="
         ae_journals__journal
-        container h-full mx-auto
+        h-full mx-auto
         flex flex-col
         gap-1
-        py-1 px-2 pb-16
         items-center
         min-w-full
         max-w-max
@@ -116,9 +116,12 @@ async function handle_update_journal() {
         flex flex-row flex-wrap
         gap-1
         items-center justify-between
-        border-gray-200 border-y-
+        border-gray-400
-        w-full
+        border-t-2
+        border-b
         py-2
+        w-full
+        hover:bg-slate-100
         "
     >
     <a href="/journals"

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

@@ -155,6 +155,7 @@ if (browser) {
 </svelte:head>
 
 
+<!-- Svelte Page for a Journal ID page -->
 <!-- <section
     class="
         ae_journals__journal

src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte

@@ -80,9 +80,8 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
 <section
     class="
         ae_journals__journal_entry
-        container h-full mx-auto
+        h-full mx-auto
         flex flex-col gap-1
-        py-1 px-2 pb-16
         items-center
         min-w-full
         max-w-max

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -16,7 +16,7 @@ import {
         RemoveFormatting,
         Search,
         Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
-        Tags, Trash2
+        Tags, Trash2, TypeOutline
     } from '@lucide/svelte';
 
 // *** Import Aether specific variables and functions
@@ -174,28 +174,102 @@ $effect(() => {
             </span>
         </button>
 
-        <!-- Button to copy the rendered to HTML version -->
+        <!-- Button to copy the HTML version -->
         <button
             type="button"
             onclick={() => {
-                // Copy the rendered HTML content to clipboard
+                // Copy the 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!');
+                    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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
-            title="Copy the rendered HTML content"
+            title="Copy the HTML content"
             >
             <Copy size="1em" />
             <CodeXml size="2em" />
             <span class="hidden">
-            Copy Rendered HTML
+            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');
+                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 p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+            title="Copy the rich text (rendered HTML) content"
+        >
+            <Copy size="1em" />
+            <TypeOutline size="2em" />
+            <span class="hidden">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 p-1 variant-soft-secondary hover:variant-filled-secondary *: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</span>
+        </button>
     </span>
 
 
@@ -638,21 +712,21 @@ $effect(() => {
 
 <div
     ondblclick={() => {
-    if ($ae_loc.trusted_access) {
+        if ($ae_loc.trusted_access) {
-        // Toggle edit mode
+            // Toggle edit mode
-        $journals_loc.entry.edit = !$journals_loc.entry.edit;
+            $journals_loc.entry.edit = !$journals_loc.entry.edit;
-        $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
+            $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
-    }
+        }
     }}
     role="button"
     tabindex="0"
     class:hidden={!$ae_loc.trusted_access || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
     class="w-full font-mono shadow-md rounded-lg border-gray-500 bg-gray-100 p-2"
     >
-<article class="prose">
+<article class="prose" id="rendered_journal_entry_content">
 {@html $lq__journal_entry_obj?.content_md_html}
-<!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
 </article>
+<!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
 </div>
 
 <div
@@ -663,11 +737,11 @@ $effect(() => {
 <textarea
     bind:value={tmp_entry_obj.content}
     ondblclick={() => {
-    if ($ae_loc.trusted_access) {
+        if ($ae_loc.trusted_access) {
-        // Toggle edit mode
+            // Toggle edit mode
-        $journals_loc.entry.edit = !$journals_loc.entry.edit;
+            $journals_loc.entry.edit = !$journals_loc.entry.edit;
-        $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
+            $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
-    }
+        }
     }}
 
     class="w-full min-h-10 h-96 p-2 border border-gray-300 rounded-lg"

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -138,20 +138,8 @@ let tmp_entry_obj: key_val = $state({});
                 type="button"
                 onclick={() => {
                     // Clone the journal entry
-                    // let data_kv = {
-                    //     ...journals_journal_entry_obj,
-                    // };
-                    // // Remove specific fields that should not be cloned
-                    // delete data_kv.journal_entry_id;
-                    // delete data_kv.id; // Ensure we do not copy the ID
-                    // delete data_kv.template;
-                    // delete data_kv.notes;
-                    // delete data_kv.created_on;
-                    // delete data_kv.updated_on;
-
                     // We only want to clone certain fields from the original journal entry object to avoid conflicts.
                     let data_kv = {
-                        // journal_id_random: journals_journal_entry_obj.journal_id,
                         code: journals_journal_entry_obj.code,
                         category_code: journals_journal_entry_obj.category_code,
                         name: journals_journal_entry_obj.name,
@@ -159,7 +147,6 @@ let tmp_entry_obj: key_val = $state({});
                         content: journals_journal_entry_obj.content,
                         description: journals_journal_entry_obj.description,
                         tags: journals_journal_entry_obj.tags,
-
                     };
 
                     journals_func.create_ae_obj__journal_entry({