From 53259bdcc02a80a4d0aa9dc7d71e53e7fc518c04 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 29 Jan 2026 02:49:02 +1030
Subject: [PATCH] style: modal'd search action on mobile

---
 src/lib/client/ui/actions/ActionsBar.svelte   |   2 +-
 src/lib/client/ui/actions/SearchAction.svelte | 245 ++++++++++++++----
 .../custom-formats/[databaseId]/+page.svelte  |   2 +-
 .../entity-testing/[databaseId]/+page.svelte  |   2 +-
 4 files changed, 198 insertions(+), 53 deletions(-)

diff --git a/src/lib/client/ui/actions/ActionsBar.svelte b/src/lib/client/ui/actions/ActionsBar.svelte
index bbc37fc..8371178 100644
--- a/src/lib/client/ui/actions/ActionsBar.svelte
+++ b/src/lib/client/ui/actions/ActionsBar.svelte
@@ -2,7 +2,7 @@
 	export let className: string = '';
 </script>
 
-<div class="actions-bar flex {className}">
+<div class="actions-bar flex w-fit mx-auto md:w-auto md:mx-0 {className}">
 	<slot />
 </div>
 
diff --git a/src/lib/client/ui/actions/SearchAction.svelte b/src/lib/client/ui/actions/SearchAction.svelte
index abb9665..02982eb 100644
--- a/src/lib/client/ui/actions/SearchAction.svelte
+++ b/src/lib/client/ui/actions/SearchAction.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
 	import { Search, X } from 'lucide-svelte';
 	import type { SearchStore } from '$lib/client/stores/search';
 	import Badge from '$ui/badge/Badge.svelte';
@@ -7,11 +9,41 @@
 	export let searchStore: SearchStore;
 	export let placeholder: string = 'Search...';
 	export let activeQuery: string = '';
+	export let responsive: boolean = false;
 
 	const dispatch = createEventDispatcher<{ submit: string; clearQuery: void }>();
 
 	let inputRef: HTMLInputElement;
+	let modalInputRef: HTMLInputElement;
 	let isFocused = false;
+	let modalOpen = false;
+
+	// Mobile detection
+	let isMobile = false;
+	let mediaQuery: MediaQueryList | null = null;
+
+	onMount(() => {
+		if (responsive && typeof window !== 'undefined') {
+			mediaQuery = window.matchMedia('(max-width: 767px)');
+			isMobile = mediaQuery.matches;
+			mediaQuery.addEventListener('change', handleMediaChange);
+		}
+	});
+
+	onDestroy(() => {
+		if (mediaQuery) {
+			mediaQuery.removeEventListener('change', handleMediaChange);
+		}
+	});
+
+	function handleMediaChange(e: MediaQueryListEvent) {
+		isMobile = e.matches;
+		if (!isMobile && modalOpen) {
+			modalOpen = false;
+		}
+	}
+
+	$: useMobileMode = responsive && isMobile;
 
 	// Reactive query binding
 	$: query = $searchStore.query;
@@ -24,68 +56,181 @@
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Enter' && query.trim()) {
 			dispatch('submit', query.trim());
+			if (modalOpen) modalOpen = false;
 		} else if (e.key === 'Backspace' && !query && activeQuery) {
 			dispatch('clearQuery');
+		} else if (e.key === 'Escape' && modalOpen) {
+			modalOpen = false;
 		}
 	}
 
 	function handleClear() {
 		searchStore.clear();
-		inputRef?.focus();
+		if (modalOpen) {
+			modalInputRef?.focus();
+		} else {
+			inputRef?.focus();
+		}
 	}
 
 	function handleClearQuery() {
 		dispatch('clearQuery');
-		inputRef?.focus();
+		if (modalOpen) {
+			modalInputRef?.focus();
+		} else {
+			inputRef?.focus();
+		}
+	}
+
+	async function openModal() {
+		modalOpen = true;
+		await tick();
+		modalInputRef?.focus();
+	}
+
+	function closeModal() {
+		modalOpen = false;
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			closeModal();
+		}
 	}
 </script>
 
