---
id: T02
parent: S01
milestone: M009
provides: []
requires: []
affects: []
key_files: ["frontend/src/pages/Home.tsx", "frontend/src/App.css"]
key_decisions: ["Used uppercase secondary-text heading for Popular Topics to differentiate from primary content hierarchy"]
patterns_established: []
drill_down_paths: []
observability_surfaces: []
duration: ""
verification_result: "cd frontend && npm run build — zero errors, clean build (52KB CSS, 224KB JS gzipped in 748ms)"
completed_at: 2026-03-31T05:37:07.483Z
blocker_discovered: false
---

# T02: Added popular topics pill-link section to homepage that fetches from topics API, sorts sub-topics by technique_count, and renders top 8 as clickable pills

> Added popular topics pill-link section to homepage that fetches from topics API, sorts sub-topics by technique_count, and renders top 8 as clickable pills

## What Happened
---
id: T02
parent: S01
milestone: M009
key_files:
  - frontend/src/pages/Home.tsx
  - frontend/src/App.css
key_decisions:
  - Used uppercase secondary-text heading for Popular Topics to differentiate from primary content hierarchy
duration: ""
verification_result: passed
completed_at: 2026-03-31T05:37:07.484Z
blocker_discovered: false
---

# T02: Added popular topics pill-link section to homepage that fetches from topics API, sorts sub-topics by technique_count, and renders top 8 as clickable pills

**Added popular topics pill-link section to homepage that fetches from topics API, sorts sub-topics by technique_count, and renders top 8 as clickable pills**

## What Happened

Imported fetchTopics into Home.tsx, added useEffect that flattens all sub_topics across categories, sorts by technique_count descending, takes top 8. Renders as pill links to /search?q={topic}&scope=topics. Section hidden when no data or API error. CSS uses existing pill token system with bordered hover state transitioning to cyan accent.

## Verification

cd frontend && npm run build — zero errors, clean build (52KB CSS, 224KB JS gzipped in 748ms)

## Verification Evidence

| # | Command | Exit Code | Verdict | Duration |
|---|---------|-----------|---------|----------|
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 748ms |


## Deviations

Removed unused TopicCategory type import that caused TS6133

## Known Issues

None.

## Files Created/Modified

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


## Deviations
Removed unused TopicCategory type import that caused TS6133

## Known Issues
None.
