Work on general style clean up. So much to do...

src/lib/element_data_store_v2.svelte

@@ -792,7 +792,7 @@ async function handle_update__data_store(
 
 <button
     type="button"
-    class="ae_btn_edit__ds btn hover:preset-tonal-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
+    class="ae_btn_edit__ds btn hover:preset-tonal-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 p-1 z-50"
     class:opacity-5={!$ae_loc.manager_access}
     class:hidden={!(
         ($ae_loc.manager_access && $ae_loc.edit_mode)

src/routes/events/+layout.svelte

@@ -4,9 +4,17 @@ let log_lvl: number = 0;
 
 // *** Import Svelte specific
 import { browser } from '$app/environment';
+
 // *** Import other supporting libraries
+// import * as icons from '@lucide/svelte';
+import {
+        Brain,
+        House, Library,
+        RefreshCw,
+        Satellite
+    } from '@lucide/svelte';
 import { AppBar } from '@skeletonlabs/skeleton-svelte';
-import { Modal } from '@skeletonlabs/skeleton-svelte';
+// import { Modal } from '@skeletonlabs/skeleton-svelte';
 // import type {
 //     ModalComponent
 //     } from '@skeletonlabs/skeleton-svelte';
@@ -132,44 +140,76 @@ if (browser) {
     slotHeader={($ae_loc.iframe ? 'iframe' : '')}
     slotFooter={($ae_loc.iframe ? 'iframe' : '')}
     > -->
-<main>
+<div
-    {#snippet header()}
+    class:iframe={$ae_loc?.iframe}
-
+    class="ae_events h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
-            <!-- 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}
+<nav
-                <!-- OSIT's Aether App -->
+    class="
-                <!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
+        submenu
-                <!-- {@html $ae_sess.site_appshell_header} -->
+        flex flex-row flex-wrap
-                <Element_data_store
+        items-center justify-between
-                    ds_code="hub__site__appshell_header"
+        gap-1
-                    ds_type="html"
+        border-b-2
-                    />
+        p-1
-                {#snippet trail()}
+        px-2
+        pb-2
+        "
+    >
+    <span class="justify-self-start">
 
-                        <Element_data_store
+        <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
-                            ds_code="hub__page__appshell_header_trail"
+        <Satellite
-                            ds_type="html"
+            size="1.5em"
-                            />
+            class="mx-1 inline-block text-gray-500"
+            />
+        <abbr title="Aether - IDAA Module">
+            Æ
+            IDAA
+        </abbr>
+    </span>
+    <Element_data_store
+                ds_code="hub__site__appshell_header"
+                ds_type="html"
+                />
+    <a
+        href="/"
+        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
+        >
+        <House />
+        <span class="hidden md:inline">
+            Home
+        </span>
+    </a>
+</nav>
 
-                            {/snippet}
+<section
-            </AppBar>
+    class:iframe={$ae_loc?.iframe}
+    class="main_content grow px-1 md:px-2 pb-28"
+    >
 
-
+    <!-- OLD: App Bar -->
-            {/snippet}
+    <!-- <AppBar
+        gridColumns="grid-cols-3"
+        slotDefault="place-self-center"
+        slotTrail="place-content-end"
+        padding="px-4"
+        >
+        <Element_data_store
+            ds_code="hub__page__appshell_header_lead"
+            ds_type="html"
+            />
+        <Element_data_store
+            ds_code="hub__site__appshell_header"
+            ds_type="html"
+            />
+        <Element_data_store
+            ds_code="hub__page__appshell_header_trail"
+            ds_type="html"
+            />
+    </AppBar> -->
 
 
     <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
@@ -185,22 +225,28 @@ if (browser) {
 
 
 
-    {#snippet footer()}
+    <!-- {#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} -->
 
-    {/snippet}
+</section>
 
-</main>
+
+<section
+    class="footer_contenttext-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 py-0.5 min-h-7"
+    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"
+        />
+
+</section>
+
+
+</div>
 <!-- </AppShell> -->

src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte

@@ -86,8 +86,8 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
                     $events_sess.launcher.controller_trigger_send = null;
                 }}
                 class="btn btn-sm hover:preset-filled-primary-500"
-                class:preset-tonal-warning border border-warning-500={!$events_loc.launcher.ws_connect}
+                class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
-                class:preset-tonal-success border border-success-500={$events_loc.launcher.ws_connect}
+                class:preset-tonal-success={$events_loc.launcher.ws_connect}
                 >
                 {#if $events_loc.launcher.ws_connect}
                     <!-- <span class="fas fa-signal m-1"></span> -->

src/routes/events/[event_id]/locations/locations_page_menu.svelte

@@ -133,7 +133,7 @@ export let lq__event_obj: any;
                 }}
                 class="btn btn-sm"
                 class:preset-tonal-success border border-success-500={!$events_loc.pres_mgmt?.hide__device_code}
-                class:preset-tonal-warning border border-warning-500={$events_loc.pres_mgmt?.hide__device_code}
+                class:preset-tonal-warning border-warning-500={$events_loc.pres_mgmt?.hide__device_code}
                 title="Show or hide the device code."
                 >
                 {#if !$events_loc.pres_mgmt.hide__device_code}
@@ -153,7 +153,7 @@ export let lq__event_obj: any;
                 }}
                 class="btn btn-sm"
                 class:preset-tonal-success border border-success-500={!$events_loc.pres_mgmt?.hide__location_code}
-                class:preset-tonal-warning border border-warning-500={$events_loc.pres_mgmt?.hide__location_code}
+                class:preset-tonal-warning border-warning-500={$events_loc.pres_mgmt?.hide__location_code}
                 title="Show or hide the location code."
                 >
                 {#if !$events_loc.pres_mgmt.hide__location_code}
@@ -173,7 +173,7 @@ export let lq__event_obj: any;
                 }}
                 class="btn btn-sm"
                 class:preset-tonal-success border border-success-500={!$events_loc.pres_mgmt?.hide__session_code}
-                class:preset-tonal-warning border border-warning-500={$events_loc.pres_mgmt?.hide__session_code}
+                class:preset-tonal-warning border-warning-500={$events_loc.pres_mgmt?.hide__session_code}
                 title="Show or hide the session code."
                 >
                 {#if !$events_loc.pres_mgmt.hide__session_code}

src/routes/idaa/+layout.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutData} */
-
 let log_lvl: number = 1;
 
-// Imports
 // *** Import Svelte specific
 import { browser } from '$app/environment';
+
 // *** Import other supporting libraries
+// import * as icons from '@lucide/svelte';
+import {
+        Brain,
+        House, Library,
+        RefreshCw,
+        Satellite
+    } from '@lucide/svelte';
 import { AppBar } from '@skeletonlabs/skeleton-svelte';
 import type {
     ModalComponent
     } from '@skeletonlabs/skeleton-svelte';
 
 
+// *** Import Aether specific variables and functions
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { core_func } from '$lib/ae_core/ae_core_functions';
 import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
@@ -97,57 +104,85 @@ function add_activity_log(
 	<title>IDAA - {$idaa_loc?.title ?? 'Æ loading...'}</title>
 </svelte:head>
 
-<Modal components={modalRegistry}
+<!-- <Modal components={modalRegistry}
     regionBackdrop=''
     regionBody=''
     regionHeader='modal-header card-header text-2xl font-bold'
     regionFooter='modal-footer flex justify-between space-x-2'
-    />
+    /> -->
 
+<div
+    class:iframe={$ae_loc?.iframe}
+    class="ae_idaa h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
+    >
+
+<nav
+    class="
+        submenu
+        flex flex-row flex-wrap
+        items-center justify-between
+        gap-1
+        border-b-2
+        p-1
+        px-2
+        pb-2
+        "
+    >
+    <span class="justify-self-start">
+
+        <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
+        <Satellite
+            size="1.5em"
+            class="mx-1 inline-block text-gray-500"
+            />
+        <abbr title="Aether - IDAA Module">
+            Æ
+            IDAA
+        </abbr>
+    </span>
+    <a
+        href="/"
+        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
+        >
+        <House />
+        <span class="hidden md:inline">
+            Home
+        </span>
+    </a>
+</nav>
 <!-- App Shell -->
-<AppShell
+<!-- <AppShell
     regionPage={($ae_loc?.iframe ? 'iframe' : '')}
     slotHeader={($ae_loc?.iframe ? 'iframe' : '')}
     slotFooter={($ae_loc?.iframe ? 'iframe' : '')}
+    > -->
+<section
+    class:iframe={$ae_loc?.iframe}
+    class="main_content grow px-1 md:px-2 pb-28"
     >
 
-    {#snippet header()}
+    <!-- OLD: App Bar -->
-
+    <!-- <AppBar
-            <!-- App Bar -->
+        gridColumns="grid-cols-3"
-            <AppBar
+        slotDefault="place-self-center"
-                gridColumns="grid-cols-3"
+        slotTrail="place-content-end"
-                slotDefault="place-self-center"
+        padding="px-4"
-                slotTrail="place-content-end"
+        >
-                padding="px-4"
+        <Element_data_store
-                >
+            ds_code="hub__page__appshell_header_lead"
-                {#snippet lead()}
+            ds_type="html"
-
+            />
-                        <Element_data_store
+        <Element_data_store
-                            ds_code="hub__page__appshell_header_lead"
+            ds_code="hub__site__appshell_header"
-                            ds_type="html"
+            ds_type="html"
-                            />
+            />
+        <Element_data_store
+            ds_code="hub__page__appshell_header_trail"
+            ds_type="html"
+            />
+    </AppBar> -->
 
 
-                            {/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)
@@ -161,24 +196,22 @@ function add_activity_log(
         <!-- Page Route Content -->
         {@render children?.()}
 
+</section>
 
 
-    {#snippet footer()}
+<section
+    class="footer_content flex text-sm sm:text-sm lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
+    class:ae_debug={$ae_loc?.debug}
+    >
 
-        <div
+    <Element_data_store
-            class="flex text-sm sm:text-sm lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
+        ds_code="hub__site__appshell_footer"
-            class:ae_debug={$ae_loc?.debug}
+        ds_type="html"
-            >
+        class_li="grow flex flex-row justify-between"
+        />
 
-            <Element_data_store
+</section>
-                ds_code="hub__site__appshell_footer"
-                ds_type="html"
-                class_li="grow flex flex-row justify-between"
-                />
-
-        </div>
-
-    {/snippet}
 
 
-</AppShell>
+</div>
+<!-- </AppShell> -->

src/routes/journals/+layout.svelte

@@ -21,10 +21,8 @@ import type { key_val } from '$lib/ae_stores';
 // import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
 import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
-
 // import { journals_func } from '$lib/ae_journals/ae_journals_functions';
-
+import Element_data_store from '$lib/element_data_store_v2.svelte';
-// import Element_data_store from '$lib/element_data_store_v2.svelte';
 
 // *** Setup Svelte properties
 interface Props {
@@ -76,7 +74,10 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 
 {#if $ae_loc.user_id && $ae_loc.person_id && $ae_loc.trusted_access}
 <!-- These are needed: h-full overflow-auto -->
-<div class="ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto">
+<div
+    class:iframe={$ae_loc?.iframe}
+    class="ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
+    >
 
 <nav
     class="
@@ -191,10 +192,28 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 </section> -->
 
 <!-- Add overflow-auto to section element to have the main nav sort of sticky at top -->
-<section class="main_content grow px-1 md:px-2 pb-28">
+<section
+    class:iframe={$ae_loc?.iframe}
+    class="main_content grow px-1 md:px-2 pb-28"
+    >
     {@render children()}
 </section>
 
+
+<section
+    class="footer_content flex text-sm sm:text-sm lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
+    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"
+        />
+
+</section>
+
+
 </div>
 
 {:else}