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 class:preset-filled-primary={$events_loc.launcher
.app_mode === 'default'} .app_mode === 'default'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !== 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 <button
type="button" type="button"
@@ -115,7 +117,8 @@
class:preset-filled-primary={$events_loc.launcher class:preset-filled-primary={$events_loc.launcher
.app_mode === 'native'} .app_mode === 'native'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !== 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 <button
type="button" type="button"
@@ -124,7 +127,8 @@
class:preset-filled-primary={$events_loc.launcher class:preset-filled-primary={$events_loc.launcher
.app_mode === 'onsite'} .app_mode === 'onsite'}
class:preset-tonal-surface={$events_loc.launcher.app_mode !== 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>
</div> </div>

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

@@ -418,49 +418,52 @@
} }
</script> </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 <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} {#if show_monitor}
<div <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 <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 >NATIVE SYNC MONITOR</span
> >
<button <button
type="button" type="button"
onclick={() => (show_monitor = false)} 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>
<div class="grid grid-cols-2 gap-x-4 gap-y-1 mb-2"> <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" <span class="text-right"
>{sync_stats.cached} / {sync_stats.total} Files</span >{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" <span class="text-right"
>{$ae_loc.native_device?.hash_prefix_length || 2} chars</span >{$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 <span
class="text-right {last_heartbeat class="text-right {last_heartbeat
? 'text-success-500' ? 'text-success-600 dark:text-success-400'
: 'text-error-500'}" : 'text-error-600 dark:text-error-400'}"
> >
{last_heartbeat || 'Pending...'} {last_heartbeat || 'Pending...'}
</span> </span>
</div> </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"> <div class="flex justify-between items-center">
<span class:text-primary-500={timer__event} <span class:text-primary-500={timer__event}
>Event Loop:</span >Event Loop:</span
@@ -501,35 +504,32 @@
</div> </div>
{/if} {/if}
{#if currently_syncing} <!-- Compact always-visible status chip.
<button Syncing: animated primary border + pulse. Idle: subtle muted chip.
type="button" Replaces the old invisible secret button so staff can always see the monitor. -->
onclick={() => (show_monitor = !show_monitor)} <button
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" type="button"
> onclick={() => (show_monitor = !show_monitor)}
<div class="flex items-center gap-2 text-left"> class="
<span class="fas fa-sync fa-spin text-primary-500 text-sm" flex items-center gap-1.5
></span> px-2 py-1.5 rounded-lg
<div class="flex flex-col"> text-[10px] font-mono
<span class="font-bold">Syncing Room Files...</span> pointer-events-auto
<span class="opacity-70 truncate max-w-48" transition-all
>{currently_syncing}</span {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'
<span class="text-[8px] mt-1 text-primary-300" : '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'}
>Monitor Ready (Click to View)</span "
> title="Native Sync Monitor · {sync_stats.cached}/{sync_stats.total} files · click to {show_monitor ? 'close' : 'open'}"
</div> >
</div> <span class="fas {currently_syncing ? 'fa-sync fa-spin text-primary-500' : 'fa-microchip opacity-50'} text-[9px]"></span>
</button> {#if currently_syncing}
{:else} <span class="truncate max-w-40 text-left">{currently_syncing}</span>
<!-- Secret button area to toggle monitor when not syncing --> {:else}
<button <span>Native Sync</span>
type="button" <span class="opacity-50 ml-0.5">{sync_stats.cached}/{sync_stats.total}</span>
onclick={() => (show_monitor = !show_monitor)} {/if}
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" <span class="fas {show_monitor ? 'fa-chevron-down' : 'fa-chevron-up'} text-[7px] opacity-40 ml-0.5"></span>
title="Toggle Sync Monitor" </button>
>
<span class="fas fa-microchip text-white text-[10px]"></span>
</button>
{/if}
</div> </div>
{/if}