2.0 KiB
2.0 KiB
06. Implement Left/Right Layer Navigation Controls
meta: id: podtui-navigation-theming-improvements-06 feature: podtui-navigation-theming-improvements priority: P1 depends_on: [podtui-navigation-theming-improvements-05] tags: [implementation, navigation, keyboard]
objective:
- Enhance left/right arrow key navigation between layers
- Add visual feedback when navigating layers
- Prevent invalid layer transitions (can't go left from layer 0)
- Add navigation hints in Navigation component
deliverables:
- Enhanced keyboard handler with layer navigation
- Updated Navigation component with layer hints
- Visual feedback for layer navigation
- Layer boundary prevention logic
steps:
- Update useAppKeyboard hook to handle left/right for layer navigation
- Add layer navigation visual feedback
- Prevent invalid layer transitions (can't go left from layer 0, can't go right beyond max)
- Update Navigation component to show layer navigation hints
- Add visual indicators for current layer position
- Test navigation between layers
- Ensure keyboard shortcuts don't conflict with page-specific shortcuts
tests:
- Unit: Test keyboard handler with mocked key events
- Integration: Test left/right navigation between layers
acceptance_criteria:
- key navigates to previous layer (prevents going below layer 0)
- key navigates to next layer (prevents exceeding max depth)
- Current layer is visually indicated
- Navigation hints are shown in Navigation component
- No keyboard conflicts with page-specific shortcuts
- Navigation works correctly at layer boundaries
validation:
- Run
bun run startand test left/right navigation - Verify current layer is highlighted
- Check that navigation hints are visible
- Test at layer boundaries (first/last layer)
- Verify no conflicts with page shortcuts
notes:
- Use existing useAppKeyboard hook as base
- Consider max layer depth (3-4 levels)
- Ensure smooth visual transitions
- Consider adding sound effects for navigation