addyosmani / addyosmani/factory-demo
Add an accessible quick finder for loaded movies
- Lingua principale
- TypeScript
- Stelle
- 2
- Fork
- 3
- Merge medio
- 3m
- PR unite (30g)
- 1
Descrizione
## Why
Help people jump to a film in the current discovery page without introducing another TMDB endpoint or confusing the demo with a full catalog search.
## Product boundary
This is a **client-side quick finder**, not remote TMDB search. It filters only the trending and popular movies already loaded for the discovery page. Its label and helper copy must make that limit clear.
## Scope
- Add a quick-finder input near the discovery content.
- Combine the already loaded trending and popular summaries, deduplicate them by movie ID, and filter by title case-insensitively.
- Update matching results as the person types without a network request.
- Give results an accessible count/status, an intentional no-results state, and a clear action.
- Each match links to the existing movie detail route.
## Acceptance criteria
- Typing a partial title returns matching movies from the page’s existing payload, ignoring letter case.
- Duplicate movies from trending and popular appear once.
- Clearing the query restores the finder’s initial state.
- A no-match query shows an explicit no-results message rather than an empty unlabeled grid.
- The input has a persistent label and concise copy saying it searches movies on this page; result-count updates are announced without moving keyboard focus.
- Inspecting browser requests while filtering shows no additional TMDB or application data request.
- A new pure unit test covers case-insensitive matching, partial matches, deduplication, whitespace, and no matches. No existing test file is changed.
- `npm run typecheck`, `npm run lint`, `npm test`, and `TMDB_USE_MOCKS=true npm run build` pass.
- TMDB attribution remains visible and `TMDB_API_KEY` remains server-only.
## Guardrails
Keep this under 400 changed lines and within at most five files. Do not touch `.env*`, `lib/tmdb.ts`, `next.config.ts`, package files, GitHub workflows, or factory policy/adapters. Do not add a dependency or call a remote search endpoint.
## Expected files
`lib/filter-movies.ts`, `lib/filter-movies.test.ts` (new), `components/quick-finder.tsx`, `app/page.tsx`, `app/globals.css`
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Valutazione
Questa issue non è ancora stata valutata.