From fe5bd49b759e9a2c31cd7e798c0366dcae0f1cdb Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 23:39:13 +0200
Subject: [PATCH] fix: save dominant color from image upload to item record

ImageUpload was discarding the dominantColor returned by the upload
API. Now it passes the color through onChange and the item detail
page saves it to the item record immediately after upload.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/ImageUpload.tsx |  9 ++++++---
 src/client/routes/items/$itemId.tsx   | 12 +++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/client/components/ImageUpload.tsx b/src/client/components/ImageUpload.tsx
index 6386b00..f944dcd 100644
--- a/src/client/components/ImageUpload.tsx
+++ b/src/client/components/ImageUpload.tsx
@@ -7,7 +7,7 @@ interface ImageUploadProps {
 	value: string | null;
 	imageUrl?: string | null;
 	dominantColor?: string | null;
-	onChange: (filename: string | null) => void;
+	onChange: (filename: string | null, dominantColor?: string | null) => void;
 	onCropChange?: (crop: { zoom: number; x: number; y: number }) => void;
 }
 
@@ -49,8 +49,11 @@ export function ImageUpload({
 
 		setUploading(true);
 		try {
-			const result = await apiUpload<{ filename: string }>("/api/images", file);
-			onChange(result.filename);
+			const result = await apiUpload<{
+				filename: string;
+				dominantColor?: string | null;
+			}>("/api/images", file);
+			onChange(result.filename, result.dominantColor);
 			if (onCropChange) {
 				setShowCropEditor(true);
 			}
diff --git a/src/client/routes/items/$itemId.tsx b/src/client/routes/items/$itemId.tsx
index a633e15..abae46a 100644
--- a/src/client/routes/items/$itemId.tsx
+++ b/src/client/routes/items/$itemId.tsx
@@ -274,9 +274,15 @@ function ItemDetail() {
 						value={form.imageFilename}
 						imageUrl={imageUrl}
 						dominantColor={item.dominantColor}
-						onChange={(filename) =>
-							setForm((f) => ({ ...f, imageFilename: filename }))
-						}
+						onChange={(filename, dominantColor) => {
+							setForm((f) => ({ ...f, imageFilename: filename }));
+							if (dominantColor) {
+								updateItem.mutate({
+									id: item.id,
+									dominantColor,
+								});
+							}
+						}}
 						onCropChange={(crop) => {
 							updateItem.mutate({
 								id: item.id,