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

# T01: Topics page default-collapsed with expand/collapse animation

Change TopicsBrowse.tsx to start with all categories collapsed and add smooth CSS grid-template-rows animation for expand/collapse transitions.

## Steps

1. In `frontend/src/pages/TopicsBrowse.tsx`, change the `useEffect` that calls `setExpanded(new Set(data.map((c) => c.name)))` to `setExpanded(new Set())` so all categories start collapsed.

2. Refactor the subtopics rendering from conditional `{isExpanded && (<div className="topic-subtopics">...)}` to always-rendered with a CSS grid animation wrapper. Use the `display: grid; grid-template-rows: 0fr / 1fr` technique:
   - Wrap the subtopics in a `<div className="topic-subtopics-wrapper" data-expanded={isExpanded}>` that has `display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease;`
   - When `data-expanded="true"`, set `grid-template-rows: 1fr`
   - The inner `<div className="topic-subtopics">` gets `overflow: hidden; min-height: 0;`
   - Always render both wrapper and inner div (remove the conditional render)

3. Add the CSS in `frontend/src/App.css` near the existing `.topic-subtopics` rule (~line 2318):
   - `.topic-subtopics-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }`
   - `.topic-subtopics-wrapper[data-expanded="true"] { grid-template-rows: 1fr; }`
   - `.topic-subtopics { overflow: hidden; min-height: 0; }` (modify existing rule)

4. Verify: `cd frontend && npx tsc --noEmit && npm run build`

## Inputs

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

## Expected Output

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

## Verification

cd frontend && npx tsc --noEmit && npm run build
