From 62a9249abf5571e7592e2b2bd91bf2d0801301c2 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 28 Mar 2026 15:16:37 +0300
Subject: [PATCH] feat: mark already-added images as disabled in EntityPicker

---
 web/src/lib/components/EntityPicker.svelte | 30 +++++++++++++++++-----
 web/src/lib/types.ts                       |  2 ++
 web/src/routes/projects/+page.svelte       |  9 +++++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/EntityPicker.svelte b/web/src/lib/components/EntityPicker.svelte
index 2b02a6c..b098e89 100644
--- a/web/src/lib/components/EntityPicker.svelte
+++ b/web/src/lib/components/EntityPicker.svelte
@@ -104,7 +104,7 @@
 			case 'Enter': {
 				event.preventDefault();
 				const item = flatFiltered[highlightIndex];
-				if (item) {
+				if (item && !item.disabled) {
 					onselect(item.value);
 				}
 				break;
@@ -121,8 +121,9 @@
 		onclose();
 	}
 
-	function handleItemClick(value: string) {
-		onselect(value);
+	function handleItemClick(item: EntityPickerItem) {
+		if (item.disabled) return;
+		onselect(item.value);
 	}
 
 	/** Track the flat index across groups for highlight matching. */
@@ -204,18 +205,22 @@
 							<button
 								type="button"
 								class="entity-picker-item"
-								class:entity-picker-item--highlighted={isHighlighted}
+								class:entity-picker-item--highlighted={isHighlighted && !item.disabled}
 								class:entity-picker-item--current={isCurrent}
+								class:entity-picker-item--disabled={item.disabled}
 								data-highlighted={isHighlighted}
-								onclick={() => handleItemClick(item.value)}
+								onclick={() => handleItemClick(item)}
 								onmouseenter={() => { highlightIndex = flatIdx; }}
+								disabled={item.disabled}
 							>
 								{#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}
+									{#if item.disabledHint}
+										<span class="entity-picker-item-hint">{item.disabledHint}</span>
+									{:else if item.description}
 										<span class="entity-picker-item-description">{item.description}</span>
 									{/if}
 								</span>
@@ -422,4 +427,17 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.entity-picker-item--disabled {
+		opacity: 0.45;
+		cursor: default;
+		pointer-events: none;
+	}
+
+	.entity-picker-item-hint {
+		font-size: var(--text-xs);
+		color: var(--text-tertiary);
+		font-style: italic;
+		white-space: nowrap;
+	}
 </style>
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 832ed89..0f156e5 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -144,6 +144,8 @@ export interface EntityPickerItem {
 	description?: string;
 	icon?: string;
 	group?: string;
+	disabled?: boolean;
+	disabledHint?: string;
 }
 
 /** Volume mount configuration for a project. */
diff --git a/web/src/routes/projects/+page.svelte b/web/src/routes/projects/+page.svelte
index cd73784..af0115b 100644
--- a/web/src/routes/projects/+page.svelte
+++ b/web/src/routes/projects/+page.svelte
@@ -33,17 +33,22 @@
 		imagePickerLoading = true;
 		try {
 			const registries = await api.listRegistries();
+			// Collect existing project images to mark as already added.
+			const existingImages = new Set(projects.map(p => p.image.toLowerCase()));
 			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) {
+						const alreadyAdded = existingImages.has(img.full_ref.toLowerCase());
 						items.push({
 							value: JSON.stringify({ full_ref: img.full_ref, registryName: reg.name }),
 							label: img.full_ref,
-							description: reg.name,
-							group: reg.name
+							description: alreadyAdded ? undefined : reg.name,
+							group: reg.name,
+							disabled: alreadyAdded,
+							disabledHint: alreadyAdded ? 'Already added' : undefined
 						});
 					}
 				} catch {