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

Phase 31: Mobile Polish - Context

Gathered: 2026-04-12 Status: Ready for planning

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

## 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.)

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

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

## Deferred Ideas

None — discussion stayed within phase scope

---

Phase: 31-mobile-polish Context gathered: 2026-04-12