Improved styles with colors. More config options. Other updates.

src/lib/ae_journals/ae_journals__journal.ts

@@ -603,6 +603,8 @@ export function db_save_ae_obj_li__journal(
                     updated_on: obj.updated_on,
 
                     // Generated fields for sorting locally only
+                    tmp_sort_1: `${obj.group}_${obj.priority}_${obj.sort}_${obj.updated_on}_${obj.created_on}`,
+                    tmp_sort_2: `${obj.group}_${obj.priority}_${obj.sort}_${obj.updated_on ?? obj.created_on}`,
                     // tmp_sort_1: `${obj.original_datetime}_${obj.group}_${obj.priority}_${obj.sort}`,
                     // tmp_sort_2: `${obj.group}_${obj.original_datetime}_${obj.priority}_${obj.sort}`,
 

src/lib/ae_journals/db_journals.ts

@@ -80,6 +80,10 @@ export interface Journal {
     created_on: Date;
     updated_on?: null|Date;
 
+    // Generated fields for sorting locally only
+    tmp_sort_1?: null|string;
+    tmp_sort_2?: null|string;
+
     // Additional fields for convenience (database views)
     file_count?: null|number; // Only files directly under a journal
     journal_file_id_li_json?: null|string;
@@ -299,6 +303,7 @@ export class MySubClassedDexie extends Dexie {
                 name,
                 start_datetime, end_datetime,
                 timezone,
+                tmp_sort_1, tmp_sort_2,
                 enable, hide, priority, sort, group, notes, created_on, updated_on`,
             journal_entry: `
                 id, journal_entry_id,
@@ -309,6 +314,7 @@ export class MySubClassedDexie extends Dexie {
                 name,
                 start_datetime, end_datetime,
                 timezone,
+                tmp_sort_1, tmp_sort_2,
                 enable, hide, priority, sort, group, notes, created_on, updated_on`,
             });
     }

src/routes/journals/+page.svelte

@@ -43,7 +43,7 @@ let ae_acct = data[$slct.account_id];
 
 let lq__journal_obj_li = $derived(liveQuery(async () => {
     let results = await db_journals.journal
-    .orderBy('updated_on')
+    .orderBy('tmp_sort_2')
     .reverse()
     .toArray()
     // .sortBy('start_datetime')

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

@@ -6,11 +6,17 @@ let { data, children } = $props();
 
 import { goto } from '$app/navigation';
 import {
+        ArrowDown01, ArrowDown10, ArrowDownUp,
         BookHeart, BookImage, Bookmark, BookOpenText,
         Check,
-        FilePlus, Library,
+        Eye, EyeOff,
-        Minus, Notebook, Pencil, Plus,
+        Flag, FlagOff, FilePlus, Library,
+        MessageSquareWarning, Minus,
+        Notebook,
+        Pencil, Plus,
         SquareLibrary,
+        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
+        Tags, Trash2, TypeOutline,
         X
     } from '@lucide/svelte';
 
@@ -30,6 +36,9 @@ import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 
 // let { data }: Props = $props();
 
+let tmp_journal_obj_changed: boolean = $state(false);
+let tmp_journal_obj: key_val = $state({});
+
 
 let ae_acct = data[$slct.account_id];
 if (log_lvl) {
@@ -51,6 +60,17 @@ let lq__journal_obj = $derived(liveQuery(async () => {
     return results;
 }));
 
+$effect(() => {
+    if ($lq__journal_obj) {
+        tmp_journal_obj = { ...$lq__journal_obj };
+    }
+});
+
+$effect(() => {
+    if (tmp_journal_obj) {
+        tmp_journal_obj_changed = JSON.stringify(tmp_journal_obj) != JSON.stringify($lq__journal_obj);
+    }
+});
 
 async function handle_update_journal() {
     if ($journals_slct.tmp_journal_obj.name && $journals_slct.tmp_journal_obj.type_code) {
@@ -279,6 +299,7 @@ async function handle_update_journal() {
 </div>
 
 
+
 <!-- <div class="overflow-auto"> -->
 {@render children()}
 <!-- </div> -->
@@ -438,6 +459,211 @@ async function handle_update_journal() {
                 <!-- textarea for json_cfg editing -->
             </div>
 
+
+            <div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
+                <!-- Priority Button -->
+                <button
+                    type="button"
+                    onclick={() => {
+                        if ($ae_loc.trusted_access) {
+                            let data_kv = {
+                                priority: $lq__journal_obj?.priority ? false : true,
+                            };
+                            journals_func.update_ae_obj__journal({
+                                api_cfg: $ae_api,
+                                journal_id: $lq__journal_obj?.journal_id,
+                                data_kv: data_kv,
+                                log_lvl: log_lvl
+                            }).then(() => {
+                                alert('Journal priority updated successfully!');
+                            }).catch((error) => {
+                                console.error('Error updating journal priority:', error);
+                                alert('Failed to update journal priority.');
+                            });
+                        }
+                    }}
+                    class="btn-icon-sm variant-soft-tertiary transition"
+                    title="Toggle priority of this journal"
+                >
+                    {#if $lq__journal_obj?.priority}
+                        <Flag strokeWidth="2.5" color="green" />
+                    {:else}
+                        <FlagOff strokeWidth="1" color="gray" />
+                    {/if}
+                    <span class="hidden lg:inline">Priority</span>
+                </button>
+
+                <!-- Sort Buttons -->
+                <span class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
+                    <button
+                        type="button"
+                        onclick={() => {
+                            let data_kv = {
+                                sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort + 1 : 1,
+                            };
+                            journals_func.update_ae_obj__journal({
+                                api_cfg: $ae_api,
+                                journal_id: $lq__journal_obj?.journal_id,
+                                data_kv: data_kv,
+                                log_lvl: log_lvl
+                            }).then(() => {
+                                alert('Journal sort order incremented!');
+                            }).catch((error) => {
+                                console.error('Error updating journal sort order:', error);
+                                alert('Failed to update journal sort order.');
+                            });
+                        }}
+                        class="btn-icon-sm variant-soft-tertiary transition"
+                        title="Increment sort order of this journal"
+                    >
+                        <Plus strokeWidth="2.5" color="blue" />
+                    </button>
+                    <span class="mx-1">
+                        {#if $lq__journal_obj?.sort}
+                            {$lq__journal_obj.sort}
+                        {:else}
+                            <ArrowDown10 />
+                        {/if}
+                    </span>
+                    <button
+                        type="button"
+                        onclick={() => {
+                            let data_kv = {
+                                sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort - 1 : 0,
+                            };
+                            journals_func.update_ae_obj__journal({
+                                api_cfg: $ae_api,
+                                journal_id: $lq__journal_obj?.journal_id,
+                                data_kv: data_kv,
+                                log_lvl: log_lvl
+                            }).then(() => {
+                                alert('Journal sort order decremented!');
+                            }).catch((error) => {
+                                console.error('Error updating journal sort order:', error);
+                                alert('Failed to update journal sort order.');
+                            });
+                        }}
+                        class="btn-icon-sm variant-soft-tertiary transition"
+                        title="Decrement sort order of this journal"
+                    >
+                        <Minus strokeWidth="2.5" color="blue" />
+                    </button>
+                </span>
+
+                <!-- Group Input -->
+                <input
+                    type="text"
+                    bind:value={tmp_journal_obj.group}
+                    placeholder="Group"
+                    onchange={() => {
+                        let data_kv = {
+                            group: tmp_journal_obj.group,
+                        };
+                        journals_func.update_ae_obj__journal({
+                            api_cfg: $ae_api,
+                            journal_id: $lq__journal_obj?.journal_id,
+                            data_kv: data_kv,
+                            log_lvl: log_lvl
+                        }).then(() => {
+                            alert('Journal group updated successfully!');
+                        }).catch((error) => {
+                            console.error('Error updating journal group:', error);
+                            alert('Failed to update journal group.');
+                        });
+                    }}
+                    class="input input-sm input-bordered w-24"
+                    title="Set group (for sorting) of this journal"
+                />
+
+                <!-- Hide Button -->
+                <button
+                    type="button"
+                    onclick={() => {
+                        let data_kv = {
+                            hide: tmp_journal_obj.hide ? false : true,
+                        };
+                        journals_func.update_ae_obj__journal({
+                            api_cfg: $ae_api,
+                            journal_id: $lq__journal_obj?.journal_id,
+                            data_kv: data_kv,
+                            log_lvl: log_lvl
+                        }).then(() => {
+                            alert('Journal visibility updated successfully!');
+                        }).catch((error) => {
+                            console.error('Error updating journal visibility:', error);
+                            alert('Failed to update journal visibility.');
+                        });
+                    }}
+                    class="btn btn-sm md:btn-md variant-soft-warning hover:variant-filled-warning transition"
+                    title="Toggle visibility of this journal"
+                >
+                    {#if $lq__journal_obj?.hide}
+                        <EyeOff strokeWidth="1" color="red" class="inline-block" />
+                        <span class="hidden md:inline">Hidden</span>
+                    {:else}
+                        <Eye strokeWidth="2.5" color="green" class="inline-block" />
+                        <span class="hidden md:inline">Visible</span>
+                    {/if}
+                </button>
+
+                <!-- Enable Button -->
+                <button
+                    type="button"
+                    onclick={() => {
+                        let data_kv = {
+                            enable: $lq__journal_obj?.enable ? false : true,
+                        };
+                        journals_func.update_ae_obj__journal({
+                            api_cfg: $ae_api,
+                            journal_id: $lq__journal_obj?.journal_id,
+                            data_kv: data_kv,
+                            log_lvl: log_lvl
+                        }).then(() => {
+                            alert('Journal enable status updated successfully!');
+                        }).catch((error) => {
+                            console.error('Error updating journal enable status:', error);
+                            alert('Failed to update journal enable status.');
+                        });
+                    }}
+                    class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
+                    title="Toggle enable status of this journal"
+                >
+                    {#if $lq__journal_obj?.enable}
+                        <ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
+                        <span class="hidden md:inline">Enabled</span>
+                    {:else}
+                        <ShieldMinus strokeWidth="1" color="red" class="inline-block" />
+                        <span class="hidden md:inline">Disabled</span>
+                    {/if}
+                </button>
+
+                <!-- Delete Button -->
+                <button
+                    type="button"
+                    onclick={() => {
+                        if (confirm(`Are you sure you want to delete this journal?`)) {
+                            journals_func.delete_ae_obj_id__journal({
+                                api_cfg: $ae_api,
+                                journal_id: $lq__journal_obj?.journal_id,
+                                log_lvl: log_lvl
+                            }).then(() => {
+                                alert('Journal deleted successfully!');
+                                goto('/journals');
+                            }).catch((error) => {
+                                console.error('Error deleting journal:', error);
+                                alert('Failed to delete journal.');
+                            });
+                        }
+                    }}
+                    class="btn btn-sm md:btn-md variant-soft-error hover:variant-filled-error transition"
+                    title="Delete this journal"
+                >
+                    <Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
+                    <span class="hidden md:inline">Delete</span>
+                </button>
+            </div>
+
+
             <div class="modal-action">
                 <button
                     type="button"

src/routes/journals/ae_comp__journal_obj_id_view.svelte

@@ -29,10 +29,14 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
 </script>
 
 
-<section class="svelte_component ae_section ae_view journal_obj view__journal_obj bg-white rounded-lg p-2 m-2" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
+<section class="
+    bg-white rounded-lg p-2 m-2 w-full
+    flex flex-col flex-wrap items-center justify-center
+    "
+    bind:clientHeight={$ae_loc.iframe_height_modal_body}>
 
 <header class="ae_header journal__header">
-    <h2 class="journal__name h3">
+    <h2 class="journal__name h3 text-center">
         <BookOpenText class="inline-block" />
         {@html $lq__journal_obj?.name ?? 'Loading...'}
         {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
@@ -48,22 +52,22 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
 
 <!-- Show Journal description -->
 <!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
-<div>
+<!-- <div> -->
 {#if $lq__journal_obj?.description}
     <div
-
         class="
             prose
             space-y-1
-            journal__description
+            m-4
             p-2
+            w-full max-w-screen-md
             font-mono
             bg-{$lq__journal_obj?.cfg_json.color_scheme}-100 text-gray-900
             dark:bg-blue-900 dark:text-gray-100
             shadow-md rounded-lg
-            text-sm font-normal text-wrap whitespace-pre-wrap word-break
+            text-sm font-normal text-wrap word-break
-            max-w-screen-md
 
+            prose-p:m-0 prose-p:p-0
             prose-h1:underline prose-h1:decoration-double
             prose-h2:underline
             prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
@@ -74,7 +78,7 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
         {@html $lq__journal_obj.description_md_html}
 </div>
 {/if}
-</div>
+<!-- </div> -->
 
 
 

src/routes/journals/ae_comp__journal_obj_li.svelte

@@ -48,7 +48,31 @@ let { lq__journal_obj_li }: Props = $props();
             {/if}
         </header>
 
-        {#if journals_journal_obj.description}<pre class="journal__description p-2 bg-white shadow-md rounded-lg text-sm font-normal text-wrap whitespace-pre-wrap word-break max-w-screen-md novi_text_wrap">{@html journals_journal_obj.description}</pre>{/if}
+        {#if journals_journal_obj.description}
+        <div
+            class="
+                prose
+                space-y-1
+                journal__description
+                p-2
+                w-full
+                font-mono
+                bg-{journals_journal_obj?.cfg_json.color_scheme}-100 text-gray-900
+                dark:bg-blue-900 dark:text-gray-100
+                shadow-md rounded-lg
+                text-sm font-normal text-wrap word-break
+                max-w-screen-md
+
+                prose-h1:underline prose-h1:decoration-double
+                prose-h2:underline
+                prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
+                prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
+                prose-li:m-0 prose-li:p-0 prose-li:line-height-none
+                "
+            >
+            {@html journals_journal_obj.description_md_html}
+        </div>
+        {/if}
 
         <div class="ae_options flex flex-row gap-2 items-center justify-center">