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,18 +118,33 @@ $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">
+
+
+                <span class="journal_entry__name *:hover:inline-block">
+                    {#if (journals_journal_entry_obj.alert)}
+                        <Siren size="1.25em" class="mx-1 inline-block text-red-500"/>
+                    {/if}
+
+                    {#if (journals_journal_entry_obj.priority)}
+                        <Flag size="1.25emem" class="mx-1 inline-block text-yellow-500"/>
+                    {/if}
+
+                    {#if (journals_journal_entry_obj.group)}
+                        <Group size="1.25emem" class="mx-1 inline-block text-green-500"/>
+                        <span class="text-xs text-gray-500 hidden">Group:</span>
+                        <span class="font-semibold text-sm text-gray-500 hidden md:inline">
+                        {journals_journal_entry_obj.group}
+                        </span>
+                    {/if}
+                </span>
+
                 <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"/>
-                    {/if}
-                    {#if (journals_journal_entry_obj.priority)}
-                        <Flag class="mx-1 inline-block text-yellow-500"/>
-                    {/if}
                         {#if journals_journal_entry_obj.template}
                             <NotepadTextDashed class="mx-1 inline-block" />
                             {@html journals_journal_entry_obj.name ?? '-- no name --'}
@@ -139,9 +155,10 @@ $effect(() => {
                             <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>
 
+                <span class="flex flex-row flex-wrap gap-1">
                 <!-- Button to copy the Markdown version -->
                 <button
                     type="button"
@@ -269,9 +286,11 @@ $effect(() => {
                     <TypeOutline size="1.25em" />
                     <span class="hidden">Copy Rich Text</span>
                 </button>
+                </span>
 
             </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}