2.0 KiB
2.0 KiB
33. Create Search Interface
meta: id: podcast-tui-app-33 feature: podcast-tui-app priority: P1 depends_on: [32] tags: [search-interface, input, solidjs, opentui]
objective:
- Create search input component
- Implement search functionality
- Display search results
- Handle search state
deliverables:
src/components/SearchBar.tsxwith search inputsrc/components/SearchResults.tsxwith results displaysrc/components/SearchHistory.tsxwith history list
steps:
- Create
src/components/SearchBar.tsx:- Search input field using
<input>component - Search button
- Clear button
- Enter key handler
- Loading state
- Search input field using
- Create
src/utils/search.ts:searchPodcasts(query: string, sourceIds: string[]): Promise<Podcast[]>searchEpisodes(query: string, feedId: string): Promise<Episode[]>- Handle multiple sources
- Cache search results
- Create
src/components/SearchResults.tsx:- Display search results with source indicators
- Show podcast/episode info
- Add to feed button
- Keyboard navigation through results
- Create
src/components/SearchHistory.tsx:- Display recent search queries
- Click to re-run search
- Delete individual history items
- Persist to localStorage
tests:
- Unit: Test search logic returns correct results
- Unit: Test search history persistence
- Integration: Test search bar accepts input
- Integration: Test results display correctly
acceptance_criteria:
- Search bar accepts and processes queries
- Search results display with source information
- Search history persists across sessions
- Keyboard navigation works in results
validation:
- Run application and navigate to "Search"
- Type a query and press Enter
- Verify results appear
- Click a result to add to feed
- Restart app and verify history persists
notes:
- Use localStorage for search history
- Implement basic caching to avoid repeated searches
- Handle empty results gracefully
- Add loading state during search
- Search both podcasts and episodes