---
estimated_steps: 15
estimated_files: 2
skills_used: []
---

# T02: Add popular topic quick-links fetched from topics API

Add a popular topics section to the homepage that fetches topic data from the existing fetchTopics API, sorts sub-topics by technique_count, and renders the top 8-10 as clickable pill/chip links. Each pill navigates to the search page scoped to that topic.

Steps:
1. Read current `frontend/src/pages/Home.tsx` (will include T01 changes) and `frontend/src/api/public-client.ts` (for TopicCategory/TopicSubTopic interfaces and fetchTopics function)
2. In Home.tsx, import `fetchTopics` and `TopicCategory` from public-client.ts
3. Add state: `const [popularTopics, setPopularTopics] = useState<{name: string; count: number}[]>([])`
4. Add useEffect that calls fetchTopics(), flattens all sub_topics across categories, sorts by technique_count descending, takes top 8, maps to {name, count}
5. Render a `<section className="home-popular-topics">` between the CTA and the search bar (or between search bar and nav-cards). Show heading "Popular Topics" and render each topic as `<Link to={`/search?q=${encodeURIComponent(topic.name)}&scope=topics`} className="pill pill--topic-quick">{topic.name}</Link>`
6. If popularTopics is empty (no data or API error), render nothing — no section, no error message
7. In App.css, add styles for `.home-popular-topics` (centered, flex-wrap gap layout) and `.pill--topic-quick` (reuse existing pill styling with minor adjustments for interactive hover state using --color-accent)
8. Add mobile responsive adjustments if needed
9. Run `cd frontend && npm run build` to verify zero errors

Constraints:
- Catch fetchTopics errors silently — no user-facing error for this optional section
- Reuse existing pill/badge CSS patterns (`.pill--tag` exists already)
- Topic pills should visually complement but not compete with the search bar

## Inputs

- `frontend/src/pages/Home.tsx`
- `frontend/src/App.css`
- `frontend/src/api/public-client.ts`

## Expected Output

- `frontend/src/pages/Home.tsx`
- `frontend/src/App.css`

## Verification

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