# 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*