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
1.3 KiB
1.3 KiB
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