init

tasks/podcast-tui-app/33-search-interface.md

@@ -0,0 +1,66 @@
+# 32. Create Feed Detail View
+
+meta:
+  id: podcast-tui-app-32
+  feature: podcast-tui-app
+  priority: P1
+  depends_on: [31]
+  tags: [feed-detail, episodes, solidjs, opentui]
+
+objective:
+- Create feed detail view component
+- Display podcast information
+- List episodes in reverse chronological order
+- Provide episode playback controls
+
+deliverables:
+- `src/components/FeedDetail.tsx` with feed detail view
+- `src/components/EpisodeList.tsx` with episode list
+- `src/components/EpisodeItem.tsx` with individual episode
+
+steps:
+- Create `src/components/FeedDetail.tsx`:
+  - Podcast cover image
+  - Podcast title and description
+  - Episode count
+  - Subscribe/unsubscribe button
+  - Episode list container
+- Create `src/components/EpisodeList.tsx`:
+  - Scrollable episode list
+  - Display episode title, date, duration
+  - Playback status indicator
+  - Add keyboard navigation
+- Create `src/components/EpisodeItem.tsx`:
+  - Episode information
+  - Play button
+  - Mark as complete button
+  - Progress bar
+  - Hover effects
+- Add feed detail to "My Feeds" navigation tab
+
+tests:
+- Unit: Test FeedDetail displays correctly
+- Unit: Test EpisodeList rendering
+- Unit: Test EpisodeItem interaction
+- Integration: Test feed detail navigation
+
+acceptance_criteria:
+- Feed detail displays podcast info
+- Episode list shows all episodes
+- Episodes ordered reverse chronological
+- Play buttons work
+- Mark as complete works
+
+validation:
+- Run application and navigate to feed detail
+- View podcast information
+- Check episode order
+- Test play button
+- Test mark as complete
+
+notes:
+- Use SolidJS `createSignal` for episode selection
+- Display episode status (playing, completed, not started)
+- Show progress for completed episodes
+- Add episode filtering (all, completed, not completed)
+- Use Flexbox for layout