feat(launcher): migrate cfg menu to 7-tab sidebar layout (v3.1)
Replaces the 3-tab horizontal bar (Setup / Device / Dev) with a vertical
sidebar navigation matching the v3.1 design spec. New tab structure:
General — App Modes, Screen Saver (operator-facing)
Connectivity — Remote Controller & WebSocket
Sync & Health — Sync Timers, System Health
Native OS — OS controls (native or edit_mode preview)
Wallpaper — Desktop wallpaper settings
Advanced — Launch Timing, Updates (edit_mode only)
Maintenance — Local Resets, Debug Panel (edit_mode only)
Layout changes:
- Sidebar nav (w-48) + scrollable main content area replace inline tab bar
- Tab header shows label + description subtitle
- Technical Mode toggle is now a labeled button (not hidden icon)
- Footer shows Account/Device context; Reload moved to header
- {#key active_tab} wrapper ensures clean component remount on tab switch
- Remove unused icons (SlidersHorizontal, HeartPulse, Timer, CloudDownload)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -37,19 +37,74 @@ import Launcher_Cfg_Wallpaper from './cfg_components/launcher_cfg_wallpaper.svel
|
||||
import {
|
||||
Bug,
|
||||
Code,
|
||||
Gamepad2,
|
||||
Image,
|
||||
LayoutGrid,
|
||||
Monitor,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
SlidersHorizontal,
|
||||
Wrench,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// UI Tab State
|
||||
// Tabs are audience-oriented:
|
||||
// setup — what every onsite operator needs (mode preset, display, WS, screen saver)
|
||||
// device — sync engine (all devices) + native/Electron OS controls (native or edit_mode)
|
||||
// dev — developer/debug tools; only useful when edit_mode is on
|
||||
let active_tab: 'setup' | 'device' | 'dev' = $state('setup');
|
||||
type TabId =
|
||||
| 'general'
|
||||
| 'connectivity'
|
||||
| 'sync'
|
||||
| 'native'
|
||||
| 'wallpaper'
|
||||
| 'advanced'
|
||||
| 'maintenance';
|
||||
let active_tab: TabId = $state('general');
|
||||
|
||||
const TABS = [
|
||||
{
|
||||
id: 'general' as TabId,
|
||||
label: 'General',
|
||||
icon: LayoutGrid,
|
||||
title: 'App Modes, UI & Screen Saver'
|
||||
},
|
||||
{
|
||||
id: 'connectivity' as TabId,
|
||||
label: 'Connectivity',
|
||||
icon: Gamepad2,
|
||||
title: 'Remote Controller & WebSocket'
|
||||
},
|
||||
{
|
||||
id: 'sync' as TabId,
|
||||
label: 'Sync & Health',
|
||||
icon: RefreshCw,
|
||||
title: 'Sync Engine & System Status'
|
||||
},
|
||||
{
|
||||
id: 'native' as TabId,
|
||||
label: 'Native OS',
|
||||
icon: Monitor,
|
||||
title: 'Folders, Displays & Native Apps'
|
||||
},
|
||||
{
|
||||
id: 'wallpaper' as TabId,
|
||||
label: 'Wallpaper',
|
||||
icon: Image,
|
||||
title: 'Desktop Wallpaper Settings'
|
||||
},
|
||||
{
|
||||
id: 'advanced' as TabId,
|
||||
label: 'Advanced',
|
||||
icon: Code,
|
||||
title: 'Launch Timing & Updates',
|
||||
edit_only: true
|
||||
},
|
||||
{
|
||||
id: 'maintenance' as TabId,
|
||||
label: 'Maintenance',
|
||||
icon: Wrench,
|
||||
title: 'Local Resets & Debug Tools',
|
||||
edit_only: true
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Auto-Collapse Coordinator
|
||||
@@ -70,185 +125,210 @@ function handle_section_expand(current_key: string) {
|
||||
});
|
||||
$events_loc.launcher = launcher; // Trigger store update
|
||||
}
|
||||
|
||||
const current_tab_info = $derived(TABS.find((t) => t.id === active_tab));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="
|
||||
flex w-full
|
||||
max-w-full flex-col items-center justify-start gap-4
|
||||
">
|
||||
class="bg-surface-100-900 flex h-full min-h-[500px] w-full flex-row overflow-hidden">
|
||||
<!-- Sidebar Navigation -->
|
||||
<div
|
||||
class="border-surface-500/20 flex w-full flex-row items-center justify-between border-b pb-2">
|
||||
<h2
|
||||
class="text-center text-lg font-bold text-gray-700 dark:text-gray-200">
|
||||
<Settings size="1em" class="mr-2 opacity-50" />
|
||||
Launcher Configuration
|
||||
</h2>
|
||||
class="bg-surface-500/5 flex w-48 flex-shrink-0 flex-col border-r border-surface-500/20 p-2">
|
||||
<div class="mb-4 flex items-center gap-2 px-2 py-3">
|
||||
<Settings size="1.2em" class="text-primary-500" />
|
||||
<span class="text-xs font-bold tracking-widest uppercase opacity-80"
|
||||
>Launcher</span>
|
||||
</div>
|
||||
|
||||
<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. -->
|
||||
<nav class="flex flex-grow flex-col gap-1">
|
||||
{#each TABS as tab}
|
||||
{#if !tab.edit_only || $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (active_tab = tab.id)}
|
||||
class="btn btn-sm justify-start gap-3 px-3 py-2 text-[11px] font-medium transition-all"
|
||||
class:preset-filled-primary={active_tab === tab.id}
|
||||
class:preset-tonal-surface={active_tab !== tab.id}
|
||||
class:hover:preset-tonal-primary={active_tab !==
|
||||
tab.id}>
|
||||
<tab.icon size="1.1em" class="shrink-0" />
|
||||
{tab.label}
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="mt-auto flex flex-col gap-2 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_loc.edit_mode = !$ae_loc.edit_mode)}
|
||||
class="btn btn-icon transition-all duration-300"
|
||||
class="btn btn-sm justify-start gap-3 px-3 py-2 text-[10px] font-medium transition-all"
|
||||
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">
|
||||
<Pencil size="0.75em" />
|
||||
<span class="sr-only">Toggle Edit Mode</span>
|
||||
class:opacity-50={!$ae_loc.edit_mode}
|
||||
title="{$ae_loc.edit_mode ? 'Disable' : 'Enable'} Technical Mode">
|
||||
<Pencil size="1em" />
|
||||
<span>Technical Mode</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
|
||||
class="btn btn-icon hover:bg-surface-500/10 transition-colors dark:text-white">
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 justify-start gap-3 px-3 py-2 text-[10px] transition-all">
|
||||
<X size="1em" />
|
||||
<span class="sr-only">Close Config</span>
|
||||
<span>Close Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Tabs -->
|
||||
<!-- 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="bg-surface-500/10 w-full gap-1 rounded-lg p-1"
|
||||
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 = 'setup')}
|
||||
class="btn btn-sm text-[10px] font-bold uppercase transition-all"
|
||||
class:preset-filled-primary={active_tab === 'setup'}
|
||||
class:preset-tonal-surface={active_tab !== 'setup'}
|
||||
title="Display presets, interface toggles, WS controller, screen saver">
|
||||
<SlidersHorizontal size="0.85em" class="mr-1" /> Setup
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (active_tab = 'device')}
|
||||
class="btn btn-sm text-[10px] font-bold uppercase transition-all"
|
||||
class:preset-filled-primary={active_tab === 'device'}
|
||||
class:preset-tonal-surface={active_tab !== 'device'}
|
||||
title="Sync engine, device health & native OS controls">
|
||||
<Monitor size="0.85em" class="mr-1" /> Device
|
||||
</button>
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (active_tab = 'dev')}
|
||||
class="btn btn-sm text-[10px] font-bold uppercase transition-all"
|
||||
class:preset-filled-warning={active_tab === 'dev'}
|
||||
class:preset-tonal-surface={active_tab !== 'dev'}
|
||||
title="Developer & debug tools">
|
||||
<Code size="0.85em" class="mr-1" /> Dev
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="flex min-h-100 w-full flex-col gap-2">
|
||||
<!-- SETUP: everything onsite operators need day-to-day -->
|
||||
{#if active_tab === 'setup'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-left-2 flex flex-col gap-2 duration-300">
|
||||
<!-- 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')} />
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex flex-grow flex-col overflow-hidden">
|
||||
<!-- Tab Header -->
|
||||
<header
|
||||
class="border-surface-500/10 flex flex-shrink-0 items-center justify-between border-b px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">
|
||||
{current_tab_info?.label}
|
||||
</h2>
|
||||
<p class="text-[10px] opacity-50">{current_tab_info?.title}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- DEVICE: sync engine first (all devices) + native OS controls (native or edit_mode preview) -->
|
||||
{#if active_tab === 'device'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-2 duration-300">
|
||||
<!-- Sync pause/timers — relevant to every device, not just native -->
|
||||
<Launcher_Cfg_Sync_Timers
|
||||
on_expand={() => handle_section_expand('sync_timers')} />
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => location.reload()}
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary text-[10px] font-bold"
|
||||
title="Reload Application">
|
||||
<RefreshCw size="1em" class="mr-1" /> Reload
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Native sections: always in Electron; visible in edit_mode for dev preview.
|
||||
electron_relay.ts guards all calls — safe to import/render without Electron. -->
|
||||
{#if $ae_loc.is_native || $ae_loc.edit_mode}
|
||||
<Launcher_Cfg_Health
|
||||
on_expand={() => handle_section_expand('health')} />
|
||||
<Launcher_Cfg_Native_OS
|
||||
on_expand={() => handle_section_expand('native_os')} />
|
||||
<Launcher_Cfg_Wallpaper
|
||||
on_expand={() => handle_section_expand('wallpaper')} />
|
||||
<Launcher_Cfg_Launch_Timing
|
||||
on_expand={() => handle_section_expand('launch_timing')} />
|
||||
{#if $ae_loc.is_native}
|
||||
<Launcher_Cfg_Updates
|
||||
on_expand={() =>
|
||||
handle_section_expand('updates')} />
|
||||
<div class="flex-grow overflow-y-auto p-6">
|
||||
{#key active_tab}
|
||||
<div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
|
||||
{#if active_tab === 'general'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_App_Modes
|
||||
on_expand={() =>
|
||||
handle_section_expand('app_modes')} />
|
||||
<Launcher_Cfg_Screen_Saver
|
||||
on_expand={() =>
|
||||
handle_section_expand('screen_saver')} />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="flex flex-col items-center gap-1 py-3 text-center text-xs italic opacity-40">
|
||||
<Monitor size="1.2em" class="opacity-30" />
|
||||
<p>Native OS controls available in Aether Desktop.</p>
|
||||
<p class="text-[9px]">Enable Edit Mode to preview.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- 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 flex flex-col gap-2 duration-300">
|
||||
<Launcher_Cfg_Local_Actions
|
||||
on_expand={() => handle_section_expand('local_actions')} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if active_tab === 'connectivity'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_Controller
|
||||
on_expand={() =>
|
||||
handle_section_expand('controller')} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Global Actions Footer -->
|
||||
<div
|
||||
class="border-surface-500/20 mt-auto flex w-full flex-col gap-2 border-t pt-4">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<!-- Close button — always visible in lower-left as a second dismissal point.
|
||||
Useful in kiosk/iframe mode where the top-right close btn may scroll out of view. -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 transition-all">
|
||||
<X size="0.85em" class="mr-1" />
|
||||
Close
|
||||
</button>
|
||||
{#if active_tab === 'sync'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_Sync_Timers
|
||||
on_expand={() =>
|
||||
handle_section_expand('sync_timers')} />
|
||||
<Launcher_Cfg_Health
|
||||
on_expand={() =>
|
||||
handle_section_expand('health')} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => location.reload()}
|
||||
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all">
|
||||
<RefreshCw size="0.85em" class="mr-1" />
|
||||
Reload
|
||||
</button>
|
||||
{#if active_tab === 'native'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
{#if $ae_loc.is_native || $ae_loc.edit_mode}
|
||||
<Launcher_Cfg_Native_OS
|
||||
on_expand={() =>
|
||||
handle_section_expand('native_os')} />
|
||||
{:else}
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 py-12 text-center text-sm italic opacity-40">
|
||||
<Monitor size="3em" class="opacity-20" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p>
|
||||
Native OS controls are only
|
||||
available when running in Aether
|
||||
Desktop.
|
||||
</p>
|
||||
<p class="text-[10px]">
|
||||
Enable Technical Mode to preview
|
||||
layout.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if active_tab === 'wallpaper'}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_Wallpaper
|
||||
on_expand={() =>
|
||||
handle_section_expand('wallpaper')} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if active_tab === 'advanced' && $ae_loc.edit_mode}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_Launch_Timing
|
||||
on_expand={() =>
|
||||
handle_section_expand('launch_timing')} />
|
||||
{#if $ae_loc.is_native || $ae_loc.edit_mode}
|
||||
<Launcher_Cfg_Updates
|
||||
on_expand={() =>
|
||||
handle_section_expand('updates')} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if active_tab === 'maintenance' && $ae_loc.edit_mode}
|
||||
<div
|
||||
class="animate-in fade-in slide-in-from-bottom-2 flex flex-col gap-6 duration-300">
|
||||
<Launcher_Cfg_Local_Actions
|
||||
on_expand={() =>
|
||||
handle_section_expand('local_actions')} />
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<p
|
||||
class="ml-1 text-[9px] font-bold uppercase opacity-50">
|
||||
Debug Access
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() =>
|
||||
($events_loc.launcher.hide_drawer__debug = false)}
|
||||
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 w-full transition-all">
|
||||
<Bug size="1.2em" class="mr-2" />
|
||||
Open Debug Panel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() =>
|
||||
($events_loc.launcher.hide_drawer__debug = false)}
|
||||
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 w-full transition-all">
|
||||
<Bug size="0.85em" class="mr-1" />
|
||||
Debug Panel
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<p
|
||||
class="mt-2 text-center text-[9px] font-bold tracking-widest uppercase opacity-40">
|
||||
Aether Platform • Events Launcher v3.0
|
||||
</p>
|
||||
<!-- Content Footer -->
|
||||
<footer
|
||||
class="border-surface-500/10 flex flex-shrink-0 items-center justify-between border-t px-6 py-3">
|
||||
<p class="text-[9px] font-bold tracking-widest uppercase opacity-30">
|
||||
Aether Platform • Events Launcher v3.1
|
||||
</p>
|
||||
<div class="flex items-center gap-4 text-[9px] opacity-40">
|
||||
<span>Account: {$ae_loc.account_id || 'None'}</span>
|
||||
<span
|
||||
>Device: {$ae_loc.native_device?.event_device_id ||
|
||||
'Web'}</span
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user