From 4be07fc242a87fe4be333f02416eafce49487d19 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Mon, 30 Mar 2026 23:03:01 +0700 Subject: [PATCH] Implement dynamic alias filtering across multiple routes - Added a new function `applyAliasIfChanged` to handle alias updates based on user selection, improving responsiveness and consistency in alias filtering. - Updated the effect handling to ensure the alias filter reflects changes in the URL parameters across various pages, enhancing user experience. - Removed the "Apply" button for alias changes, streamlining the interaction process by applying changes automatically. --- web/src/routes/+page.svelte | 23 ++++++++++++++++++++--- web/src/routes/incidents/+page.svelte | 23 ++++++++++++++++++++--- web/src/routes/live/+page.svelte | 16 ++++++++++------ web/src/routes/users/+page.svelte | 23 ++++++++++++++++++++--- 4 files changed, 70 insertions(+), 15 deletions(-) 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 @@
-
{#if err} diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte index 55b1015..88e1a20 100644 --- a/web/src/routes/users/+page.svelte +++ b/web/src/routes/users/+page.svelte @@ -92,6 +92,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; @@ -104,6 +118,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)) ); @@ -206,11 +225,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}