Fusion
65 lines
2.6 KiB
Markdown
65 lines
2.6 KiB
Markdown
## 1. Mobile Navigation
|
|
|
|
- [x] 1.1 Create MobileNav component with bottom tab bar
|
|
- [x] 1.2 Add mobile breakpoint detection to AppShell
|
|
- [x] 1.3 Implement tab bar with Home, Projects, Sessions, Tools, Settings tabs
|
|
- [x] 1.4 Add session count badge to Sessions tab
|
|
- [x] 1.5 Add safe area padding for notched devices
|
|
- [x] 1.6 Hide desktop sidebar on mobile, show bottom nav
|
|
- [x] 1.7 Ensure tab bar stays visible during page transitions
|
|
|
|
## 2. Session Management Mobile Layout
|
|
|
|
- [x] 2.1 Redesign SessionCard for mobile (touch targets, action menu)
|
|
- [x] 2.2 Create mobile action sheet/dropdown for session actions
|
|
- [x] 2.3 Ensure primary action (Open/Terminal) remains prominent
|
|
- [x] 2.4 Update Sessions page layout for mobile
|
|
- [x] 2.5 Update Dashboard session list for mobile
|
|
- [x] 2.6 Add loading states for async session operations
|
|
- [x] 2.7 Ensure session list scrolls smoothly on mobile
|
|
|
|
## 3. Forms & Dialogs
|
|
|
|
- [x] 3.1 Stack CreateSessionForm fields vertically on mobile
|
|
- [x] 3.2 Ensure all form inputs have min-height 44px
|
|
- [x] 3.3 Update all dialogs to fit within 320px viewport
|
|
- [x] 3.4 Make dialog content scrollable when needed
|
|
- [x] 3.5 Update confirmation dialogs with vertical button layout
|
|
- [x] 3.6 Audit all forms for mobile usability
|
|
|
|
## 4. Responsive Layout System
|
|
|
|
- [x] 4.1 Add mobile breakpoint utilities (max-width: 767px)
|
|
- [x] 4.2 Stack multi-column grids vertically on mobile
|
|
- [x] 4.3 Reduce page padding on mobile (16px or less)
|
|
- [x] 4.4 Ensure no horizontal scrolling on any page
|
|
- [x] 4.5 Add consistent mobile page headers with back buttons
|
|
- [x] 4.6 Implement back button navigation logic
|
|
|
|
## 5. Touch & Interaction
|
|
|
|
- [x] 5.1 Audit all buttons for 44px minimum touch target
|
|
- [x] 5.2 Add active states to all interactive elements
|
|
- [x] 5.3 Add loading indicators for async operations
|
|
- [x] 5.4 Ensure 8px minimum spacing between adjacent touch targets
|
|
- [x] 5.5 Test touch feedback on iOS Safari and Android Chrome
|
|
|
|
## 6. Complex Pages (Read-First Pattern)
|
|
|
|
- [x] 6.1 Update Repo Workspace for mobile (file tree primary view)
|
|
- [x] 6.2 Update Tool Workshop with mobile list view
|
|
- [x] 6.3 Update Config Profiles with mobile summary view
|
|
- [x] 6.4 Add "Edit" flow that opens full-screen on mobile
|
|
- [x] 6.5 Ensure complex forms are usable on mobile (or show desktop prompt)
|
|
|
|
## 7. Testing & Polish
|
|
|
|
- [x] 7.1 Test all pages at 320px width (iPhone SE)
|
|
- [x] 7.2 Test all pages at 375px width (iPhone standard)
|
|
- [x] 7.3 Test on actual iOS Safari device
|
|
- [x] 7.4 Test on actual Android Chrome device
|
|
- [x] 7.5 Verify no console errors on mobile
|
|
- [x] 7.6 Run npm run typecheck
|
|
- [x] 7.7 Run npm run lint
|
|
- [x] 7.8 Run npm run build
|