From 0b9272e9f9f353de17cbc2abc2241e10706c3098 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Fri, 13 Mar 2026 16:59:04 -0400 Subject: [PATCH] feat(sys-bar): polish sign-in forms, fix passcode flow, dynamic section headers Sign In/Out (e_app_sign_in_out.svelte): - Remove redundant internal header (sr-only was broken by :global CSS override) - Full-width form inputs and buttons with 'or' divider between the two methods - Signed-in state shows centered username and full-width action buttons Access/Passcode (e_app_access_type.svelte): - Fix 'Locked' button: was running trigger=true (no-op permission reprocess); now correctly toggles show_passcode_input so the input shows/hides on click System bar (e_app_sys_bar.svelte): - Dynamic section headers: Sign In/Out shows username when signed in; Access/Passcode shows ShieldEllipsis/ShieldMinus/ShieldUser based on state - Fix passcode input not showing on re-open via menu button: onDestroy resets show_element__passcode_input=false; toggle_expand now restores it to true for anonymous/no-access state (matches handle_shield_click) - Broaden anonymous check from === 'anonymous' to !access_type || === 'anonymous' - Remove dead getElementById focus call (DOM not ready at that point; focus_input binding in Element_access_type handles it correctly) - Appearance section: mode/font buttons at top, dark mode gets amber tint in light mode for visual context, theme select uses text-sm Co-Authored-By: Claude Sonnet 4.6 --- .../app_components/e_app_access_type.svelte | 16 +- .../app_components/e_app_sign_in_out.svelte | 189 +++++------------- src/lib/app_components/e_app_sys_bar.svelte | 86 +++++--- 3 files changed, 108 insertions(+), 183 deletions(-) diff --git a/src/lib/app_components/e_app_access_type.svelte b/src/lib/app_components/e_app_access_type.svelte index da5567c3..dcbee253 100644 --- a/src/lib/app_components/e_app_access_type.svelte +++ b/src/lib/app_components/e_app_access_type.svelte @@ -424,19 +424,19 @@ diff --git a/src/lib/app_components/e_app_sign_in_out.svelte b/src/lib/app_components/e_app_sign_in_out.svelte index 90aa70cd..39dd9322 100644 --- a/src/lib/app_components/e_app_sign_in_out.svelte +++ b/src/lib/app_components/e_app_sign_in_out.svelte @@ -16,10 +16,7 @@ LockKeyhole, Mail, MailCheck, - ShieldUser, - User, - UserCheck, - UserLock + UserCheck } from '@lucide/svelte'; // *** Import Aether specific variables and functions @@ -373,44 +370,11 @@ " class:hidden > -
-

- {#if $ae_loc?.person_id && $ae_loc?.user_id} - - {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name} - - - - {:else} - - User Sign In - {/if} -

-
- - + {#if !$ae_loc?.person_id && !$ae_loc?.user_id} + +
+
+ or +
+
+ {:else} -
- + +
+
{$ae_loc?.user?.username ?? '-- not set --'} - +
- + {#if $ae_loc.edit_mode} {/if} - +
{/if} -
- - {#if $ae_loc?.person_id && $ae_loc?.user_id} - - {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name} - {:else} - - - User sign in: - {/if} - - - -
diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte index 7b64937a..c8073dd9 100644 --- a/src/lib/app_components/e_app_sys_bar.svelte +++ b/src/lib/app_components/e_app_sys_bar.svelte @@ -15,6 +15,7 @@ import { Bug, CircleX, + LogOut, Menu, Moon, Sun, @@ -91,7 +92,10 @@ $ae_sess.sys_menu.expand = true; $ae_loc.app_cfg.show_element__access_type = true; - if ($ae_loc?.access_type === 'anonymous') { + if (!$ae_loc?.access_type || $ae_loc?.access_type === 'anonymous') { + // onDestroy in Element_access_type resets show_element__passcode_input to false + // on panel close, so we must restore it here for menu-button opens too. + $ae_sess.app_cfg.show_element__passcode_input = true; $ae_sess.sys_menu.focus_passcode_input = true; } else { $ae_loc.sys_menu.expand_user = false; @@ -139,8 +143,8 @@ $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(); + // Note: focus is handled reactively by the focus_input binding in Element_access_type. + // Direct getElementById here would fail — the panel DOM doesn't exist yet at this point. } } @@ -265,9 +269,17 @@ class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" onclick={() => sec_signin = !sec_signin} > - - - Sign In / Out + + {#if $ae_loc?.person_id && $ae_loc?.user_id} + + Sign Out + + {$ae_loc?.user?.username ?? person_display ?? ''} + + {:else} + + User Sign In + {/if} {sec_signin ? '▲' : '▼'} @@ -290,11 +302,20 @@ class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" onclick={() => sec_access = !sec_access} > - - - Access / Passcode - {#if access_label} - ({access_label}) + + {#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} + + Elevated Access + ({access_label}) + {:else} + + Access + ({access_label}) + {/if} + {:else} + + Enter Passcode {/if} {sec_access ? '▲' : '▼'} @@ -330,29 +351,18 @@ {sec_appearance ? '▲' : '▼'} {#if sec_appearance} -
+
- -
-
Theme
- -
- - -
+ +
+ +
+
Theme
+ +
+
{/if}