From c2040656bd7fec3873985c5a4b9e529836d55024 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 28 Mar 2026 14:31:13 +0300
Subject: [PATCH] feat: EntityPicker component, replace dropdowns with command
 palette

Port EntityPalette pattern from wled-screen-controller as Svelte 5
component. Full-screen modal with search, keyboard navigation
(Arrow keys, Enter, Escape), grouped items, current-item accent,
auto-scroll, backdrop blur.

Replace inline image browser dropdowns on Projects and Quick Deploy
pages with EntityPicker. Add EntityPickerItem type and i18n keys.
---
 web/src/lib/components/EntityPicker.svelte | 425 +++++++++++++++++++++
 web/src/lib/i18n/en.json                   |   4 +
 web/src/lib/i18n/ru.json                   |   4 +
 web/src/lib/types.ts                       |   9 +
 web/src/routes/deploy/+page.svelte         |  80 ++--
 web/src/routes/projects/+page.svelte       | 119 +++---
 6 files changed, 529 insertions(+), 112 deletions(-)
 create mode 100644 web/src/lib/components/EntityPicker.svelte

diff --git a/web/src/lib/components/EntityPicker.svelte b/web/src/lib/components/EntityPicker.svelte
new file mode 100644
index 0000000..2b02a6c
--- /dev/null
+++ b/web/src/lib/components/EntityPicker.svelte
@@ -0,0 +1,425 @@
+<!--
+  EntityPicker — command-palette style modal for selecting items from a list.
+  Supports search filtering, keyboard navigation, grouped items, and current-item highlighting.
+-->
+<script lang="ts">
+	import type { EntityPickerItem } from '$lib/types';
+	import { IconSearch, IconX } from '$lib/components/icons';
+	import { t } from '$lib/i18n';
+
+	interface Props {
+		open: boolean;
+		items: EntityPickerItem[];
+		current?: string;
+		placeholder?: string;
+		title?: string;
+		onselect: (value: string) => void;
+		onclose: () => void;
+	}
+
+	const {
+		open = $bindable(),
+		items,
+		current = '',
+		placeholder,
+		title = '',
+		onselect,
+		onclose
+	}: Props = $props();
+
+	let query = $state('');
+	let highlightIndex = $state(0);
+	let searchInput: HTMLInputElement | undefined = $state(undefined);
+	let listEl: HTMLDivElement | undefined = $state(undefined);
+
+	const filtered = $derived.by(() => {
+		const q = query.toLowerCase().trim();
+		if (!q) return items;
+		return items.filter(
+			(item) =>
+				item.label.toLowerCase().includes(q) ||
+				(item.description?.toLowerCase().includes(q) ?? false)
+		);
+	});
+
+	/** Group filtered items, preserving insertion order. */
+	const grouped = $derived.by(() => {
+		const groups: { name: string; items: EntityPickerItem[] }[] = [];
+		const seen = new Map<string, number>();
+		for (const item of filtered) {
+			const groupName = item.group ?? '';
+			const idx = seen.get(groupName);
+			if (idx !== undefined) {
+				groups[idx].items.push(item);
+			} else {
+				seen.set(groupName, groups.length);
+				groups.push({ name: groupName, items: [item] });
+			}
+		}
+		return groups;
+	});
+
+	/** Flat list of filtered items for keyboard indexing. */
+	const flatFiltered = $derived(filtered);
+
+	$effect(() => {
+		if (open) {
+			query = '';
+			highlightIndex = 0;
+			// Focus the search input after the modal renders.
+			requestAnimationFrame(() => {
+				searchInput?.focus();
+			});
+		}
+	});
+
+	// Reset highlight when filter changes.
+	$effect(() => {
+		// Access filtered.length to create a dependency.
+		void filtered.length;
+		highlightIndex = 0;
+	});
+
+	function scrollHighlightedIntoView() {
+		requestAnimationFrame(() => {
+			const el = listEl?.querySelector('[data-highlighted="true"]');
+			el?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown': {
+				event.preventDefault();
+				highlightIndex = (highlightIndex + 1) % flatFiltered.length;
+				scrollHighlightedIntoView();
+				break;
+			}
+			case 'ArrowUp': {
+				event.preventDefault();
+				highlightIndex = (highlightIndex - 1 + flatFiltered.length) % flatFiltered.length;
+				scrollHighlightedIntoView();
+				break;
+			}
+			case 'Enter': {
+				event.preventDefault();
+				const item = flatFiltered[highlightIndex];
+				if (item) {
+					onselect(item.value);
+				}
+				break;
+			}
+			case 'Escape': {
+				event.preventDefault();
+				onclose();
+				break;
+			}
+		}
+	}
+
+	function handleBackdropClick() {
+		onclose();
+	}
+
+	function handleItemClick(value: string) {
+		onselect(value);
+	}
+
+	/** Track the flat index across groups for highlight matching. */
+	function flatIndexOf(groupIdx: number, itemIdx: number): number {
+		let index = 0;
+		for (let g = 0; g < groupIdx; g++) {
+			index += grouped[g].items.length;
+		}
+		return index + itemIdx;
+	}
+</script>
+
+{#if open}
+	<!-- Backdrop -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="entity-picker-backdrop"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+	></div>
+
+	<!-- Modal -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="entity-picker-container" onkeydown={handleKeydown}>
+		<div class="entity-picker-modal" role="dialog" aria-modal="true" aria-label={title}>
+			{#if title}
+				<div class="entity-picker-header">
+					<h2 class="entity-picker-title">{title}</h2>
+					<button
+						type="button"
+						class="entity-picker-close"
+						onclick={onclose}
+						aria-label="Close"
+					>
+						<IconX size={18} />
+					</button>
+				</div>
+			{/if}
+
+			<!-- Search -->
+			<div class="entity-picker-search">
+				<IconSearch size={16} class="entity-picker-search-icon" />
+				<input
+					bind:this={searchInput}
+					bind:value={query}
+					type="text"
+					class="entity-picker-search-input"
+					placeholder={placeholder ?? $t('entityPicker.search')}
+					autocomplete="off"
+					spellcheck="false"
+				/>
+				{#if !title}
+					<button
+						type="button"
+						class="entity-picker-close-inline"
+						onclick={onclose}
+						aria-label="Close"
+					>
+						<IconX size={16} />
+					</button>
+				{/if}
+			</div>
+
+			<!-- List -->
+			<div class="entity-picker-list" bind:this={listEl}>
+				{#if flatFiltered.length === 0}
+					<div class="entity-picker-empty">
+						{$t('entityPicker.noResults')}
+					</div>
+				{:else}
+					{#each grouped as group, gIdx}
+						{#if group.name}
+							<div class="entity-picker-group-header">{group.name}</div>
+						{/if}
+						{#each group.items as item, iIdx}
+							{@const flatIdx = flatIndexOf(gIdx, iIdx)}
+							{@const isHighlighted = flatIdx === highlightIndex}
+							{@const isCurrent = item.value === current}
+							<button
+								type="button"
+								class="entity-picker-item"
+								class:entity-picker-item--highlighted={isHighlighted}
+								class:entity-picker-item--current={isCurrent}
+								data-highlighted={isHighlighted}
+								onclick={() => handleItemClick(item.value)}
+								onmouseenter={() => { highlightIndex = flatIdx; }}
+							>
+								{#if item.icon}
+									<span class="entity-picker-item-icon">{@html item.icon}</span>
+								{/if}
+								<span class="entity-picker-item-content">
+									<span class="entity-picker-item-label">{item.label}</span>
+									{#if item.description}
+										<span class="entity-picker-item-description">{item.description}</span>
+									{/if}
+								</span>
+							</button>
+						{/each}
+					{/each}
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.entity-picker-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 60;
+		background: var(--surface-overlay);
+		backdrop-filter: blur(4px);
+		animation: fade-in var(--transition-normal) forwards;
+	}
+
+	.entity-picker-container {
+		position: fixed;
+		inset: 0;
+		z-index: 61;
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding-top: 12vh;
+		pointer-events: none;
+	}
+
+	.entity-picker-modal {
+		pointer-events: auto;
+		width: 90vw;
+		max-width: 500px;
+		background: var(--surface-card);
+		border: 1px solid var(--border-primary);
+		border-radius: var(--radius-xl);
+		box-shadow: var(--shadow-xl);
+		overflow: hidden;
+		animation: scale-in var(--transition-normal) forwards;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.entity-picker-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-3) var(--space-4);
+		border-bottom: 1px solid var(--border-secondary);
+	}
+
+	.entity-picker-title {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--text-primary);
+		margin: 0;
+	}
+
+	.entity-picker-close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: var(--radius-md);
+		background: transparent;
+		color: var(--text-tertiary);
+		cursor: pointer;
+		transition: background var(--transition-fast), color var(--transition-fast);
+	}
+
+	.entity-picker-close:hover {
+		background: var(--surface-card-hover);
+		color: var(--text-primary);
+	}
+
+	.entity-picker-search {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		padding: var(--space-3) var(--space-4);
+		border-bottom: 1px solid var(--border-secondary);
+	}
+
+	:global(.entity-picker-search-icon) {
+		flex-shrink: 0;
+		color: var(--text-tertiary);
+	}
+
+	.entity-picker-search-input {
+		flex: 1;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: var(--text-sm);
+		color: var(--text-primary);
+		font-family: var(--font-family-sans);
+	}
+
+	.entity-picker-search-input::placeholder {
+		color: var(--text-tertiary);
+	}
+
+	.entity-picker-close-inline {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--text-tertiary);
+		cursor: pointer;
+		transition: background var(--transition-fast), color var(--transition-fast);
+	}
+
+	.entity-picker-close-inline:hover {
+		background: var(--surface-card-hover);
+		color: var(--text-primary);
+	}
+
+	.entity-picker-list {
+		overflow-y: auto;
+		max-height: 60vh;
+		padding: var(--space-1) 0;
+	}
+
+	.entity-picker-empty {
+		padding: var(--space-8) var(--space-4);
+		text-align: center;
+		font-size: var(--text-sm);
+		color: var(--text-tertiary);
+	}
+
+	.entity-picker-group-header {
+		padding: var(--space-2) var(--space-4) var(--space-1);
+		font-size: var(--text-xs);
+		font-weight: var(--weight-semibold);
+		color: var(--text-tertiary);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.entity-picker-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		width: 100%;
+		padding: var(--space-2) var(--space-4);
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		text-align: left;
+		font-family: var(--font-family-sans);
+		transition: background var(--transition-fast);
+		border-left: 3px solid transparent;
+	}
+
+	.entity-picker-item--highlighted {
+		background: var(--surface-card-hover);
+	}
+
+	.entity-picker-item--current {
+		border-left-color: var(--color-brand-500);
+	}
+
+	.entity-picker-item-icon {
+		flex-shrink: 0;
+		width: 20px;
+		height: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-tertiary);
+	}
+
+	.entity-picker-item-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		min-width: 0;
+	}
+
+	.entity-picker-item-label {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		color: var(--text-primary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.entity-picker-item-description {
+		font-size: var(--text-xs);
+		color: var(--text-tertiary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index 0a8478a..fdf49ed 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -376,6 +376,10 @@
     "dark": "Dark",
     "system": "System"
   },
+  "entityPicker": {
+    "search": "Search...",
+    "noResults": "No results found"
+  },
   "language": {
     "en": "English",
     "ru": "Russian"
diff --git a/web/src/lib/i18n/ru.json b/web/src/lib/i18n/ru.json
index a4e56b2..fe1a4c6 100644
--- a/web/src/lib/i18n/ru.json
+++ b/web/src/lib/i18n/ru.json
@@ -376,6 +376,10 @@
     "dark": "Тёмная",
     "system": "Системная"
   },
+  "entityPicker": {
+    "search": "Поиск...",
+    "noResults": "Ничего не найдено"
+  },
   "language": {
     "en": "Английский",
     "ru": "Русский"
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 204398c..832ed89 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -137,6 +137,15 @@ export interface StageEnv {
 	updated_at: string;
 }
 
+/** Item for the EntityPicker command-palette component. */
+export interface EntityPickerItem {
+	value: string;
+	label: string;
+	description?: string;
+	icon?: string;
+	group?: string;
+}
+
 /** Volume mount configuration for a project. */
 export interface Volume {
 	id: string;
diff --git a/web/src/routes/deploy/+page.svelte b/web/src/routes/deploy/+page.svelte
index b88fdc5..52df090 100644
--- a/web/src/routes/deploy/+page.svelte
+++ b/web/src/routes/deploy/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { inspectImage, quickDeploy, listRegistries, listRegistryImages } from '$lib/api';
-	import type { InspectResult, Registry, RegistryImage } from '$lib/types';
+	import type { InspectResult, EntityPickerItem } from '$lib/types';
 	import FormField from '$lib/components/FormField.svelte';
+	import EntityPicker from '$lib/components/EntityPicker.svelte';
 	import { toasts } from '$lib/stores/toast';
 	import { t } from '$lib/i18n';
 	import { IconSearch, IconDeploy, IconLoader, IconCheck } from '$lib/components/icons';
@@ -21,42 +22,46 @@
 
 	let errors = $state<Record<string, string>>({});
 
-	// Image browser state
-	let showImageBrowser = $state(false);
-	let browseImages = $state<(RegistryImage & { registryName: string })[]>([]);
-	let browseLoading = $state(false);
+	// Image picker state
+	let showImagePicker = $state(false);
+	let imagePickerItems = $state<EntityPickerItem[]>([]);
+	let imagePickerLoading = $state(false);
 
 	async function handleBrowseImages() {
-		showImageBrowser = !showImageBrowser;
-		if (!showImageBrowser) return;
+		showImagePicker = true;
+		if (imagePickerItems.length > 0) return;
 
-		browseLoading = true;
-		browseImages = [];
+		imagePickerLoading = true;
 		try {
 			const registries = await listRegistries();
-			const allImages: (RegistryImage & { registryName: string })[] = [];
+			const items: EntityPickerItem[] = [];
 			for (const reg of registries) {
 				if (!reg.owner) continue;
 				try {
 					const images = await listRegistryImages(reg.id);
 					for (const img of images) {
-						allImages.push({ ...img, registryName: reg.name });
+						items.push({
+							value: img.full_ref + ':latest',
+							label: img.full_ref,
+							description: reg.name,
+							group: reg.name
+						});
 					}
 				} catch {
 					// Skip registries that fail.
 				}
 			}
-			browseImages = allImages;
+			imagePickerItems = items;
 		} catch {
 			toasts.error($t('quickDeploy.imageLoadFailed'));
 		} finally {
-			browseLoading = false;
+			imagePickerLoading = false;
 		}
 	}
 
-	function selectBrowsedImage(image: RegistryImage & { registryName: string }) {
-		imageUrl = image.full_ref + ':latest';
-		showImageBrowser = false;
+	function selectPickedImage(value: string) {
+		imageUrl = value;
+		showImagePicker = false;
 	}
 
 	function validateImageUrl(url: string): string {
@@ -183,7 +188,11 @@
 					aria-label={$t('quickDeploy.browseImages')}
 					class="rounded-lg border border-[var(--border-primary)] p-2 text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] transition-colors"
 				>
-					<IconSearch size={16} />
+					{#if imagePickerLoading}
+						<IconLoader size={16} />
+					{:else}
+						<IconSearch size={16} />
+					{/if}
 				</button>
 				<button
 					onclick={handleInspect}
@@ -200,34 +209,15 @@
 				</button>
 			</div>
 		</div>
-		{#if showImageBrowser}
-			<div class="mt-3 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] p-3 shadow-[var(--shadow-md)] max-h-60 overflow-y-auto animate-scale-in">
-				{#if browseLoading}
-					<div class="flex items-center gap-2 py-2 text-sm text-[var(--text-secondary)]">
-						<IconLoader size={14} />
-						{$t('quickDeploy.loadingImages')}
-					</div>
-				{:else if browseImages.length === 0}
-					<p class="text-sm text-[var(--text-tertiary)]">{$t('quickDeploy.noImages')}</p>
-				{:else}
-					<p class="mb-2 text-xs font-medium text-[var(--text-tertiary)]">{$t('quickDeploy.selectImage')}</p>
-					<ul class="space-y-1">
-						{#each browseImages as image}
-							<li>
-								<button
-									type="button"
-									onclick={() => selectBrowsedImage(image)}
-									class="w-full rounded-md px-3 py-2 text-left text-sm hover:bg-[var(--surface-card-hover)] transition-colors"
-								>
-									<span class="font-medium text-[var(--text-primary)]">{image.full_ref}</span>
-									<span class="ml-2 text-xs text-[var(--text-tertiary)]">({image.registryName})</span>
-								</button>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			</div>
-		{/if}
+		<EntityPicker
+			bind:open={showImagePicker}
+			items={imagePickerItems}
+			current={imageUrl}
+			title={$t('quickDeploy.selectImage')}
+			placeholder={$t('entityPicker.search')}
+			onselect={selectPickedImage}
+			onclose={() => { showImagePicker = false; }}
+		/>
 	</div>
 
 	<!-- Step 2 -->
diff --git a/web/src/routes/projects/+page.svelte b/web/src/routes/projects/+page.svelte
index 08e376a..ee773d4 100644
--- a/web/src/routes/projects/+page.svelte
+++ b/web/src/routes/projects/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { Project, Registry, RegistryImage } from '$lib/types';
+	import type { Project, EntityPickerItem } from '$lib/types';
 	import * as api from '$lib/api';
 	import { t } from '$lib/i18n';
 	import { IconPlus, IconSearch, IconLoader } from '$lib/components/icons';
 	import FormField from '$lib/components/FormField.svelte';
 	import SkeletonTable from '$lib/components/SkeletonTable.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
+	import EntityPicker from '$lib/components/EntityPicker.svelte';
 
 	let projects = $state<Project[]>([]);
 	let loading = $state(true);
@@ -20,39 +21,40 @@
 	let formSubmitting = $state(false);
 	let formError = $state('');
 
-	// Image browser state
-	let showImageBrowser = $state(false);
-	let registries = $state<Registry[]>([]);
-	let browseImages = $state<(RegistryImage & { registryName: string })[]>([]);
-	let browseLoading = $state(false);
-	let browseError = $state('');
+	// Image picker state
+	let showImagePicker = $state(false);
+	let imagePickerItems = $state<EntityPickerItem[]>([]);
+	let imagePickerLoading = $state(false);
 
 	async function handleBrowseImages() {
-		showImageBrowser = !showImageBrowser;
-		if (!showImageBrowser) return;
+		showImagePicker = true;
+		if (imagePickerItems.length > 0) return;
 
-		browseLoading = true;
-		browseError = '';
-		browseImages = [];
+		imagePickerLoading = true;
 		try {
-			registries = await api.listRegistries();
-			const allImages: (RegistryImage & { registryName: string })[] = [];
+			const registries = await api.listRegistries();
+			const items: EntityPickerItem[] = [];
 			for (const reg of registries) {
 				if (!reg.owner) continue;
 				try {
 					const images = await api.listRegistryImages(reg.id);
 					for (const img of images) {
-						allImages.push({ ...img, registryName: reg.name });
+						items.push({
+							value: JSON.stringify({ full_ref: img.full_ref, registryName: reg.name }),
+							label: img.full_ref,
+							description: reg.name,
+							group: reg.name
+						});
 					}
 				} catch {
 					// Skip registries that fail (e.g., no owner configured).
 				}
 			}
-			browseImages = allImages;
-		} catch (e) {
-			browseError = e instanceof Error ? e.message : $t('projects.imageLoadFailed');
+			imagePickerItems = items;
+		} catch {
+			imagePickerItems = [];
 		} finally {
-			browseLoading = false;
+			imagePickerLoading = false;
 		}
 	}
 
@@ -62,14 +64,15 @@
 		return parts[parts.length - 1].toLowerCase().replace(/[^a-z0-9-]/g, '-');
 	}
 
-	function selectBrowsedImage(image: RegistryImage & { registryName: string }) {
-		formImage = image.full_ref;
-		formRegistry = image.registryName;
+	function selectPickedImage(value: string) {
+		const parsed = JSON.parse(value) as { full_ref: string; registryName: string };
+		formImage = parsed.full_ref;
+		formRegistry = parsed.registryName;
 		// Auto-fill name if empty.
 		if (!formName.trim()) {
-			formName = nameFromImage(image.full_ref);
+			formName = nameFromImage(parsed.full_ref);
 		}
-		showImageBrowser = false;
+		showImagePicker = false;
 	}
 
 	async function loadProjects() {
@@ -149,51 +152,33 @@
 
 			<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
 				<FormField label="{$t('projects.name')} *" name="name" bind:value={formName} placeholder="my-web-app" required />
-				<div class="flex flex-col gap-1.5">
-					<div class="flex items-end gap-2">
-						<div class="flex-1">
-							<FormField label="{$t('projects.image')} *" name="image" bind:value={formImage} placeholder="registry.example.com/org/app" required />
-						</div>
-						<button
-							type="button"
-							onclick={handleBrowseImages}
-							title={$t('projects.browseImages')}
-							aria-label={$t('projects.browseImages')}
-							class="rounded-lg border border-[var(--border-primary)] p-2 text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] transition-colors"
-						>
-							<IconSearch size={16} />
-						</button>
+				<div class="flex items-end gap-2">
+					<div class="flex-1">
+						<FormField label="{$t('projects.image')} *" name="image" bind:value={formImage} placeholder="registry.example.com/org/app" required />
 					</div>
-					{#if showImageBrowser}
-						<div class="rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] p-3 shadow-[var(--shadow-md)] max-h-60 overflow-y-auto animate-scale-in">
-							{#if browseLoading}
-								<div class="flex items-center gap-2 py-2 text-sm text-[var(--text-secondary)]">
-									<IconLoader size={14} />
-									{$t('projects.loadingImages')}
-								</div>
-							{:else if browseError}
-								<p class="text-sm text-[var(--color-danger)]">{browseError}</p>
-							{:else if browseImages.length === 0}
-								<p class="text-sm text-[var(--text-tertiary)]">{$t('projects.noImages')}</p>
-							{:else}
-								<ul class="space-y-1">
-									{#each browseImages as image}
-										<li>
-											<button
-												type="button"
-												onclick={() => selectBrowsedImage(image)}
-												class="w-full rounded-md px-3 py-2 text-left text-sm hover:bg-[var(--surface-card-hover)] transition-colors"
-											>
-												<span class="font-medium text-[var(--text-primary)]">{image.full_ref}</span>
-												<span class="ml-2 text-xs text-[var(--text-tertiary)]">({image.registryName})</span>
-											</button>
-										</li>
-									{/each}
-								</ul>
-							{/if}
-						</div>
-					{/if}
+					<button
+						type="button"
+						onclick={handleBrowseImages}
+						title={$t('projects.browseImages')}
+						aria-label={$t('projects.browseImages')}
+						class="rounded-lg border border-[var(--border-primary)] p-2 text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] transition-colors"
+					>
+						{#if imagePickerLoading}
+							<IconLoader size={16} />
+						{:else}
+							<IconSearch size={16} />
+						{/if}
+					</button>
 				</div>
+				<EntityPicker
+					bind:open={showImagePicker}
+					items={imagePickerItems}
+					current={formImage}
+					title={$t('projects.selectImage')}
+					placeholder={$t('entityPicker.search')}
+					onselect={selectPickedImage}
+					onclose={() => { showImagePicker = false; }}
+				/>
 				<FormField label={$t('projects.port')} name="port" type="number" bind:value={formPort} helpText="Auto-detected from EXPOSE if empty" />
 				<FormField label={$t('projects.healthcheck')} name="healthcheck" bind:value={formHealthcheck} placeholder="/api/health" helpText="Auto-detected from image if empty" />
 			</div>