From 71795461dda90c7191f9c8d8bae83114a1478a7b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 14:28:23 -0400
Subject: [PATCH] feat(launcher): reorganize cfg drawer into Setup/Hardware/Dev
 tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 .../[event_id]/(launcher)/launcher_cfg.svelte | 144 ++++++++++++------
 1 file changed, 95 insertions(+), 49 deletions(-)

diff --git a/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte b/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
index 1c968163..2b6fd2ba 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
@@ -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