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:
+34
@@ -0,0 +1,34 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Mobile Bottom Navigation
|
||||
The system SHALL display a bottom tab bar for navigation on mobile viewports (width < 768px).
|
||||
|
||||
#### Scenario: Mobile viewport shows bottom nav
|
||||
- **WHEN** the app is viewed on a device with width less than 768px
|
||||
- **THEN** a bottom tab bar is displayed at the bottom of the screen
|
||||
- **AND** it contains tabs for: Home, Projects, Sessions, Tools, Settings
|
||||
- **AND** the desktop sidebar navigation is hidden
|
||||
|
||||
#### Scenario: Bottom nav tab selection
|
||||
- **WHEN** user taps a tab in the bottom navigation
|
||||
- **THEN** the app navigates to the corresponding route
|
||||
- **AND** the selected tab shows an active state
|
||||
|
||||
#### Scenario: Bottom nav session badge
|
||||
- **GIVEN** the user has active sessions
|
||||
- **WHEN** viewing the bottom navigation
|
||||
- **THEN** the Sessions tab displays a badge with the active session count
|
||||
|
||||
#### Scenario: Desktop viewport shows sidebar
|
||||
- **WHEN** the app is viewed on a device with width 768px or greater
|
||||
- **THEN** the desktop sidebar navigation is displayed
|
||||
- **AND** the bottom tab bar is hidden
|
||||
|
||||
### Requirement: Safe Area Support
|
||||
The system SHALL account for mobile safe areas (notch, home indicator) in the bottom navigation.
|
||||
|
||||
#### Scenario: iPhone with home indicator
|
||||
- **GIVEN** an iPhone with a home indicator
|
||||
- **WHEN** the bottom navigation is displayed
|
||||
- **THEN** it includes additional padding to avoid the home indicator
|
||||
- **AND** all navigation tabs remain fully tappable
|
||||
Reference in New Issue
Block a user