PodTui/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md

07. Implement Enter/Escape Layer Navigation Controls

meta: id: podtui-navigation-theming-improvements-07 feature: podtui-navigation-theming-improvements priority: P2 depends_on: [podtui-navigation-theming-improvements-05] tags: [implementation, navigation, keyboard]

objective:

• Implement key to go down into a layer
• Implement key to go up one layer
• Update layer navigation to support entering/exiting layers

deliverables:

• Updated layer navigation logic for enter/escape
• Updated Navigation component to show enter/escape hints
• Updated App.tsx keyboard handlers

steps:

• Update Navigation component to show enter/escape navigation hints
• Add key handler in App.tsx useAppKeyboard hook
• Add key handler in App.tsx useAppKeyboard hook
• Update layerDepth signal to track current layer (0 = top level)
• Implement logic for entering a layer (increase layerDepth)
• Implement logic for exiting a layer (decrease layerDepth)
• Add visual feedback when entering/exiting layers
• Update all page components to handle layerDepth prop
• Test enter to go down, escape to go up
• Ensure proper layer nesting behavior

tests:

• Unit: Test keyboard handler with mocked key events
• Integration: Test enter/escape navigation between layers

acceptance_criteria:

• key goes down into a layer
• key goes up one layer
• Navigation hints show enter/escape directions
• Layer depth is properly tracked and managed
• Visual feedback shows current layer depth
• No keyboard conflicts with page-specific shortcuts
• Proper layer nesting behavior

validation:

• Run bun run start and test enter/escape navigation
• Verify layer depth is visually indicated
• Check that navigation hints are visible
• Test proper layer nesting behavior
• Verify no conflicts with page shortcuts

notes:

• Use references/keyboard/REFERENCE.md for proper keyboard handling patterns
• Consider terminal width limitations for layer hints
• Ensure consistent behavior across all pages
• Test with different layer depths
• Verify escape works at all layer depths