-<div class="relative flex flex-1">
-	<div
-		class="relative flex h-10 w-full items-center border border-neutral-200 bg-white transition-all dark:border-neutral-700 dark:bg-neutral-800"
-	>
-		<!-- Search icon -->
-		<div class="pointer-events-none absolute left-3 flex items-center">
-			<Search size={18} class="text-neutral-500 dark:text-neutral-400" />
-		</div>
-
-		<!-- Active query badge -->
-		{#if activeQuery}
-			<div class="ml-10 flex h-full flex-shrink-0 items-center">
-				<Badge variant="accent" size="sm">{activeQuery}</Badge>
-			</div>
-		{/if}
-
-		<!-- Input -->
-		<input
-			bind:this={inputRef}
-			type="text"
-			value={query}
-			on:input={handleInput}
-			on:keydown={handleKeydown}
-			on:focus={() => (isFocused = true)}
-			on:blur={() => (isFocused = false)}
-			placeholder={activeQuery ? '' : placeholder}
-			class="h-full w-full bg-transparent pr-10 text-base sm:text-sm text-neutral-900 placeholder-neutral-500 outline-none dark:text-neutral-100 dark:placeholder-neutral-400 {activeQuery
-				? 'pl-2'
-				: 'pl-10'}"
-		/>
-
-		<!-- Clear button -->
-		{#if query}
-			<button
-				on:click={handleClear}
-				class="absolute right-2 flex h-6 w-6 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
-			>
-				<X size={14} class="text-neutral-500 dark:text-neutral-400" />
-			</button>
-		{:else if activeQuery}
-			<button
-				on:click={handleClearQuery}
-				class="absolute right-2 flex h-6 w-6 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
-			>
-				<X size={14} class="text-neutral-500 dark:text-neutral-400" />
-			</button>
-		{/if}
+{#if useMobileMode}
+	<!-- Mobile: Search button -->
+	<div class="relative flex">
+		<button
+			type="button"
+			on:click={openModal}
+			class="flex h-10 w-10 items-center justify-center border border-neutral-200 bg-white transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+			title="Search"
+		>
+			<Search size={20} class="text-neutral-700 dark:text-neutral-300" />
+			{#if query || activeQuery}
+				<span
+					class="absolute -top-1 -right-1 z-10 h-2.5 w-2.5 rounded-full bg-accent-500"
+				></span>
+			{/if}
+		</button>
 	</div>
-</div>
+
+	<!-- Mobile: Search modal -->
+	{#if modalOpen}
+		<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+		<div
+			class="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 pt-4 px-4"
+			on:click={handleBackdropClick}
+			transition:fade={{ duration: 150 }}
+		>
+			<div
+				class="w-full max-w-lg rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-800"
+				transition:fly={{ y: -20, duration: 200 }}
+			>
+				<div class="relative flex items-center p-3">
+					<!-- Search icon -->
+					<div class="pointer-events-none absolute left-6 flex items-center">
+						<Search size={18} class="text-neutral-500 dark:text-neutral-400" />
+					</div>
+
+					<!-- Active query badge -->
+					{#if activeQuery}
+						<div class="ml-10 flex flex-shrink-0 items-center pr-2">
+							<Badge variant="accent" size="sm">{activeQuery}</Badge>
+						</div>
+					{/if}
+
+					<!-- Input -->
+					<input
+						bind:this={modalInputRef}
+						type="text"
+						value={query}
+						on:input={handleInput}
+						on:keydown={handleKeydown}
+						{placeholder}
+						class="h-10 w-full rounded-md bg-transparent pr-10 text-sm text-neutral-900 placeholder-neutral-500 outline-none dark:text-neutral-100 dark:placeholder-neutral-400 {activeQuery
+							? 'pl-2'
+							: 'pl-10'}"
+					/>
+
+					<!-- Clear/Close button -->
+					{#if query}
+						<button
+							on:click={handleClear}
+							class="absolute right-6 flex h-8 w-8 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
+						>
+							<X size={18} class="text-neutral-500 dark:text-neutral-400" />
+						</button>
+					{:else if activeQuery}
+						<button
+							on:click={handleClearQuery}
+							class="absolute right-6 flex h-8 w-8 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
+						>
+							<X size={18} class="text-neutral-500 dark:text-neutral-400" />
+						</button>
+					{:else}
+						<button
+							on:click={closeModal}
+							class="absolute right-6 flex h-8 w-8 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
+						>
+							<X size={18} class="text-neutral-500 dark:text-neutral-400" />
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+{:else}
+	<!-- Desktop: Inline search -->
+	<div class="relative flex flex-1">
+		<div
+			class="relative flex h-10 w-full items-center border border-neutral-200 bg-white transition-all dark:border-neutral-700 dark:bg-neutral-800"
+		>
+			<!-- Search icon -->
+			<div class="pointer-events-none absolute left-3 flex items-center">
+				<Search size={18} class="text-neutral-500 dark:text-neutral-400" />
+			</div>
+
+			<!-- Active query badge -->
+			{#if activeQuery}
+				<div class="ml-10 flex h-full flex-shrink-0 items-center">
+					<Badge variant="accent" size="sm">{activeQuery}</Badge>
+				</div>
+			{/if}
+
+			<!-- Input -->
+			<input
+				bind:this={inputRef}
+				type="text"
+				value={query}
+				on:input={handleInput}
+				on:keydown={handleKeydown}
+				on:focus={() => (isFocused = true)}
+				on:blur={() => (isFocused = false)}
+				placeholder={activeQuery ? '' : placeholder}
+				class="h-full w-full bg-transparent pr-10 text-base sm:text-sm text-neutral-900 placeholder-neutral-500 outline-none dark:text-neutral-100 dark:placeholder-neutral-400 {activeQuery
+					? 'pl-2'
+					: 'pl-10'}"
+			/>
+
+			<!-- Clear button -->
+			{#if query}
+				<button
+					on:click={handleClear}
+					class="absolute right-2 flex h-6 w-6 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
+				>
+					<X size={14} class="text-neutral-500 dark:text-neutral-400" />
+				</button>
+			{:else if activeQuery}
+				<button
+					on:click={handleClearQuery}
+					class="absolute right-2 flex h-6 w-6 items-center justify-center rounded hover:bg-neutral-100 dark:hover:bg-neutral-700"
+				>
+					<X size={14} class="text-neutral-500 dark:text-neutral-400" />
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/custom-formats/[databaseId]/+page.svelte b/src/routes/custom-formats/[databaseId]/+page.svelte
index 48d23df..3afa1ba 100644
--- a/src/routes/custom-formats/[databaseId]/+page.svelte
+++ b/src/routes/custom-formats/[databaseId]/+page.svelte
@@ -110,7 +110,7 @@
 
 	<!-- Actions Bar -->
 	<ActionsBar>
-		<SearchAction searchStore={search} placeholder="Search custom formats..." />
+		<SearchAction searchStore={search} placeholder="Search custom formats..." responsive />
 		<ActionButton
 			icon={Plus}
 			on:click={() => goto(`/custom-formats/${data.currentDatabase.id}/new`)}
diff --git a/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte b/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
index 13cfa4f..f93688c 100644
--- a/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
+++ b/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
@@ -372,7 +372,7 @@
 
 	<!-- Actions Bar -->
 	<ActionsBar>
-		<SearchAction searchStore={search} placeholder={searchPlaceholder} />
+		<SearchAction searchStore={search} placeholder={searchPlaceholder} responsive />
 		<ActionButton icon={Plus} on:click={() => (showAddModal = true)} />
 		<ActionButton
 			icon={Sliders}