init

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

@@ -0,0 +1,55 @@
+# 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