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.4 KiB
1.4 KiB
ADDED Requirements
Requirement: Mobile Bottom Navigation
The system SHALL display a bottom tab bar for navigation on mobile viewports (width < 768px).
Scenario: Mobile viewport shows bottom nav
- WHEN the app is viewed on a device with width less than 768px
- THEN a bottom tab bar is displayed at the bottom of the screen
- AND it contains tabs for: Home, Projects, Sessions, Tools, Settings
- AND the desktop sidebar navigation is hidden
Scenario: Bottom nav tab selection
- WHEN user taps a tab in the bottom navigation
- THEN the app navigates to the corresponding route
- AND the selected tab shows an active state
Scenario: Bottom nav session badge
- GIVEN the user has active sessions
- WHEN viewing the bottom navigation
- THEN the Sessions tab displays a badge with the active session count
Scenario: Desktop viewport shows sidebar
- WHEN the app is viewed on a device with width 768px or greater
- THEN the desktop sidebar navigation is displayed
- AND the bottom tab bar is hidden
Requirement: Safe Area Support
The system SHALL account for mobile safe areas (notch, home indicator) in the bottom navigation.
Scenario: iPhone with home indicator
- GIVEN an iPhone with a home indicator
- WHEN the bottom navigation is displayed
- THEN it includes additional padding to avoid the home indicator
- AND all navigation tabs remain fully tappable