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:
@@ -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 & 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 & 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
|
||||
|
||||
Reference in New Issue
Block a user