diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index a60226c..7999342 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -196,6 +196,20 @@ }); } + async function applyAliasIfChanged(nextAlias: string) { + const currentAlias = parseAliasFilter(page.url.searchParams.get('aliases')); + if (nextAlias === currentAlias) return; + const q = new URLSearchParams(page.url.searchParams); + if (nextAlias === 'all') q.delete('aliases'); + else q.set('aliases', nextAlias); + const qs = q.toString(); + await goto(`${page.url.pathname}${qs ? `?${qs}` : ''}`, { + replaceState: true, + noScroll: true, + keepFocus: true + }); + } + let queryKey = $derived(page.url.searchParams.toString()); $effect(() => { queryKey; @@ -207,6 +221,11 @@ void load(); }); + $effect(() => { + if (typeof window === 'undefined') return; + void applyAliasIfChanged(aliasFilter); + }); + let staleSeconds = $derived.by(() => lastSuccessAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastSuccessAtMs) / 1000)) ); @@ -397,11 +416,9 @@ max="300" class="mt-1 h-9 w-28 rounded-md border bg-background px-2 text-sm" bind:value={refreshInput} + onchange={() => void applyControls()} /> - {#if partial} diff --git a/web/src/routes/incidents/+page.svelte b/web/src/routes/incidents/+page.svelte index bce2d17..da4fde8 100644 --- a/web/src/routes/incidents/+page.svelte +++ b/web/src/routes/incidents/+page.svelte @@ -148,6 +148,20 @@ }); } + async function applyAliasIfChanged(nextAlias: string) { + const currentAlias = parseAliasFilter(page.url.searchParams.get('aliases')); + if (nextAlias === currentAlias) return; + const q = new URLSearchParams(page.url.searchParams); + if (nextAlias === 'all') q.delete('aliases'); + else q.set('aliases', nextAlias); + const qs = q.toString(); + await goto(`${page.url.pathname}${qs ? `?${qs}` : ''}`, { + replaceState: true, + noScroll: true, + keepFocus: true + }); + } + let queryKey = $derived(page.url.searchParams.toString()); $effect(() => { queryKey; @@ -160,6 +174,11 @@ void load(nextAlias); }); + $effect(() => { + if (typeof window === 'undefined') return; + void applyAliasIfChanged(aliasFilter); + }); + let staleSeconds = $derived.by(() => lastSuccessAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastSuccessAtMs) / 1000)) ); @@ -221,11 +240,9 @@ max="300" class="mt-1 h-9 w-28 rounded-md border bg-background px-2 text-sm" bind:value={refreshInput} + onchange={() => void applyControls()} /> - {#if partial} diff --git a/web/src/routes/live/+page.svelte b/web/src/routes/live/+page.svelte index c388364..bb064a9 100644 --- a/web/src/routes/live/+page.svelte +++ b/web/src/routes/live/+page.svelte @@ -199,10 +199,12 @@ es = next; } - async function applyControls() { + async function applyAliasIfChanged(nextAlias: string) { + const currentAlias = parseAliasFilter(page.url.searchParams.get('aliases')); + if (nextAlias === currentAlias) return; const q = new URLSearchParams(page.url.searchParams); - if (aliasFilter === 'all') q.delete('aliases'); - else q.set('aliases', aliasFilter); + if (nextAlias === 'all') q.delete('aliases'); + else q.set('aliases', nextAlias); const qs = q.toString(); await goto(`${page.url.pathname}${qs ? `?${qs}` : ''}`, { replaceState: true, @@ -220,6 +222,11 @@ connectStream(nextAlias); }); + $effect(() => { + if (typeof window === 'undefined') return; + void applyAliasIfChanged(aliasFilter); + }); + let staleSeconds = $derived.by(() => lastEventAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastEventAtMs) / 1000)) ); @@ -271,9 +278,6 @@