diff --git a/.planning/phases/31-mobile-polish/31-01-SUMMARY.md b/.planning/phases/31-mobile-polish/31-01-SUMMARY.md new file mode 100644 index 0000000..37933e5 --- /dev/null +++ b/.planning/phases/31-mobile-polish/31-01-SUMMARY.md @@ -0,0 +1,56 @@ +--- +phase: 31-mobile-polish +plan: 01 +subsystem: client-routes +tags: [mobile, responsive, icons, accessibility] +key-files: + created: [] + modified: + - src/client/routes/items/$itemId.tsx + - src/client/routes/threads/$threadId/candidates/$candidateId.tsx +metrics: + tasks: 2 + commits: 3 + files_changed: 2 +--- + +# Plan 01 Summary: Item Detail + Candidate Detail Icon Buttons + +## What Was Built + +Added responsive icon-based action buttons to item detail and candidate detail pages. On mobile viewports (below md: breakpoint / 768px), action buttons display as icon-only with 44px minimum touch targets. Desktop viewports retain full text buttons unchanged. + +## Commits + +| Task | Commit | Description | +|------|--------|-------------| +| 1 | 7effede | Add responsive icon buttons to item detail page | +| 2 | b6f12fa | Add responsive icon buttons to candidate detail page | +| fix | 97b1936 | Fix biome lint formatting for JSX expressions | + +## Changes + +### Item Detail ($itemId.tsx) +- Duplicate button: paired desktop text / mobile icon (copy icon) +- Delete/Remove button: paired desktop text / mobile icon (trash-2 icon), dynamic aria-label for reference vs owned items +- Edit button: paired desktop text / mobile icon (pencil icon) + +### Candidate Detail ($candidateId.tsx) +- Header Edit button: split into desktop (text+icon) / mobile (icon-only) +- Pick as Winner button: paired desktop text+icon / mobile icon (trophy icon) +- Delete button: paired desktop text+icon / mobile icon (trash-2 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 (matching BottomTabBar) +- [x] Desktop buttons unchanged +- [x] Edit mode Cancel/Save buttons not affected +- [x] Lint passes +- [x] Build succeeds diff --git a/.planning/phases/31-mobile-polish/31-02-SUMMARY.md b/.planning/phases/31-mobile-polish/31-02-SUMMARY.md new file mode 100644 index 0000000..cc38af5 --- /dev/null +++ b/.planning/phases/31-mobile-polish/31-02-SUMMARY.md @@ -0,0 +1,57 @@ +--- +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