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
44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
## MODIFIED Requirements
|
|
|
|
### Requirement: Layout Component
|
|
The system SHALL provide a consistent application layout for authenticated screens across desktop and mobile sizes.
|
|
|
|
#### Scenario: Application shell
|
|
- **GIVEN** the frontend application
|
|
- **THEN** a Layout component SHALL:
|
|
- Display a header with user info and logout
|
|
- Display sidebar navigation on desktop (width >= 768px)
|
|
- Show main content area
|
|
- Collapse sidebar into a mobile menu toggle on small viewports
|
|
- **MODIFIED**: Display a bottom tab bar on mobile (width < 768px) with tabs for Home, Projects, Sessions, Tools, Settings
|
|
- **MODIFIED**: Hide sidebar navigation on mobile viewports
|
|
|
|
#### Scenario: Navigation links
|
|
- **GIVEN** the sidebar navigation
|
|
- **THEN** it SHALL include links to:
|
|
- Dashboard
|
|
- Projects
|
|
- Repositories
|
|
- SSH Keys
|
|
- Settings
|
|
- **MODIFIED**: The bottom tab bar SHALL include tabs for:
|
|
- Home (Dashboard)
|
|
- Projects
|
|
- Sessions
|
|
- Tools (Tool Workshop)
|
|
- Settings
|
|
|
|
### Requirement: Responsive Design
|
|
The system SHALL support mobile devices.
|
|
|
|
#### Scenario: Mobile viewport
|
|
- **GIVEN** a mobile device
|
|
- **WHEN** the app loads
|
|
- **THEN**:
|
|
- **MODIFIED**: A bottom tab bar is displayed for primary navigation
|
|
- Content adapts to screen width
|
|
- Touch targets are appropriately sized (minimum 44px)
|
|
- **ADDED**: All multi-column layouts stack vertically
|
|
- **ADDED**: Dialogs fit within the viewport and are scrollable
|
|
- **ADDED**: Page headers include back buttons where applicable
|