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

@@ -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>

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>
 

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>