Alex Blank
ab79080f0b
Frontend: - Create reusable DataStates components (LoadingState, ErrorState, EmptyState) - Refactor 12 pages to use shared state components instead of inline JSX - Extract useInstanceActions hook to eliminate session action duplication - Update dashboard and sessions pages to use shared hook OpenSpec: - Archive completed mobile-app-usability change (44/44 tasks) - Archive completed add-config-profiles change (15/15 tasks) Quality: 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
|