docs(31): capture phase context
This commit is contained in:
88
.planning/phases/31-mobile-polish/31-CONTEXT.md
Normal file
88
.planning/phases/31-mobile-polish/31-CONTEXT.md
Normal 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*
|
||||||
53
.planning/phases/31-mobile-polish/31-DISCUSSION-LOG.md
Normal file
53
.planning/phases/31-mobile-polish/31-DISCUSSION-LOG.md
Normal 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
|
||||||
Reference in New Issue
Block a user