From c3c3e1cbcb5b0473a9cfe1fa9dbda8a7d08cac81 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 15:31:21 -0400
Subject: [PATCH] feat(sys-menu): replace sys_menu with new e_app_sys_bar
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New compact bar + expandable panel design:
- Compact strip (bottom-right): auth shield, font cycler, dark/light toggle,
  edit mode toggle (authenticated+), menu expand — icon-only by default,
  labels reveal on hover
- Hover info strip shows person name + access level when logged in
- Expanded panel: sign in/out, access/passcode, appearance (theme), admin
  (config + URL builder + debug trigger) — all gated same as before
- Debug overlay trigger moved into admin section (edit mode only)
- All business logic preserved via existing sub-components (unchanged)
- e_app_sys_menu.svelte retained but no longer mounted (import commented out)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/app_components/e_app_sys_bar.svelte | 427 ++++++++++++++++++++
 src/routes/+layout.svelte                   |   5 +-
 2 files changed, 430 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/app_components/e_app_sys_bar.svelte

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
new file mode 100644
index 00000000..26ed916a
--- /dev/null
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -0,0 +1,427 @@
+<script lang="ts">
+    /**
+     * e_app_sys_bar.svelte
+     * Global system bar — replaces e_app_sys_menu.svelte.
+     *
+     * Visual states:
+     *   Idle:     compact icon strip (bottom-right corner)
+     *   Hover:    info strip appears above bar; button labels revealed
+     *   Expanded: full panel slides up above the bar
+     *
+     * Sub-components are reused unchanged — all business logic lives there.
+     * This file only orchestrates layout, visibility, and the compact quick-actions.
+     */
+    import {
+        Bug,
+        CircleX,
+        Menu,
+        Moon,
+        Sun,
+        ShieldEllipsis,
+        ShieldMinus,
+        ShieldUser,
+        User,
+    } from '@lucide/svelte';
+
+    import { ae_loc, ae_sess, ae_api } from '$lib/stores/ae_stores';
+
+    import Element_access_type  from '$lib/app_components/e_app_access_type.svelte';
+    import Element_app_cfg      from '$lib/app_components/e_app_cfg.svelte';
+    import Element_sign_in_out  from '$lib/app_components/e_app_sign_in_out.svelte';
+    import Element_theme        from '$lib/app_components/e_app_theme.svelte';
+
+    interface Props {
+        log_lvl?: number;
+        data: any;
+        hide?: null | boolean;
+        expand?: boolean;
+    }
+
+    let {
+        log_lvl   = $bindable(0),
+        data      = null,
+        hide      = $bindable(false),
+        expand    = $bindable(false)
+    }: Props = $props();
+
+    // Passed down to Element_access_type — triggers handle_clear_access() there.
+    // See e_app_access_type.svelte for the full clear logic (reverts to user_access_type).
+    let trigger_clear_access: null | boolean = $state(null);
+
+    // ── Accessibility: font size cycler ─────────────────────────────────────
+    function cycle_font_size() {
+        const mode = $ae_loc.font_size_mode;
+        if (!mode || mode === 'default') {
+            $ae_loc.font_size_mode = 'larger';
+        } else if (mode === 'larger') {
+            $ae_loc.font_size_mode = 'smaller';
+        } else {
+            $ae_loc.font_size_mode = 'default';
+        }
+    }
+
+    // ── Accessibility: dark / light toggle ──────────────────────────────────
+    function toggle_theme_mode() {
+        if ($ae_loc.theme_mode === 'light') {
+            $ae_loc.theme_mode = 'dark';
+        } else {
+            $ae_loc.theme_mode = 'light';
+        }
+        // DOM sync (class) is handled reactively in +layout.svelte effect #3
+    }
+
+    // ── Menu expand / collapse ───────────────────────────────────────────────
+    function toggle_expand() {
+        if (!expand) {
+            expand = true;
+            $ae_sess.sys_menu.expand = true;
+            $ae_loc.app_cfg.show_element__access_type = true;
+
+            if ($ae_loc?.access_type === 'anonymous') {
+                $ae_sess.sys_menu.focus_passcode_input = true;
+            } else {
+                $ae_loc.sys_menu.expand_user = false;
+                $ae_sess.show__sign_in_out__fields = false;
+            }
+        } else {
+            expand = false;
+            $ae_sess.sys_menu.expand = false;
+        }
+    }
+
+    // ── Auth shield: click behaviour depends on current auth state ───────────
+    // Mirrors the three-state shield logic from e_app_sys_menu.svelte.
+    function handle_shield_click() {
+        if ($ae_loc.access_type && $ae_loc.access_type !== 'anonymous') {
+            if ($ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type) {
+                // At user's own level — offer passcode upgrade
+                if (!expand) {
+                    expand = true;
+                    $ae_sess.sys_menu.expand = true;
+                    $ae_loc.sys_menu.hide_access_type = false;
+                    $ae_loc.sys_menu.expand_access_type = true;
+                } else {
+                    $ae_loc.sys_menu.hide_access_type = false;
+                    $ae_loc.sys_menu.expand_access_type = true;
+                }
+            } else {
+                // Elevated via passcode — offer to clear back to user level
+                trigger_clear_access = true;
+                if (expand) {
+                    $ae_loc.sys_menu.hide_access_type = false;
+                    expand = false;
+                    $ae_loc.app_cfg.show_element__access_type = true;
+                    $ae_sess.app_cfg.show_element__passcode_input = true;
+                } else {
+                    $ae_loc.sys_menu.hide_access_type = false;
+                    $ae_loc.sys_menu.expand_access_type = true;
+                }
+            }
+        } else {
+            // Anonymous — open menu and focus passcode
+            expand = true;
+            $ae_sess.sys_menu.expand = true;
+            $ae_loc.sys_menu.hide_access_type = false;
+            $ae_loc.sys_menu.expand_access_type = true;
+            $ae_sess.app_cfg.show_element__passcode_input = true;
+            $ae_sess.sys_menu.focus_passcode_input = true;
+            const to_focus = document.getElementById('access_passcode_input');
+            to_focus?.focus();
+        }
+    }
+
+    // ── Derived display helpers ──────────────────────────────────────────────
+    let font_label = $derived.by(() => {
+        if ($ae_loc.font_size_mode === 'larger')  return 'A+';
+        if ($ae_loc.font_size_mode === 'smaller') return 'A−';
+        return 'A';
+    });
+
+    let font_title = $derived.by(() => {
+        if ($ae_loc.font_size_mode === 'larger')  return 'Font: Larger — click for Smaller';
+        if ($ae_loc.font_size_mode === 'smaller') return 'Font: Smaller — click for Normal';
+        return 'Font: Normal — click for Larger';
+    });
+
+    let person_display = $derived(
+        $ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name ?? null
+    );
+
+    let access_label = $derived.by(() => {
+        const t = $ae_loc?.access_type;
+        if (!t || t === 'anonymous') return null;
+        const map: Record<string, string> = {
+            super: 'Super', manager: 'Manager', administrator: 'Admin',
+            trusted: 'Trusted', public: 'Public', authenticated: 'Auth\'d'
+        };
+        return map[t] ?? t;
+    });
+</script>
+
+<!-- ══════════════════════════════════════════════════════════════════════════
+     OUTER WRAPPER — fixed bottom-right, hidden on print, hidden in iframe
+     (unless trusted_access — mirrors existing +layout.svelte condition)
+══════════════════════════════════════════════════════════════════════════ -->
+<div
+    class="
+        ae_sys_bar
+        print:hidden
+        fixed bottom-4 right-2
+        z-50
+        flex flex-col items-end gap-1
+    "
+    class:hidden={hide}
+>
+
+    <!-- ── EXPANDED PANEL ──────────────────────────────────────────────────── -->
+    {#if expand}
+    <div
+        class="
+            ae_sys_panel
+            flex flex-col items-end gap-2
+            w-72 max-w-[92vw]
+            max-h-[80vh] overflow-y-auto
+            bg-white dark:bg-gray-900
+            border border-gray-200 dark:border-gray-700
+            rounded-xl shadow-2xl
+            px-2 py-3
+            text-sm
+        "
+    >
+        <!-- Close row -->
+        <div class="flex items-center justify-between w-full px-1">
+            <!-- Person + access summary in panel header -->
+            <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+                {#if $ae_loc?.person_id}
+                    <User size="0.9em" class="shrink-0" />
+                    <span>{person_display ?? '—'}</span>
+                {/if}
+                {#if access_label}
+                    <span class="font-semibold text-primary-600 dark:text-primary-400">
+                        · {access_label}
+                    </span>
+                {/if}
+            </div>
+            <button
+                type="button"
+                class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-error transition-all"
+                onclick={toggle_expand}
+                title="Close menu"
+            >
+                <CircleX size="1.1em" />
+            </button>
+        </div>
+
+        <!-- ── Sign In / Out ────────────────────────────────────────────── -->
+        {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
+            <div class="w-full border-t border-gray-100 dark:border-gray-800 pt-2">
+                <Element_sign_in_out
+                    {data}
+                    hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
+                />
+            </div>
+        {/if}
+
+        <!-- ── Access Level / Passcode ──────────────────────────────────── -->
+        {#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
+            <div class="w-full border-t border-gray-100 dark:border-gray-800 pt-2">
+                <Element_access_type
+                    bind:hide={$ae_loc.sys_menu.hide_access_type}
+                    bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
+                    bind:expand={$ae_loc.sys_menu.expand_access_type}
+                    bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
+                    bind:trigger_clear_access
+                />
+            </div>
+        {/if}
+
+        <!-- ── Appearance — theme name (always shown in panel) ─────────── -->
+        <div class="w-full border-t border-gray-100 dark:border-gray-800 pt-2">
+            <Element_theme
+                hide={false}
+                expand={true}
+                set_theme_mode={true}
+                set_theme_name={true}
+            />
+        </div>
+
+        <!-- ── Admin / Config (edit mode only) ─────────────────────────── -->
+        {#if $ae_loc.edit_mode}
+            <div class="w-full border-t border-gray-100 dark:border-gray-800 pt-2">
+                <Element_app_cfg hide={false} expand={true} />
+            </div>
+            <!-- Debug trigger — opens the e_app_debug_menu overlay (still managed in +layout.svelte) -->
+            <div class="w-full border-t border-gray-100 dark:border-gray-800 pt-2 flex justify-end">
+                <button
+                    type="button"
+                    class="btn btn-sm preset-outlined-error-400-600 hover:preset-tonal-error transition-all group/dbg"
+                    onclick={() => { $ae_loc.debug_menu.expand = !$ae_loc.debug_menu.expand; }}
+                    title="Toggle debug overlay"
+                >
+                    <Bug size="1em" class="shrink-0" />
+                    <span class="hidden group-hover/dbg:inline text-xs ml-0.5">Debug</span>
+                </button>
+            </div>
+        {/if}
+
+    </div>
+    {/if}
+    <!-- END: Expanded panel -->
+
+
+    <!-- ── COMPACT BAR ────────────────────────────────────────────────────── -->
+    <!--
+        group: enables group-hover label reveal on each button.
+        On mobile / PWA: touch targets are min 44px via btn sizing.
+        Default: icon-only. Hover: label text appears beside icon.
+    -->
+    <div
+        class="
+            ae_sys_bar__strip
+            group
+            flex flex-row items-center gap-1
+            bg-white/80 dark:bg-gray-900/80
+            backdrop-blur-sm
+            border border-gray-200/60 dark:border-gray-700/60
+            rounded-xl
+            px-2 py-1
+            shadow-lg
+            transition-all duration-300
+        "
+        class:border-primary-400={expand}
+    >
+
+        <!-- Hover info strip (above/inline — reveals on group-hover when not expanded) -->
+        {#if !expand && (person_display || access_label)}
+            <span
+                class="
+                    hidden group-hover:flex
+                    items-center gap-1
+                    text-xs text-gray-500 dark:text-gray-400
+                    pr-1 border-r border-gray-200 dark:border-gray-700 mr-1
+                "
+            >
+                {#if person_display}
+                    <User size="0.8em" class="shrink-0" />
+                    <span>{person_display}</span>
+                {/if}
+                {#if access_label}
+                    <span class="font-semibold text-primary-600 dark:text-primary-400">
+                        · {access_label}
+                    </span>
+                {/if}
+            </span>
+        {/if}
+
+        <!-- AUTH STATUS SHIELD ──────────────────────────────────────────── -->
+        <button
+            type="button"
+            class="
+                btn btn-sm
+                transition-all group/shield
+                {$ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'
+                    ? ($ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type
+                        ? 'variant-outline-surface hover:variant-ghost-warning'
+                        : 'variant-outline-warning hover:variant-ghost-warning')
+                    : 'variant-outline-surface hover:variant-ghost-success'}
+            "
+            onclick={handle_shield_click}
+            title={
+                $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'
+                    ? ($ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type
+                        ? `Access: ${$ae_loc?.access_type}. Click to use a passcode.`
+                        : `Elevated access: ${$ae_loc?.access_type}. Click to clear.`)
+                    : 'Anonymous. Click to sign in or enter a passcode.'
+            }
+        >
+            {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
+                {#if $ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type}
+                    <ShieldEllipsis size="1.1em" class="shrink-0" />
+                {:else}
+                    <ShieldMinus size="1.1em" class="shrink-0" />
+                {/if}
+            {:else}
+                <ShieldUser size="1.1em" class="shrink-0" />
+            {/if}
+            <span class="hidden group-hover/shield:inline text-xs ml-0.5">
+                {access_label ?? 'Auth?'}
+            </span>
+        </button>
+
+        <!-- FONT SIZE CYCLER ────────────────────────────────────────────── -->
+        <button
+            type="button"
+            class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary transition-all group/font"
+            onclick={cycle_font_size}
+            title={font_title}
+        >
+            <span class="font-bold leading-none text-sm">{font_label}</span>
+            <span class="hidden group-hover/font:inline text-xs ml-0.5">Font</span>
+        </button>
+
+        <!-- DARK / LIGHT TOGGLE ─────────────────────────────────────────── -->
+        <button
+            type="button"
+            class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary transition-all group/mode"
+            onclick={toggle_theme_mode}
+            title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ?? 'unknown'})"
+        >
+            {#if $ae_loc?.theme_mode === 'dark'}
+                <Moon size="1.1em" class="shrink-0" />
+                <span class="hidden group-hover/mode:inline text-xs ml-0.5">Dark</span>
+            {:else}
+                <Sun size="1.1em" class="shrink-0" />
+                <span class="hidden group-hover/mode:inline text-xs ml-0.5">Light</span>
+            {/if}
+        </button>
+
+        <!-- EDIT MODE TOGGLE (authenticated+ only) ──────────────────────── -->
+        {#if $ae_loc?.authenticated_access}
+            {#if $ae_loc.edit_mode}
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-warning hover:preset-tonal-success transition-all group/edit"
+                    onclick={() => { $ae_loc.edit_mode = false; }}
+                    title="Edit mode ON — click to turn off"
+                >
+                    <span class="fas fa-toggle-on text-sm inline-block"></span>
+                    <span class="hidden group-hover/edit:inline text-xs ml-0.5">Edit</span>
+                </button>
+            {:else}
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning transition-all group/edit"
+                    onclick={() => { $ae_loc.edit_mode = true; }}
+                    title="Edit mode OFF — click to turn on"
+                >
+                    <span class="fas fa-toggle-off text-sm inline-block opacity-50"></span>
+                    <span class="hidden group-hover/edit:inline text-xs ml-0.5">Edit</span>
+                </button>
+            {/if}
+        {/if}
+
+        <!-- MENU EXPAND / COLLAPSE ──────────────────────────────────────── -->
+        <button
+            type="button"
+            class="
+                btn btn-sm transition-all group/menu
+                {expand
+                    ? 'preset-filled-tertiary-400-600 hover:preset-filled-success'
+                    : 'preset-filled-tertiary-400-600 hover:preset-filled-success'}
+            "
+            onclick={toggle_expand}
+            title={expand ? 'Close menu' : 'Open menu'}
+        >
+            {#if expand}
+                <CircleX size="1.1em" class="shrink-0" />
+                <span class="hidden group-hover/menu:inline text-xs ml-0.5">Close</span>
+            {:else}
+                <Menu size="1.1em" class="shrink-0" />
+                <span class="hidden group-hover/menu:inline text-xs ml-0.5">Menu</span>
+            {/if}
+        </button>
+
+    </div>
+    <!-- END: Compact bar -->
+
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9fb764ed..0aa82a2d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -42,7 +42,8 @@
 
     // import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
     import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
-    import E_app_sys_menu from '$lib/app_components/e_app_sys_menu.svelte';
+    import E_app_sys_bar from '$lib/app_components/e_app_sys_bar.svelte';
+    // import E_app_sys_menu from '$lib/app_components/e_app_sys_menu.svelte'; // replaced by E_app_sys_bar
 
     interface Props {
         data: any;
@@ -329,7 +330,7 @@
 {#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}
     <!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages -->
     <div class="print:hidden">
-        <E_app_sys_menu {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
+        <E_app_sys_bar {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
 
         <!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
         {#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}