First round of work on the Launcher Config.

src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte

@@ -1228,11 +1228,11 @@
 </div>
 
 <Drawer
-    class="bg-orange-100 opacity-90 hover:opacity-97 transition-all duration-1000 border border-gray-300 dark:border-gray-600"
+    class="bg-orange-100 opacity-90 hover:opacity-97 transition-all duration-1000 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[28rem]"
     placement="left"
     transitionType="fly"
     transitionParams={{
-        x: -320,
+        x: -450,
         duration: 200,
         easing: sineIn
     }}

src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte

@@ -32,58 +32,118 @@
     import Launcher_Cfg_Screen_Saver from './cfg_components/launcher_cfg_screen_saver.svelte';
     import Launcher_Cfg_App_Modes from './cfg_components/launcher_cfg_app_modes.svelte';
     import Launcher_Cfg_Local_Actions from './cfg_components/launcher_cfg_local_actions.svelte';
+
+    // UI Tab State
+    let active_tab: 'system' | 'sync' | 'general' = $state('system');
 </script>
 
 <div
     class="
-        w-full max-w-md
-        flex flex-col gap-2 items-center justify-start
+        w-full max-w-full
+        flex flex-col gap-4 items-center justify-start
         "
 >
-    <div class="w-full flex flex-row items-center justify-between">
-        <h2 class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+    <div class="w-full flex flex-row items-center justify-between border-b border-surface-500/20 pb-2">
+        <h2 class="text-center text-lg font-bold text-gray-700 dark:text-gray-200">
+            <span class="fas fa-cog mr-2 opacity-50"></span>
             Launcher Configuration
         </h2>
 
         <button
             onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
-            class="btn btn-icon dark:text-white"
+            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>
 
-    <!-- Native Sections (only if bridge is active) -->
-    {#if $ae_loc.is_native}
-        <Launcher_Cfg_Native_OS />
-        <Launcher_Cfg_Sync_Timers />
-        <Launcher_Cfg_Health />
-        <Launcher_Cfg_Updates />
-    {/if}
-
-    <Launcher_Cfg_Controller />
-    <Launcher_Cfg_Screen_Saver />
-    <Launcher_Cfg_App_Modes />
-    <Launcher_Cfg_Local_Actions />
-
-    <div class="text-center mt-4">
-        <button
-            type="button"
-            onclick={() => ($events_loc.launcher.hide_drawer__debug = false)}
-            class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
+    <!-- Category Tabs -->
+    <div class="w-full grid grid-cols-3 gap-1 bg-surface-500/10 p-1 rounded-lg">
+        <button 
+            onclick={() => active_tab = 'system'}
+            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
+            class:preset-filled-primary-500={active_tab === 'system'}
+            class:opacity-50={active_tab !== 'system'}
         >
-            <span class="fas fa-bug"></span>
-            Debug
+            <span class="fas fa-microchip mr-1"></span> System
         </button>
-
-        <button
-            type="button"
-            onclick={() => location.reload()}
-            class="btn btn-sm p-1 preset-tonal-secondary hover:preset-filled-secondary-500"
+        <button 
+            onclick={() => active_tab = 'sync'}
+            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
+            class:preset-filled-primary-500={active_tab === 'sync'}
+            class:opacity-50={active_tab !== 'sync'}
         >
-            <span class="fas fa-sync-alt"></span>
-            Reload Page
+            <span class="fas fa-sync mr-1"></span> Sync
+        </button>
+        <button 
+            onclick={() => active_tab = 'general'}
+            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
+            class:preset-filled-primary-500={active_tab === 'general'}
+            class:opacity-50={active_tab !== 'general'}
+        >
+            <span class="fas fa-sliders-h mr-1"></span> General
         </button>
     </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">
+                {#if $ae_loc.is_native}
+                    <Launcher_Cfg_Health />
+                    <Launcher_Cfg_Native_OS />
+                    <Launcher_Cfg_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>
+                {/if}
+            </div>
+        {/if}
+
+        {#if active_tab === 'sync'}
+            <div class="animate-in fade-in slide-in-from-bottom-2 duration-300">
+                <Launcher_Cfg_Sync_Timers />
+            </div>
+        {/if}
+
+        {#if active_tab === 'general'}
+            <div class="animate-in fade-in slide-in-from-right-2 duration-300">
+                <Launcher_Cfg_Controller />
+                <Launcher_Cfg_App_Modes />
+                <Launcher_Cfg_Screen_Saver />
+                <Launcher_Cfg_Local_Actions />
+            </div>
+        {/if}
+
+    </div>
+
+    <!-- Global Actions Footer -->
+    <div class="w-full flex flex-col gap-2 border-t border-surface-500/20 pt-4 mt-auto">
+        <div class="grid grid-cols-2 gap-2">
+            <button
+                type="button"
+                onclick={() => ($events_loc.launcher.hide_drawer__debug = false)}
+                class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 transition-all"
+            >
+                <span class="fas fa-bug mr-2"></span>
+                Open Debug
+            </button>
+
+            <button
+                type="button"
+                onclick={() => location.reload()}
+                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all"
+            >
+                <span class="fas fa-sync-alt mr-2"></span>
+                Reload Page
+            </button>
+        </div>
+        
+        <p class="text-[9px] text-center opacity-40 uppercase font-bold tracking-widest mt-2">
+            Aether Platform &bull; Events Launcher v3.0
+        </p>
+    </div>
 </div>