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

# T02: Redesign TopicsBrowse.tsx to card grid layout with updated CSS

Rewrite `TopicsBrowse.tsx` from the current vertical accordion list to a responsive card grid layout, and replace the topics CSS section in `App.css` with card-based styles.

The card layout should:
- Use CSS grid: 2 columns on desktop (min-width > 768px), 1 column on mobile
- Each category card is a bordered surface with: category name (h3, prominent), description text, summary stats line showing sub-topic count and total technique count, expand/collapse button
- Expanded state reveals sub-topics inside the card as a list of links to `/search?q={name}&scope=topics` with technique and creator counts
- Filter input stays at the top, filtering which cards are visible
- All existing functionality preserved: expand/collapse toggle, filter matching on category name + sub-topic names, sub-topic → search navigation

The technique count per category should be computed client-side by summing `sub_topics.map(st => st.technique_count)`. The `TopicCategory` type already has `description` and `sub_topics` with counts — no API changes needed.

CSS changes:
- Replace `.topics-list` flex-column with CSS grid `grid-template-columns: repeat(2, 1fr)` + gap
- Restyle `.topic-category` as a card with padding, border-radius, subtle shadow
- Add `.topic-category__stats` for the summary stats line
- Keep `.topic-subtopics` and `.topic-subtopic` styles but adjust padding for card context
- Update `@media (max-width: 640px)` responsive rules for single-column grid
- Use category badge colors on the card (subtle left border or header accent) to create visual differentiation between categories

The badge class for each category follows the pattern: `badge--cat-${name.toLowerCase().replace(/\s+/g, '-')}`. The corresponding CSS custom properties are `--color-badge-cat-{slug}-bg` and `--color-badge-cat-{slug}-text`. All 7 categories (sound-design, mixing, synthesis, arrangement, workflow, mastering, music-theory) have these defined in `:root`.

## Inputs

- ``frontend/src/pages/TopicsBrowse.tsx` — current accordion-based component (147 lines)`
- ``frontend/src/App.css` — current topics CSS (lines ~1842-1986, ~2032-2043 responsive), plus T01's badge additions`
- ``frontend/src/api/public-client.ts` — `TopicCategory` / `TopicSubTopic` types (unchanged, read-only reference)`

## Expected Output

- ``frontend/src/pages/TopicsBrowse.tsx` — rewritten with card grid layout, summary stats, category color accents`
- ``frontend/src/App.css` — topics CSS section replaced with card grid styles and updated responsive rules`

## Verification

cd frontend && npm run build 2>&1 | tail -5 && echo 'PASS: frontend builds' && ssh ub01 'curl -s http://localhost:8096/topics | grep -c "topic-category"' | grep -q '[0-9]' && echo 'PASS: topics page serves HTML'
