---
id: S02
parent: M011
milestone: M011
provides:
  - TagList component available for any future tag-rendering sites
  - Collapse/expand animation pattern reusable for other accordion-style UI
requires:
  []
affects:
  []
key_files:
  - frontend/src/components/TagList.tsx
  - frontend/src/pages/TopicsBrowse.tsx
  - frontend/src/pages/CreatorDetail.tsx
  - frontend/src/pages/Home.tsx
  - frontend/src/pages/SearchResults.tsx
  - frontend/src/pages/SubTopicPage.tsx
  - frontend/src/App.css
key_decisions:
  - Used CSS grid-template-rows 0fr/1fr for smooth collapse/expand — no JS height measurement needed
  - Added pillClass prop to TagList to preserve existing pill--tag styling in Home.tsx
  - Kept single dot separator between video count and topic pills in CreatorDetail
patterns_established:
  - Shared TagList component as single source for tag rendering with overflow — all 5 tag sites now use it
  - CSS grid-template-rows 0fr/1fr pattern for animating variable-height content without JS
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M011/slices/S02/tasks/T01-SUMMARY.md
  - .gsd/milestones/M011/slices/S02/tasks/T02-SUMMARY.md
  - .gsd/milestones/M011/slices/S02/tasks/T03-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-31T08:36:24.689Z
blocker_discovered: false
---

# S02: Topics, Creator Stats & Card Polish

**Topics page loads collapsed with smooth CSS grid animation, creator stats use colored topic pills, tags capped at 4 with +N overflow via shared TagList component, empty subtopics show Coming soon badge.**

## What Happened

Three tasks delivered four UI improvements across the frontend.

**T01 — Topics collapse/expand animation.** Changed TopicsBrowse to initialize with an empty expanded set (all categories collapsed on load). Replaced the conditional render (`{isExpanded && ...}`) with an always-rendered wrapper using CSS `grid-template-rows: 0fr/1fr` animation. The wrapper transitions over 300ms, the inner div uses `overflow: hidden; min-height: 0` for smooth clipping. No JS measurement needed.

**T02 — Creator stats colored pills.** Replaced the run-on dot-separated topic stats in CreatorDetail with `badge badge--cat-{slug}` spans wrapped in a flex container. Reuses the `catSlug()` utility and existing badge color classes from the Topics page, so colors are consistent across the app.

**T03 — Shared TagList + empty subtopic handling.** Created `TagList.tsx` component with configurable `max` (default 4) and optional `pillClass` prop. Applied it across all 5 tag-rendering sites: Home (featured + recent cards), SearchResults, SubTopicPage, CreatorDetail. Added `pill--overflow` styling for the "+N more" badge. In TopicsBrowse, subtopics with `technique_count === 0` now render as non-clickable spans with a "Coming soon" pill instead of dead-end links. Added `topic-subtopic--empty` and `pill--coming-soon` CSS.

## Verification

TypeScript type check (`npx tsc --noEmit`) passes with zero errors. Production build (`npm run build`) succeeds — 51 modules transformed, built in 777ms. All key source artifacts confirmed: collapsed init in TopicsBrowse, grid-template-rows CSS rules, badge--cat classes in CreatorDetail, TagList component with overflow logic, Coming soon badge rendering for empty subtopics, TagList imported in all 4 consumer pages.

## Requirements Advanced

- R019 — Topics page initializes collapsed, expand/collapse uses smooth 300ms CSS grid animation
- R026 — Creator stats rendered as colored badge pills using catSlug-based classes
- R027 — TagList component caps visible tags at 4 with +N more overflow badge, applied across all 5 sites
- R028 — Empty subtopics render as non-clickable spans with Coming soon pill badge

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

T03 added a `pillClass` prop to TagList (not in plan) to preserve the existing `pill--tag` class used in Home.tsx. Minor additive change, no impact.

## Known Limitations

None.

## Follow-ups

None.

## Files Created/Modified

- `frontend/src/components/TagList.tsx` — New shared component — renders up to max tags with +N overflow pill
- `frontend/src/pages/TopicsBrowse.tsx` — Collapsed-by-default init, grid animation wrapper, empty subtopic Coming soon badge
- `frontend/src/pages/CreatorDetail.tsx` — Topic stats as colored badge pills in flex container, TagList for technique tags
- `frontend/src/pages/Home.tsx` — Replaced inline tag maps with TagList component (featured + recent cards)
- `frontend/src/pages/SearchResults.tsx` — Replaced inline tag map with TagList component
- `frontend/src/pages/SubTopicPage.tsx` — Replaced inline tag map with TagList component
- `frontend/src/App.css` — Added grid animation rules, topic-pills flex container, pill--overflow, pill--coming-soon, topic-subtopic--empty styles
