64 lines
2.0 KiB
Markdown
64 lines
2.0 KiB
Markdown
# 06. Build Feed List Component (Public/Private Feeds)
|
|
|
|
meta:
|
|
id: podcast-tui-app-06
|
|
feature: podcast-tui-app
|
|
priority: P0
|
|
depends_on: [05]
|
|
tags: [feed-list, components, solidjs, opentui]
|
|
|
|
objective:
|
|
- Create a scrollable feed list component
|
|
- Display public and private feeds
|
|
- Implement feed selection and display
|
|
- Add reverse chronological ordering
|
|
|
|
deliverables:
|
|
- `src/components/FeedList.tsx` with feed list component
|
|
- `src/components/FeedItem.tsx` with individual feed item
|
|
- `src/components/FeedFilter.tsx` with public/private toggle
|
|
|
|
steps:
|
|
- Create `src/components/FeedList.tsx`:
|
|
- Use `<scrollbox>` for scrollable list
|
|
- Accept feeds array as prop
|
|
- Implement feed rendering with `createSignal` for selection
|
|
- Add keyboard navigation (arrow keys, enter)
|
|
- Display feed title, description, episode count
|
|
- Create `src/components/FeedItem.tsx`:
|
|
- Display feed information
|
|
- Show public/private indicator
|
|
- Highlight selected feed
|
|
- Add hover effects
|
|
- Create `src/components/FeedFilter.tsx`:
|
|
- Toggle button for public/private feeds
|
|
- Filter logic implementation
|
|
- Update parent FeedList when filtered
|
|
- Add feed list to "My Feeds" navigation tab
|
|
|
|
tests:
|
|
- Unit: Test FeedList renders with feeds
|
|
- Unit: Test FeedItem displays correctly
|
|
- Integration: Test public/private filtering
|
|
- Integration: Test keyboard navigation in feed list
|
|
|
|
acceptance_criteria:
|
|
- Feed list displays all feeds correctly
|
|
- Public/private toggle filters feeds
|
|
- Feed selection is visually indicated
|
|
- Keyboard navigation works (arrow keys, enter)
|
|
- List scrolls properly when many feeds
|
|
|
|
validation:
|
|
- Run application and navigate to "My Feeds"
|
|
- Add some feeds and verify they appear
|
|
- Test public/private toggle
|
|
- Use arrow keys to navigate feeds
|
|
- Scroll list with many feeds
|
|
|
|
notes:
|
|
- Use SolidJS `createSignal` for selection state
|
|
- Follow OpenTUI component patterns from `components/REFERENCE.md`
|
|
- Feed list should be scrollable with many items
|
|
- Use Flexbox for layout
|