More work on the system and debug menus and related info.

2025-07-16 13:57:12 -04:00
parent 32c3be9983
commit eaffc44772
6 changed files with 320 additions and 72 deletions
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -181,6 +181,7 @@ const ae_app_local_data_defaults: key_val = {
    debug_menu: {
        hide: false,
        expand: false,
+        // hide_quick_info: true
    },

    app_cfg: {
@@ -334,6 +335,14 @@ let ae_app_session_data_defaults: key_val = {
    // 'name': 'Aether App Template',
    // 'theme': 'light',
    // 'account_id': ae_account_id,
+
+    sys_menu: {
+    },
+
+    debug_menu: {
+        hide_quick_info: true
+    },
+
    'ds': {
        'submit_status': null,
    },
--- a/src/lib/e_app_clipboard.svelte
+++ b/src/lib/e_app_clipboard.svelte
@@ -7,23 +7,43 @@ interface Props {
    btn_text?: string;
    btn_title?: string;
    btn_class?: string;
+    hide_icon?: boolean;
 }

 let {
-    log_lvl = 1,
+    log_lvl = 0,
    value = $bindable(''),
    success = $bindable(false),
    btn_text = 'Copy to Clipboard',
    btn_title = 'Copy to Clipboard',
-    btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1'
+    btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
+    hide_icon = false,
 }: Props = $props();

+// *** Import Svelte specific
+import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+import {
+    // ArrowBigRight,
+    // CircleX,
+    Copy,
+    // Eye, EyeOff,
+    // Key,
+    // LogIn, LogOut, LockKeyhole,
+    // Mail, MailCheck,
+    // Menu,
+    // RefreshCw, RefreshCcw, RefreshCcwDot,
+    // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
+    // User, UserCheck
+    } from '@lucide/svelte';
+
 if (log_lvl) {
    console.log(`Clipboard component initialized with value:`, value);
 }

 // Select your trigger element
-const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
+// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');

 // Add a click event handler to the trigger
 // elemButton?.addEventListener('click', () => {
@@ -46,22 +66,31 @@ const elemButton: HTMLButtonElement | null = document.querySelector('[data-butto
    type="button"
    data-button
    onclick={() => {
-        // Call the Clipboard API
-        navigator.clipboard
-        // Use the `writeText` method write content to the clipboard
-        .writeText(value)
-        // Handle confirmation
-        .then(() => {
-            if (log_lvl) {
-                console.log(`Clipboard write successful: ${value}`);
-            }
-            success = true;
-        });
+        // if (browser) {
+            // Call the Clipboard API
+            navigator.clipboard
+            // Use the `writeText` method write content to the clipboard
+            .writeText(value)
+            // Handle confirmation
+            .then(() => {
+                if (log_lvl) {
+                    console.log(`Clipboard write successful: ${value}`);
+                }
+                success = true;
+            });
+        // } else {
+        //     if (log_lvl) {
+        //         console.log(`Clipboard write attempted in non-browser environment.`);
+        //     }
+        // }
    }}
    class={btn_class}
    title={btn_title}
    >
    <!-- {@render btn_text} -->
+    <Copy
+        class="inline-block mx-1 {hide_icon ? 'hidden' : '' }"
+         />
    {btn_text}

 </button>
--- a/src/lib/e_app_debug_menu.svelte
+++ b/src/lib/e_app_debug_menu.svelte
@@ -4,7 +4,7 @@
 // *** Import other supporting libraries
 import {
    Bug,
-    CircleX,
+    CircleX, Info,
    ToggleLeft, ToggleRight,
    X
    } from '@lucide/svelte';
@@ -111,10 +111,10 @@ hover:opacity-100 -->
                $ae_loc.debug_mode = !$ae_loc?.debug_mode;
            }}
            class="
-                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
-                transition-all *:hover:inline-block
-
-
+                btn btn-sm
+                preset-outlined-surface-400-600 preset-filled-suface-200-800
+                hover:preset-tonal-success
+                transition-all
                "
            title="Turn debug content and styles off and on"
            >
@@ -139,6 +139,29 @@ hover:opacity-100 -->

        </button>

+        <button
+            type="button"
+            onclick={() => {
+                if (log_lvl) {
+                    console.log('Showing quick info/debug menu.');
+                }
+                expand = false;
+                $ae_sess.debug_menu.hide_quick_info = false;
+
+            }}
+            title="Show Quick Info"
+            class="
+                btn btn-sm
+                preset-outlined-surface-400-600 preset-filled-suface-200-800
+                hover:preset-tonal-success
+                transition-all
+                "
+            >
+            <!-- <span class="fas fa-info-circle mx-1"></span> -->
+            <Info class="inline-block mx-1" />
+            Quick Info
+        </button>
+
        <button
            type="button"
            onclick={() => {
@@ -147,8 +170,10 @@ hover:opacity-100 -->
                expand = !expand;
            }}
            class="
-                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
-                transition-all *:hover:inline-block
+                btn btn-sm
+                preset-outlined-surface-400-600 preset-filled-suface-200-800
+                hover:preset-tonal-warning
+                transition-all
                "
            title="Turn debug content and styles off and on"
            >
--- a/src/lib/e_app_sys_menu.svelte
+++ b/src/lib/e_app_sys_menu.svelte
@@ -164,16 +164,18 @@ max-w-max -->
    <div
        class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
        title="
+        ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
        Username: {$ae_loc?.user?.username ?? '-- not set --'}
        Email: {$ae_loc?.user?.email ?? '-- not set --'}
        "
        >
-        <span class="flex flex-row gap-1 w-32">
+        <span class="flex flex-row gap-1 w-16">
            <User class="mx-1 inline-block text-gray-500" />
            <span
+                class:hidden={!expand}
                class="group-hover:inline-block"
-                class:hidden={!expand}>
+                >
                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
            </span>
        </span>
@@ -189,10 +191,10 @@ max-w-max -->
    {/if}


-    <div class="flex flex-row gap-1 items-center justify-between transition-all w-full">
+    <div class="flex flex-row gap-1 items-center justify-end transition-all w-full">
        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
            <span
-                class="flex flex-row gap-1 group"
+                class="flex flex-row-reverse gap-1 group"
                title={`Current access type/level: ${$ae_loc.access_type}`}
                >
                <!-- <span class="fas fa-unlock mx-1"></span> -->
@@ -202,38 +204,38 @@ max-w-max -->
                {#if $ae_loc.access_type == 'super'}
                    <span class="fas fa-hat-wizard m-1"></span>
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Super</span>
                {:else if $ae_loc.access_type == 'manager'}
                    <span class="fas fa-user-shield m-1"></span>
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Manager</span>
                {:else if $ae_loc.access_type == 'administrator'}
                    <span class="fas fa-user-ninja m-1"></span>
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Administrator</span>
                {:else if $ae_loc.access_type == 'trusted'}
                    <span class="fas fa-user-check m-1"></span>
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Trusted Access</span>
                {:else if $ae_loc.access_type == 'public'}
                    Public
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Access</span>
                {:else if $ae_loc.access_type == 'authenticated'}
                    Authenticated
                    <span
-                        class="hidden group-hover:inline-block"
                        class:hidden={!expand}
+                        class="hidden group-hover:inline-block"
                        >Access</span>
                {:else if $ae_loc.access_type == 'anonymous'}
                    Anonymous Access
@@ -306,6 +308,7 @@ max-w-max -->
                    }}
                    class="
                        btn btn-sm text-xs
+                        flex-row-reverse
                        variant-outline-surface hover:variant-ghost-warning
                        transition-all group
                        "
@@ -340,6 +343,7 @@ max-w-max -->
                    }}
                    class="
                        btn btn-sm text-xs
+                        flex-row-reverse
                        variant-outline-surface hover:variant-ghost-success
                        transition-all group
                        "