69 lines
2.0 KiB
Markdown
69 lines
2.0 KiB
Markdown
# 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.tsx` with search input
|
|
- `src/components/SearchResults.tsx` with results display
|
|
- `src/components/SearchHistory.tsx` with history list
|
|
|
|
steps:
|
|
- Create `src/components/SearchBar.tsx`:
|
|
- Search input field using `<input>` component
|
|
- Search button
|
|
- Clear button
|
|
- Enter key handler
|
|
- Loading state
|
|
- 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
|