From 7ae3c5a8069e8b8c5fb8a896d71c0646cf95e6dd Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 10 Apr 2026 14:57:35 +0700
Subject: [PATCH] Enhance alias filter select component and integrate value
 change handling

- Added an `onValueChange` callback to the alias filter select component for improved event handling.
- Updated the component's logic to normalize the selected value and trigger the callback on changes.
- Implemented the alias filter change handling in the IPs and users pages to apply changes effectively.
---
 web/src/lib/components/alias-filter-select.svelte | 14 ++++++++++++--
 web/src/routes/ips/+page.svelte                   | 12 +++++++++++-
 web/src/routes/users/+page.svelte                 | 12 +++++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/alias-filter-select.svelte b/web/src/lib/components/alias-filter-select.svelte
index 9c9b43e..f0bb5b6 100644
--- a/web/src/lib/components/alias-filter-select.svelte
+++ b/web/src/lib/components/alias-filter-select.svelte
@@ -5,12 +5,14 @@
 		availableAliases = [],
 		value = $bindable("all"),
 		label = "Alias",
-		allLabel = "All nodes"
+		allLabel = "All nodes",
+		onValueChange
 	}: {
 		availableAliases: string[];
 		value?: string;
 		label?: string;
 		allLabel?: string;
+		onValueChange?: (next: string) => void;
 	} = $props();
 
 	$effect(() => {
@@ -25,7 +27,15 @@
 
 <label class="text-xs text-muted-foreground">
 	{label}
-	<Select.Root type="single" bind:value>
+	<Select.Root
+		type="single"
+		bind:value
+		onValueChange={(next) => {
+			const normalized = Array.isArray(next) ? String(next[0] ?? "all") : String(next ?? "all");
+			value = normalized;
+			onValueChange?.(normalized);
+		}}
+	>
 		<Select.Trigger class="mt-1 w-[220px]">
 			{selectedLabel}
 		</Select.Trigger>
diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 90218a0..948329e 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -454,6 +454,12 @@ $effect(() => {
 		await load();
 	}
 
+	async function handleAliasFilterChange(nextAlias: string) {
+		if (nextAlias === aliasFilter) return;
+		aliasFilter = nextAlias;
+		await applyAliasIfChanged(nextAlias);
+	}
+
 	let queryKey = $derived(page.url.searchParams.toString());
 	$effect(() => {
 		queryKey;
@@ -535,7 +541,11 @@ $effect(() => {
 </div>
 
 <div class="mb-4 flex flex-wrap items-end gap-2">
-	<AliasFilterSelect availableAliases={availableAliases} bind:value={aliasFilter} />
+	<AliasFilterSelect
+		availableAliases={availableAliases}
+		bind:value={aliasFilter}
+		onValueChange={(next) => void handleAliasFilterChange(next)}
+	/>
 	<FleetRefreshInput bind:value={refreshInput} onValueChange={() => void applyControls()} />
 </div>
 
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index 1d53021..d291ed8 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -134,6 +134,12 @@
 		await load();
 	}
 
+	async function handleAliasFilterChange(nextAlias: string) {
+		if (nextAlias === aliasFilter) return;
+		aliasFilter = nextAlias;
+		await applyAliasIfChanged(nextAlias);
+	}
+
 	let queryKey = $derived(page.url.searchParams.toString());
 	$effect(() => {
 		queryKey;
@@ -381,7 +387,11 @@ let sumActiveIps = $derived.by(() =>
 </div>
 
 <div class="mb-4 flex flex-wrap items-end gap-2">
-	<AliasFilterSelect availableAliases={availableAliases} bind:value={aliasFilter} />
+	<AliasFilterSelect
+		availableAliases={availableAliases}
+		bind:value={aliasFilter}
+		onValueChange={(next) => void handleAliasFilterChange(next)}
+	/>
 	<FleetRefreshInput bind:value={refreshInput} onValueChange={() => void applyControls()} />
 </div>