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

# T01: Refactor SearchAutocomplete variant prop and add nav search bar with Cmd+K

Refactor SearchAutocomplete from heroSize boolean to variant string prop ('hero' | 'inline' | 'nav'), add nav-variant CSS (compact sizing, hidden submit button, high z-index dropdown), add globalShortcut prop for Cmd+K/Ctrl+K focus, wire nav search into App.tsx conditionally on non-home routes, update existing callers in Home.tsx and SearchResults.tsx.

This task delivers R020 (Global Search in Navigation).

## Steps

1. In `SearchAutocomplete.tsx`: replace `heroSize?: boolean` with `variant?: 'hero' | 'inline' | 'nav'` (default `'inline'`). Update the className logic: `search-form--hero` when variant=hero, `search-form--inline` when variant=inline, `search-form--nav` when variant=nav. Same pattern for `search-input--*`.
2. When `variant === 'nav'`: hide the submit button (don't render `<button>` — Enter submits the form). Add `search-container--nav` class to the container div for positioning context.
3. Add `globalShortcut?: boolean` prop. When true, register a `useEffect` with a `keydown` listener for Cmd+K (metaKey) / Ctrl+K (ctrlKey) that calls `e.preventDefault()` and focuses `inputRef.current`. Clean up on unmount.
4. In `App.css`: add `.search-form--nav` styles (max-width: 16rem, compact padding), `.search-input--nav` (smaller font, reduced padding), `.search-container--nav .typeahead-dropdown` (z-index: 200 to overlay page content). Add a Cmd+K hint badge (`.search-nav__shortcut`) styled as a subtle kbd element inside the input area.
5. In `App.tsx`: import `useLocation` and `useNavigate` from react-router-dom, import `SearchAutocomplete`. Render `<SearchAutocomplete variant="nav" globalShortcut onSearch={...} placeholder="Search… ⌘K" />` between brand and right section, conditionally when `location.pathname !== '/'`.
6. Update `Home.tsx` caller: change `heroSize` to `variant="hero"`.
7. Update `SearchResults.tsx` caller: remove heroSize (already falsy, so `variant="inline"` default works, but be explicit: add `variant="inline"`).
8. Verify: `cd frontend && npm run build` succeeds. Visually confirm in browser at desktop width.

## Must-Haves

- [ ] SearchAutocomplete accepts variant prop ('hero' | 'inline' | 'nav')
- [ ] Nav variant: compact input, no submit button, high z-index dropdown
- [ ] Cmd+K / Ctrl+K focuses nav search input (globalShortcut prop)
- [ ] Nav search bar appears on all pages except homepage
- [ ] Existing callers (Home.tsx, SearchResults.tsx) updated and unbroken
- [ ] Build succeeds with zero errors

## Inputs

- ``frontend/src/components/SearchAutocomplete.tsx` — existing search component to refactor`
- ``frontend/src/App.tsx` — app shell to add nav search bar into`
- ``frontend/src/App.css` — global styles for nav search variant`
- ``frontend/src/pages/Home.tsx` — existing caller using heroSize prop`
- ``frontend/src/pages/SearchResults.tsx` — existing caller using default props`

## Expected Output

- ``frontend/src/components/SearchAutocomplete.tsx` — refactored with variant prop and globalShortcut behavior`
- ``frontend/src/App.tsx` — nav search bar rendered conditionally on non-home routes`
- ``frontend/src/App.css` — nav search variant styles added`
- ``frontend/src/pages/Home.tsx` — updated to use variant='hero'`
- ``frontend/src/pages/SearchResults.tsx` — updated to use variant='inline'`

## Verification

cd frontend && npm run build 2>&1 | tail -5
