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
2.1 KiB
2.1 KiB
ADDED Requirements
Requirement: Touch-Optimized Session Cards
The system SHALL render session cards with touch-friendly layouts on mobile viewports.
Scenario: Session card touch targets
- GIVEN a session card displayed on mobile
- THEN all interactive elements have a minimum height of 44px
- AND action buttons have adequate spacing (minimum 8px between adjacent targets)
Scenario: Session card action menu
- GIVEN a session card on mobile
- WHEN the user taps the actions menu button
- THEN a sheet or dropdown appears with all available actions
- AND the actions include: Open, Terminal, Stop/Start, Restart, Delete
- AND tapping outside the menu closes it
Scenario: Primary action visibility
- GIVEN a running session card on mobile
- THEN the primary action (Open or Terminal) remains visible as a prominent button
- AND secondary actions are accessible through the actions menu
Requirement: Mobile Session Creation
The system SHALL provide a mobile-optimized session creation flow.
Scenario: Create session form on mobile
- GIVEN the create session form on a mobile viewport
- THEN all form fields stack vertically in a single column
- AND each field has a minimum height of 44px
- AND the form is scrollable if it exceeds the viewport height
Scenario: Session creation loading state
- GIVEN the user submits the create session form on mobile
- WHEN the request is in progress
- THEN a loading indicator is displayed
- AND the submit button is disabled to prevent double-submission
Requirement: Mobile Session List
The system SHALL display the session list optimized for mobile scrolling.
Scenario: Session list scrolling
- GIVEN multiple sessions on mobile
- THEN the session list is vertically scrollable
- AND each session card has adequate vertical spacing for touch selection
- AND the list does not horizontally scroll
Scenario: Empty state on mobile
- GIVEN no active sessions on mobile
- THEN the empty state is centered and readable on the viewport
- AND the call-to-action button is prominent and tappable