feat: implement mobile app usability improvements

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
This commit is contained in:
Fusion
2026-05-25 11:20:25 +02:00
parent 8fb4b67372
commit adaedb70ef
18 changed files with 1239 additions and 152 deletions
@@ -0,0 +1,50 @@
## 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