From acf34c33d9c21f89be729b4ab33f40d24b91e0ff Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 15 Mar 2026 17:14:20 +0100
Subject: [PATCH] feat(05-02): add always-visible 4:3 image area with
 placeholders to ItemCard and CandidateCard

- Replace conditional image rendering with always-present 4:3 aspect ratio area
- Show category emoji centered on gray background when no image exists
- Ensures consistent card heights across grid layouts

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

diff --git a/src/client/components/CandidateCard.tsx b/src/client/components/CandidateCard.tsx
index 40223b3..fb2ea42 100644
--- a/src/client/components/CandidateCard.tsx
+++ b/src/client/components/CandidateCard.tsx
@@ -1,91 +1,95 @@
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { formatPrice, formatWeight } from "../lib/formatters";
 import { useUIStore } from "../stores/uiStore";
 
 interface CandidateCardProps {
-  id: number;
-  name: string;
-  weightGrams: number | null;
-  priceCents: number | null;
-  categoryName: string;
-  categoryEmoji: string;
-  imageFilename: string | null;
-  threadId: number;
-  isActive: boolean;
+	id: number;
+	name: string;
+	weightGrams: number | null;
+	priceCents: number | null;
+	categoryName: string;
+	categoryEmoji: string;
+	imageFilename: string | null;
+	threadId: number;
+	isActive: boolean;
 }
 
 export function CandidateCard({
-  id,
-  name,
-  weightGrams,
-  priceCents,
-  categoryName,
-  categoryEmoji,
-  imageFilename,
-  threadId,
-  isActive,
+	id,
+	name,
+	weightGrams,
+	priceCents,
+	categoryName,
+	categoryEmoji,
+	imageFilename,
+	threadId,
+	isActive,
 }: CandidateCardProps) {
-  const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
-  const openConfirmDeleteCandidate = useUIStore(
-    (s) => s.openConfirmDeleteCandidate,
-  );
-  const openResolveDialog = useUIStore((s) => s.openResolveDialog);
+	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
+	const openConfirmDeleteCandidate = useUIStore(
+		(s) => s.openConfirmDeleteCandidate,
+	);
+	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
 
-  return (
-    <div className="bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden">
-      {imageFilename && (
-        <div className="aspect-[4/3] bg-gray-50">
-          <img
-            src={`/uploads/${imageFilename}`}
-            alt={name}
-            className="w-full h-full object-cover"
-          />
-        </div>
-      )}
-      <div className="p-4">
-        <h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
-          {name}
-        </h3>
-        <div className="flex flex-wrap gap-1.5 mb-3">
-          {weightGrams != null && (
-            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
-              {formatWeight(weightGrams)}
-            </span>
-          )}
-          {priceCents != null && (
-            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
-              {formatPrice(priceCents)}
-            </span>
-          )}
-          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-            {categoryEmoji} {categoryName}
-          </span>
-        </div>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={() => openCandidateEditPanel(id)}
-            className="text-xs text-gray-500 hover:text-blue-600 transition-colors"
-          >
-            Edit
-          </button>
-          <button
-            type="button"
-            onClick={() => openConfirmDeleteCandidate(id)}
-            className="text-xs text-gray-500 hover:text-red-600 transition-colors"
-          >
-            Delete
-          </button>
-          {isActive && (
-            <button
-              type="button"
-              onClick={() => openResolveDialog(threadId, id)}
-              className="ml-auto text-xs font-medium text-amber-600 hover:text-amber-700 transition-colors"
-            >
-              Pick Winner
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden">
+			<div className="aspect-[4/3] bg-gray-50">
+				{imageFilename ? (
+					<img
+						src={`/uploads/${imageFilename}`}
+						alt={name}
+						className="w-full h-full object-cover"
+					/>
+				) : (
+					<div className="w-full h-full flex flex-col items-center justify-center">
+						<span className="text-3xl">{categoryEmoji}</span>
+					</div>
+				)}
+			</div>
+			<div className="p-4">
+				<h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
+					{name}
+				</h3>
+				<div className="flex flex-wrap gap-1.5 mb-3">
+					{weightGrams != null && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
+							{formatWeight(weightGrams)}
+						</span>
+					)}
+					{priceCents != null && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+							{formatPrice(priceCents)}
+						</span>
+					)}
+					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+						{categoryEmoji} {categoryName}
+					</span>
+				</div>
+				<div className="flex gap-2">
+					<button
+						type="button"
+						onClick={() => openCandidateEditPanel(id)}
+						className="text-xs text-gray-500 hover:text-blue-600 transition-colors"
+					>
+						Edit
+					</button>
+					<button
+						type="button"
+						onClick={() => openConfirmDeleteCandidate(id)}
+						className="text-xs text-gray-500 hover:text-red-600 transition-colors"
+					>
+						Delete
+					</button>
+					{isActive && (
+						<button
+							type="button"
+							onClick={() => openResolveDialog(threadId, id)}
+							className="ml-auto text-xs font-medium text-amber-600 hover:text-amber-700 transition-colors"
+						>
+							Pick Winner
+						</button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/src/client/components/ItemCard.tsx b/src/client/components/ItemCard.tsx
index 3535fac..2074e12 100644
--- a/src/client/components/ItemCard.tsx
+++ b/src/client/components/ItemCard.tsx
@@ -1,86 +1,100 @@
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { formatPrice, formatWeight } from "../lib/formatters";
 import { useUIStore } from "../stores/uiStore";
 
 interface ItemCardProps {
-  id: number;
-  name: string;
-  weightGrams: number | null;
-  priceCents: number | null;
-  categoryName: string;
-  categoryEmoji: string;
-  imageFilename: string | null;
-  onRemove?: () => void;
+	id: number;
+	name: string;
+	weightGrams: number | null;
+	priceCents: number | null;
+	categoryName: string;
+	categoryEmoji: string;
+	imageFilename: string | null;
+	onRemove?: () => void;
 }
 
 export function ItemCard({
-  id,
-  name,
-  weightGrams,
-  priceCents,
-  categoryName,
-  categoryEmoji,
-  imageFilename,
-  onRemove,
+	id,
+	name,
+	weightGrams,
+	priceCents,
+	categoryName,
+	categoryEmoji,
+	imageFilename,
+	onRemove,
 }: ItemCardProps) {
-  const openEditPanel = useUIStore((s) => s.openEditPanel);
+	const openEditPanel = useUIStore((s) => s.openEditPanel);
 
-  return (
-    <button
-      type="button"
-      onClick={() => openEditPanel(id)}
-      className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
-    >
-      {onRemove && (
-        <span
-          role="button"
-          tabIndex={0}
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.stopPropagation();
-              onRemove();
-            }
-          }}
-          className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
-          title="Remove from setup"
-        >
-          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </span>
-      )}
-      {imageFilename && (
-        <div className="aspect-[4/3] bg-gray-50">
-          <img
-            src={`/uploads/${imageFilename}`}
-            alt={name}
-            className="w-full h-full object-cover"
-          />
-        </div>
-      )}
-      <div className="p-4">
-        <h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
-          {name}
-        </h3>
-        <div className="flex flex-wrap gap-1.5">
-          {weightGrams != null && (
-            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
-              {formatWeight(weightGrams)}
-            </span>
-          )}
-          {priceCents != null && (
-            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
-              {formatPrice(priceCents)}
-            </span>
-          )}
-          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-            {categoryEmoji} {categoryName}
-          </span>
-        </div>
-      </div>
-    </button>
-  );
+	return (
+		<button
+			type="button"
+			onClick={() => openEditPanel(id)}
+			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
+		>
+			{onRemove && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation();
+						onRemove();
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.stopPropagation();
+							onRemove();
+						}
+					}}
+					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+					title="Remove from setup"
+				>
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</span>
+			)}
+			<div className="aspect-[4/3] bg-gray-50">
+				{imageFilename ? (
+					<img
+						src={`/uploads/${imageFilename}`}
+						alt={name}
+						className="w-full h-full object-cover"
+					/>
+				) : (
+					<div className="w-full h-full flex flex-col items-center justify-center">
+						<span className="text-3xl">{categoryEmoji}</span>
+					</div>
+				)}
+			</div>
+			<div className="p-4">
+				<h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
+					{name}
+				</h3>
+				<div className="flex flex-wrap gap-1.5">
+					{weightGrams != null && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
+							{formatWeight(weightGrams)}
+						</span>
+					)}
+					{priceCents != null && (
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+							{formatPrice(priceCents)}
+						</span>
+					)}
+					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+						{categoryEmoji} {categoryName}
+					</span>
+				</div>
+			</div>
+		</button>
+	);
 }