67 lines
1.7 KiB
Markdown
67 lines
1.7 KiB
Markdown
# 35. Add Search Results Display
|
|
|
|
meta:
|
|
id: podcast-tui-app-35
|
|
feature: podcast-tui-app
|
|
priority: P1
|
|
depends_on: [34]
|
|
tags: [search-results, display, solidjs, opentui]
|
|
|
|
objective:
|
|
- Display search results with rich information
|
|
- Show podcast/episode details
|
|
- Add to feed functionality
|
|
- Keyboard navigation through results
|
|
|
|
deliverables:
|
|
- `src/components/SearchResults.tsx` with results display
|
|
- `src/components/ResultCard.tsx` with individual result
|
|
- `src/components/ResultDetail.tsx` with detailed view
|
|
|
|
steps:
|
|
- Create `src/components/ResultCard.tsx`:
|
|
- Display result title
|
|
- Display source information
|
|
- Display description/snippet
|
|
- Add to feed button
|
|
- Click to view details
|
|
- Create `src/components/ResultDetail.tsx`:
|
|
- Full result details
|
|
- Podcast/episode information
|
|
- Episode list (if podcast)
|
|
- Subscribe button
|
|
- Close button
|
|
- Create `src/components/SearchResults.tsx`:
|
|
- Scrollable results list
|
|
- Empty state display
|
|
- Loading state display
|
|
- Error state display
|
|
- Keyboard navigation
|
|
|
|
tests:
|
|
- Unit: Test ResultCard displays correctly
|
|
- Unit: Test ResultDetail displays correctly
|
|
- Unit: Test search results list
|
|
- Integration: Test add to feed
|
|
|
|
acceptance_criteria:
|
|
- Search results display with all information
|
|
- Result cards show source and details
|
|
- Add to feed button works
|
|
- Keyboard navigation works
|
|
|
|
validation:
|
|
- Run application and perform search
|
|
- Verify results display correctly
|
|
- Click result to view details
|
|
- Test add to feed
|
|
- Test keyboard navigation
|
|
|
|
notes:
|
|
- Use SolidJS `createSignal` for result selection
|
|
- Display result type (podcast/episode)
|
|
- Show source name and type
|
|
- Add loading state during search
|
|
- Handle empty results
|
|
- Add pagination for large result sets
|