Now with ability to set archive on datetime. Need to fix the timezone though.

src/lib/ae_journals/ae_journals__journal_entry.ts

@@ -422,6 +422,8 @@ export async function db_save_ae_obj_li__journal_entry(
 
                 enable: obj.enable,
                 hide: obj.hide,
+                archive: obj.archive,
+                archive_on: obj.archive_on,
                 priority: obj.priority,
                 sort: obj.sort,
                 group: obj.group,

src/lib/ae_journals/db_journals.ts

@@ -73,6 +73,8 @@ export interface Journal {
 
     enable: null|boolean;
     hide?: null|boolean;
+    archive?: null|boolean; // Archive the journal
+    archive_on?: null|Date;
     priority?: null|boolean
     sort?: null|number;
     group?: null|string;

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -6,7 +6,7 @@ import { goto } from '$app/navigation';
 import {
         ArrowDown01, ArrowDown10, ArrowDownUp,
         BookHeart, BriefcaseBusiness,
-        CalendarClock, CalendarOff, CodeXml, Copy,
+        CalendarClock, CalendarOff, Clock, CodeXml, Copy,
         Eye, EyeOff,
         Flag, FlagOff, FileX, Fingerprint,
         Globe, Group,
@@ -17,7 +17,8 @@ import {
         Search,
         Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
         SquareLibrary,
-        Tags, Trash2, TypeOutline
+        Tags, Trash2, TypeOutline,
+        X
     } from '@lucide/svelte';
 
 // *** Import Aether specific variables and functions
@@ -158,6 +159,7 @@ async function update_journal_entry() {
         category_code: tmp_entry_obj?.category_code,
         content: tmp_entry_obj?.content,
         group: tmp_entry_obj?.group,
+        archive_on: tmp_entry_obj?.archive_on,
         name: tmp_entry_obj?.name,
         tags: tmp_entry_obj?.tags,
     };
@@ -788,13 +790,13 @@ async function change_journal_id() {
         tmp_entry_obj.priority = !$lq__journal_entry_obj?.priority;
         update_journal_entry();
     }}
-    class="btn-icon-sm variant-soft-tertiary transition"
+    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 $lq__journal_entry_obj?.priority}
-        <Flag strokeWidth="2.5" color="green" />
+        <Flag strokeWidth="2.5" color="green" class="inline-block" />
     {:else}
-        <FlagOff strokeWidth="1" color="gray" />
+        <FlagOff strokeWidth="1" color="gray" class="inline-block" />
     {/if}
     <span class="hidden lg:inline">
         Priority
@@ -811,7 +813,7 @@ async function change_journal_id() {
         tmp_entry_obj.sort = $lq__journal_entry_obj?.sort ? $lq__journal_entry_obj?.sort + 1 : 1;
         update_journal_entry();
     }}
-    class="btn-icon-sm variant-soft-tertiary transition"
+    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" />
@@ -830,7 +832,7 @@ async function change_journal_id() {
         tmp_entry_obj.sort = $lq__journal_entry_obj?.sort ? $lq__journal_entry_obj?.sort - 1 : 0;
         update_journal_entry();
     }}
