General clean up. Show menu instead of link to all journals list. For now it just includes the most recent Entries loaded.

src/lib/ae_journals/ae_journals_stores.ts

@@ -28,6 +28,9 @@ let journals_local_data_struct: key_val = {
     qry__offset: 0,
     qry__journal_id: null,
 
+    journal_view_history_li: [], // Appended each time the journal is loaded.
+    entry_view_history_li: [], // Appended each time the entry is loaded.
+
     journal: {
         edit: false,
         edit_kv: {},

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

@@ -57,6 +57,8 @@ if (log_lvl) {
 // $journals_sess.entry_li = [];
 // $journals_slct.journal_id = ae_acct.slct.journal_id;
 
+let show_menu__all_journals: boolean = $state(false);
+
 let lq__journal_obj = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
@@ -176,27 +178,103 @@ let lq__journal_obj = $derived(liveQuery(async () => {
         py-2
         w-full
         hover:bg-slate-100 hover:dark:bg-slate-700
+
+        relative transition-all
         "
     >
-    <a href="/journals"
+
+    <button
+        type="button"
+        onclick={() => {
+            show_menu__all_journals = !show_menu__all_journals;
+        }}
         class="
             btn btn-sm
             preset-tonal-tertiary
             preset-outlined-tertiary-600-400
             hover:preset-outlined-tertiary-700-300
-            hover:preset-filled-tertiary-100-900
+            hover:preset-filled-tertiary-300-700
             transition-all
             "
-        title="View all journals for this account: {$ae_loc.account_name}"
+        title="View all journals menu: {$ae_loc.account_name}"
         >
         <!-- <BookHeart /> -->
         <!-- <Library /> -->
-        <SquareLibrary class="text-gray-500"/>
+         {#if show_menu__all_journals}
+            <X class="text-orange-500"/>
+        {:else}
+            <SquareLibrary class="text-gray-500"/>
+        {/if}
         <span class="hidden md:inline">
-            All Journals
+            Journals
         </span>
 
-    </a>
+    </button>
+
+
+    <div
+        class="
+            absolute top-12 left-0
+            p-4 z-50 w-80
+            space-y-0.5
+            bg-white dark:bg-gray-800
+            border border-gray-500
+            shadow-xl rounded-lg
+            min-w-72
+            max-w-fit
+            "
+        class:hidden={show_menu__all_journals}
+        >
+        <a href="/journals"
+            class="
+                btn btn-sm
+                preset-tonal-tertiary
+                preset-outlined-tertiary-600-400
+                hover:preset-outlined-tertiary-700-300
+                hover:preset-filled-tertiary-300-700
+                transition-all
+                "
+            title="View all journals for this account: {$ae_loc.account_name}"
+            >
+            <!-- <BookHeart /> -->
+            <!-- <Library /> -->
+            <SquareLibrary class="text-blue-500"/>
+            <span class="">
+                All Journals
+            </span>
+
+        </a>
+
+        <!-- List of recent entries here... -->
+        <!-- $journals_loc.entry_view_history_li -->
+        {#if $journals_loc?.entry_view_history_li?.length > 0}
+            <select
+                bind:value={$journals_slct.journal_entry_id}
+                onchange={() => {
+                    if ($journals_slct.journal_entry_id) {
+                        goto(`/journals/${$journals_slct?.journal_id}/entry/${$journals_slct.journal_entry_id}`);
+                    }
+                }}
+                class="
+                    form-select
+                    w-full
+                    text-sm
+                    border border-neutral-400-600
+                    p-1
+                    "
+                >
+                <option value="" disabled selected>
+                    Recent Entries...
+                </option>
+                {#each $journals_loc.entry_view_history_li as entry (entry.id)}
+                    <option value={entry.id}>
+                        {entry.name}
+                    </option>
+                {/each}
+            </select>
+        {/if}
+
+    </div>
 
     {#if $journals_slct?.journal_entry_id}
     <a
@@ -205,7 +283,8 @@ let lq__journal_obj = $derived(liveQuery(async () => {
             btn btn-sm
             preset-tonal-tertiary
             preset-outlined-tertiary-600-400
-            hover:preset-filled-tertiary-100-900
+            hover:preset-outlined-tertiary-700-300
+            hover:preset-filled-tertiary-300-700
             transition-all
             "
         title="View all journal entries for this journal: {$lq__journal_obj?.name}"
@@ -303,7 +382,8 @@ let lq__journal_obj = $derived(liveQuery(async () => {
                 btn btn-sm
                 preset-tonal-tertiary
                 preset-outlined-tertiary-600-400
-                hover:preset-filled-tertiary-100-900
+                hover:preset-outlined-tertiary-700-300
+                hover:preset-filled-tertiary-300-700
                 transition-all
                 "
             title="Create a new journal entry for this journal: {$lq__journal_obj?.name}"

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

@@ -3,7 +3,7 @@
 let log_lvl: number = $state(1);
 
 // *** Import Svelte specific
-// import { browser } from '$app/environment';
+import { browser } from '$app/environment';
 
 // *** Import other supporting libraries
 // import { Modal } from 'flowbite-svelte';
@@ -11,7 +11,7 @@ import { liveQuery } from "dexie";
 
 // *** Import Aether specific variables and functions
 // import type { key_val } from '$lib/ae_stores';
-// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_util } from '$lib/ae_utils/ae_utils';
 // import { core_func } from '$lib/ae_core/ae_core_functions';
 import { db_journals } from "$lib/ae_journals/db_journals";
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
@@ -129,6 +129,59 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
     return results;
 }));
 
+$effect(() => {
+    if (browser && $lq__journal_entry_obj?.journal_entry_id) {
+
+        // $journals_loc.entry_view_history_li = [...new Set($journals_loc.entry_view_history_li)]
+
+        let tmp_history_li = [
+            ...new Set($journals_loc.entry_view_history_li)
+            ];
+
+        // Limit to last 15 entries
+        if (tmp_history_li.length > 15) {
+            tmp_history_li = tmp_history_li.slice(tmp_history_li.length - 15);
+        }
+
+        // let chk_history_li = tmp_history_li?.filter(item => item.id === $lq__journal_entry_obj?.journal_entry_id);
+
+        // if (chk_history_li?.length) {
+        //     // Already in history, do not add again
+        //     console.log(`Entry ID = ${$lq__journal_entry_obj?.journal_entry_id} already in history, not adding again.`, tmp_history_li);
+
+        //     // if (tmp_history_li !== $journals_loc.entry_view_history_li) {
+        //     if (JSON.stringify(tmp_history_li) !== JSON.stringify($journals_loc.entry_view_history_li)) {
+        //         $journals_loc.entry_view_history_li = tmp_history_li;
+
+        //         console.log(`$journals_loc.entry_view_history_li = `, $journals_loc.entry_view_history_li);
+        //     }
+
+        //     return;
+        // }
+
+        tmp_history_li.push({
+            id: $lq__journal_entry_obj?.journal_entry_id ?? 'NONE',
+            name: $lq__journal_entry_obj?.name ?? ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds'),
+            url: `/journals/${$lq__journal_entry_obj?.journal_id ?? 'NONE'}/entry/${$lq__journal_entry_obj?.journal_entry_id ?? 'NONE'}`,
+        });
+
+        // Remove duplicates and keep most recent
+        tmp_history_li = [...new Set(tmp_history_li.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
+
+        // Limit to last 15 entries
+        if (tmp_history_li.length > 15) {
+            tmp_history_li = tmp_history_li.slice(tmp_history_li.length - 15);
+        }
+
+        if (JSON.stringify(tmp_history_li) !== JSON.stringify($journals_loc.entry_view_history_li)) {
+            $journals_loc.entry_view_history_li = tmp_history_li;
+
+            console.log(`$journals_loc.entry_view_history_li = `, $journals_loc.entry_view_history_li);
+        }
+
+        console.log(`$journals_loc.entry_view_history_li = `, $journals_loc.entry_view_history_li);
+    }
+});
 </script>
 
 

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -1314,7 +1314,7 @@ $effect(() => {
                 min-w-72
                 max-w-fit
                 "
-            class:hidden={show_menu}
+            class:hidden={!show_menu}
             >
 
             <!-- <div class="flex flex-row flex-wrap gap-1 items-center justify-end"> -->

src/routes/journals/ae_comp__journal_obj_id_view.svelte

@@ -122,7 +122,12 @@ function verify_journal_passcode() {
         <button
             type="button"
             onclick={() => (show_menu = !show_menu)}
-            class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
+            class="
+                btn
+                variant-outline-secondary hover:preset-filled-secondary-400-600
+                py-1 px-2 w-24
+                transition-all
+                "
             title="Toggle menu"
         >
             <Menu size="1.5em" class="inline-block" />
@@ -142,7 +147,7 @@ function verify_journal_passcode() {
                 min-w-72
                 max-w-fit
                 "
-            class:hidden={show_menu}
+            class:hidden={!show_menu}
             >
             <div
                 class="