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 setup detail page

Browse Source 
Replace text action buttons (Add Items, Public/Private toggle, Delete
Setup) with icon-only buttons on mobile. Migrate inline SVGs to
LucideIcon component (plus, globe, trash-2). All icon buttons have
aria-label and 44px touch targets.
This commit is contained in:
Jean-Luc Makiola
2026-04-12 20:15:33 +02:00
parent b6f12fa93d
commit 410a6491fe
1 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/client/routes/setups/$setupId.tsx
View File

@@ -154,59 +154,73 @@ function SetupDetailPage() {
{/* Actions — only visible to authenticated users */}
{isAuthenticated && (
<div className="flex items-center gap-3 py-4">
{/* Add Items — desktop */}
<button
type="button"
onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
className="hidden md:inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
/>
</svg>
<LucideIcon name="plus" size={16} />
Add Items
</button>
{/* Add Items — mobile */}
<button
type="button"
onClick={() => setPickerOpen(true)}
className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-lg transition-colors"
aria-label="Add Items"
title="Add Items"
>
<LucideIcon name="plus" size={16} />
</button>
{/* Public toggle */}
{/* Public toggle — desktop */}
<button
type="button"
onClick={() => updateSetup.mutate({ isPublic: !setup.isPublic })}
className={`inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
className={`hidden md:inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
setup.isPublic
? "text-green-700 bg-green-50 hover:bg-green-100"
: "text-gray-500 bg-gray-50 hover:bg-gray-100"
}`}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<circle cx="12" cy="12" r="10" />
<path d="M2 12h20" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
<LucideIcon name="globe" size={16} />
{setup.isPublic ? "Public" : "Private"}
</button>
{/* Public toggle — mobile */}
<button
type="button"
onClick={() => updateSetup.mutate({ isPublic: !setup.isPublic })}
className={`md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 rounded-lg transition-colors ${
setup.isPublic
? "text-green-700 bg-green-50 hover:bg-green-100"
: "text-gray-500 bg-gray-50 hover:bg-gray-100"
}`}
aria-label={setup.isPublic ? "Public" : "Private"}
title={setup.isPublic ? "Public" : "Private"}
>
<LucideIcon name="globe" size={16} />
</button>
<div className="flex-1" />
{/* Delete Setup — desktop */}
<button
type="button"
onClick={() => setConfirmDelete(true)}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
className="hidden md:inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
>
Delete Setup
</button>
{/* Delete Setup — mobile */}
<button
type="button"
onClick={() => setConfirmDelete(true)}
className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
aria-label="Delete Setup"
title="Delete Setup"
>
<LucideIcon name="trash-2" size={16} />
</button>
</div>
)}