---
estimated_steps: 14
estimated_files: 11
skills_used: []
---

# T02: Add useDocumentTitle hook and wire descriptive titles into all pages

Create a `useDocumentTitle` custom hook and call it from every page component so browser tabs show descriptive, route-specific titles.

1. Create `frontend/src/hooks/useDocumentTitle.ts` with a hook that sets `document.title` on mount and when the title string changes. Reset to 'Chrysopedia' on unmount (cleanup).

2. Wire the hook into all 10 page components with these title patterns:
   - Home: `Chrysopedia — Production Knowledge, Distilled`
   - TopicsBrowse: `Topics — Chrysopedia`
   - SubTopicPage: `{subtopic} — {category} — Chrysopedia` (dynamic, updates when data loads)
   - CreatorsBrowse: `Creators — Chrysopedia`
   - CreatorDetail: `{name} — Chrysopedia` (dynamic, updates when creator loads)
   - TechniquePage: `{title} — Chrysopedia` (dynamic, updates when technique loads)
   - SearchResults: `Search: {query} — Chrysopedia` (dynamic, updates with query param)
   - About: `About — Chrysopedia`
   - AdminReports: `Content Reports — Chrysopedia`
   - AdminPipeline: `Pipeline Management — Chrysopedia`

3. For dynamic pages (SubTopicPage, CreatorDetail, TechniquePage, SearchResults), call the hook with the resolved value so the title updates when async data loads. Use a fallback like `Chrysopedia` while loading.

## Inputs

- ``frontend/src/pages/Home.tsx` — needs useDocumentTitle call`
- ``frontend/src/pages/TopicsBrowse.tsx` — needs useDocumentTitle call`
- ``frontend/src/pages/SubTopicPage.tsx` — needs dynamic useDocumentTitle call with subtopic/category`
- ``frontend/src/pages/CreatorsBrowse.tsx` — needs useDocumentTitle call`
- ``frontend/src/pages/CreatorDetail.tsx` — needs dynamic useDocumentTitle call with creator name`
- ``frontend/src/pages/TechniquePage.tsx` — needs dynamic useDocumentTitle call with technique title`
- ``frontend/src/pages/SearchResults.tsx` — needs dynamic useDocumentTitle call with search query`
- ``frontend/src/pages/About.tsx` — needs useDocumentTitle call`
- ``frontend/src/pages/AdminReports.tsx` — needs useDocumentTitle call`
- ``frontend/src/pages/AdminPipeline.tsx` — needs useDocumentTitle call`

## Expected Output

- ``frontend/src/hooks/useDocumentTitle.ts` — new custom hook file`
- ``frontend/src/pages/Home.tsx` — useDocumentTitle wired`
- ``frontend/src/pages/TopicsBrowse.tsx` — useDocumentTitle wired`
- ``frontend/src/pages/SubTopicPage.tsx` — useDocumentTitle wired with dynamic subtopic/category`
- ``frontend/src/pages/CreatorsBrowse.tsx` — useDocumentTitle wired`
- ``frontend/src/pages/CreatorDetail.tsx` — useDocumentTitle wired with dynamic creator name`
- ``frontend/src/pages/TechniquePage.tsx` — useDocumentTitle wired with dynamic technique title`
- ``frontend/src/pages/SearchResults.tsx` — useDocumentTitle wired with dynamic query`
- ``frontend/src/pages/About.tsx` — useDocumentTitle wired`
- ``frontend/src/pages/AdminReports.tsx` — useDocumentTitle wired`
- ``frontend/src/pages/AdminPipeline.tsx` — useDocumentTitle wired`

## Verification

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