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.5 KiB
1.5 KiB
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