makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(31-02): add responsive icon buttons to global item detail page

Browse Source 
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.
This commit is contained in:
Jean-Luc Makiola
2026-04-12 20:16:08 +02:00
parent 410a6491fe
commit f69861d449
1 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/client/routes/global-items/$globalItemId.tsx
View File

@@ -3,6 +3,7 @@ import { GearImage, imageContainerBg } from "../../components/GearImage";
import { useAuth } from "../../hooks/useAuth"; import { useAuth } from "../../hooks/useAuth";
import { useFormatters } from "../../hooks/useFormatters"; import { useFormatters } from "../../hooks/useFormatters";
import { useGlobalItem } from "../../hooks/useGlobalItems"; import { useGlobalItem } from "../../hooks/useGlobalItems";
import { LucideIcon } from "../../lib/iconData";
import { useUIStore } from "../../stores/uiStore"; import { useUIStore } from "../../stores/uiStore";
export const Route = createFileRoute("/global-items/$globalItemId")({ export const Route = createFileRoute("/global-items/$globalItemId")({
@@ -165,6 +166,7 @@ function GlobalItemDetail() {
{/* Action buttons */} {/* Action buttons */}
<div className="flex gap-3 mb-6"> <div className="flex gap-3 mb-6">
{/* Add to Collection — desktop */}
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -174,10 +176,27 @@ function GlobalItemDetail() {
} }
openAddToCollection(item.id, `${item.brand} ${item.model}`); 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 Add to Collection
</button> </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 <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -187,10 +206,26 @@ function GlobalItemDetail() {
} }
openAddToThread(item.id, `${item.brand} ${item.model}`); 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 Add to Thread
</button> </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> </div>
{/* Description */} {/* Description */}