Fix: Splashscreen Idle & Dev

This commit is contained in:
Youwes09
2026-06-09 19:24:16 -05:00
parent fc20835dde
commit abd60f261f
4 changed files with 37 additions and 13 deletions
@@ -49,6 +49,7 @@
notConfigured?: boolean notConfigured?: boolean
showCards?: boolean showCards?: boolean
showFps?: boolean showFps?: boolean
showDevOverlay?: boolean
pinLen?: number pinLen?: number
pinCorrect?: string pinCorrect?: string
onReady?: () => void onReady?: () => void
@@ -60,7 +61,7 @@
let { let {
mode = 'loading', ringFull = false, failed = false, mode = 'loading', ringFull = false, failed = false,
notConfigured = false, showCards = true, showFps = false, notConfigured = false, showCards = true, showFps = false, showDevOverlay = false,
pinLen = 4, pinCorrect = '', pinLen = 4, pinCorrect = '',
onReady, onUnlock, onRetry, onBypass, onDismiss, onReady, onUnlock, onRetry, onBypass, onDismiss,
}: Props = $props() }: Props = $props()
@@ -464,7 +465,7 @@
{/if} {/if}
{/if} {/if}
{#if isDev && mode === 'idle' && devMetrics} {#if isDev && mode === 'idle' && devMetrics && showDevOverlay}
<div class="dev-overlay"> <div class="dev-overlay">
<span class="dev-title">canvas · idle splash</span> <span class="dev-title">canvas · idle splash</span>
<div class="dev-grid"> <div class="dev-grid">
@@ -102,10 +102,10 @@
} }
function triggerSplash() { function triggerSplash() {
if (appState.idleSplash) return if (appState.devSplash) return
splashTriggered = true splashTriggered = true
setTimeout(() => splashTriggered = false, 200) setTimeout(() => splashTriggered = false, 200)
appState.idleSplash = true appState.devSplash = true
} }
async function testWindowsHello() { async function testWindowsHello() {
+1
View File
@@ -36,6 +36,7 @@ export const appState = $state({
toasts: [] as unknown[], toasts: [] as unknown[],
appDir: '', appDir: '',
idleSplash: false, idleSplash: false,
devSplash: false,
}) })
export function setSettingsOpen(next: boolean) { app.setSettingsOpen(next) } export function setSettingsOpen(next: boolean) { app.setSettingsOpen(next) }
+31 -9
View File
@@ -142,20 +142,38 @@
if (appState.status === 'booting') splashDismissed = false if (appState.status === 'booting') splashDismissed = false
}) })
let idleSplashLocked = false let idleTimer: ReturnType<typeof setTimeout> | null = null
let idleDismissLock = false
function showIdleSplash() {
if (idleSplashLocked || appState.idleSplash) return
appState.idleSplash = true
}
function onIdleDismiss() { function onIdleDismiss() {
if (idleSplashLocked) return if (idleDismissLock) return
idleSplashLocked = true idleDismissLock = true
appState.idleSplash = false appState.idleSplash = false
setTimeout(() => { idleSplashLocked = false }, 400) setTimeout(() => { idleDismissLock = false }, 400)
} }
function armIdleTimer() {
if (idleTimer !== null) clearTimeout(idleTimer)
const mins = settingsState.settings.idleTimeoutMin ?? 5
if (mins <= 0) return
idleTimer = setTimeout(() => {
if (appState.status === 'ready' && !appState.idleSplash) appState.idleSplash = true
}, mins * 60_000)
}
$effect(() => {
if (appState.status !== 'ready') return
const events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'touchmove', 'wheel', 'click'] as const
for (const e of events) document.addEventListener(e, armIdleTimer, { capture: true, passive: true })
armIdleTimer()
return () => {
if (idleTimer !== null) { clearTimeout(idleTimer); idleTimer = null }
for (const e of events) document.removeEventListener(e, armIdleTimer, { capture: true })
}
})
function onSplashRetry() { function onSplashRetry() {
import('$lib/state/boot.svelte').then(({ retryBoot }) => { import('$lib/state/boot.svelte').then(({ retryBoot }) => {
retryBoot(appState.authMode ?? 'NONE', appState.authUser ?? '', appState.authPass ?? '') retryBoot(appState.authMode ?? 'NONE', appState.authUser ?? '', appState.authPass ?? '')
@@ -187,6 +205,10 @@
<SplashScreen mode="idle" showCards={settingsState.settings.splashCards ?? true} onDismiss={onIdleDismiss} /> <SplashScreen mode="idle" showCards={settingsState.settings.splashCards ?? true} onDismiss={onIdleDismiss} />
{/if} {/if}
{#if appState.devSplash}
<SplashScreen mode="idle" showDevOverlay onDismiss={() => appState.devSplash = false} />
{/if}
{#if showApp} {#if showApp}
{#if strippedLayout} {#if strippedLayout}
{@render children()} {@render children()}