PodTui/tasks/podcast-tui-app/02-core-layout.md

02. Create Main App Shell with Tab Navigation

meta: id: podcast-tui-app-02 feature: podcast-tui-app priority: P0 depends_on: [01] tags: [layout, navigation, solidjs, opentui]

objective:

• Create the main application shell with a responsive layout
• Implement tab-based navigation system
• Set up the root component structure
• Configure Flexbox layout for terminal UI

deliverables:

• src/App.tsx with main app shell
• src/components/Navigation.tsx with tab navigation
• src/components/Layout.tsx with responsive layout
• Tab navigation component with 5 tabs: Discover, My Feeds, Search, Player, Settings

steps:

• Create src/App.tsx with main component that renders Navigation
• Create src/components/Navigation.tsx with tab navigation
  • Use <box> with <scrollbox> for navigation
  • Implement tab selection state with createSignal
  • Add keyboard navigation (arrow keys)
  • Add tab labels: "Discover", "My Feeds", "Search", "Player", "Settings"
• Create src/components/Layout.tsx with responsive layout
  • Use Flexbox with flexDirection="column"
  • Create top navigation bar
  • Create main content area
  • Handle terminal resizing
• Update src/index.tsx to render the app

tests:

• Unit: Test Navigation component renders with correct tabs
• Integration: Test keyboard navigation moves between tabs
• Component: Verify layout adapts to terminal size changes

acceptance_criteria:

• Navigation component displays 5 tabs correctly
• Tab selection is visually indicated
• Arrow keys navigate between tabs
• Layout fits within terminal bounds

validation:

• Run application and verify navigation appears
• Press arrow keys to test navigation
• Resize terminal and verify layout adapts

notes:

• Use SolidJS createSignal for state management
• Follow OpenTUI layout patterns from layout/REFERENCE.md
• Navigation should be persistent across all screens