GearBox/.planning/milestones/v2.2-phases/31-mobile-polish/31-02-SUMMARY.md

phase, plan, subsystem, tags, key-files, metrics

phase	plan	subsystem	tags	key-files	metrics
31-mobile-polish	02	client-routes	mobile responsive icons accessibility cleanup	created modified src/client/routes/setups/$setupId.tsx src/client/routes/global-items/$globalItemId.tsx	tasks commits files_changed 2 2 2

Plan 02 Summary: Setup Detail + Global Item Detail Icon Buttons

What Was Built

Added responsive icon-based action buttons to setup detail and global item detail pages. Migrated inline SVGs on the setup page to LucideIcon component for consistency. On mobile viewports (below md: breakpoint), action buttons display as icon-only with 44px minimum touch targets.

Commits

Task	Commit	Description
1	410a649	Add responsive icon buttons to setup detail, migrate inline SVGs to LucideIcon
2	f69861d	Add responsive icon buttons to global item detail page

Changes

Setup Detail ($setupId.tsx)

• Add Items button: paired desktop text / mobile icon (plus icon via LucideIcon, replacing inline SVG)
• Public/Private toggle: paired desktop text / mobile icon (globe icon via LucideIcon, replacing inline SVG)
• Delete Setup button: paired desktop text / mobile icon (trash-2 icon)
• All inline SVGs removed and replaced with LucideIcon component

Global Item Detail ($globalItemId.tsx)

• Added LucideIcon import (was not previously imported)
• Add to Collection button: paired desktop text / mobile icon (plus icon)
• Add to Thread button: paired desktop text / mobile icon (message-square-plus icon)

Deviations

None.

Self-Check: PASSED

• All icon buttons have aria-label attributes
• All icon buttons have title attributes for tooltip
• All icon buttons have min-w-[44px] min-h-[44px] for touch targets
• md: breakpoint used consistently
• No inline SVGs remain in setup detail page
• LucideIcon imported in global item detail
• Auth check (openAuthPrompt) preserved in global item detail buttons
• Lint passes
• Build succeeds