From 61c020b0b22019d214d1514a18cc2b8a252d83c2 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Fri, 13 Mar 2026 16:24:50 -0400 Subject: [PATCH] =?UTF-8?q?feat(sys-bar):=20polish=20=E2=80=94=20frosted?= =?UTF-8?q?=20glass=20panel,=20smooth=20label=20transitions,=20footer=20cl?= =?UTF-8?q?earance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Panel and sticky header now use bg-white/85 + backdrop-blur-md (frosted glass) matching the compact bar's existing semi-transparent treatment - Button hover labels switched from hidden/inline (instant snap) to max-w/opacity transitions (duration-300 ease-in-out) — smooth expand-in, graceful fade-out - Inlined Appearance controls (theme select + mode/font buttons) replacing Element_theme sub-component to avoid w-72 / bg-blue conflicts inside the panel - Added Dev/Tools section (edit mode only): iframe toggle, reload, clear storage+DB, URL builder, debug overlay — separated from user-facing config - :global CSS in style block strips blue bg/border from Element_access_type and Element_sign_in_out when rendered inside .ae_sys_panel - bottom-4 → bottom-12 to clear route-level footers (absolute bottom-0, text-xs hover:text-base — expands to ~44px on hover) Co-Authored-By: Claude Sonnet 4.6 --- src/lib/app_components/e_app_sys_bar.svelte | 222 ++++++++++++++++---- 1 file changed, 180 insertions(+), 42 deletions(-) diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte index c834c246..7b64937a 100644 --- a/src/lib/app_components/e_app_sys_bar.svelte +++ b/src/lib/app_components/e_app_sys_bar.svelte @@ -8,8 +8,9 @@ * 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. + * Sub-components are reused unchanged for complex business logic + * (access_type, sign_in_out). Simple controls (theme, cfg utilities) + * are inlined here for clean panel layout without blue-bg conflicts. */ import { Bug, @@ -26,9 +27,8 @@ 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'; + import E_app_url_builder from '$lib/app_components/e_app_url_builder.svelte'; interface Props { log_lvl?: number; @@ -70,6 +70,20 @@ // DOM sync (class) is handled reactively in +layout.svelte effect #3 } + // ── Dev: clear all browser storage + key IndexedDB tables, then reload ── + function handle_clear_storage_db() { + if (!confirm('Clear all local/session storage and IndexedDB? The page will reload.')) return; + localStorage.clear(); + sessionStorage.clear(); + indexedDB.deleteDatabase('ae_archives_db'); + indexedDB.deleteDatabase('ae_core_db'); + indexedDB.deleteDatabase('ae_events_db'); + indexedDB.deleteDatabase('ae_journals_db'); + indexedDB.deleteDatabase('ae_posts_db'); + indexedDB.deleteDatabase('ae_sponsorships_db'); + window.location.reload(); + } + // ── Menu expand / collapse ─────────────────────────────────────────────── function toggle_expand() { if (!expand) { @@ -135,7 +149,7 @@ let sec_access = $state(true); let sec_signin = $state(false); let sec_appearance = $state(false); - let sec_admin = $state(false); + let sec_dev = $state(false); // ── Derived display helpers ────────────────────────────────────────────── let font_label = $derived.by(() => { @@ -163,6 +177,28 @@ }; return map[t] ?? t; }); + + // Theme options — keep in sync with e_app_url_builder.svelte + const theme_options = [ + { value: '', label: '-- None --' }, + { value: 'cerberus', label: 'Cerberus' }, + { value: 'concord', label: 'Concord' }, + { value: 'crimson', label: 'Crimson' }, + { value: 'hamlindigo', label: 'Hamlindigo' }, + { value: 'modern', label: 'Modern' }, + { value: 'nouveau', label: 'Nouveau' }, + { value: 'rocket', label: 'Rocket' }, + { value: 'terminus', label: 'Terminus' }, + { value: 'vintage', label: 'Vintage' }, + { value: 'wintry', label: 'Wintry' }, + { value: 'AE_OSIT_default', label: 'OSIT' }, + { value: 'AE_Firefly', label: 'Firefly ✦' }, + { value: 'AE_Firefly_SteelBlue', label: 'Firefly SteelBlue ✦' }, + { value: 'AE_Firefly_Indigo', label: 'Firefly Indigo ✦' }, + { value: 'AE_Firefly_Rainbow', label: 'Firefly Rainbow ✨' }, + { value: 'AE_c_IDAA_light', label: 'IDAA – light' }, + { value: 'AE_c_LCI', label: 'LCI' }, + ]; -
+
{#if $ae_loc?.person_id} @@ -293,46 +330,130 @@ {sec_appearance ? '▲' : '▼'} {#if sec_appearance} -
- +
+ + +
+
Theme
+ +
+ + +
+ + +
+
{/if}
- + + {#if $ae_loc.edit_mode}
- {#if sec_admin} -
- - + {#if sec_dev} +
+ + + {#if $ae_loc.iframe} + + + Exit iframe Mode + + {:else} + + + Enable iframe Mode + + {/if} + + + + + + + +
+ +
+ + +
+ +
+
{/if}
@@ -360,7 +481,7 @@ pointer-events-none transition-opacity duration-200 delay-500 flex items-center gap-1.5 - bg-white/90 dark:bg-gray-900/90 + bg-white/30 dark:bg-gray-900/30 border border-gray-200/60 dark:border-gray-700/60 backdrop-blur-sm rounded-lg px-2 py-1 @@ -387,7 +508,7 @@ ae_sys_bar__strip flex flex-row items-center gap-1 h-9 - bg-white/80 dark:bg-gray-900/80 + bg-white/30 dark:bg-gray-900/30 backdrop-blur-sm border border-gray-200/60 dark:border-gray-700/60 rounded-xl @@ -427,7 +548,7 @@ {:else} {/if} -
+ +