Fusion
adaedb70ef
Mobile Navigation: - Add MobileNav component with bottom tab bar - Show mobile nav on small screens, hide desktop sidebar - Add session count badge to Sessions tab - Add safe area padding for notched devices Session Management: - Redesign SessionCard for mobile with action menu - Add MobileActionSheet for session actions - Keep primary action prominent Forms & Dialogs: - Stack form fields vertically on mobile - Ensure 44px minimum touch targets - Update dialogs for 320px viewport Responsive Layout: - Add MobilePageHeader with back button - Reduce page padding on mobile - Stack multi-column grids vertically Touch & Interaction: - Add active states to interactive elements - Ensure 8px spacing between touch targets Complex Pages: - Update Repo Workspace for mobile - Update Tool Workshop and Config Profiles Build: TypeScript check passes, production build succeeds
1.5 KiB
1.5 KiB
MODIFIED Requirements
Requirement: Layout Component
The system SHALL provide a consistent application layout for authenticated screens across desktop and mobile sizes.
Scenario: Application shell
- GIVEN the frontend application
- THEN a Layout component SHALL:
- Display a header with user info and logout
- Display sidebar navigation on desktop (width >= 768px)
- Show main content area
- Collapse sidebar into a mobile menu toggle on small viewports
- MODIFIED: Display a bottom tab bar on mobile (width < 768px) with tabs for Home, Projects, Sessions, Tools, Settings
- MODIFIED: Hide sidebar navigation on mobile viewports
Scenario: Navigation links
- GIVEN the sidebar navigation
- THEN it SHALL include links to:
- Dashboard
- Projects
- Repositories
- SSH Keys
- Settings
- MODIFIED: The bottom tab bar SHALL include tabs for:
- Home (Dashboard)
- Projects
- Sessions
- Tools (Tool Workshop)
- Settings
Requirement: Responsive Design
The system SHALL support mobile devices.
Scenario: Mobile viewport
- GIVEN a mobile device
- WHEN the app loads
- THEN:
- MODIFIED: A bottom tab bar is displayed for primary navigation
- Content adapts to screen width
- Touch targets are appropriately sized (minimum 44px)
- ADDED: All multi-column layouts stack vertically
- ADDED: Dialogs fit within the viewport and are scrollable
- ADDED: Page headers include back buttons where applicable