Files
headquarter/openspec/changes/mobile-pages-overhaul/tasks.md
T
Alex Blank e8d5b16acc feat: mobile tool workshop with list-detail pattern
- Add mobile viewport detection to ToolWorkshopPage
- Implement mobile list view with MobileListView component
- Implement mobile detail view with MobileDetailView component
- Implement mobile edit view with MobileEditView component
- Add MobileFAB for creating new tool types
- Fix IconName type issues in mobile components
- TypeScript check passes, build succeeds
2026-05-25 12:18:24 +02:00

2.0 KiB

1. Mobile Navigation Updates

  • 1.1 Add "Tools" grouped item to MobileNav component with bottom sheet
  • 1.2 Create ToolsBottomSheet component for Tool Workshop / Config Profiles selection
  • 1.3 Update AppShell desktop nav to keep Tool Workshop and Config Profiles separate
  • 1.4 Add active state logic for grouped nav items

2. Mobile List-Detail Components

  • 2.1 Create MobileListView component for displaying item cards
  • 2.2 Create MobileDetailView component for read-only detail display
  • 2.3 Create MobileEditView component for full-screen editing
  • 2.4 Add swipe-to-delete and action sheet to MobileListView
  • 2.5 Create FAB (Floating Action Button) component for creating items

3. Mobile Tool Workshop

  • 3.1 Add mobile list view for tool types
  • 3.2 Add mobile detail view for tool types (read-only)
  • 3.3 Add mobile edit view for tool types
  • 3.4 Add mobile create view for tool types
  • 3.5 Implement list→detail navigation in ToolWorkshopPage

4. Mobile Config Profiles

  • 4.1 Add mobile list view for config profiles
  • 4.2 Add mobile detail view for config profiles (read-only)
  • 4.3 Add mobile edit view for config profiles
  • 4.4 Add mobile create view for config profiles
  • 4.5 Implement list→detail navigation in ConfigProfilesPage

5. Mobile Repo Workspace

  • 5.1 Create MobileFileTree component with folder expansion
  • 5.2 Create MobileEditorView component for full-screen editing
  • 5.3 Create MobileGitView component for git operations
  • 5.4 Create MobileTerminalView component for terminal access
  • 5.5 Add bottom tab navigation to RepoWorkspace (Tree, Editor, Git, Terminal)
  • 5.6 Implement repository and branch selectors for mobile

6. Testing & Polish

  • 6.1 Test mobile navigation on iPhone SE (320px)
  • 6.2 Test mobile navigation on iPhone standard (375px)
  • 6.3 Verify desktop layouts remain unchanged
  • 6.4 Run npm run typecheck
  • 6.5 Run npm run lint
  • 6.6 Run npm run build
  • 6.7 Test swipe gestures and touch targets