Fusion
b6bda3d692
- 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
58 lines
2.8 KiB
Markdown
58 lines
2.8 KiB
Markdown
## 1. Mobile Detection and Hooks
|
|
|
|
- [x] 1.1 Create `useMobileViewport` hook for detecting mobile viewport (< 768px)
|
|
- [x] 1.2 Create `useVirtualKeyboard` hook using Visual Viewport API with fallback
|
|
- [x] 1.3 Create `useAutoHide` hook for managing auto-hide visibility with tap/swipe detection
|
|
- [x] 1.4 Create `useSpecialKeys` hook for mapping special keys to escape sequences
|
|
|
|
## 2. Mobile Terminal Components
|
|
|
|
- [x] 2.1 Create `MobileTerminalHeader` component with back button, menu toggle, instance name, close button
|
|
- [x] 2.2 Create `SpecialKeysStrip` component with primary keys (Esc, Tab, Ctrl, Alt, Arrows)
|
|
- [x] 2.3 Create `SpecialKeysPanel` expanded component with Home/End/PgUp/PgDn/Ctrl combos/F-keys
|
|
- [x] 2.4 Create `MobileTerminalWrapper` component that composes header, terminal, and keys strip
|
|
- [x] 2.5 Add hidden input element for maintaining virtual keyboard focus
|
|
|
|
## 3. Terminal Component Modifications
|
|
|
|
- [x] 3.1 Update `TerminalComponent` to accept mobile mode prop and adjust font size
|
|
- [x] 3.2 Add dynamic font scaling based on viewport width (16px min, 24px max)
|
|
- [x] 3.3 Add localStorage persistence for font size preference
|
|
- [x] 3.4 Implement debounced resize handler (250ms) for orientation changes
|
|
- [x] 3.5 Add touch-action: none and disable browser zoom on mobile
|
|
- [x] 3.6 Add copy/paste buttons to terminal header for mobile
|
|
|
|
## 4. AppShell and Page Integration
|
|
|
|
- [x] 4.1 Update `AppShell` to detect terminal routes and render minimal header on mobile
|
|
- [x] 4.2 Update `TerminalPage` to use `MobileTerminalWrapper` when on mobile viewport
|
|
- [x] 4.3 Add CSS transitions for header show/hide animations
|
|
- [x] 4.4 Ensure desktop terminal experience is unchanged
|
|
|
|
## 5. WebSocket and Reconnection
|
|
|
|
- [x] 5.1 Implement WebSocket reconnection with exponential backoff (max 3 attempts)
|
|
- [x] 5.2 Add "Reconnecting..." status indicator in terminal header
|
|
- [x] 5.3 Add manual reconnect button on connection failure
|
|
- [x] 5.4 Use Visibility API to reconnect when app returns from background
|
|
|
|
## 6. Styling
|
|
|
|
- [x] 6.1 Add mobile terminal CSS variables and layout styles
|
|
- [x] 6.2 Style special keys strip with touch-friendly targets (min 44px height)
|
|
- [x] 6.3 Style expanded keys panel as bottom sheet
|
|
- [x] 6.4 Add dark theme support for mobile terminal chrome
|
|
- [x] 6.5 Ensure proper z-index layering (terminal content above keys strip above keyboard)
|
|
|
|
## 7. Testing and Verification
|
|
|
|
- [x] 7.1 Run `npm run typecheck` and fix errors
|
|
- [x] 7.2 Run `npm run lint` and fix warnings
|
|
- [x] 7.3 Run `npm run build` successfully
|
|
- [ ] 7.4 Test on actual mobile device (iOS Safari)
|
|
- [ ] 7.5 Test on actual mobile device (Android Chrome)
|
|
- [x] 7.6 Verify desktop terminal is unchanged
|
|
- [ ] 7.7 Test screen rotation handling
|
|
- [ ] 7.8 Test virtual keyboard appearance/disappearance
|
|
- [ ] 7.9 Verify copy/paste functionality
|