---
id: S04
parent: M015
milestone: M015
provides:
  - Trending Searches homepage section consuming GET /api/v1/search/popular
requires:
  - slice: S01
    provides: GET /api/v1/search/popular endpoint
affects:
  []
key_files:
  - frontend/src/api/public-client.ts
  - frontend/src/pages/Home.tsx
  - frontend/src/App.css
key_decisions:
  - Placed trending section between stats scorecard and random technique button for visual flow
  - Used color-mix for accent border at 30% opacity on trending pills to match design system
patterns_established:
  - (none)
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M015/slices/S04/tasks/T01-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-04-03T04:38:38.405Z
blocker_discovered: false
---

# S04: Trending Searches Homepage Block

**Homepage now shows a Trending Searches section with clickable pill terms sourced from GET /api/v1/search/popular, hidden when no data.**

## What Happened

Added the Trending Searches homepage block by wiring the existing popular searches API (from S01) into the frontend. Three files changed: `public-client.ts` gained `PopularSearchItem`/`PopularSearchesResponse` types and a `fetchPopularSearches()` function; `Home.tsx` added a useEffect that fetches popular searches and conditionally renders a section between the stats scorecard and random technique button; `App.css` added `.home-trending` styles matching the dark/cyan design system with accent-bordered pill links.

Each trending term is a `<Link>` pill navigating to `/search?q={term}`. The section uses `card-stagger` animation for entrance consistency. The conditional `trending && trending.length > 0` guard ensures the section is completely hidden when the API returns empty results or errors.

Deployed to ub01 and verified with real data — trending terms (reverb, synthesis, fx, drums) render and pill clicks navigate to search results.

## Verification

All plan-specified checks passed:
1. `npx tsc --noEmit` — zero errors
2. `npm run build` — succeeds (940ms)
3. `fetchPopularSearches` exists in public-client.ts
4. `home-trending` class wired in Home.tsx
5. `home-trending` styles in App.css
6. `PopularSearchItem` and `PopularSearchesResponse` types present
7. Conditional render guard: `trending && trending.length > 0`
8. Link targets use `encodeURIComponent(item.query)`
9. Browser verification on ub01:8096 confirmed trending section visible with real terms and pill navigation works

## Requirements Advanced

- R035 — Frontend now displays popular search terms on the homepage, completing the display half of the requirement (backend logging+caching was S01)

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

Docker Compose service named chrysopedia-web not chrysopedia-web-8096 as in CLAUDE.md — pre-existing naming difference, not a slice issue.

## Known Limitations

None.

## Follow-ups

None.

## Files Created/Modified

- `frontend/src/api/public-client.ts` — Added PopularSearchItem/PopularSearchesResponse types and fetchPopularSearches() function
- `frontend/src/pages/Home.tsx` — Added trending searches state, useEffect fetch, and conditional Trending Searches section with pill links
- `frontend/src/App.css` — Added .home-trending section styles and .pill--trending variant
