PodTui/tasks/podcast-tui-app/36-search-history.md

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