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

@@ -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,6 +34,7 @@ export function GearImage({
 
 	if (hasCrop) {
 		return (
+			<div className="w-full h-full overflow-hidden" style={bgStyle}>
 				<img
 					src={src}
 					alt={alt}
@@ -42,15 +44,18 @@ export function GearImage({
 						transformOrigin: "center center",
 					}}
 				/>
+			</div>
 		);
 	}
 
 	return (
+		<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>
 	);
 }
 

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,