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

fix(launcher): sync monitor native-only, repositioned, always-visible chip, light/dark responsive; add mode button tooltips

Browse Source
This commit is contained in:
Scott Idem
2026-03-16 10:39:56 -04:00
parent 75e8a87713
commit 0d554e434d
2 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,7 +106,9 @@
class:preset-filled-primary={$events_loc.launcher
.app_mode === 'default'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !==
'default'}>Web</button
'default'}
title="Default standard web browser (Chromium, Firefox, Safari based) launcher, for remote presenters and testing before being onsite">
Web</button
>
<button
type="button"
@@ -115,7 +117,8 @@
class:preset-filled-primary={$events_loc.launcher
.app_mode === 'native'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !==
'native'}>App</button
'native'}
title="Native Electron based app launcher, for onsite presenters in session rooms">App</button
>
<button
type="button"
@@ -124,7 +127,8 @@
class:preset-filled-primary={$events_loc.launcher
.app_mode === 'onsite'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !==
'onsite'}>Onsite</button
'onsite'}
title="Customized onsite OS and web browser (Chromium or Firefox based) launcher, for onsite presenters in for practice and onsite backup">Onsite</button
>
</div>
</div>

86
src/routes/events/[event_id]/(launcher)/launcher_background_sync.svelte
View File

@@ -418,49 +418,52 @@
}
</script>
<!-- Monitor Overlay (Hidden by default, triggered by config modal or secret gesture) -->
<!-- Monitor Overlay: only shown in Native/App mode.
Positioned bottom-left at bottom-20 to clear the debug π button (bottom-8 left-2)
and the sys bar (bottom-12 right-2). Panel grows upward from the status chip. -->
{#if $events_loc.launcher.app_mode === 'native' || $ae_loc.is_native}
<div
class="fixed bottom-4 right-4 z-[9999] flex flex-col items-end gap-2 pointer-events-none"
class="fixed bottom-20 left-4 z-[9999] flex flex-col items-start gap-2 pointer-events-none"
>
{#if show_monitor}
<div
class="bg-black/90 text-white p-3 rounded-lg border border-primary-500 shadow-2xl text-[10px] font-mono min-w-48 pointer-events-auto"
class="bg-surface-50/95 dark:bg-surface-900/95 text-surface-800 dark:text-surface-100 p-3 rounded-lg border border-surface-200 dark:border-primary-700 shadow-2xl text-[10px] font-mono min-w-52 pointer-events-auto backdrop-blur-sm"
>
<div
class="flex justify-between border-b border-primary-500 pb-1 mb-2"
class="flex justify-between border-b border-surface-200 dark:border-primary-700 pb-1 mb-2"
>
<span class="font-bold text-primary-400"
<span class="font-bold text-primary-600 dark:text-primary-400"
>NATIVE SYNC MONITOR</span
>
<button
type="button"
onclick={() => (show_monitor = false)}
class="text-error-500 hover:text-error-400">×</button
class="text-error-500 hover:text-error-400 ml-2">×</button
>
</div>
<div class="grid grid-cols-2 gap-x-4 gap-y-1 mb-2">
<span class="opacity-70 text-primary-300">Room Status:</span>
<span class="opacity-60 text-primary-700 dark:text-primary-300">Room Status:</span>
<span class="text-right"
>{sync_stats.cached} / {sync_stats.total} Files</span
>
<span class="opacity-70 text-primary-300">Prefix Len:</span>
<span class="opacity-60 text-primary-700 dark:text-primary-300">Prefix Len:</span>
<span class="text-right"
>{$ae_loc.native_device?.hash_prefix_length || 2} chars</span
>
<span class="opacity-70 text-primary-300">Heartbeat:</span>
<span class="opacity-60 text-primary-700 dark:text-primary-300">Heartbeat:</span>
<span
class="text-right {last_heartbeat
? 'text-success-500'
: 'text-error-500'}"
? 'text-success-600 dark:text-success-400'
: 'text-error-600 dark:text-error-400'}"
>
{last_heartbeat || 'Pending...'}
</span>
</div>
<div class="border-t border-white/10 pt-2 flex flex-col gap-1">
<div class="border-t border-surface-200 dark:border-surface-700 pt-2 flex flex-col gap-1">
<div class="flex justify-between items-center">
<span class:text-primary-500={timer__event}
>Event Loop:</span
@@ -501,35 +504,32 @@
</div>
{/if}
{#if currently_syncing}
<button
type="button"
onclick={() => (show_monitor = !show_monitor)}
class="bg-black/80 text-white p-2 rounded-lg text-[10px] border border-primary-500 animate-pulse shadow-2xl pointer-events-auto transition-transform active:scale-95"
>
<div class="flex items-center gap-2 text-left">
<span class="fas fa-sync fa-spin text-primary-500 text-sm"
></span>
<div class="flex flex-col">
<span class="font-bold">Syncing Room Files...</span>
<span class="opacity-70 truncate max-w-48"
>{currently_syncing}</span
>
<span class="text-[8px] mt-1 text-primary-300"
>Monitor Ready (Click to View)</span
>
</div>
</div>
</button>
{:else}
<!-- Secret button area to toggle monitor when not syncing -->
<button
type="button"
onclick={() => (show_monitor = !show_monitor)}
class="w-8 h-8 opacity-0 hover:opacity-20 bg-primary-500 rounded-full pointer-events-auto flex items-center justify-center transition-opacity"
title="Toggle Sync Monitor"
>
<span class="fas fa-microchip text-white text-[10px]"></span>
</button>
{/if}
<!-- Compact always-visible status chip.
Syncing: animated primary border + pulse. Idle: subtle muted chip.
Replaces the old invisible secret button so staff can always see the monitor. -->
<button
type="button"
onclick={() => (show_monitor = !show_monitor)}
class="
flex items-center gap-1.5
px-2 py-1.5 rounded-lg
text-[10px] font-mono
pointer-events-auto
transition-all
{currently_syncing
? 'bg-primary-500/15 dark:bg-primary-500/25 border border-primary-500 text-primary-700 dark:text-primary-300 shadow-md animate-pulse'
: 'bg-surface-100/90 dark:bg-surface-800/80 border border-surface-300 dark:border-surface-600 text-surface-600 dark:text-surface-300 opacity-60 hover:opacity-100 shadow-sm'}
"
title="Native Sync Monitor · {sync_stats.cached}/{sync_stats.total} files · click to {show_monitor ? 'close' : 'open'}"
>
<span class="fas {currently_syncing ? 'fa-sync fa-spin text-primary-500' : 'fa-microchip opacity-50'} text-[9px]"></span>
{#if currently_syncing}
<span class="truncate max-w-40 text-left">{currently_syncing}</span>
{:else}
<span>Native Sync</span>
<span class="opacity-50 ml-0.5">{sync_stats.cached}/{sync_stats.total}</span>
{/if}
<span class="fas {show_monitor ? 'fa-chevron-down' : 'fa-chevron-up'} text-[7px] opacity-40 ml-0.5"></span>
</button>
</div>
{/if}