Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(launcher): fix cfg drawer medium-width wrapping; rename Hardware→Device tab; native OS in edit_mode

Browse Source 
- launcher_cfg_section.svelte: Remove md:grid-cols-2 from content wrapper.
  Root cause of the middle-width layout issue: at md breakpoint the drawer
  is only 384px wide but the section body switched to 2-column, cramming
  full-width content blocks into ~170px each. Always grid-cols-1 now.

- launcher_cfg.svelte: Rename Hardware tab to Device (neutral — applies
  even in browser). Reorder Device tab content: Sync Timers first (relevant
  to all devices), then native sections behind $ae_loc.is_native || edit_mode.
  Updates still hidden behind is_native only (no useful preview).

- launcher_cfg_native_os.svelte: Add dev-preview banner when edit_mode is
  on but not running in Electron. electron_relay.ts guards all calls with
  'if (!native) return null' so there are no import errors or crashes —
  controls simply show with a warning indicator. Removes stale placeholder
  comment left by a previous agent.
This commit is contained in:
Scott Idem
2026-03-13 14:54:28 -04:00
parent 71795461dd
commit bf22b4a512
3 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_native_os.svelte
View File

@@ -55,7 +55,15 @@
description="OS: {$ae_loc.native_device?.meta_json?.platform ||
'...'} | Kiosk & Apps"
>
<!-- Content omitted for brevity, preserved in file -->
<!-- Dev preview banner: shown when edit_mode is on but not running in Electron.
electron_relay functions all return null when native is absent — no errors. -->
{#if $ae_loc.edit_mode && !$ae_loc.is_native}
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-warning-500/10 border border-warning-500/30 mb-1">
<span class="fas fa-flask text-warning-500 text-xs"></span>
<span class="text-[9px] text-warning-500 font-bold uppercase tracking-wide">Dev Preview — controls visible but non-functional without Electron</span>
</div>
{/if}
{#if system_status}
<div
class="col-span-full text-[10px] text-center italic bg-surface-500/10 py-1 rounded animate-pulse text-primary-500 border border-primary-500/20"

2
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_section.svelte
View File

@@ -137,7 +137,7 @@
{/if}
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-3"
class="grid grid-cols-1 gap-3"
>
{@render children?.()}
</div>

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

@@ -36,9 +36,9 @@
// UI Tab State
// 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)
// 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' | 'hardware' | 'dev' = $state('setup');
let active_tab: 'setup' | 'device' | 'dev' = $state('setup');
/**
* Auto-Collapse Coordinator
@@ -127,13 +127,13 @@
</button>
<button
type="button"
onclick={() => (active_tab = 'hardware')}
onclick={() => (active_tab = 'device')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary={active_tab === 'hardware'}
class:preset-tonal-surface={active_tab !== 'hardware'}
title="Native hardware, Electron app health &amp; updates, sync control"
class:preset-filled-primary={active_tab === 'device'}
class:preset-tonal-surface={active_tab !== 'device'}
title="Sync engine, device health &amp; native OS controls"
>
<span class="fas fa-microchip mr-1"></span> Hardware
<span class="fas fa-desktop mr-1"></span> Device
</button>
{#if $ae_loc.edit_mode}
<button
@@ -168,31 +168,35 @@
</div>
{/if}
<!-- HARDWARE: Electron/native device management only -->
{#if active_tab === 'hardware'}
<!-- 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 duration-300 flex flex-col gap-2">
{#if $ae_loc.is_native}
<!-- Sync pause/timers — relevant to every device, not just native -->
<Launcher_Cfg_Sync_Timers
on_expand={() => handle_section_expand('sync_timers')}
/>
<!-- 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_Updates
on_expand={() => handle_section_expand('updates')}
/>
{#if $ae_loc.is_native}
<Launcher_Cfg_Updates
on_expand={() => handle_section_expand('updates')}
/>
{/if}
{:else}
<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 class="py-3 text-center opacity-40 italic text-xs flex flex-col gap-1 items-center">
<span class="fas fa-desktop text-lg opacity-30"></span>
<p>Native OS controls available in Aether Desktop.</p>
<p class="text-[9px]">Enable Edit Mode to preview.</p>
</div>
{/if}
<!-- 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}