From e3124e49c908e80710238c01dd1dbcd96c58efab Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 22:34:19 +0200
Subject: [PATCH] fix(F-04): include crop/color fields in item queries and use
 dominantColor in GearImage

getAllItems and getItemById were not selecting dominantColor, cropZoom,
cropX, cropY from the database. GearImage was ignoring the dominantColor
prop. Now the fields flow end-to-end from DB to UI background fill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/GearImage.tsx | 35 ++++++++++++++++-------------
 src/server/services/item.service.ts |  8 +++++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index 68c2b73..a70a879 100644
--- a/src/client/components/GearImage.tsx
+++ b/src/client/components/GearImage.tsx
@@ -12,7 +12,7 @@ interface GearImageProps {
 export function GearImage({
 	src,
 	alt,
-	dominantColor: _dominantColor,
+	dominantColor,
 	cropZoom,
 	cropX,
 	cropY,
@@ -20,6 +20,7 @@ export function GearImage({
 	cover = false,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
+	const bgStyle = dominantColor ? { backgroundColor: dominantColor } : undefined;
 
 	if (cover) {
 		return (
@@ -33,24 +34,28 @@ export function GearImage({
 
 	if (hasCrop) {
 		return (
-			<img
-				src={src}
-				alt={alt}
-				className={`w-full h-full object-cover ${className}`}
-				style={{
-					transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
-					transformOrigin: "center center",
-				}}
-			/>
+			<div className="w-full h-full overflow-hidden" style={bgStyle}>
+				<img
+					src={src}
+					alt={alt}
+					className={`w-full h-full object-cover ${className}`}
+					style={{
+						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
+						transformOrigin: "center center",
+					}}
+				/>
+			</div>
 		);
 	}
 
 	return (
-		<img
-			src={src}
-			alt={alt}
-			className={`w-full h-full object-contain ${className}`}
-		/>
+		<div className="w-full h-full flex items-center justify-center" style={bgStyle}>
+			<img
+				src={src}
+				alt={alt}
+				className={`w-full h-full object-contain ${className}`}
+			/>
+		</div>
 	);
 }
 
diff --git a/src/server/services/item.service.ts b/src/server/services/item.service.ts
index d5c02d9..ff3e577 100644
--- a/src/server/services/item.service.ts
+++ b/src/server/services/item.service.ts
@@ -38,6 +38,10 @@ export async function getAllItems(db: Db, userId: number) {
 			brand: sql<
 				string | null
 			>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
+			dominantColor: items.dominantColor,
+			cropZoom: items.cropZoom,
+			cropX: items.cropX,
+			cropY: items.cropY,
 			createdAt: items.createdAt,
 			updatedAt: items.updatedAt,
 			categoryName: categories.name,
@@ -82,6 +86,10 @@ export async function getItemById(db: Db, userId: number, id: number) {
 			brand: sql<
 				string | null
 			>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
+			dominantColor: items.dominantColor,
+			cropZoom: items.cropZoom,
+			cropX: items.cropX,
+			cropY: items.cropY,
 			createdAt: items.createdAt,
 			updatedAt: items.updatedAt,
 			categoryName: categories.name,