From 3ce37b6067cb605a26914979b77a201764be5ed2 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 10 Apr 2026 15:08:39 +0700
Subject: [PATCH] Refactor alias filter select component to use native select
 element

- Replaced the custom select component with a native HTML select element for improved performance and accessibility.
- Simplified value change handling by directly binding the select's value and updating the onChange event.
- Ensured the selected value defaults to "all" if not present in available aliases, enhancing user experience.
---
 .../lib/components/alias-filter-select.svelte | 35 +++++++------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/alias-filter-select.svelte b/web/src/lib/components/alias-filter-select.svelte
index f0bb5b6..960134b 100644
--- a/web/src/lib/components/alias-filter-select.svelte
+++ b/web/src/lib/components/alias-filter-select.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import * as Select from "$lib/components/ui/select/index.js";
-
 	let {
 		availableAliases = [],
 		value = $bindable("all"),
@@ -16,34 +14,25 @@
 	} = $props();
 
 	$effect(() => {
-		// Не сбрасываем выбранный alias автоматически:
-		// во время загрузки список может быть временно пустым, что
-		// приводило к возврату на "all" сразу после выбора.
 		if (!value) value = "all";
+		if (value !== "all" && !availableAliases.includes(value)) value = "all";
 	});
-
-	let selectedLabel = $derived((value ?? "all") === "all" ? allLabel : (value ?? "all"));
 </script>
 
 <label class="text-xs text-muted-foreground">
 	{label}
-	<Select.Root
-		type="single"
+	<select
+		class="border-input bg-background mt-1 h-8 w-[220px] rounded-lg border px-2.5 text-sm outline-none focus-visible:border-ring"
 		bind:value
-		onValueChange={(next) => {
-			const normalized = Array.isArray(next) ? String(next[0] ?? "all") : String(next ?? "all");
-			value = normalized;
-			onValueChange?.(normalized);
+		onchange={(e) => {
+			const next = (e.currentTarget as HTMLSelectElement).value || "all";
+			value = next;
+			onValueChange?.(next);
 		}}
 	>
-		<Select.Trigger class="mt-1 w-[220px]">
-			{selectedLabel}
-		</Select.Trigger>
-		<Select.Content class="z-[1200]">
-			<Select.Item value="all">{allLabel}</Select.Item>
-			{#each availableAliases as alias (alias)}
-				<Select.Item value={alias}>{alias}</Select.Item>
-			{/each}
-		</Select.Content>
-	</Select.Root>
+		<option value="all">{allLabel}</option>
+		{#each availableAliases as alias (alias)}
+			<option value={alias}>{alias}</option>
+		{/each}
+	</select>
 </label>