--- phase: 31-mobile-polish plan: 02 subsystem: client-routes tags: [mobile, responsive, icons, accessibility, cleanup] key-files: created: [] modified: - src/client/routes/setups/$setupId.tsx - src/client/routes/global-items/$globalItemId.tsx metrics: tasks: 2 commits: 2 files_changed: 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 - [x] All icon buttons have aria-label attributes - [x] All icon buttons have title attributes for tooltip - [x] All icon buttons have min-w-[44px] min-h-[44px] for touch targets - [x] md: breakpoint used consistently - [x] No inline SVGs remain in setup detail page - [x] LucideIcon imported in global item detail - [x] Auth check (openAuthPrompt) preserved in global item detail buttons - [x] Lint passes - [x] Build succeeds