From 408025bb366964f2dd2df4a9ce2ab7cdc2e54df1 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 6 Apr 2026 15:02:07 +0200
Subject: [PATCH] feat(21-01): enhance catalog detail page with Add to
 Collection button

- Add image placeholder (package icon) when no imageUrl exists
- Add 'Add to Collection' button stub between specs and description
- Button styled per D-10, logs to console (actual flow wired in Phase 22)
- Consistent layout with item detail page
---
 .../routes/global-items/$globalItemId.tsx     | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/client/routes/global-items/$globalItemId.tsx b/src/client/routes/global-items/$globalItemId.tsx
index a591e8b..c6a227a 100644
--- a/src/client/routes/global-items/$globalItemId.tsx
+++ b/src/client/routes/global-items/$globalItemId.tsx
@@ -55,15 +55,27 @@ function GlobalItemDetail() {
 			</div>
 
 			{/* Image */}
-			{item.imageUrl && (
-				<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
+			<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
+				{item.imageUrl ? (
 					<img
 						src={item.imageUrl}
 						alt={`${item.brand} ${item.model}`}
 						className="w-full h-full object-cover"
 					/>
-				</div>
-			)}
+				) : (
+					<div className="w-full h-full flex flex-col items-center justify-center">
+						<svg
+							className="w-16 h-16 text-gray-300"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							strokeWidth={1.5}
+						>
+							<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+						</svg>
+					</div>
+				)}
+			</div>
 
 			{/* Header */}
 			<div className="mb-6">
@@ -114,6 +126,17 @@ function GlobalItemDetail() {
 				)}
 			</div>
 
+			{/* Add to Collection */}
+			<div className="mb-6">
+				<button
+					type="button"
+					onClick={() => console.log("Add to collection — wired in Phase 22")}
+					className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
+				>
+					Add to Collection
+				</button>
+			</div>
+
 			{/* Description */}
 			{item.description && (
 				<div className="prose prose-sm prose-gray max-w-none">