From 7b853ede8c0f6cff4658646aa2b2bf86c47b69d9 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 15 Jul 2025 17:55:53 -0400
Subject: [PATCH] Moving on to the user sign in/out

---
 src/lib/ae_stores.ts             |   7 +-
 src/lib/e_app_cfg.svelte         | 139 ++++++++++++----
 src/lib/e_app_sign_in_out.svelte |   2 +-
 src/lib/e_app_sys_menu.svelte    | 118 +++++++------
 src/lib/e_app_theme.svelte       | 275 +++++++++++++++++++++----------
 5 files changed, 360 insertions(+), 181 deletions(-)

diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 965acd19..388ac12e 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -168,10 +168,15 @@ const ae_app_local_data_defaults: key_val = {
         hide: false,
         expand: false,
         hide_access_type: false,
+        expand_access_type: false,
         hide_edit_mode: false,
+        expand_edit_mode: false,
         hide_user: false,
+        expand_user: false,
         hide_theme: false,
-        hide_cfg: false,
+        expand_theme: false,
+        hide_app_cfg: false,
+        expand_app_cfg: false,
     },
     debug_menu: {
         hide: false,
diff --git a/src/lib/e_app_cfg.svelte b/src/lib/e_app_cfg.svelte
index 1f565909..29b47ee6 100644
--- a/src/lib/e_app_cfg.svelte
+++ b/src/lib/e_app_cfg.svelte
@@ -1,31 +1,47 @@
 <script lang="ts">
-import { onMount } from 'svelte';
+
+import {
+        Settings
+    } from '@lucide/svelte';
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
-import Element_theme from '$lib/e_app_theme.svelte';
+// import Element_theme from '$lib/e_app_theme.svelte';
 
 let notes: null|string = null;
 let all: boolean = false;
 
-// export let theme_mode: null|string = null;
-export let set_theme_mode: null|boolean = null;
-// export let theme_name: null|string = null;
-export let set_theme_name: null|boolean = null;
+interface Props {
+    log_lvl?: number;
+    hide?: null|boolean;
+    expand?: boolean;
+    // export let theme_mode: null|string = null;
+    // set_theme_mode?: null|boolean;
+    // export let theme_name: null|string = null;
+    // set_theme_name?: null|boolean;
+}
+
+let {
+    log_lvl = $bindable(0),
+    hide = $bindable(false),
+    expand = $bindable(false),
+    // set_theme_mode = null,
+    // set_theme_name = null
+}: Props = $props();
 
 // const dispatch = createEventDispatcher();
 
 
-onMount(() => {
-    // console.log('** Element Mounted: ** Element App Config');
-    if (set_theme_mode) {
-        $slct_trigger = 'set_theme_mode';
-    }
-    if (set_theme_name) {
-        $slct_trigger = 'set_theme_name';
-    }
-});
+// onMount(() => {
+//     // console.log('** Element Mounted: ** Element App Config');
+//     if (set_theme_mode) {
+//         $slct_trigger = 'set_theme_mode';
+//     }
+//     if (set_theme_name) {
+//         $slct_trigger = 'set_theme_name';
+//     }
+// });
 
 // $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
 //     console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
@@ -93,7 +109,7 @@ function handle_clear_storage(item: null|string) {
 
 <!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
 <section
-    id="xAE-App-Cfg"
+    id="AE-App-Cfg"
     class="
         ae_app_cfg
         hidden-print
@@ -108,11 +124,12 @@ function handle_clear_storage(item: null|string) {
         p-1 my-1
         border-2 border-gray-200
         "
+    class:hidden={hide}
     >
 
     <header
-        class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
-        class="ae_header w-64 "
+        class:hidden={!expand}
+        class="ae_header w-full"
         >
         <h2 class="text-sm text-center font-semibold">
             Config
@@ -122,7 +139,7 @@ function handle_clear_storage(item: null|string) {
 
 <div
     class="ae_cfg_content text-xs space-y-4 my-4"
-    class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
+    class:hidden={!expand}
     data-sveltekit-preload-data="false"
     >
 
@@ -163,12 +180,7 @@ function handle_clear_storage(item: null|string) {
 </section>
 <!-- END: Access Type -->
 
-<Element_theme
-    set_theme_mode={set_theme_mode}
-    set_theme_name={set_theme_name}
-    />
 
-<!-- END: Theme -->
 
 
 <section class="space-y-2">
@@ -204,7 +216,7 @@ function handle_clear_storage(item: null|string) {
 <button
 	class="btn btn-sm preset-tonal-warning"
 	title="Reload and clear the page cache"
-	on:click={() => {
+	onclick={() => {
 		// $ae_loc.
 		window.location.reload(true);
 	}}
@@ -218,7 +230,7 @@ function handle_clear_storage(item: null|string) {
 <button
 	class="btn btn-sm preset-tonal-warning"
 	title="Clear the browser storage for this page"
-	on:click={() => {
+	onclick={() => {
         if (!confirm('Are you sure you want to clear the local and session storage?')) {
             return false;
         }
@@ -246,17 +258,72 @@ function handle_clear_storage(item: null|string) {
 
 </div>
 
+<!-- class:justify-between={expand}
+class:justify-end={!expand} -->
+<div
+    class="flex flex-row gap-2 items-center justify-between w-full"
 
-<button
-    class="btn btn-sm preset-tonal-warning ae_cfg_btn hover:transition-all"
-    on:click={() => {
-        $ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
-    }}
     >
-    <span class="fas fa-cog mx-1"></span>
-    <span class="cfg_text">Config</span>
-</button>
+    <!-- {#if !expand} -->
+    <span>
+        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
+            {#if $ae_loc.access_type == 'super'}
+                <span class="fas fa-secret mx-1"></span> Super Access
+            {:else if $ae_loc.access_type == 'manager'}
+                <span class="fas fa-user-shield mx-1"></span> Manager Access
+            {:else if $ae_loc.access_type == 'administrator'}
+                <span class="fas fa-user-ninja mx-1"></span> Administrator Access
+            {:else if $ae_loc.access_type == 'trusted'}
+                <span class="fas fa-user-nurse mx-1"></span> Trusted Access
+            {:else if $ae_loc.access_type == 'authenticated'}
+                <span class="fas fa-user-friends mx-1"></span> Authenticated Access
+            {:else if $ae_loc.access_type == 'anonymous'}
+                <span class="fas fa-users mx-1"></span> Anonymous Access
+            {:else}
+                <span class="fas fa-unlock mx-1"></span> Unknown Access
+            {/if}
 
+            <!-- <button
+                class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
+                on:click={() => {
+                    handle_clear_access();
+                }}
+                title="Access mode is currently enabled/unlocked. Click to exit and lock."
+                >
+                <span class="fas fa-lock mx-1"></span> Lock
+            </button> -->
+        {:else}
+            Not logged in
+        {/if}
+    </span>
+    <!-- {/if} -->
+
+    <button
+        class="
+            ae_cfg_btn
+            btn btn-sm
+            preset-tonal-warning
+            group transition-all
+            "
+        onclick={() => {
+            expand = !expand;
+        }}
+        >
+        <!-- <span class="fas fa-cog m-1"></span> -->
+        <span class="inline-block" title="Settings">
+        <Settings />
+        </span>
+        <span
+            class="
+                cfg_text
+                hidden
+                group-hover:inline
+                "
+            >
+            Settings
+        </span>
+    </button>
+</div>
 
 </section>
 
@@ -264,11 +331,11 @@ function handle_clear_storage(item: null|string) {
 <style lang="postcss">
 
 .ae_cfg_btn .cfg_text {
-    display: none;
+    /* display: none; */
 }
 
 .ae_cfg_btn:hover .cfg_text {
-    display: initial;
+    /* display: initial; */
     /* outline: solid thin red; */
 }
 
diff --git a/src/lib/e_app_sign_in_out.svelte b/src/lib/e_app_sign_in_out.svelte
index eeecd8d0..4c668e1c 100644
--- a/src/lib/e_app_sign_in_out.svelte
+++ b/src/lib/e_app_sign_in_out.svelte
@@ -341,7 +341,7 @@ async function handle_change_password() {
 <!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. -->
 <!-- *:hover:inline -->
 <section
-    id="xAE-Sign-In-Out"
+    id="AE-Sign-In-Out"
     class="
         ae_sign_in_out
         hidden-print
diff --git a/src/lib/e_app_sys_menu.svelte b/src/lib/e_app_sys_menu.svelte
index 60631fbd..fb30f5c5 100644
--- a/src/lib/e_app_sys_menu.svelte
+++ b/src/lib/e_app_sys_menu.svelte
@@ -27,6 +27,7 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import Element_access_type from '$lib/e_app_access_type.svelte';
 import Element_app_cfg from '$lib/e_app_cfg.svelte';
 import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
+import Element_theme from '$lib/e_app_theme.svelte';
 
 // *** Setup Svelte properties
 interface Props {
@@ -73,13 +74,13 @@ max-w-max -->
         transition hover:transition-all
         z-10 hover:z-20
     "
-    class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
+    class:hidden={!$ae_loc?.sys_menu?.expand_btn}
     > -->
-<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
+<!-- && !$ae_loc?.sys_menu?.expand -->
     <!-- !$ae_loc
-    ?.app_cfg?.show_element__menu_btn -->
+    ?.sys_menu?.expand_btn -->
 <!-- bg-blue-100/60 dark:bg-blue-800/50 -->
-<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} -->
+<!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
 <!-- mx-1 my-2 -->
 <!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
 <section
@@ -116,19 +117,19 @@ max-w-max -->
         duration-500 hover:duration-200
         ease-in-out
     "
-    class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
-    class:w-full={$ae_loc?.app_cfg?.show_element__menu}
+    class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
+    class:w-full={$ae_loc?.sys_menu?.expand}
     class:hidden={false}
-    class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
+    class:border-transparent={!$ae_loc?.sys_menu?.expand}
 
-    class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
+    class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
     >
 
 
 <div
-    class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
-    class:border-green-200={$ae_loc?.show_element__menu}
-    class:dark:border-green-800={$ae_loc?.show_element__menu}
+    class:hidden={!$ae_loc?.expand && 1 == 3}
+    class:border-green-200={$ae_loc?.expand}
+    class:dark:border-green-800={$ae_loc?.expand}
     class="
         hidden-print
         flex flex-col items-end justify-end
@@ -160,9 +161,9 @@ max-w-max -->
 
     {#if $ae_loc?.person_id || $ae_loc?.user_id}
     <span
-        class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
-        class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
-        class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
+        class:hidden={!$ae_loc?.sys_menu?.expand}
+        class:hover:visible={$ae_loc?.sys_menu?.expand}
+        class:invisible={!$ae_loc?.sys_menu?.expand}
         class="w-48"
 
         title="
@@ -263,14 +264,14 @@ max-w-max -->
                             // trigger_clear_access = true;
                             // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
 
-                            if (!$ae_loc?.app_cfg?.show_element__menu) {
-                                $ae_loc.app_cfg.show_element__menu = true;
-                                // $ae_loc.app_cfg.show_element__menu_btn = false;
+                            if (!$ae_loc?.sys_menu?.expand) {
+                                $ae_loc.sys_menu.expand = true;
+                                // $ae_loc.sys_menu.expand_btn = false;
                                 $ae_loc.app_cfg.show_element__access_type = true;
                                 $ae_loc.app_cfg.show_element__passcode_input = true;
                             } else {
-                                $ae_loc.app_cfg.show_element__menu = false;
-                                // $ae_loc.app_cfg.show_element__menu_btn = true;
+                                $ae_loc.sys_menu.expand = false;
+                                // $ae_loc.sys_menu.expand_btn = true;
                             }
                         }}
                         class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -288,9 +289,9 @@ max-w-max -->
                         onclick={() => {
                             trigger_clear_access = true;
 
-                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                                $ae_loc.app_cfg.show_element__menu = true;
-                                $ae_loc.app_cfg.show_element__menu_btn = false;
+                            if ($ae_loc?.sys_menu?.expand_btn) {
+                                $ae_loc.sys_menu.expand = true;
+                                $ae_loc.sys_menu.expand_btn = false;
                                 $ae_loc.app_cfg.show_element__access_type = true;
                                 $ae_loc.app_cfg.show_element__passcode_input = true;
 
@@ -300,8 +301,8 @@ max-w-max -->
                                 // const to_focus = document.getElementById('access_passcode_input');
                                 // to_focus?.focus();
                             } else {
-                                $ae_loc.app_cfg.show_element__menu = false;
-                                $ae_loc.app_cfg.show_element__menu_btn = true;
+                                $ae_loc.sys_menu.expand = false;
+                                $ae_loc.sys_menu.expand_btn = true;
                             }
                         }}
                         class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
@@ -316,9 +317,9 @@ max-w-max -->
                 <button
                         type="button"
                         onclick={async () => {
-                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                                $ae_loc.app_cfg.show_element__menu = true;
-                                $ae_loc.app_cfg.show_element__menu_btn = false;
+                            if ($ae_loc?.sys_menu?.expand_btn) {
+                                $ae_loc.sys_menu.expand = true;
+                                $ae_loc.sys_menu.expand_btn = false;
                                 $ae_loc.app_cfg.show_element__access_type = true;
                                 $ae_loc.app_cfg.show_element__passcode_input = true;
                                 await tick();
@@ -327,10 +328,10 @@ max-w-max -->
                                 const to_focus = document.getElementById('access_passcode_input');
                                 to_focus?.focus();
                             } else {
-                                $ae_loc.app_cfg.show_element__menu = false;
-                                $ae_loc.app_cfg.show_element__menu_btn = true;
+                                $ae_loc.sys_menu.expand = false;
+                                $ae_loc.sys_menu.expand_btn = true;
                             }
-                            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+                            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
                         }}
                         class="
                             btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
@@ -348,13 +349,13 @@ max-w-max -->
     </span>
 
     <!-- <div> -->
-    <!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
-    <!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
+    <!-- class:visible={$ae_loc?.sys_menu?.expand} -->
+    <!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
     <!-- class:hover:visible={true} -->
     <!-- invisible -->
     <button
         type="button"
-        class:w-48={$ae_loc?.app_cfg?.show_element__menu}
+        class:w-48={$ae_loc?.sys_menu?.expand}
 
         class="
             btn btn-sm
@@ -364,9 +365,9 @@ max-w-max -->
             "
         title="Show or hide the menu"
         onclick={async () => {
-            if (!$ae_loc?.app_cfg?.show_element__menu) {
-                $ae_loc.app_cfg.show_element__menu = true;
-                // $ae_loc.app_cfg.show_element__menu_btn = false;
+            if (!$ae_loc?.sys_menu?.expand) {
+                $ae_loc.sys_menu.expand = true;
+                // $ae_loc.sys_menu.expand_btn = false;
                 $ae_loc.app_cfg.show_element__access_type = true;
 
                 if ($ae_loc?.access_type == 'anonymous') {
@@ -381,15 +382,15 @@ max-w-max -->
                 const to_focus = document.getElementById('access_passcode_input');
                 to_focus?.focus();
             } else {
-                $ae_loc.app_cfg.show_element__menu = false;
-                // $ae_loc.app_cfg.show_element__menu_btn = true;
+                $ae_loc.sys_menu.expand = false;
+                // $ae_loc.sys_menu.expand_btn = true;
                 $ae_loc.app_cfg.show_element__passcode_input = false;
             }
-            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
         }}
         >
         <span class=" *:hover:inline-block">
-        {#if $ae_loc?.app_cfg?.show_element__menu}
+        {#if $ae_loc?.sys_menu?.expand}
             <CircleX class="inline-block" />
             <span class="inline-block">
                 Hide Menu
@@ -439,7 +440,7 @@ max-w-max -->
 
         z-20 hover:z-30
     "
-    class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
+    class:hidden={!$ae_loc?.sys_menu?.expand}
     >
 
     <button
@@ -447,18 +448,18 @@ max-w-max -->
         class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
         title="Sign In"
         onclick={() => {
-            if (!$ae_loc?.app_cfg?.show_element__menu) {
-                    $ae_loc.app_cfg.show_element__menu = true;
-                    // $ae_loc.app_cfg.show_element__menu_btn = false;
+            if (!$ae_loc?.sys_menu?.expand) {
+                    $ae_loc.sys_menu.expand = true;
+                    // $ae_loc.sys_menu.expand_btn = false;
                 } else {
-                    $ae_loc.app_cfg.show_element__menu = false;
-                    // $ae_loc.app_cfg.show_element__menu_btn = true;
+                    $ae_loc.sys_menu.expand = false;
+                    // $ae_loc.sys_menu.expand_btn = true;
                 }
-            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
+            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
+            // $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
         }}
         >
-        {#if $ae_loc?.app_cfg?.show_element__menu}
+        {#if $ae_loc?.sys_menu?.expand}
             <CircleX class="mx-1 inline-block" />
             <!-- <span class="hidden"> -->
                 Hide Menu
@@ -473,17 +474,28 @@ max-w-max -->
 
     <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
     <span
-        class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
+        class:hidden={!$ae_loc.edit_mode}
         >
     <Element_app_cfg
+        hide={$ae_loc.sys_menu.hide_app_cfg}
+        expand={$ae_loc.sys_menu.expand_app_cfg}
+        />
+
+    <Element_theme
+        hide={$ae_loc.sys_menu.hide_app_cfg}
+        expand={$ae_loc.sys_menu.expand_app_cfg}
         set_theme_mode={true}
         set_theme_name={true}
-        />
+    />
+
+    <!-- END: Theme -->
     </span>
     <!-- {/if} -->
 
     {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
     <Element_sign_in_out
+        hide={$ae_loc.sys_menu.hide_user}
+        expand={$ae_loc.sys_menu.expand_user}
         data={data}
         hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
         />
@@ -491,9 +503,11 @@ max-w-max -->
 
     {#if $ae_loc?.app_cfg?.show_element__access_type}
     <Element_access_type
+        hide={$ae_loc.sys_menu.hide_access_type}
+        expand={$ae_loc.sys_menu.expand_access_type}
         show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
         trigger_clear_access={trigger_clear_access}
-        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
+        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
         />
     {/if}
 
diff --git a/src/lib/e_app_theme.svelte b/src/lib/e_app_theme.svelte
index 040ff1ed..2db7e1a5 100644
--- a/src/lib/e_app_theme.svelte
+++ b/src/lib/e_app_theme.svelte
@@ -7,11 +7,20 @@ import {
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
 interface Props {
+    log_lvl?: number;
+    hide?: null|boolean;
+    expand?: boolean;
     set_theme_mode: any;
     set_theme_name: any;
 }
 
-let { set_theme_mode, set_theme_name }: Props = $props();
+let {
+    log_lvl = $bindable(0),
+    hide = $bindable(false),
+    expand = $bindable(false),
+    set_theme_mode,
+    set_theme_name
+}: Props = $props();
 
 </script>
 
@@ -25,54 +34,183 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
     document.documentElement.classList.add('dark');
 }
 -->
-<section class="space-y-2">
-    <button
-        class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500"
-        onclick={() => {
-            if ($ae_loc.theme_mode == 'light') {
-                $ae_loc.theme_mode = 'dark';
-            } else if ($ae_loc.theme_mode == 'dark') {
-                $ae_loc.theme_mode = 'light';
-            }
+<section
+    id="AE-App-Theme"
+    class="
+        ae_app_theme
+        hidden-print
 
-            if ($ae_loc.theme_mode == 'light') {
-                document.documentElement.classList.remove('dark');
-                document.documentElement.classList.add('light');
-            } else if ($ae_loc.theme_mode == 'dark') {
-                document.documentElement.classList.remove('light');
-                document.documentElement.classList.add('dark');
-            }
+        bg-blue-100 text-gray-900
+        dark:bg-blue-800 dark:text-gray-200
+
+        flex flex-col flex-wrap gap-1
+        items-end justify-end
+        w-72 max-w-72
+        p-1 my-1
+        border-2 border-gray-200
+        transition-all
+        "
+    class:hidden={hide}
+    >
+
+<div>
+    <!-- Theme Name: -->
+    <select
+        onchange={(event) => {
+            // $slct_trigger = 'set_theme_name';
+
+            let new_theme_name = event.target.value;
+            // document.documentElement.theme = new_theme_name;
+
+            console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
+            // $slct_trigger = null;
+            // Update the body attribute named "data-theme" to the current theme name.
+            // document.body.setAttribute('data-theme', new_theme_name);
+            // document.body.setAttribute('data-theme', $ae_loc?.theme_name);
+
+            // NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
+            document.documentElement.setAttribute('data-theme', new_theme_name);
+
+            // if ($ae_loc.theme_mode == 'light') {
+            //     document.documentElement.classList.remove('dark');
+            //     document.documentElement.classList.add('light');
+            // } else if ($ae_loc.theme_mode == 'dark') {
+            //     document.documentElement.classList.remove('light');
+            //     document.documentElement.classList.add('dark');
+            // }
         }}
-        title="Change light and dark mode"
+        bind:value={$ae_loc.theme_name}
+        class="select"
+        class:hidden={!expand}
+        title="Theme name"
         >
-        <!-- <span class="fas fa-adjust"></span> -->
-        {#if $ae_loc.theme_mode == 'light'}
-            <Sun />
-            <span class="hidden md:inline-block">Light Mode</span>
-        {:else if $ae_loc.theme_mode == 'dark'}
-            <Moon />
-            <span class="hidden md:inline-block">Dark Mode</span>
-        {/if}
-        <span class="hidden md:inline-block">
-            Change Theme
-        </span>
-    </button>
-    <!-- <button
-        class="btn btn-sm variant-ghost-surface hover:variant-filled-success"
-        onclick={() => {
-            if ($ae_loc.app_cfg.theme_mode == 'light') {
-                $ae_loc.app_cfg.theme_mode = 'dark';
-            } else if ($ae_loc.app_cfg.theme_mode == 'dark') {
-                $ae_loc.app_cfg.theme_mode = 'light';
-            }
-        }}
-        title="Change light and dark mode"
-        >
-        <span class="fas fa-adjust"></span>
-        <span class="hidden md:inline">
-            Change Theme
-        </span>
-    </button> -->
+        <option value="">-- None --</option>
+        <option value="cerberus">Cerberus</option>
+        <option value="concord">Concord</option>
+        <option value="crimson">Crimson</option>
+        <option value="hamlindigo">Hamlindigo</option>
+        <option value="modern">Modern</option>
+        <option value="nouveau">Nouveau</option>
+        <option value="rocket">Rocket</option>
+        <option value="terminus">Terminus</option>
+        <option value="vintage">Vintage</option>
+        <option value="wintry">Wintry</option>
+        <!-- <option value="ae_c_osit">OSIT</option> -->
+        <option value="AE_OSIT_default">OSIT</option>
+        <option value="AE_c_LCI">LCI</option>
+    </select>
+</div>
+
+<div
+    class="flex flex-row flex-wrap gap-2 items-center w-full"
+    class:justify-between={expand}
+    class:justify-end={!expand}
+    >
+
+    {#if expand}
+        <!-- Hide theme options -->
+        <button
+            class="
+                btn btn-sm text-xs
+                preset-tonal-secondary hover:preset-filled-secondary-500
+                transition-all group
+                "
+            onclick={() => {
+                expand = !expand;
+            }}
+            title="Hide Theme Options"
+            >
+            <!-- <span class="fas fa-compress-alt"></span> -->
+            <span class="fas fa-compress-arrows-alt m-1"></span>
+            <span
+                class="
+                    hidden
+                    group-hover:inline-block
+                    text-xs
+                    "
+                >
+                Hide Theme Options
+            </span>
+        </button>
+
+        <button
+            class="
+                btn btn-sm text-xs
+                preset-tonal-secondary hover:preset-filled-secondary-500
+                transition-all group
+                "
+            onclick={() => {
+                if ($ae_loc.theme_mode == 'light') {
+                    $ae_loc.theme_mode = 'dark';
+                } else if ($ae_loc.theme_mode == 'dark') {
+                    $ae_loc.theme_mode = 'light';
+                }
+
+                if ($ae_loc.theme_mode == 'light') {
+                    document.documentElement.classList.remove('dark');
+                    document.documentElement.classList.add('light');
+                } else if ($ae_loc.theme_mode == 'dark') {
+                    document.documentElement.classList.remove('light');
+                    document.documentElement.classList.add('dark');
+                }
+            }}
+            title="Change light and dark mode"
+            >
+            <!-- <span class="fas fa-adjust"></span> -->
+            {#if $ae_loc.theme_mode == 'light'}
+                <Sun />
+                <span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
+            {:else if $ae_loc.theme_mode == 'dark'}
+                <Moon />
+                <span class="hidden group-hover:inline-block">Dark Mode</span>
+            {/if}
+            <span
+                class="
+                    hidden
+                    group-hover:inline-block
+                    text-xs
+                    "
+                >
+                Change
+            </span>
+        </button>
+    {:else}
+        <button
+            class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
+            onclick={() => {
+                if ($ae_loc.theme_mode == 'light') {
+                    $ae_loc.theme_mode = 'dark';
+                } else if ($ae_loc.theme_mode == 'dark') {
+                    $ae_loc.theme_mode = 'light';
+                }
+
+                if ($ae_loc.theme_mode == 'light') {
+                    document.documentElement.classList.remove('dark');
+                    document.documentElement.classList.add('light');
+                } else if ($ae_loc.theme_mode == 'dark') {
+                    document.documentElement.classList.remove('light');
+                    document.documentElement.classList.add('dark');
+                }
+
+                expand = !expand;
+            }}
+            title="Change light and dark mode"
+            >
+            {#if $ae_loc.theme_mode == 'light'}
+                <span class="inline-block" title="Light Mode">
+                    <Sun />
+                </span>
+                <span class="hidden group-hover:inline-block">Light Mode</span>
+            {:else if $ae_loc.theme_mode == 'dark'}
+                <span class="inline-block" title="Dark Mode">
+                    <Moon />
+                </span>
+                <span class="hidden group-hover:inline-block">Dark Mode</span>
+            {/if}
+        </button>
+    {/if}
+
+</div>
 
 
 <!-- <section class="space-y-2">
@@ -106,51 +244,6 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
 </RadioGroup>
 </div> -->
 
-<div>
-<!-- Theme Name: -->
-<select
-    onchange={(event) => {
-        // $slct_trigger = 'set_theme_name';
 
-        let new_theme_name = event.target.value;
-        // document.documentElement.theme = new_theme_name;
-
-        console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
-        // $slct_trigger = null;
-        // Update the body attribute named "data-theme" to the current theme name.
-        // document.body.setAttribute('data-theme', new_theme_name);
-        // document.body.setAttribute('data-theme', $ae_loc?.theme_name);
-
-        // NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
-        document.documentElement.setAttribute('data-theme', new_theme_name);
-
-        // if ($ae_loc.theme_mode == 'light') {
-        //     document.documentElement.classList.remove('dark');
-        //     document.documentElement.classList.add('light');
-        // } else if ($ae_loc.theme_mode == 'dark') {
-        //     document.documentElement.classList.remove('light');
-        //     document.documentElement.classList.add('dark');
-        // }
-    }}
-    bind:value={$ae_loc.theme_name}
-    class="select"
-    title="Theme name"
-    >
-    <option value="">-- None --</option>
-    <option value="cerberus">Cerberus</option>
-    <option value="concord">Concord</option>
-    <option value="crimson">Crimson</option>
-    <option value="hamlindigo">Hamlindigo</option>
-    <option value="modern">Modern</option>
-    <option value="nouveau">Nouveau</option>
-    <option value="rocket">Rocket</option>
-    <option value="terminus">Terminus</option>
-    <option value="vintage">Vintage</option>
-    <option value="wintry">Wintry</option>
-    <!-- <option value="ae_c_osit">OSIT</option> -->
-     <option value="AE_OSIT_default">OSIT</option>
-    <option value="AE_c_LCI">LCI</option>
-</select>
-</div>
 
 </section>