From d8020b3d77b981d83cf78e8d7961ea2761200016 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Sat, 15 Mar 2025 23:21:06 -0400
Subject: [PATCH] Saving my work beforeI rename the notes module to journals
 module. Finally.

---
 src/routes/(notes)/notes/+page.ts             |  38 ------
 src/routes/+layout.svelte                     | 125 ++++--------------
 src/routes/events/+layout.svelte              | 112 +++++++++++++++-
 src/routes/events/+page.svelte                |  13 +-
 src/routes/idaa/(idaa)/+layout.svelte         |  77 ++++++-----
 src/routes/idaa/+layout.svelte                | 119 +++++++++++++++++
 src/routes/idaa/hold_+layout.svelte           |   6 -
 .../+layout.svelte}                           |  64 ++++++++-
 src/routes/{(notes) => }/notes/+layout.ts     |  64 ++++-----
 src/routes/{(notes) => }/notes/+page.svelte   |  16 ++-
 src/routes/notes/+page.ts                     |  61 +++++++++
 .../hold+layout.svelte}                       |   6 +-
 .../+layout.ts => notes/hold+layout.ts}       |   0
 13 files changed, 471 insertions(+), 230 deletions(-)
 delete mode 100644 src/routes/(notes)/notes/+page.ts
 create mode 100644 src/routes/idaa/+layout.svelte
 delete mode 100644 src/routes/idaa/hold_+layout.svelte
 rename src/routes/{(notes)/notes/+layout@(notes).svelte => notes/+layout.svelte} (56%)
 rename src/routes/{(notes) => }/notes/+layout.ts (50%)
 rename src/routes/{(notes) => }/notes/+page.svelte (95%)
 create mode 100644 src/routes/notes/+page.ts
 rename src/routes/{(notes)/+layout.svelte => notes/hold+layout.svelte} (92%)
 rename src/routes/{(notes)/+layout.ts => notes/hold+layout.ts} (100%)

