From e4a65314bd39ac85942edbe0eed6faa42675621b Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 10 Apr 2026 11:05:52 +0200
Subject: [PATCH] feat(25-02): add attribution display on catalog detail page

- GlobalItem interface extended with sourceUrl, imageCredit, imageSourceUrl fields
- Attribution block below image: Photo credit and source link when present
- Product page link (sourceUrl) at bottom of detail page
- Image div mb-6 moved to attribution paragraph for consistent spacing
---
 src/client/hooks/useGlobalItems.ts            |  3 ++
 .../routes/global-items/$globalItemId.tsx     | 35 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/client/hooks/useGlobalItems.ts b/src/client/hooks/useGlobalItems.ts
index da0c4fc..ecfff5b 100644
--- a/src/client/hooks/useGlobalItems.ts
+++ b/src/client/hooks/useGlobalItems.ts
@@ -10,6 +10,9 @@ interface GlobalItem {
 	priceCents: number | null;
 	imageUrl: string | null;
 	description: string | null;
+	sourceUrl: string | null;
+	imageCredit: string | null;
+	imageSourceUrl: string | null;
 	createdAt: string;
 }
 
diff --git a/src/client/routes/global-items/$globalItemId.tsx b/src/client/routes/global-items/$globalItemId.tsx
index 80b2af7..e4533fb 100644
--- a/src/client/routes/global-items/$globalItemId.tsx
+++ b/src/client/routes/global-items/$globalItemId.tsx
@@ -62,7 +62,7 @@ function GlobalItemDetail() {
 			</div>
 
 			{/* Image */}
-			<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">
 				{item.imageUrl ? (
 					<img
 						src={item.imageUrl}
@@ -84,6 +84,25 @@ function GlobalItemDetail() {
 				)}
 			</div>
 
+			{/* Attribution */}
+			{(item.imageCredit || item.imageSourceUrl) && (
+				<p className="text-xs text-gray-400 mt-1 mb-6">
+					{item.imageCredit && <span>Photo: {item.imageCredit}</span>}
+					{item.imageCredit && item.imageSourceUrl && <span> · </span>}
+					{item.imageSourceUrl && (
+						<a
+							href={item.imageSourceUrl}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="underline hover:text-gray-600 transition-colors"
+						>
+							Source
+						</a>
+					)}
+				</p>
+			)}
+			{!(item.imageCredit || item.imageSourceUrl) && <div className="mb-6" />}
+
 			{/* Header */}
 			<div className="mb-6">
 				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">
@@ -169,6 +188,20 @@ function GlobalItemDetail() {
 					<p className="text-gray-600 leading-relaxed">{item.description}</p>
 				</div>
 			)}
+
+			{/* Product page link */}
+			{item.sourceUrl && (
+				<div className="mt-4">
+					<a
+						href={item.sourceUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-sm text-blue-500 hover:text-blue-600 underline transition-colors"
+					>
+						View product page &rarr;
+					</a>
+				</div>
+			)}
 		</div>
 	);
 }