webui: add search field to model selector and fixes mobile viewport overflow

Author: ServeurpersoCom

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -23,6 +23,7 @@
 		MENU_OFFSET,
 		VIEWPORT_GUTTER
 	} from '$lib/constants/floating-ui-constraints';
+	import type { ModelOption } from '$lib/types/models';
 
 	interface Props {
 		class?: string;
@@ -145,10 +146,26 @@
 		return options.some((option) => option.model === currentModel);
 	});
 
+	let searchTerm = $state('');
+	let searchInputRef = $state<HTMLInputElement | null>(null);
+
+	let filteredOptions: ModelOption[] = $derived(
+		(() => {
+			const term = searchTerm.trim().toLowerCase();
+			if (!term) return options;
+
+			return options.filter(
+				(option) =>
+					option.model.toLowerCase().includes(term) || option.name?.toLowerCase().includes(term)
+			);
+		})()
+	);
+
 	let isOpen = $state(false);
 	let showModelDialog = $state(false);
 	let container: HTMLDivElement | null = null;
 	let menuRef = $state<HTMLDivElement | null>(null);
+	let menuWidth = $state<number | null>(null);
 	let triggerButton = $state<HTMLButtonElement | null>(null);
 	let menuPosition = $state<{
 		top: number;
@@ -186,9 +203,12 @@
 		if (loading || updating) return;
 
 		isOpen = true;
+		searchTerm = '';
+		menuWidth = null;
 		await tick();
 		updateMenuPosition();
 		requestAnimationFrame(() => updateMenuPosition());
+		requestAnimationFrame(() => searchInputRef?.focus());
 
 		if (isRouter) {
 			modelsStore.fetchRouterModels().then(() => {
@@ -210,6 +230,8 @@
 
 		isOpen = false;
 		menuPosition = null;
+		menuWidth = null;
+		searchTerm = '';
 	}
 
 	function handlePointerDown(event: PointerEvent) {
@@ -243,24 +265,28 @@
 
 		if (viewportWidth === 0 || viewportHeight === 0) return;
 
-		// Reset widths before measuring to avoid carrying over constrained sizes
-		// from previous openings (which could progressively shrink the menu).
-		menuRef.style.width = '';
-		menuRef.style.maxWidth = '';
-
-		const scrollWidth = menuRef.scrollWidth;
 		const scrollHeight = menuRef.scrollHeight;
 
 		const availableWidth = Math.max(0, viewportWidth - VIEWPORT_GUTTER * 2);
-		const constrainedMaxWidth = Math.min(MENU_MAX_WIDTH, availableWidth || MENU_MAX_WIDTH);
-		const safeMaxWidth =
-			constrainedMaxWidth > 0 ? constrainedMaxWidth : Math.min(MENU_MAX_WIDTH, viewportWidth);
+		const safeMaxWidth = availableWidth > 0 ? availableWidth : MENU_MAX_WIDTH;
 		const desiredMinWidth = Math.min(160, safeMaxWidth || 160);
 
-		let width = Math.min(
-			Math.max(triggerRect.width, scrollWidth, desiredMinWidth),
-			safeMaxWidth || 320
-		);
+		if (menuWidth === null) {
+			menuRef.style.width = '';
+			menuRef.style.maxWidth = '';
+
+			const idealWidth = Math.max(
+				triggerRect.width,
+				Math.min(menuRef.scrollWidth, safeMaxWidth),
+				400
+			);
+
+			menuWidth = Math.min(Math.max(idealWidth, desiredMinWidth), safeMaxWidth);
+		} else if (safeMaxWidth && menuWidth > safeMaxWidth) {
+			menuWidth = safeMaxWidth;
+		}
+
+		const width = menuWidth ?? desiredMinWidth;
 
 		const availableBelow = Math.max(
 			0,
@@ -309,18 +335,11 @@
 			metrics = aboveMetrics;
 		}
 
-		let left = triggerRect.right - width;
+		const availableRight = viewportWidth - VIEWPORT_GUTTER;
+		const rightAligned = Math.min(triggerRect.right, availableRight);
+		let left = rightAligned - width;
 		const maxLeft = viewportWidth - VIEWPORT_GUTTER - width;
-		if (maxLeft < VIEWPORT_GUTTER) {
-			left = VIEWPORT_GUTTER;
-		} else {
-			if (left > maxLeft) {
-				left = maxLeft;
-			}
-			if (left < VIEWPORT_GUTTER) {
-				left = VIEWPORT_GUTTER;
-			}
-		}
+		left = Math.min(Math.max(left, VIEWPORT_GUTTER), Math.max(maxLeft, VIEWPORT_GUTTER));
 
 		menuPosition = {
 			top: Math.round(metrics.top),
@@ -472,6 +491,20 @@
 					style:width={menuPosition ? `${menuPosition.width}px` : undefined}
 					data-placement={menuPosition?.placement ?? 'bottom'}
 				>
+					<div class="border-b bg-popover px-3 py-2">
+						<label class="sr-only" for="model-search">Search models</label>
+						<input
+							id="model-search"
+							class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm shadow-sm transition focus:border-ring focus:outline-none"
+							placeholder="Search models"
+							bind:value={searchTerm}
+							bind:this={searchInputRef}
+							aria-label="Search models"
+							autocomplete="off"
+							type="search"
+						/>
+					</div>
+
 					<div
 						class="overflow-y-auto py-1"
 						style:max-height={menuPosition && menuPosition.maxHeight > 0
@@ -493,7 +526,10 @@
 							</button>
 							<div class="my-1 h-px bg-border"></div>
 						{/if}
-						{#each options as option (option.id)}
+						{#if filteredOptions.length === 0}
+							<p class="px-3 py-2 text-sm text-muted-foreground">No models found.</p>
+						{/if}
+						{#each filteredOptions as option (option.id)}
 							{@const status = getModelStatus(option.model)}
 							{@const isLoaded = status === ServerModelStatus.LOADED}
 							{@const isLoading = status === ServerModelStatus.LOADING}