Jean-Luc Makiola
2853477a75
Phases 28-31 archived to milestones/v2.2-phases/ Requirements and roadmap snapshots archived to milestones/ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
89 lines
3.3 KiB
Markdown
89 lines
3.3 KiB
Markdown
# Phase 31: Mobile Polish - Context
|
|
|
|
**Gathered:** 2026-04-12
|
|
**Status:** Ready for planning
|
|
|
|
<domain>
|
|
## Phase Boundary
|
|
|
|
Replace text-based action buttons with icon buttons on mobile across all detail pages. This is a focused UI polish phase — no new features, just better mobile touch UX.
|
|
|
|
</domain>
|
|
|
|
<decisions>
|
|
## Implementation Decisions
|
|
|
|
### Icon Actions Scope
|
|
- **D-01:** Apply icon-based action buttons on mobile to **all detail pages**: item detail, candidate detail, setup detail, catalog detail — anywhere action buttons appear.
|
|
- **D-02:** Desktop keeps text buttons. Mobile (below sm: breakpoint) switches to icons. Uses the same responsive breakpoint as BottomTabBar.
|
|
- **D-03:** Standard icon mapping: pencil/edit for Edit, trash for Delete, copy for Duplicate, share for Share (if applicable).
|
|
|
|
### Mobile UX
|
|
- **D-04:** No other specific mobile UX issues to address — user is happy with current mobile support beyond the icon buttons.
|
|
|
|
### Claude's Discretion
|
|
- Whether to add long-press tooltips on icon buttons for discoverability
|
|
- Exact breakpoint for icon/text switch (likely `sm:` matching BottomTabBar)
|
|
- Icon sizing and spacing for comfortable touch targets (minimum 44px)
|
|
- Whether to use Lucide icons (already in project) or keep inline SVGs
|
|
- Any additional small polish items noticed during implementation (tap target sizes, etc.)
|
|
|
|
</decisions>
|
|
|
|
<canonical_refs>
|
|
## Canonical References
|
|
|
|
**Downstream agents MUST read these before planning or implementing.**
|
|
|
|
### Action Buttons (need icon variants)
|
|
- `src/client/routes/items/$itemId.tsx` — Item detail actions: Duplicate, Delete/Remove, Edit (lines ~186-210)
|
|
- `src/client/routes/threads/$threadId/candidates/$candidateId.tsx` — Candidate detail actions
|
|
- `src/client/routes/setups/$setupId.tsx` — Setup detail actions (if any)
|
|
- `src/client/routes/global-items/$globalItemId.tsx` — Catalog detail actions (if any)
|
|
|
|
### Responsive Patterns
|
|
- `src/client/components/BottomTabBar.tsx` — Mobile bottom nav, uses `md:hidden` breakpoint
|
|
- `src/client/components/TopNav.tsx` — Desktop top nav, uses `hidden md:flex` breakpoint
|
|
|
|
### Icon System
|
|
- `src/client/lib/iconData.ts` — LucideIcon component, 119 curated icons
|
|
|
|
</canonical_refs>
|
|
|
|
<code_context>
|
|
## Existing Code Insights
|
|
|
|
### Reusable Assets
|
|
- `LucideIcon` component — renders Lucide icons by name. Already used throughout the app.
|
|
- BottomTabBar responsive pattern — `md:hidden` / `hidden md:flex` for mobile/desktop switch.
|
|
- Tailwind responsive classes already established throughout the codebase.
|
|
|
|
### Established Patterns
|
|
- Mobile/desktop responsive switch at `md:` breakpoint (768px) — consistent with BottomTabBar and TopNav.
|
|
- Action buttons are inline `<button>` elements with text — straightforward to add responsive icon variants.
|
|
|
|
### Integration Points
|
|
- Each detail page's action button section — wrap in responsive containers showing icons on mobile, text on desktop.
|
|
|
|
</code_context>
|
|
|
|
<specifics>
|
|
## Specific Ideas
|
|
|
|
- This is a small, focused phase. The user is generally happy with mobile support — just the text buttons on detail pages are the pain point.
|
|
- Keep it simple — responsive icon/text swap using existing Tailwind breakpoints and LucideIcon.
|
|
|
|
</specifics>
|
|
|
|
<deferred>
|
|
## Deferred Ideas
|
|
|
|
None — discussion stayed within phase scope
|
|
|
|
</deferred>
|
|
|
|
---
|
|
|
|
*Phase: 31-mobile-polish*
|
|
*Context gathered: 2026-04-12*
|