From aaa6eaa4332d590134d23ae3c5de6d5439115717 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 3 Dec 2024 16:51:31 -0500
Subject: [PATCH] Cleaning up the main layout.

---
 src/routes/+layout.svelte | 209 +++++++++++++++++---------------------
 1 file changed, 96 insertions(+), 113 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7d484d01..bcc35163 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutData} */
 let log_lvl: number = 0;
-// console.log(`ae_ Svelte root +layout data:`, data);
 
 // *** Import Svelte specific
-import { onMount } from 'svelte';
 import '../app.postcss';
 
 // *** Import other supporting libraries
@@ -13,12 +11,8 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
 initializeStores();
 import { Modal } from '@skeletonlabs/skeleton';
 import type {
-    // DrawerSettings, DrawerComponent, DrawerStore,
-    ModalSettings, ModalComponent, ModalStore
+    ModalComponent
     } from '@skeletonlabs/skeleton';
-// const drawerStore = getDrawerStore();
-
-// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
 
 const modalRegistry: Record<string, ModalComponent> = {
 	// Set a unique modal ID, then pass the component reference
@@ -30,11 +24,8 @@ const modalRegistry: Record<string, ModalComponent> = {
 // Highlight JS
 import hljs from 'highlight.js/lib/core';
 import 'highlight.js/styles/github-dark.css';
-// import type { Writable } from 'svelte/store';
-// import { get } from 'svelte/store';
+
 import { browser } from '$app/environment';
-// import { goto } from '$app/navigation';
-// import { page } from "$app/stores";
 import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
 import xml from 'highlight.js/lib/languages/xml'; // for HTML
 import css from 'highlight.js/lib/languages/css';
@@ -48,9 +39,9 @@ hljs.registerLanguage('typescript', typescript);
 storeHighlightJs.set(hljs);
 
 // Floating UI for Popups
-import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
-import { storePopup } from '@skeletonlabs/skeleton';
-storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
+// import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
+// import { storePopup } from '@skeletonlabs/skeleton';
+// storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
 // *** Import Aether specific variables and functions
 import Analytics from '$lib/analytics.svelte'
@@ -63,8 +54,16 @@ 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';
 
+interface Props {
+    data: any;
+    children?: import('svelte').Snippet;
+}
 
-export let data: any;
+let { data, children }: Props = $props();
+
+if (log_lvl) {
+    console.log(`ae_root +layout.svelte data:`, data);
+}
 
 // let account_id = localStorage.getItem('ae_account_id');
 // console.log(`account_id = `, account_id);
@@ -75,28 +74,30 @@ if (log_lvl) {
     console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`);
 }
 let ae_acct = data[$slct.account_id];
-// console.log(`*ae_root +layout.svelte* ae_acct = `, ae_acct);
-// let ae_acct = data.ae_acct;
-// $ae_api = ae_acct.api;
-// $ae_loc = ae_acct.loc;
 
 $ae_api = {
     ...$ae_api,
     ...ae_acct.api,
 }
-// console.log(`$ae_api = `, $ae_api);
+if (log_lvl) {
+    console.log(`$ae_api = `, $ae_api);
+}
 
 $ae_loc = {
     ...$ae_loc,
     ...ae_acct.loc,
 }
-// console.log(`$ae_loc = `, $ae_loc);
+if (log_lvl) {
+    console.log(`$ae_loc = `, $ae_loc);
+}
 
 $slct = {
     ...$slct,
     ...ae_acct.slct,
 }
-// console.log(`$slct = `, $slct);
+if (log_lvl) {
+    console.log(`$slct = `, $slct);
+}
 
 // IDB caches - Check if the last reload timestamp for $ae_loc.last_idb_reload is no more than 15 minutes ago.
 let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes?
@@ -242,30 +243,19 @@ if (browser) {
 
         $ae_loc.ver = $ae_sess.ver;
 
-        // $ae_loc = {};
-        localStorage.removeItem('ae_loc');
-        localStorage.removeItem('events_loc');
-        // localStorage.clear();
-
-        // sessionStorage.removeItem('ae_sess');
-        // sessionStorage.removeItem('events_sess');
-        // sessionStorage.clear();
-
-
         // This does not seem to work fast enough or something?
         // goto('/', {replaceState: true, invalidateAll: true});
 
-        // localStorage.removeItem('ae_loc');
-        // localStorage.removeItem('events_loc');
+        // $ae_loc = {};
+        localStorage.removeItem('ae_loc');
+        localStorage.removeItem('events_loc');
         localStorage.clear();
 
+        // sessionStorage.removeItem('ae_sess');
+        // sessionStorage.removeItem('events_sess');
         sessionStorage.clear();
 
         window.location.reload();
-
-        // localStorage.removeItem('ae_loc');
-        // localStorage.removeItem('events_loc');
-        // localStorage.clear();
     }
 
 
@@ -323,16 +313,6 @@ if (browser) {
         }
     });
 
-
-    // let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
-    // if ($ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
-    //     document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
-    //     document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
-    // } else {
-    //     document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
-    // }
-
-
     let iframe = data.url.searchParams.get('iframe');
     if (iframe == 'true') {
         console.log('Use iframe layout!');
@@ -377,10 +357,6 @@ if (browser) {
 
 }
 
-
-// $ae_sess.site_appshell_header = JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header'));
-// console.log(`$ae_sess.site_appshell_header = `, $ae_sess.site_appshell_header);
-
 // We want to loop through all of the data store (ds) key value pairs and set them to localStorage
 // $: if (ae_acct.ds) {
 //     console.log(`ae_ds__ data:`, ae_acct.ds)
@@ -391,17 +367,14 @@ if (browser) {
 // }
 
 // Check if in the array of: super > manager > administrator > trusted > public > authenticated > anonymous
-let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
-$: if (browser && $ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
-    document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
-    document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
-} else if (browser) {
-    document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
-}
-
-
-onMount(() => {
-    // console.log('Root: +layout.svelte');
+const access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
+$effect(() => {
+        if (browser && $ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
+        document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+        document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
+    } else if (browser) {
+        document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
+    }
 });
 </script>
 
@@ -435,37 +408,43 @@ onMount(() => {
     slotFooter={($ae_loc.iframe ? 'iframe' : '')}
     >
 
-    <svelte:fragment slot="header">
-        <!-- App Bar -->
-        <AppBar
-            gridColumns="grid-cols-3"
-            slotDefault="place-self-center"
-            slotTrail="place-content-end"
-            padding="px-4"
-            >
-            <svelte:fragment slot="lead">
+    {#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__page__appshell_header_lead"
+                    ds_code="hub__site__appshell_header"
                     ds_type="html"
                     />
+                {#snippet trail()}
 
-            </svelte:fragment>
-            <!-- 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"
-                />
-            <svelte:fragment slot="trail">
-                <Element_data_store
-                    ds_code="hub__page__appshell_header_trail"
-                    ds_type="html"
-                    />
-            </svelte:fragment>
-        </AppBar>
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_trail"
+                            ds_type="html"
+                            />
 
-    </svelte:fragment>
+                            {/snippet}
+            </AppBar>
+
+
+            {/snippet}
 
 
     <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
@@ -477,35 +456,37 @@ onMount(() => {
         <!-- {access_key ?? '-- param key not set --'} -->
 
         <!-- Page Route Content -->
-        <slot />
+        {@render children?.()}
 
 
 
-    <svelte:fragment slot="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"
-                />
+    {#snippet footer()}
 
-            <button
-                type="button"
-                on:click={() => {
+            <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>
-    </svelte:fragment>
+                    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>
@@ -520,11 +501,13 @@ onMount(() => {
         <p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p>
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 localStorage.clear();
                 sessionStorage.clear();
                 alert('Local and Session Storage cleared. The page should now refresh on its own.');
-                window.location.reload(true);
+                // window.location.reload({forceGet: true});
+                // window.location.reload(true);
+                window.location.reload();
             }}
             class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning hover:variant-glass-warning text-error-400 hover:text-error-800 transition-all"
             title="Reload and clear the page cache"