docs(31): capture phase context

This commit is contained in:
2026-04-12 20:01:20 +02:00
parent 91846b5ca2
commit 240aed266c
2 changed files with 141 additions and 0 deletions

View File

@@ -0,0 +1,88 @@
# 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*

View File

@@ -0,0 +1,53 @@
# Phase 31: Mobile Polish - Discussion Log
> **Audit trail only.** Do not use as input to planning, research, or execution agents.
> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.
**Date:** 2026-04-12
**Phase:** 31-mobile-polish
**Areas discussed:** Icon actions scope, Other mobile UX tweaks
---
## Icon Actions Scope
| Option | Description | Selected |
|--------|-------------|----------|
| All detail pages | Item, candidate, setup, catalog detail — full consistency | ✓ |
| Item + candidate only | Most-used pages on mobile | |
| You decide | Claude applies where needed | |
**User's choice:** All detail pages
| Option | Description | Selected |
|--------|-------------|----------|
| Tooltip on long-press | Help users learn icons | |
| No tooltips | Icons are universally understood | |
| You decide | Claude picks | ✓ |
**User's choice:** You decide (Claude's discretion)
---
## Other Mobile UX Tweaks
| Option | Description | Selected |
|--------|-------------|----------|
| Tap targets too small | Minimum 44px touch targets needed | |
| Scroll/spacing issues | Content too close to edges, etc. | |
| Nothing specific | Happy with mobile otherwise | ✓ |
**User's choice:** Nothing specific — icon buttons are the main thing
---
## Claude's Discretion
- Long-press tooltips
- Breakpoint for icon/text switch
- Icon sizing and touch targets
- Additional small polish if noticed
## Deferred Ideas
None