From 4a33c0744432156bde0634cb1b21b481715b18a7 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 19:57:46 +0200
Subject: [PATCH] web/components: build the issue search from Input and Button

same as the repo toolbar: the field and the clear control were raw elements
reimplementing the primitives' border, padding, focus ring and hover states. the
clear button keeps its absolute placement since Input has no interactive icon
slot, and pr-9 only applies while it's on screen.

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/issues/IssueSearch.svelte | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/repo/issues/IssueSearch.svelte b/web/src/lib/components/repo/issues/IssueSearch.svelte
index 9b7bbfdc..64762404 100644
--- a/web/src/lib/components/repo/issues/IssueSearch.svelte
+++ b/web/src/lib/components/repo/issues/IssueSearch.svelte
@@ -2,6 +2,8 @@
 	import { page } from "$app/state";
 	import Search from "$icon/search";
 	import X from "$icon/x";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
 
 	let form: HTMLFormElement;
 	// seed from the url so the query (and the clear button) survive a submit
@@ -13,30 +15,28 @@
 	};
 </script>
 
-<form bind:this={form} class="flex" method="GET">
+<form bind:this={form} class="flex w-full" method="GET">
 	<!-- TODO: wire up search query submission -->
 	<div class="relative flex w-full items-center">
-		<Search
-			class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
-			aria-hidden="true"
-		/>
-		<input
+		<Input
 			bind:value
-			class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
 			type="text"
 			name="q"
 			placeholder="Search issues..."
 			aria-label="Search issues"
+			iconLeft={Search}
+			class={value ? "w-full pr-9" : "w-full"}
 		/>
 		{#if value}
-			<button
+			<Button
 				type="button"
+				variant="ghost"
+				size="sm"
+				icon={X}
 				onclick={clear}
-				class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
 				aria-label="Clear search"
-			>
-				<X class="size-4" aria-hidden="true" />
-			</button>
+				class="absolute right-1"
+			/>
 		{/if}
 	</div>
 </form>
-- 
2.51.2