---
estimated_steps: 8
estimated_files: 5
skills_used: []
---

# T02: Extract SearchAutocomplete component with popular suggestions on focus

Extract the typeahead dropdown from Home.tsx into a shared `SearchAutocomplete` component. Add popular-suggestions-on-focus behavior (fetches from `/api/v1/search/suggestions` once on mount, shows when input is focused and empty). Wire the component into both Home.tsx and SearchResults.tsx.

Steps:
1. Add `fetchSuggestions` function to `frontend/src/api/public-client.ts` with types `SuggestionItem` and `SuggestionsResponse`.
2. Create `frontend/src/components/SearchAutocomplete.tsx` with props: `onSearch(query: string)`, `placeholder?: string`, `heroSize?: boolean`, `initialQuery?: string`, `autoFocus?: boolean`. Internal state: query, searchResults, popularSuggestions, showDropdown. Behavior: (a) fetch popular suggestions on mount via `fetchSuggestions`, (b) on focus with empty query show popular suggestions with a 'Popular' header, (c) on 2+ chars show debounced search results (existing pattern from Home.tsx), (d) Escape/outside-click closes dropdown, (e) Enter navigates via `onSearch` callback.
3. Refactor `Home.tsx` to use `<SearchAutocomplete heroSize onSearch={q => navigate('/search?q=' + encodeURIComponent(q))} autoFocus />` replacing the inline typeahead. Remove the extracted state/effects (query, suggestions, showDropdown, debounceRef, dropdownRef, handleInputChange, handleSubmit, handleKeyDown, and the dropdown JSX).
4. Refactor `SearchResults.tsx` to use `<SearchAutocomplete initialQuery={q} onSearch={q => navigate('/search?q=' + encodeURIComponent(q), { replace: true })} />` replacing the plain search form. Remove the localQuery state, debounceRef, handleInputChange, handleSubmit.
5. Add CSS for `.typeahead-suggestions-header` label and `.typeahead-suggestion` items (slightly different styling from search result items — simpler, just text + type badge) in `frontend/src/App.css`.
6. Run `npm run build` to verify zero TypeScript errors.

## Inputs

- ``frontend/src/pages/Home.tsx` — source of the inline typeahead to extract`
- ``frontend/src/pages/SearchResults.tsx` — needs SearchAutocomplete wired in`
- ``frontend/src/api/public-client.ts` — add fetchSuggestions client function`
- ``frontend/src/App.css` — existing typeahead CSS to extend`
- ``backend/routers/search.py` — suggestions endpoint contract (from T01)`

## Expected Output

- ``frontend/src/components/SearchAutocomplete.tsx` — new shared autocomplete component`
- ``frontend/src/api/public-client.ts` — fetchSuggestions function and types added`
- ``frontend/src/pages/Home.tsx` — refactored to use SearchAutocomplete`
- ``frontend/src/pages/SearchResults.tsx` — refactored to use SearchAutocomplete`
- ``frontend/src/App.css` — popular suggestions CSS added`

## Verification

cd frontend && npm run build
