From 2865e657d07a8f8adcb77e05c892e4a3a372af1f Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 19:58:39 +0200
Subject: [PATCH] feat(29-02): update ItemCard and GlobalItemCard to use
 GearImage

Replace object-cover with GearImage component for fit-within rendering.
Add dominantColor and crop props to both card components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/GlobalItemCard.tsx | 27 ++++++++++++++++++++----
 src/client/components/ItemCard.tsx       | 27 ++++++++++++++++++++----
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/client/components/GlobalItemCard.tsx b/src/client/components/GlobalItemCard.tsx
index 7aa3944..6948155 100644
--- a/src/client/components/GlobalItemCard.tsx
+++ b/src/client/components/GlobalItemCard.tsx
@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { useFormatters } from "../hooks/useFormatters";
+import { GearImage, imageContainerBg } from "./GearImage";
 
 interface GlobalItemCardProps {
 	id: number;
@@ -9,6 +10,10 @@ interface GlobalItemCardProps {
 	weightGrams: number | null;
 	priceCents: number | null;
 	imageUrl: string | null;
+	dominantColor?: string | null;
+	cropZoom?: number | null;
+	cropX?: number | null;
+	cropY?: number | null;
 }
 
 export function GlobalItemCard({
@@ -19,6 +24,10 @@ export function GlobalItemCard({
 	weightGrams,
 	priceCents,
 	imageUrl,
+	dominantColor,
+	cropZoom,
+	cropX,
+	cropY,
 }: GlobalItemCardProps) {
 	const { weight, price } = useFormatters();
 
@@ -28,15 +37,25 @@ export function GlobalItemCard({
 			params={{ globalItemId: String(id) }}
 			className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
 		>
-			<div className="aspect-[4/3] bg-gray-50">
+			<div
+				className="aspect-[4/3] overflow-hidden"
+				style={{
+					backgroundColor: imageUrl
+						? imageContainerBg(dominantColor)
+						: undefined,
+				}}
+			>
 				{imageUrl ? (
-					<img
+					<GearImage
 						src={imageUrl}
 						alt={`${brand} ${model}`}
-						className="w-full h-full object-cover"
+						dominantColor={dominantColor}
+						cropZoom={cropZoom}
+						cropX={cropX}
+						cropY={cropY}
 					/>
 				) : (
-					<div className="w-full h-full flex flex-col items-center justify-center">
+					<div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center">
 						<svg
 							className="w-9 h-9 text-gray-300"
 							fill="none"
diff --git a/src/client/components/ItemCard.tsx b/src/client/components/ItemCard.tsx
index 4986b2a..ef7a19f 100644
--- a/src/client/components/ItemCard.tsx
+++ b/src/client/components/ItemCard.tsx
@@ -4,6 +4,7 @@ import { useDuplicateItem } from "../hooks/useItems";
 import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 import { ClassificationBadge } from "./ClassificationBadge";
+import { GearImage, imageContainerBg } from "./GearImage";
 
 interface ItemCardProps {
 	id: number;
@@ -17,6 +18,10 @@ interface ItemCardProps {
 	imageUrl?: string | null;
 	productUrl?: string | null;
 	brand?: string | null;
+	dominantColor?: string | null;
+	cropZoom?: number | null;
+	cropX?: number | null;
+	cropY?: number | null;
 	onRemove?: () => void;
 	classification?: string;
 	onClassificationCycle?: () => void;
@@ -34,6 +39,10 @@ export function ItemCard({
 	imageUrl,
 	productUrl,
 	brand,
+	dominantColor,
+	cropZoom,
+	cropX,
+	cropY,
 	onRemove,
 	classification,
 	onClassificationCycle,
@@ -161,15 +170,25 @@ export function ItemCard({
 					</svg>
 				</span>
 			)}
-			<div className="aspect-[4/3] bg-gray-50">
+			<div
+				className="aspect-[4/3] overflow-hidden"
+				style={{
+					backgroundColor: imageUrl
+						? imageContainerBg(dominantColor)
+						: undefined,
+				}}
+			>
 				{imageUrl ? (
-					<img
+					<GearImage
 						src={imageUrl}
 						alt={name}
-						className="w-full h-full object-cover"
+						dominantColor={dominantColor}
+						cropZoom={cropZoom}
+						cropX={cropX}
+						cropY={cropY}
 					/>
 				) : (
-					<div className="w-full h-full flex flex-col items-center justify-center">
+					<div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center">
 						<LucideIcon
 							name={categoryIcon}
 							size={36}