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

@@ -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()}
 		/>
 	</label>
-	<Button variant="outline" size="sm" onclick={() => void applyControls()} disabled={loading}>
-		Apply
-	</Button>
 </div>
 
 {#if partial}

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()}
 		/>
 	</label>
-	<Button variant="outline" size="sm" onclick={() => void applyControls()} disabled={loading}>
-		Apply
-	</Button>
 </div>
 
 {#if partial}

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');
+		if (nextAlias === 'all') q.delete('aliases');
-		else q.set('aliases', aliasFilter);
+		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 @@
 
 <div class="mb-4 flex flex-wrap items-end gap-2">
 	<AliasFilterSelect availableAliases={availableAliases} bind:value={aliasFilter} />
-	<Button variant="outline" size="sm" onclick={() => void applyControls()}>
-		Apply
-	</Button>
 </div>
 
 {#if err}

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()}
 		/>
 	</label>
-	<Button variant="outline" size="sm" onclick={() => void applyControls()} disabled={loading}>
-		Apply
-	</Button>
 </div>
 
 {#if partial}