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
30 lines
1.3 KiB
Markdown
30 lines
1.3 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Mobile Session Interactions
|
|
The system SHALL provide touch-optimized interactions for session management on mobile.
|
|
|
|
#### Scenario: Session card actions on mobile
|
|
- **GIVEN** a session card displayed on mobile
|
|
- **WHEN** the user wants to perform an action
|
|
- **THEN** primary actions (Open/Terminal) are visible as prominent buttons
|
|
- **AND** secondary actions (Stop, Restart, Delete) are accessible through an action menu
|
|
- **AND** all action buttons have minimum 44px touch targets
|
|
|
|
#### Scenario: Session stop confirmation on mobile
|
|
- **GIVEN** the user taps Stop on a running session
|
|
- **THEN** a confirmation dialog appears optimized for mobile viewport
|
|
- **AND** the dialog fits within 320px width
|
|
- **AND** the dialog actions are stacked vertically with full-width buttons
|
|
|
|
#### Scenario: Session creation on mobile
|
|
- **GIVEN** the user initiates session creation on mobile
|
|
- **THEN** the creation form stacks vertically
|
|
- **AND** all fields have minimum 44px height
|
|
- **AND** the form is scrollable within the viewport
|
|
|
|
#### Scenario: Loading states on mobile
|
|
- **GIVEN** an async session operation on mobile
|
|
- **WHEN** the operation is in progress
|
|
- **THEN** a loading indicator is displayed
|
|
- **AND** interactive elements are disabled to prevent double-submission
|