feat: Use Popover component + improve interactions

Author: allozaur

tools/server/webui/package-lock.json

@@ -43,7 +43,7 @@
 		"@tailwindcss/vite": "^4.0.0",
 		"@types/node": "^22",
 		"@vitest/browser": "^3.2.3",
-		"bits-ui": "^2.8.11",
+		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"dexie": "^4.0.11",
 		"eslint": "^9.18.0",

tools/server/webui/package.json

@@ -331,6 +331,7 @@
 	class="{INPUT_CLASSES} border-radius-bottom-none mx-auto max-w-[48rem] overflow-hidden rounded-3xl backdrop-blur-md {disabled
 		? 'cursor-not-allowed opacity-60'
 		: ''} {className}"
+	data-slot="chat-form"
 >
 	<ChatAttachmentsList
 		bind:uploadedFiles

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { Input } from '$lib/components/ui/input';
-	import { Search } from '@lucide/svelte';
+	import { Search, X } from '@lucide/svelte';
 
 	interface Props {
 		value?: string;
 		placeholder?: string;
 		onInput?: (value: string) => void;
+		onClose?: () => void;
+		onKeyDown?: (event: KeyboardEvent) => void;
 		class?: string;
 		id?: string;
 		ref?: HTMLInputElement | null;
@@ -15,23 +17,57 @@
 		value = $bindable(''),
 		placeholder = 'Search...',
 		onInput,
+		onClose,
+		onKeyDown,
 		class: className,
 		id,
 		ref = $bindable(null)
 	}: Props = $props();
 
+	let showClearButton = $derived(!!value || !!onClose);
+
 	function handleInput(event: Event) {
 		const target = event.target as HTMLInputElement;
 
 		value = target.value;
 		onInput?.(target.value);
 	}
+
+	function handleClear() {
+		if (value) {
+			value = '';
+			onInput?.('');
+			ref?.focus();
+		} else {
+			onClose?.();
+		}
+	}
 </script>
 
 <div class="relative {className}">
 	<Search
 		class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
 	/>
 
-	<Input {id} bind:value bind:ref class="pl-9" oninput={handleInput} {placeholder} type="search" />
+	<Input
+		{id}
+		bind:value
+		bind:ref
+		class="pl-9 {showClearButton ? 'pr-9' : ''}"
+		oninput={handleInput}
+		onkeydown={onKeyDown}
+		{placeholder}
+		type="search"
+	/>
+
+	{#if showClearButton}
+		<button
+			type="button"
+			class="absolute top-1/2 right-3 -translate-y-1/2 transform text-muted-foreground transition-colors hover:text-foreground"
+			onclick={handleClear}
+			aria-label={value ? 'Clear search' : 'Close'}
+		>
+			<X class="h-4 w-4" />
+		</button>
+	{/if}
 </div>