-    class="btn-icon-sm variant-soft-tertiary transition"
+    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" />
@@ -851,6 +853,59 @@ async function change_journal_id() {
     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={tmp_entry_obj.archive_on}
+        placeholder="Archive On"
+        onchange={() => {
+            update_journal_entry();
+        }}
+        class:hidden={!$ae_loc.edit_mode}
+        class="input input-sm input-bordered w-auto border-none"
+        title="Set archive on datetime for archiving this journal entry"
+        />
+
+    {#if $lq__journal_entry_obj?.archive_on}
+        <!-- Button to clear the datetime -->
+        <button
+            type="button"
+            onclick={() => {
+                tmp_entry_obj.archive_on = null;
+                update_journal_entry();
+            }}
+            class:hidden={!$ae_loc.edit_mode}
+            class="btn btn-icon btn-icon-sm 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);
+                tmp_entry_obj = {
+                    ...tmp_entry_obj,
+                    archive_on: new Date().toISOString()
+                };
+                console.log('Archive on datetime set to now:', tmp_entry_obj.archive_on);
+                update_journal_entry();
+            }}
+            class:hidden={!$ae_loc.edit_mode}
+            class="btn btn-icon btn-icon-sm 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
@@ -953,7 +1008,7 @@ async function change_journal_id() {
 
 <!-- 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-300 rounded-lg">
+<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">
@@ -965,6 +1020,7 @@ async function change_journal_id() {
         hover:variant-filled-primary
         transition
         text-xs
+        border-none
         "
         bind:value={tmp_entry_obj.journal_id}
         onchange={(event) => {

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -8,6 +8,7 @@ import {
         CalendarClock, Check, CodeXml, Copy,
         Eye, EyeOff,
         Flag, FlagOff,
+        Group,
         ListPlus,
         NotebookPen, NotebookText, NotepadTextDashed,
         RemoveFormatting,
@@ -117,161 +118,179 @@ $effect(() => {
         class:bg-warning-100={!journals_journal_entry_obj?.enable}
         >
         <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
+
             <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 *:hover:inline-block">
-                >
-                <span class="journal_entry__name">
                     {#if (journals_journal_entry_obj.alert)}
-                        <Siren class="mx-1 inline-block text-red-500"/>
+                        <Siren size="1.25em" class="mx-1 inline-block text-red-500"/>
                     {/if}
+
                     {#if (journals_journal_entry_obj.priority)}
-                        <Flag class="mx-1 inline-block text-yellow-500"/>
+                        <Flag size="1.25emem" class="mx-1 inline-block text-yellow-500"/>
                     {/if}
-                    {#if journals_journal_entry_obj.template}
+
-                        <NotepadTextDashed class="mx-1 inline-block" />
+                    {#if (journals_journal_entry_obj.group)}
-                        {@html journals_journal_entry_obj.name ?? '-- no name --'}
+                        <Group size="1.25emem" class="mx-1 inline-block text-green-500"/>
-                    {:else if (journals_journal_entry_obj.name)}
+                        <span class="text-xs text-gray-500 hidden">Group:</span>
-                        <NotebookText class="mx-1 inline-block" />
+                        <span class="font-semibold text-sm text-gray-500 hidden md:inline">
-                        {@html journals_journal_entry_obj.name}
+                        {journals_journal_entry_obj.group}
-                    {:else}
+                        </span>
-                        <CalendarClock class="mx-1 inline-block" />
-                        {ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
                     {/if}
                 </span>
-            </h3>
 
-            <!-- Button to copy the Markdown version -->
+                <h3
-            <button
+                    class:dim={journals_journal_entry_obj.hide}
-                type="button"
+                    class="journal__name h4"
-                onclick={() => {
+                    >
-                    let tmp_entry_obj = journals_journal_entry_obj;
 
-                    navigator.clipboard.writeText(tmp_entry_obj.content).then(() => {
+                        {#if journals_journal_entry_obj.template}
-                        alert('Markdown content copied to clipboard!');
+                            <NotepadTextDashed class="mx-1 inline-block" />
-                    }).catch((error) => {
+                            {@html journals_journal_entry_obj.name ?? '-- no name --'}
-                        console.error('Failed to copy content:', error);
+                        {:else if (journals_journal_entry_obj.name)}
-                        alert('Failed to copy content.');
+                            <NotebookText class="mx-1 inline-block" />
-                    });
+                            {@html journals_journal_entry_obj.name}
-                }}
+                        {:else}
-                class:hidden={journals_journal_entry_obj.template}
+                            <CalendarClock class="mx-1 inline-block" />
-                class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
+                            {ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
-                title="Copy the markdown content"
+                        {/if}
+
+                </h3>
+
+                <span class="flex flex-row flex-wrap gap-1">
+                <!-- 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:hidden={journals_journal_entry_obj.template}
+                    class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
+                    title="Copy the markdown content"
+                    >
+                    <!-- <span class="fas fa-copy mx-1"></span> -->
+                    <Copy size="1em" />
+                    <RemoveFormatting size="1.25em" />
+                    <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:hidden={journals_journal_entry_obj.template}
+                    class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
+                    title="Copy the rendered HTML content"
+                    >
+                    <!-- <span class="fas fa-copy mx-1"></span> -->
+                    <Copy size="1em" />
+                    <CodeXml size="1.25em" />
+                    <span class="hidden">
+                    Copy Rendered HTML
+                    </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: journals_journal_entry_obj.code,
+                            category_code: journals_journal_entry_obj.category_code,
+                            name: journals_journal_entry_obj.name,
+                            short_name: journals_journal_entry_obj.short_name,
+                            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({
+                            api_cfg: $ae_api,
+                            journal_id: journals_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:hidden={!journals_journal_entry_obj.template}
+                    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="1.25em" />
+                    <span class="hidden md:inline">Clone</span>
+                </button>
+
+
+                <!-- Button to copy the rich text (rendered HTML) version -->
+                <button
+                    type="button"
+                    onclick={async () => {
+                        const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
+                        if (!element) {
+                            console.error('Element not found: rendered_journal_entry_content');
+                            alert('Failed to copy rich content.');
+                            return;
+                        }
+
+                        try {
+                            // Get the rendered HTML content
+                            const htmlContent = element.innerHTML;
+
+                            // Use the Clipboard API to write the HTML content as rich text
+                            await navigator.clipboard.write([
+                                new ClipboardItem({
+                                    'text/html': new Blob([htmlContent], { type: 'text/html' }),
+                                }),
+                            ]);
+
+                            alert('Rendered rich content copied to clipboard!');
+                        } catch (error) {
+                            console.error('Failed to copy rich content:', error);
+                            alert('Failed to copy rich content.');
+                        }
+                    }}
+                    class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+                    title="Copy the rich text (rendered HTML) content"
                 >
-                <!-- <span class="fas fa-copy mx-1"></span> -->
+                    <Copy size="1em" />
-                <Copy size="1em" />
+                    <TypeOutline size="1.25em" />
-                <RemoveFormatting size="1.25em" />
+                    <span class="hidden">Copy Rich Text</span>
-                <span class="hidden">
+                </button>
-                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:hidden={journals_journal_entry_obj.template}
-                class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
-                title="Copy the rendered HTML content"
-                >
-                <!-- <span class="fas fa-copy mx-1"></span> -->
-                <Copy size="1em" />
-                <CodeXml size="1.25em" />
-                <span class="hidden">
-                Copy Rendered HTML
-                </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: journals_journal_entry_obj.code,
-                        category_code: journals_journal_entry_obj.category_code,
-                        name: journals_journal_entry_obj.name,
-                        short_name: journals_journal_entry_obj.short_name,
-                        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({
-                        api_cfg: $ae_api,
-                        journal_id: journals_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:hidden={!journals_journal_entry_obj.template}
-                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="1.25em" />
-                <span class="hidden md:inline">Clone</span>
-            </button>
-
-
-            <!-- Button to copy the rich text (rendered HTML) version -->
-            <button
-                type="button"
-                onclick={async () => {
-                    const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
-                    if (!element) {
-                        console.error('Element not found: rendered_journal_entry_content');
-                        alert('Failed to copy rich content.');
-                        return;
-                    }
-
-                    try {
-                        // Get the rendered HTML content
-                        const htmlContent = element.innerHTML;
-
-                        // Use the Clipboard API to write the HTML content as rich text
-                        await navigator.clipboard.write([
-                            new ClipboardItem({
-                                'text/html': new Blob([htmlContent], { type: 'text/html' }),
-                            }),
-                        ]);
-
-                        alert('Rendered rich content copied to clipboard!');
-                    } catch (error) {
-                        console.error('Failed to copy rich content:', error);
-                        alert('Failed to copy rich content.');
-                    }
-                }}
-                class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
-                title="Copy the rich text (rendered HTML) content"
-            >
-                <Copy size="1em" />
-                <TypeOutline size="1.25em" />
-                <span class="hidden">Copy Rich Text</span>
-            </button>
 
             </span>
 
+
             <div class="flex flex-row flex-wrap 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}