feat: implement mobile terminal UX
- Add mobile viewport detection hook - Add virtual keyboard detection with fallback - Add auto-hide hook for header/keys strip - Add special keys mapping hook - Create MobileTerminalHeader, SpecialKeysStrip, SpecialKeysPanel components - Create MobileTerminalWrapper component - Update TerminalComponent with mobile support, font scaling, copy/paste, reconnection - Update AppShell to hide chrome on mobile terminal pages - Update TerminalPage to use MobileTerminalWrapper - Add comprehensive mobile terminal styles - TypeScript check passes - Build succeeds
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
## 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
|
||||
- Show main content area
|
||||
- Collapse sidebar into a mobile menu toggle on small viewports
|
||||
- **AND** on mobile terminal pages, provide a minimal collapsible header instead of the full AppShell
|
||||
|
||||
#### Scenario: Terminal page mobile layout
|
||||
- **GIVEN** a user on a terminal page on a mobile device
|
||||
- **WHEN** the page loads
|
||||
- **THEN** the full AppShell is replaced with a minimal header
|
||||
- **AND** the header contains: back button, menu toggle, instance name, close button
|
||||
- **AND** the header auto-hides after 3 seconds of inactivity
|
||||
- **AND** tapping the terminal area toggles header visibility
|
||||
- **AND** the sidebar navigation is accessible via the menu toggle
|
||||
Reference in New Issue
Block a user