From f69861d449c7ee55501857a1fa9088d74d3f66f3 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 20:16:08 +0200
Subject: [PATCH] feat(31-02): add responsive icon buttons to global item
 detail page

Replace text action buttons (Add to Collection, Add to Thread) with
icon-only buttons on mobile. Uses plus and message-square-plus icons.
All icon buttons have aria-label and 44px touch targets.
---
 .../routes/global-items/$globalItemId.tsx     | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/client/routes/global-items/$globalItemId.tsx b/src/client/routes/global-items/$globalItemId.tsx
index 9576728..609ddcb 100644
--- a/src/client/routes/global-items/$globalItemId.tsx
+++ b/src/client/routes/global-items/$globalItemId.tsx
@@ -3,6 +3,7 @@ import { GearImage, imageContainerBg } from "../../components/GearImage";
 import { useAuth } from "../../hooks/useAuth";
 import { useFormatters } from "../../hooks/useFormatters";
 import { useGlobalItem } from "../../hooks/useGlobalItems";
+import { LucideIcon } from "../../lib/iconData";
 import { useUIStore } from "../../stores/uiStore";
 
 export const Route = createFileRoute("/global-items/$globalItemId")({
@@ -165,6 +166,7 @@ function GlobalItemDetail() {
 
 			{/* Action buttons */}
 			<div className="flex gap-3 mb-6">
+				{/* Add to Collection — desktop */}
 				<button
 					type="button"
 					onClick={() => {
@@ -174,10 +176,27 @@ function GlobalItemDetail() {
 						}
 						openAddToCollection(item.id, `${item.brand} ${item.model}`);
 					}}
-					className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
+					className="hidden md:inline-flex items-center gap-2 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>
+				{/* Add to Collection — mobile */}
+				<button
+					type="button"
+					onClick={() => {
+						if (!isAuthenticated) {
+							openAuthPrompt();
+							return;
+						}
+						openAddToCollection(item.id, `${item.brand} ${item.model}`);
+					}}
+					className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2.5 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition-colors"
+					aria-label="Add to Collection"
+					title="Add to Collection"
+				>
+					<LucideIcon name="plus" size={16} />
+				</button>
+				{/* Add to Thread — desktop */}
 				<button
 					type="button"
 					onClick={() => {
@@ -187,10 +206,26 @@ function GlobalItemDetail() {
 						}
 						openAddToThread(item.id, `${item.brand} ${item.model}`);
 					}}
-					className="bg-white text-gray-700 border border-gray-200 rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
+					className="hidden md:inline-flex items-center gap-2 bg-white text-gray-700 border border-gray-200 rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
 				>
 					Add to Thread
 				</button>
+				{/* Add to Thread — mobile */}
+				<button
+					type="button"
+					onClick={() => {
+						if (!isAuthenticated) {
+							openAuthPrompt();
+							return;
+						}
+						openAddToThread(item.id, `${item.brand} ${item.model}`);
+					}}
+					className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2.5 bg-white text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+					aria-label="Add to Thread"
+					title="Add to Thread"
+				>
+					<LucideIcon name="message-square-plus" size={16} />
+				</button>
 			</div>
 
 			{/* Description */}