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
44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
## 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
|