56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# 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
|