Wrapping up for the night at 4 AM. Made lots of progress with the Journals module. Should have saved more often.

src/routes/journals/ae_comp__journal_obj_li.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+// let log_lvl: number = 0;
+
+// *** Import Svelte specific
+import { goto } from '$app/navigation';
+
+// *** Import other supporting libraries
+// import { Spinner } from 'flowbite-svelte';
+
+// *** Import Aether specific variables and functions
+import { ae_util } from '$lib/ae_utils/ae_utils';
+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 } from '$lib/ae_journals/ae_journals_stores';
+
+interface Props {
+    lq__journal_obj_li: any;
+}
+
+let { lq__journal_obj_li }: Props = $props();
+</script>
+
+
+<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
+{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
+
+{#each $lq__journal_obj_li as journals_journal_obj, index}
+    <div
+        class="container journal journal_obj border border-1 rounded p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center"
+        class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) && !$ae_loc.trusted_access}
+        class:dim={journals_journal_obj.hide}
+        class:bg-warning-100={!journals_journal_obj?.enable}
+        class:text-warning-900={!journals_journal_obj?.enable}
+        >
+
+        <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
+            <h3 class="journal__name h3">
+                <span class="journal__name">{@html journals_journal_obj.name}</span>
+            </h3>
+
+            <!-- Show a label if the type code is set -->
+            {#if journals_journal_obj.type_code}
+                <span class="bg-yellow-50 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
+                    <!-- <span class="ae_label">Type:</span> -->
+                    <span class="ae_value">{journals_journal_obj.type_code}</span>
+                </span>
+            {/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}
+
+        <div class="ae_options flex flex-row gap-2 items-center justify-center">
+
+            <a href="/journals/{journals_journal_obj?.journal_id}" class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary hover:underline transition" title={`View: ${journals_journal_obj?.name}`}>
+                <span class="fas fa-envelope-open m-1"></span> Open
+
+                {#if journals_journal_obj?.journal_entry_count}
+                    <span class="ae_badge ae_info journal__journal_entry_count">
+                        <span class="fas fa-content"></span> {(journals_journal_obj?.journal_entry_count == 1 ? `${journals_journal_obj?.journal_entry_count} entry` : `${journals_journal_obj?.journal_entry_count} entries` )}
+                    </span>
+                {/if}
+            </a>
+
+            {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
+                <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
+            class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
+            class:hidden={!$ae_loc.administrator_access && !$ae_loc.edit_mode}
+            >
+            <div class="ae_group">
+                {#if !journals_journal_obj.updated_on}
+                <span
+                    class="journal__created_on"
+                    >
+                    <span class="ae_label">Created on:</span>
+                    <span class="ae_value">{ae_util.iso_datetime_formatter(journals_journal_obj.created_on, 'datetime_12_long')}</span>
+                </span>
+                {:else}
+                <span
+                    class="journal__updated_on"
+                    >
+                    <span class="ae_label">Updated on:</span>
+                    <span class="ae_value">{ae_util.iso_datetime_formatter(journals_journal_obj.updated_on, 'datetime_12_long')}</span>
+                </span>
+                {/if}
+            </div>
+        </section>
+
+
+</div>
+{/each}
+
+{:else}
+    No journals found at this time
+{/if}
+</section>
+<!-- {/if} -->