feat(launcher): reorganize cfg drawer into Setup/Hardware/Dev tabs

- Setup (default): Oral/Poster preset, WS Controller, Screen Saver
- Hardware: Electron health/OS/updates (native only) + Sync control
- Dev: Local reset/debug tools — tab hidden until Edit Mode is on

Edit Mode toggle added as subtle pencil icon in the cfg drawer header
(low opacity when off, primary-colored when active). This is intentional
— onsite kiosk operators should not stumble on it, but admins doing
setup can find and toggle it without leaving the drawer.

Dev tab visibility and the Debug Panel button both gate on edit_mode,
keeping the default view clean for non-technical operators.
This commit is contained in:
Scott Idem
2026-03-13 14:28:23 -04:00
parent ce0c8b03c9
commit 71795461dd

View File

@@ -34,7 +34,11 @@
import Launcher_Cfg_Local_Actions from './cfg_components/launcher_cfg_local_actions.svelte';
// UI Tab State
let active_tab: 'system' | 'sync' | 'general' = $state('system');
// Tabs are audience-oriented:
// setup — what every onsite operator needs (mode preset, display, WS, screen saver)
// hardware — native/Electron device management (health, OS control, updates, sync pause)
// dev — developer/debug tools; only useful when edit_mode is on
let active_tab: 'setup' | 'hardware' | 'dev' = $state('setup');
/**
* Auto-Collapse Coordinator
@@ -73,51 +77,100 @@
Launcher Configuration
</h2>
<button
type="button"
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="btn btn-icon dark:text-white hover:bg-surface-500/10 transition-colors"
>
<span class="fas fa-times"></span>
<span class="sr-only">Close Config</span>
</button>
<div class="flex items-center gap-1">
<!-- Subtle Edit Mode toggle — intentionally low-key so kiosk operators
don't stumble on it, but accessible for setup/admin use.
Glows primary when active; nearly invisible when off. -->
<button
type="button"
onclick={() => ($ae_loc.edit_mode = !$ae_loc.edit_mode)}
class="btn btn-icon transition-all duration-300"
class:text-primary-500={$ae_loc.edit_mode}
class:opacity-20={!$ae_loc.edit_mode}
class:hover:opacity-60={!$ae_loc.edit_mode}
title="{$ae_loc.edit_mode ? 'Disable' : 'Enable'} Edit Mode"
>
<span class="fas fa-pencil-alt text-xs"></span>
<span class="sr-only">Toggle Edit Mode</span>
</button>
<button
type="button"
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="btn btn-icon dark:text-white hover:bg-surface-500/10 transition-colors"
>
<span class="fas fa-times"></span>
<span class="sr-only">Close Config</span>
</button>
</div>
</div>
<!-- Category Tabs -->
<div class="w-full grid grid-cols-3 gap-1 bg-surface-500/10 p-1 rounded-lg">
<!-- Dev tab is only shown when Edit Mode is active — keeps the UI uncluttered
for onsite operators who never need those tools. Edit Mode is toggled via
the pencil icon in the header above. -->
<div
class="w-full gap-1 bg-surface-500/10 p-1 rounded-lg"
class:grid={true}
class:grid-cols-2={!$ae_loc.edit_mode}
class:grid-cols-3={$ae_loc.edit_mode}
>
<button
type="button"
onclick={() => (active_tab = 'system')}
onclick={() => (active_tab = 'setup')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary={active_tab === 'system'}
class:preset-tonal-surface={active_tab !== 'system'}
class:preset-filled-primary={active_tab === 'setup'}
class:preset-tonal-surface={active_tab !== 'setup'}
title="Display presets, interface toggles, WS controller, screen saver"
>
<span class="fas fa-microchip mr-1"></span> System
<span class="fas fa-sliders-h mr-1"></span> Setup
</button>
<button
type="button"
onclick={() => (active_tab = 'sync')}
onclick={() => (active_tab = 'hardware')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary={active_tab === 'sync'}
class:preset-tonal-surface={active_tab !== 'sync'}
class:preset-filled-primary={active_tab === 'hardware'}
class:preset-tonal-surface={active_tab !== 'hardware'}
title="Native hardware, Electron app health &amp; updates, sync control"
>
<span class="fas fa-sync mr-1"></span> Sync
</button>
<button
type="button"
onclick={() => (active_tab = 'general')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary={active_tab === 'general'}
class:preset-tonal-surface={active_tab !== 'general'}
>
<span class="fas fa-sliders-h mr-1"></span> General
<span class="fas fa-microchip mr-1"></span> Hardware
</button>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => (active_tab = 'dev')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-warning={active_tab === 'dev'}
class:preset-tonal-surface={active_tab !== 'dev'}
title="Developer &amp; debug tools"
>
<span class="fas fa-code mr-1"></span> Dev
</button>
{/if}
</div>
<!-- Tab Content -->
<div class="w-full flex flex-col gap-2 min-h-[400px]">
{#if active_tab === 'system'}
<div class="animate-in fade-in slide-in-from-left-2 duration-300">
<!-- SETUP: everything onsite operators need day-to-day -->
{#if active_tab === 'setup'}
<div class="animate-in fade-in slide-in-from-left-2 duration-300 flex flex-col gap-2">
<!-- Mode preset is the #1 onsite action — give it prominent placement -->
<Launcher_Cfg_App_Modes
on_expand={() => handle_section_expand('app_modes')}
/>
<Launcher_Cfg_Controller
on_expand={() => handle_section_expand('controller')}
/>
<Launcher_Cfg_Screen_Saver
on_expand={() => handle_section_expand('screen_saver')}
/>
</div>
{/if}
<!-- HARDWARE: Electron/native device management only -->
{#if active_tab === 'hardware'}
<div class="animate-in fade-in slide-in-from-bottom-2 duration-300 flex flex-col gap-2">
{#if $ae_loc.is_native}
<Launcher_Cfg_Health
on_expand={() => handle_section_expand('health')}
@@ -129,38 +182,29 @@
on_expand={() => handle_section_expand('updates')}
/>
{:else}
<div class="card p-8 text-center opacity-50 italic text-sm">
Native OS features are only available when running in
the Aether Desktop app.
<div class="card p-6 text-center opacity-50 italic text-sm flex flex-col gap-2 items-center">
<span class="fas fa-desktop text-2xl opacity-30"></span>
<p>Native OS features are only available in the Aether Desktop app.</p>
<p class="text-[10px] opacity-60">Oral/default session room devices running Electron will see controls here.</p>
</div>
{/if}
</div>
{/if}
{#if active_tab === 'sync'}
<div class="animate-in fade-in slide-in-from-bottom-2 duration-300">
<!-- Sync pause is useful for anyone doing onsite troubleshooting, not just devs -->
<Launcher_Cfg_Sync_Timers
on_expand={() => handle_section_expand('sync_timers')}
/>
</div>
{/if}
{#if active_tab === 'general'}
<div class="animate-in fade-in slide-in-from-right-2 duration-300">
<Launcher_Cfg_Controller
on_expand={() => handle_section_expand('controller')}
/>
<Launcher_Cfg_App_Modes
on_expand={() => handle_section_expand('app_modes')}
/>
<Launcher_Cfg_Screen_Saver
on_expand={() => handle_section_expand('screen_saver')}
/>
<!-- DEV: developer/debug tools — only reachable when Edit Mode is on -->
{#if active_tab === 'dev' && $ae_loc.edit_mode}
<div class="animate-in fade-in slide-in-from-right-2 duration-300 flex flex-col gap-2">
<Launcher_Cfg_Local_Actions
on_expand={() => handle_section_expand('local_actions')}
/>
</div>
{/if}
</div>
<!-- Global Actions Footer -->
@@ -172,16 +216,18 @@
type="button"
onclick={() =>
($events_loc.launcher.hide_drawer__debug = false)}
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 transition-all"
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 transition-all"
class:hidden={!$ae_loc.edit_mode}
>
<span class="fas fa-bug mr-2"></span>
Open Debug
Debug Panel
</button>
<button
type="button"
onclick={() => location.reload()}
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all"
class:col-span-2={!$ae_loc.edit_mode}
>
<span class="fas fa-sync-alt mr-2"></span>
Reload Page