refactor: consolidate loading/error states and extract instance actions hook
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
This commit is contained in:
+50
@@ -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
|
||||
Reference in New Issue
Block a user