diff --git a/src/routes/(notes)/notes/+page.ts b/src/routes/(notes)/notes/+page.ts
deleted file mode 100644
index 47fb7a14..00000000
--- a/src/routes/(notes)/notes/+page.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-
-import { error } from '@sveltejs/kit';
-import { notes_func } from '$lib/ae_notes/ae_notes_functions';
-
-export async function load({ parent }) {
-    let log_lvl: number = 0;
-
-    let data = await parent();
-
-    // let account_id = data.account_id;
-    // if (!account_id) {
-    //     console.log(`ae_notes +page.ts: The account_id was not found in the data!!!`);
-    //     error(500, {
-	// 		message: 'Not found'
-	// 	});
-    // }
-
-    // let ae_acct = data[account_id];
-
-    // Should we limit these to note.conference = true?
-    // let load_note_obj_li = await notes_func.handle_load_ae_obj_li__note({
-    //     api_cfg: ae_acct.api,
-    //     account_id: account_id,
-    //     params: {enabled: 'enabled', qry__limit: 25},
-    //     try_cache: false,
-    //     log_lvl: 1
-    // });
-    // ae_acct.slct.note_obj_li = load_note_obj_li;
-
-    // data[account_id] = ae_acct;
-
-    return data;
-
-    // return {
-    //     ae_notes_page_ts: true,
-    // };
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c845b5e6..d585355a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -47,7 +47,7 @@ import { events_loc, events_slct } from '$lib/ae_events_stores';
 
 import Element_access_type from '$lib/element_access_type.svelte';
 import Element_app_cfg from '$lib/element_app_cfg.svelte';
-import Element_data_store from '$lib/element_data_store_v2.svelte';
+// import Element_data_store from '$lib/element_data_store_v2.svelte';
 
 interface Props {
     data: any;
@@ -389,102 +389,8 @@ $effect(() => {
 {#if
     $ae_loc?.allow_access}
 
-<Modal components={modalRegistry}
-    regionBackdrop=''
-    regionBody=''
-    regionHeader='modal-header card-header text-2xl font-bold'
-    regionFooter='modal-footer flex justify-between space-x-2'
-    />
-
-<!-- App Shell -->
-<AppShell
-    regionPage={($ae_loc.iframe ? 'iframe' : '')}
-    slotHeader={($ae_loc.iframe ? 'iframe' : '')}
-    slotFooter={($ae_loc.iframe ? 'iframe' : '')}
-    >
-
-    {#snippet header()}
-
-            <!-- App Bar -->
-            <AppBar
-                gridColumns="grid-cols-3"
-                slotDefault="place-self-center"
-                slotTrail="place-content-end"
-                padding="px-4"
-                >
-                {#snippet lead()}
-
-                        <Element_data_store
-                            ds_code="hub__page__appshell_header_lead"
-                            ds_type="html"
-                            />
-
-
-                            {/snippet}
-                <!-- OSIT's Aether App -->
-                <!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
-                <!-- {@html $ae_sess.site_appshell_header} -->
-                <Element_data_store
-                    ds_code="hub__site__appshell_header"
-                    ds_type="html"
-                    />
-                {#snippet trail()}
-
-                        <Element_data_store
-                            ds_code="hub__page__appshell_header_trail"
-                            ds_type="html"
-                            />
-
-                            {/snippet}
-            </AppBar>
-
-
-            {/snippet}
-
-
-    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
-    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
-
-
-        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
-        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
-        <!-- {access_key ?? '-- param key not set --'} -->
-
-        <!-- Page Route Content -->
-        {@render children?.()}
-
-
-
-    {#snippet footer()}
-
-            <div
-                class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
-                class:ae_debug={$ae_loc.debug}
-                >
-                <Element_data_store
-                    ds_code="hub__site__appshell_footer"
-                    ds_type="html"
-                    class_li="grow flex flex-row justify-between"
-                    />
-
-                <button
-                    type="button"
-                    onclick={() => {
-                    console.log('Debug ae_loc:', $ae_loc);
-                    $ae_loc.debug = !$ae_loc?.debug;
-                }}
-                    id="AE-Quick-Debug"
-                    class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
-                    title="Turn debug content and styles off and on"
-                    >
-                    &pi;
-                </button>
-            </div>
-
-            {/snippet}
-
-
-</AppShell>
+    <!-- The children will contain top level (directly under body tag) div tag(s) or similar. Modal and AppShell should also be set there. The AppShell gives access to a header, footer, AppBar (usually under header),  -->
+    {@render children?.()}
 
 {:else if browser}
 
@@ -532,6 +438,25 @@ $effect(() => {
 </span>
 
 
+<div
+    class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
+    class:ae_debug={$ae_loc.debug}
+    >
+    <button
+        type="button"
+        onclick={() => {
+        console.log('Debug ae_loc:', $ae_loc);
+        $ae_loc.debug = !$ae_loc?.debug;
+    }}
+        id="AE-Quick-Debug"
+        class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
+        title="Turn debug content and styles off and on"
+        >
+        &pi;
+    </button>
+</div>
+
+
 <style lang="postcss">
 /* BEGIN: AE's Svelte Quick Debug component  */
 #AE-Quick-Debug {
@@ -541,8 +466,8 @@ $effect(() => {
     /* position: static; */
     /* position: sticky; */
     /* top: 1em; */
-    bottom: 0rem;
-    right: 0rem;
+    bottom: 2rem;
+    left: 1rem;
 
     padding: .0rem;
 
@@ -563,7 +488,7 @@ $effect(() => {
 
     font-size: .75rem;
 
-    z-index: 5;
+    z-index: 15;
 
     /* NOTE: transition when no longer hovering */
     transition-property: opacity, background-color;
diff --git a/src/routes/events/+layout.svelte b/src/routes/events/+layout.svelte
index 2f94aa60..dfab95e1 100644
--- a/src/routes/events/+layout.svelte
+++ b/src/routes/events/+layout.svelte
@@ -1,14 +1,35 @@
 <script lang="ts">
-/** @type {import('./$types').LayoutData} */
-export let data: any;
+
 
 // Imports
+// *** Import Svelte specific
 import { browser } from '$app/environment';
+// *** Import other supporting libraries
+import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
+import { Modal } from '@skeletonlabs/skeleton';
+import type {
+    ModalComponent
+    } from '@skeletonlabs/skeleton';
+
+const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
+	// modalComponentTwo: { ref: ModalComponentTwo },
+	// ...
+};
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
+import Element_data_store from '$lib/element_data_store_v2.svelte';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+    interface Props {
+        /** @type {import('./$types').LayoutData} */
+        data: any;
+        children?: import('svelte').Snippet;
+    }
+
+let { data, children }: Props = $props();
 // import { events_func } from '$lib/ae_events_functions';
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -101,4 +122,89 @@ if (browser) {
 	<title>Presentation Management - {$events_loc.title ?? 'Æ loading...'}</title>
 </svelte:head>
 
-<slot></slot>
+
+<Modal components={modalRegistry}
+    regionBackdrop=''
+    regionBody=''
+    regionHeader='modal-header card-header text-2xl font-bold'
+    regionFooter='modal-footer flex justify-between space-x-2'
+    />
+
+<!-- App Shell -->
+<AppShell
+    regionPage={($ae_loc.iframe ? 'iframe' : '')}
+    slotHeader={($ae_loc.iframe ? 'iframe' : '')}
+    slotFooter={($ae_loc.iframe ? 'iframe' : '')}
+    >
+
+    {#snippet header()}
+
+            <!-- App Bar -->
+            <AppBar
+                gridColumns="grid-cols-3"
+                slotDefault="place-self-center"
+                slotTrail="place-content-end"
+                padding="px-4"
+                >
+                {#snippet lead()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_lead"
+                            ds_type="html"
+                            />
+
+
+                            {/snippet}
+                <!-- OSIT's Aether App -->
+                <!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
+                <!-- {@html $ae_sess.site_appshell_header} -->
+                <Element_data_store
+                    ds_code="hub__site__appshell_header"
+                    ds_type="html"
+                    />
+                {#snippet trail()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_trail"
+                            ds_type="html"
+                            />
+
+                            {/snippet}
+            </AppBar>
+
+
+            {/snippet}
+
+
+    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
+    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
+
+
+        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
+        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
+        <!-- {access_key ?? '-- param key not set --'} -->
+
+        <!-- Page Route Content -->
+        {@render children?.()}
+
+
+
+    {#snippet footer()}
+
+        <div
+            class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
+            class:ae_debug={$ae_loc.debug}
+            >
+
+            <Element_data_store
+                ds_code="hub__site__appshell_footer"
+                ds_type="html"
+                class_li="grow flex flex-row justify-between"
+                />
+
+        </div>
+
+    {/snippet}
+
+
+</AppShell>
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 72731f45..ff770fb3 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-export let data: any;
 // console.log(`ae_events_pres_mgmt +page data:`, data);
 // console.log(`ae_events_pres_mgmt Data Params:`, data.url.searchParams.get('event_id'));
 
@@ -10,19 +9,24 @@ import { db_events } from "$lib/ae_events/db_events";
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
+    interface Props {
+        data: any;
+    }
+
+    let { data }: Props = $props();
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
 
 let ae_acct = data[$slct.account_id];
 
-$: lq__event_obj_li = liveQuery(async () => {
+let lq__event_obj_li = $derived(liveQuery(async () => {
     let results = await db_events.events
     .where('account_id')
     .equals(ae_acct.slct.account_id)
     .reverse()
     .sortBy('start_datetime')
     return results;
-});
+}));
 
 
 onMount(() => {
@@ -88,8 +92,7 @@ onMount(() => {
                     new Date(event_obj.start_datetime ?? '').getTime())
                     >
                     (new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
-                    || $ae_loc.trusted_access
-                    }
+                    || $ae_loc.trusted_access}
 
                     <!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
                     <a
diff --git a/src/routes/idaa/(idaa)/+layout.svelte b/src/routes/idaa/(idaa)/+layout.svelte
index 1ffa0318..b24e940c 100644
--- a/src/routes/idaa/(idaa)/+layout.svelte
+++ b/src/routes/idaa/(idaa)/+layout.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
-/** @type {import('./$types').LayoutData} */
-export let data: any;
+import { run } from 'svelte/legacy';
+
+
+
 import { browser } from '$app/environment';
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+    interface Props {
+        /** @type {import('./$types').LayoutData} */
+        data: any;
+        children?: import('svelte').Snippet;
+    }
+
+    let { data, children }: Props = $props();
 
 let log_lvl: number = 0;
 
@@ -106,39 +115,41 @@ if (browser && iframe == 'true') {
 
 
 
-$: if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
-    if (log_lvl > 1) {
-        console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
-    }
-
-    let iframe_height = 0;
-
-    if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
-        iframe_height = $ae_loc.iframe_height;
-    } else {
-        iframe_height = $ae_loc.iframe_height_modal_body;
-
-        // console.log($ae_loc.modal_dimensions);
-
-        if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
-            iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
+run(() => {
+        if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
+        if (log_lvl > 1) {
+            console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
         }
-        if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
-            iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
-        }
-        // iframe_height = iframe_height + 50; // Just in case
-    }
 
-    if (log_lvl > 1) {
-        console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
+        let iframe_height = 0;
+
+        if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
+            iframe_height = $ae_loc.iframe_height;
+        } else {
+            iframe_height = $ae_loc.iframe_height_modal_body;
+
+            // console.log($ae_loc.modal_dimensions);
+
+            if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
+                iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
+            }
+            if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
+                iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
+            }
+            // iframe_height = iframe_height + 50; // Just in case
+        }
+
+        if (log_lvl > 1) {
+            console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
+        }
+        window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
+    } else if ($ae_loc.iframe && $ae_loc.iframe_height) {
+        if (log_lvl > 1) {
+            console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
+        }
+        window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
     }
-    window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
-} else if ($ae_loc.iframe && $ae_loc.iframe_height) {
-    if (log_lvl > 1) {
-        console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
-    }
-    window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
-}
+    });
 
 </script>
 
@@ -158,7 +169,7 @@ $: if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_bo
     <div
         bind:clientHeight={$ae_loc.iframe_height}
         >
-        <slot />
+        {@render children?.()}
     </div>
     {#if $idaa_loc.novi_uuid}
         <span class="text-sm text-gray-500">
diff --git a/src/routes/idaa/+layout.svelte b/src/routes/idaa/+layout.svelte
new file mode 100644
index 00000000..d9d9e68d
--- /dev/null
+++ b/src/routes/idaa/+layout.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+
+
+// Imports
+// *** Import Svelte specific
+import { browser } from '$app/environment';
+// *** Import other supporting libraries
+import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
+import { Modal } from '@skeletonlabs/skeleton';
+import type {
+    ModalComponent
+    } from '@skeletonlabs/skeleton';
+
+
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+import Element_data_store from '$lib/element_data_store_v2.svelte';
+
+const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
+	// modalComponentTwo: { ref: ModalComponentTwo },
+	// ...
+};
+
+let { data, children }: Props = $props();
+
+</script>
+
+<svelte:head>
+	<title>IDAA - {$idaa_loc.title ?? 'Æ loading...'}</title>
+</svelte:head>
+
+<Modal components={modalRegistry}
+    regionBackdrop=''
+    regionBody=''
+    regionHeader='modal-header card-header text-2xl font-bold'
+    regionFooter='modal-footer flex justify-between space-x-2'
+    />
+
+<!-- App Shell -->
+<AppShell
+    regionPage={($ae_loc.iframe ? 'iframe' : '')}
+    slotHeader={($ae_loc.iframe ? 'iframe' : '')}
+    slotFooter={($ae_loc.iframe ? 'iframe' : '')}
+    >
+
+    {#snippet header()}
+
+            <!-- App Bar -->
+            <AppBar
+                gridColumns="grid-cols-3"
+                slotDefault="place-self-center"
+                slotTrail="place-content-end"
+                padding="px-4"
+                >
+                {#snippet lead()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_lead"
+                            ds_type="html"
+                            />
+
+
+                            {/snippet}
+                <!-- OSIT's Aether App -->
+                <!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
+                <!-- {@html $ae_sess.site_appshell_header} -->
+                <Element_data_store
+                    ds_code="hub__site__appshell_header"
+                    ds_type="html"
+                    />
+                {#snippet trail()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_trail"
+                            ds_type="html"
+                            />
+
+                            {/snippet}
+            </AppBar>
+
+
+            {/snippet}
+
+
+    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
+    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
+
+
+        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
+        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
+        <!-- {access_key ?? '-- param key not set --'} -->
+
+        <!-- Page Route Content -->
+        {@render children?.()}
+
+
+
+    {#snippet footer()}
+
+        <div
+            class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
+            class:ae_debug={$ae_loc.debug}
+            >
+
+            <Element_data_store
+                ds_code="hub__site__appshell_footer"
+                ds_type="html"
+                class_li="grow flex flex-row justify-between"
+                />
+
+        </div>
+
+    {/snippet}
+
+
+</AppShell>
diff --git a/src/routes/idaa/hold_+layout.svelte b/src/routes/idaa/hold_+layout.svelte
deleted file mode 100644
index 6eff8f21..00000000
--- a/src/routes/idaa/hold_+layout.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script lang="ts">
-/** @type {import('./$types').LayoutData} */
-</script>
-
-
-<slot />
diff --git a/src/routes/(notes)/notes/+layout@(notes).svelte b/src/routes/notes/+layout.svelte
similarity index 56%
rename from src/routes/(notes)/notes/+layout@(notes).svelte
rename to src/routes/notes/+layout.svelte
index a8566fa1..fc384efb 100644
--- a/src/routes/(notes)/notes/+layout@(notes).svelte
+++ b/src/routes/notes/+layout.svelte
@@ -49,8 +49,48 @@ if (browser) {
 </script>
 
 
+<svelte:head>
+	<title>Notes - {$notes_loc.title ?? 'Æ loading...'}</title>
+</svelte:head>
+
+
+<div class="ae_notes container m-auto outline-red-500">
+
+<nav class="submenu flex flex-row items-centr justify-center gap-1">
+    <a href="/" class="btn btn-sm variant-ghost-success hover:variant-filled-success">Home</a>
+    <!-- <a href="/about" class="btn btn-sm">About</a> -->
+    <!-- <a href="/settings" class="btn btn-sm">Settings</a> -->
+    <button
+
+        onclick={() => {
+
+            // Clear the local and session storage. Clearing the localStorage will force it to be re-created.
+            localStorage.clear();
+            sessionStorage.clear();
+
+            // Clear Indexed DB as well
+            indexedDB.deleteDatabase('ae_core_db');
+            indexedDB.deleteDatabase('ae_notes_db');
+
+            // This does not seem to work fast enough or something?
+            goto('/', {invalidateAll: true});
+
+            // The page does usually seem to reload correctly?
+            window.location.reload(true); // true only works with Firefox
+            // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
+        }}
+        class="btn btn-sm variant-ghost-success hover:variant-filled-success"
+        title="Clear App Data &amp; Settings - Reload: Clear the browser storage for this site"
+        >
+        <!-- <span class="fas fa-eraser mx-1"></span> -->
+        <span class="fas fa-sync mx-1"></span>
+        Clear &amp; Reload
+    </button>
+</nav>
+
+
 {#if $ae_loc.administrator_access && 1==2}
-<section
+<nav
     class="submenu flex flex-row justify-center"
     class:hidden={$ae_loc.iframe}
     >
@@ -89,10 +129,26 @@ if (browser) {
     {/each}
     </span>
 
-</section>
+</nav>
 {/if}
 
 
-<div class="container m-auto outline-red-500">
-{@render children()}
+<section class="status flex flex-col justify-center items-center gap-1">
+    {#if $ae_loc.administrator_access}
+        <h3 class="h4">Administrator Access - Technical Support</h3>
+        <p>You are accessing the notes module with "administrator" level permissions.</p>
+    {:else if $ae_loc.trusted_access}
+        <h3 class="h4">Trusted Access - Staff</h3>
+        <p>You are accessing the notes module with "trusted" level permissions.</p>
+    {:else if !$ae_loc.trusted_access}
+        <h3 class="h4">Restricted Access</h3>
+        <p>You are accessing to the notes module is limited</p>
+    {/if}
+</section>
+
+
+<section class="main_content outline">
+    {@render children()}
+</section>
+
 </div>
diff --git a/src/routes/(notes)/notes/+layout.ts b/src/routes/notes/+layout.ts
similarity index 50%
rename from src/routes/(notes)/notes/+layout.ts
rename to src/routes/notes/+layout.ts
index c4078347..c13e2426 100644
--- a/src/routes/(notes)/notes/+layout.ts
+++ b/src/routes/notes/+layout.ts
@@ -9,45 +9,45 @@ import { notes_func } from '$lib/ae_notes/ae_notes_functions';
 export async function load({ params, parent }) {
     let log_lvl: number = 0;
 
-    let data = await parent();
-    // console.log(`ae_notes +layout.ts data:`, data);
+    let parent_data = await parent();
+    // console.log(`ae_notes +layout.ts parent_data:`, parent_data);
 
-    let account_id = data.account_id;
+    let account_id = parent_data.account_id;
     if (!account_id) {
-        console.log(`notes +layout.ts: The account_id was not found in the data!!!`);
+        console.log(`notes +layout.ts: The account_id was not found in the parent_data!!!`);
         return false;
     }
 
-    let ae_acct = data[account_id];
+    let ae_acct = parent_data[account_id];
     if (log_lvl) {
         console.log(`ae_acct = `, ae_acct);
     }
 
-    let note_id = ae_acct.slct.note_id; // From root +layout.ts
-    if (!note_id) {
-        console.log(`ERROR: notes +layout.ts: The note_id was not found in the data!!!`);
-        // return false;
-    }
+    // let note_id = ae_acct.slct.note_id; // From root +layout.ts
+    // if (!note_id) {
+    //     console.log(`ERROR: notes +layout.ts: The note_id was not found in the parent_data!!!`);
+    //     // return false;
+    // }
 
-    let ae_params = {};
+    // let ae_params = {};
 
-    if (browser) {
-        if (note_id) {
-            let load_note_obj_li = notes_func.load_ae_obj_li__note({
-                api_cfg: ae_acct.api,
-                for_obj_type: 'account',
-                for_obj_id: account_id,
-                enabled: 'enabled',
-                hidden: 'not_hidden',
-                limit: 20,
-                // order_by_li: {},
-                params: ae_params,
-                try_cache: true,
-                log_lvl: log_lvl
-            });
-            ae_acct.slct.note_obj_li = load_note_obj_li;
-        }
-    }
+    // if (browser) {
+    //     if (note_id) {
+    //         let load_note_obj_li = notes_func.load_ae_obj_li__note({
+    //             api_cfg: ae_acct.api,
+    //             for_obj_type: 'account',
+    //             for_obj_id: account_id,
+    //             enabled: 'enabled',
+    //             hidden: 'not_hidden',
+    //             limit: 20,
+    //             // order_by_li: {},
+    //             params: ae_params,
+    //             try_cache: true,
+    //             log_lvl: log_lvl
+    //         });
+    //         ae_acct.slct.note_obj_li = load_note_obj_li;
+    //     }
+    // }
 
     // let load_note_obj = notes_func.load_ae_obj_id__note({
     //     api_cfg: ae_acct.api,
@@ -70,12 +70,12 @@ export async function load({ params, parent }) {
     //     // manage: {name: 'Manage', href: '/notes/manage', access: 'administrator', disable: true, hide: true},
     //     locations: {name: 'Locations', href: `/notes/${note_id}/locations`, access: false, disable: false, hide: false},
     //     };
-    // data.submenu = submenu
+    // parent_data.submenu = submenu
 
-    // WARNING: Precaution against shared data between sites and sessions.
-    data[account_id] = ae_acct;
+    // WARNING: Precaution against shared parent_data between sites and sessions.
+    parent_data[account_id] = ae_acct;
 
-    return data;
+    return parent_data;
 }
 
 // export const prerender = false;
diff --git a/src/routes/(notes)/notes/+page.svelte b/src/routes/notes/+page.svelte
similarity index 95%
rename from src/routes/(notes)/notes/+page.svelte
rename to src/routes/notes/+page.svelte
index 571e2978..44a41c85 100644
--- a/src/routes/(notes)/notes/+page.svelte
+++ b/src/routes/notes/+page.svelte
@@ -24,8 +24,8 @@ let ae_acct = data[$slct.account_id];
 // $notes_slct.note_obj_li = ae_acct.slct.note_obj_li;
 
 
-let lq__note_obj_li = liveQuery(
-    () => db_notes.notes
+let lq__note_obj_li = $derived(liveQuery(async () => {
+    let results = await db_notes.note
     .orderBy('start_datetime')
     .reverse()
     .toArray()
@@ -40,17 +40,21 @@ let lq__note_obj_li = liveQuery(
     //     // .orderBy('name')
     //     // .offset(10).limit(5)
     //     // .toArray()
-);
+
+    return results;
+}));
 // console.log(`lq__note_obj_li:`, $lq__note_obj_li);
 
-let lq__note_obj = liveQuery(
-    async () => db_notes.notes
+let lq__note_obj = $derived(liveQuery(async () => {
+    let results = await db_notes.notes
     .where('id')
     .equals(ae_acct.slct.note_id)
     .toArray()
     // .first()
     // .get($notes_slct.note_id)
-);
+
+    return results;
+}));
 
 onMount(() => {
     console.log('Events - Presentation Management: +page.svelte');
diff --git a/src/routes/notes/+page.ts b/src/routes/notes/+page.ts
new file mode 100644
index 00000000..e101dc02
--- /dev/null
+++ b/src/routes/notes/+page.ts
@@ -0,0 +1,61 @@
+/** @type {import('./$types').PageLoad} */
+
+import { error } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { notes_func } from '$lib/ae_notes/ae_notes_functions';
+
+export async function load({ parent }) {
+    let log_lvl: number = 0;
+
+    let parent_data = await parent();
+
+    let account_id = parent_data.account_id;
+
+    let ae_acct = parent_data[account_id];
+
+    let note_id = ae_acct.slct.note_id; // From root +layout.ts
+    if (!note_id) {
+        console.log(`ERROR: notes +layout.ts: The note_id was not found in the parent_data!!!`);
+        // return false;
+    }
+
+    if (browser) {
+        if (note_id) {
+            // let ae_params = {};
+
+            let load_note_obj_li = notes_func.load_ae_obj_id__note({
+                api_cfg: ae_acct.api,
+                note_id: note_id,
+                // params: ae_params,
+                try_cache: true,
+                log_lvl: log_lvl
+            });
+            ae_acct.slct.note_obj_li = load_note_obj_li;
+        }
+
+
+        // Should we limit these to note.conference = true?
+        let load_note_obj_li = await notes_func.load_ae_obj_li__note({
+            api_cfg: ae_acct.api,
+            for_obj_type: 'account',
+            for_obj_id: account_id,
+            hidden: 'not_hidden',
+            enabled: 'enabled',
+            order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+            limit: 25,
+            // params: ae_params,
+            try_cache: false,
+            log_lvl: log_lvl
+        });
+        ae_acct.slct.note_obj_li = load_note_obj_li;
+
+    }
+
+    parent_data[account_id] = ae_acct;
+
+    return parent_data;
+
+    // return {
+    //     ae_notes_page_ts: true,
+    // };
+}
diff --git a/src/routes/(notes)/+layout.svelte b/src/routes/notes/hold+layout.svelte
similarity index 92%
rename from src/routes/(notes)/+layout.svelte
rename to src/routes/notes/hold+layout.svelte
index 1d6db7d5..1a0979f5 100644
--- a/src/routes/(notes)/+layout.svelte
+++ b/src/routes/notes/hold+layout.svelte
@@ -48,13 +48,13 @@ import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_sto
 <section class="status flex flex-col justify-center items-center gap-1">
 {#if $ae_loc.administrator_access}
     <h3 class="h4">Administrator Access - Technical Support</h3>
-    <p>You are accessing the notes system with "administrator" level permissions.</p>
+    <p>You are accessing the notes module with "administrator" level permissions.</p>
 {:else if $ae_loc.trusted_access}
     <h3 class="h4">Trusted Access - Staff</h3>
-    <p>You are accessing the notes system with "trusted" level permissions.</p>
+    <p>You are accessing the notes module with "trusted" level permissions.</p>
 {:else if !$ae_loc.trusted_access}
     <h3 class="h4">Restricted Access</h3>
-    <p>You are accessing to the notes system is limited</p>
+    <p>You are accessing to the notes module is limited</p>
 {/if}
 </section>
 
diff --git a/src/routes/(notes)/+layout.ts b/src/routes/notes/hold+layout.ts
similarity index 100%
rename from src/routes/(notes)/+layout.ts
rename to src/routes/notes/hold+layout.ts