# S03 Research: Featured Technique + Technique Grid Restyle

## Summary

Straightforward slice. Two changes: (1) add a featured technique card to the creator page, (2) restyle all technique cards to match the existing `recent-card` pattern. Both require enriching `CreatorTechniqueItem` with additional fields from the backend.

## Recommendation

Enrich the backend `CreatorTechniqueItem` schema and query with summary, topic_tags, and key_moment_count. On the frontend, select the first technique as "featured" (most recent, since the query is ordered by `created_at DESC`), render it with a prominent card styled after `home-featured`, and restyle the remaining cards to reuse the `recent-card` class pattern.

## Implementation Landscape

### Backend Changes

**File: `backend/schemas.py` (line 46)**
`CreatorTechniqueItem` currently has only: title, slug, topic_category, created_at.
Add: `summary: str | None`, `topic_tags: list[str] | None`, `key_moment_count: int`.

**File: `backend/routers/creators.py` (line 143-162)**
The creator detail endpoint selects only 4 columns from `technique_pages`. Needs to also select `summary`, `topic_tags`. For `key_moment_count`, either:
- Option A: Subquery count per technique page (adds one extra SQL expression to the existing select)
- Option B: Separate query to count moments grouped by technique_page_id

Option A is cleaner — add a correlated subquery or use `func.count` with a LEFT JOIN + GROUP BY.

**File: `frontend/src/api/public-client.ts` (line 177)**
`CreatorTechniqueItem` interface — add `summary`, `topic_tags`, `key_moment_count` to match backend.

### Frontend Changes

**File: `frontend/src/pages/CreatorDetail.tsx`**
- Extract the first technique from the sorted array as the "featured" technique (most recent by default sort)
- Render featured technique in a prominent card above the grid, styled like `home-featured` (gradient border, summary, tags, moment count)
- Render remaining techniques using `recent-card` class instead of `creator-technique-card`
- The featured card only shows when there's at least one technique

**File: `frontend/src/App.css`**
- Add `.creator-featured` styles (can reuse/adapt `home-featured` pattern — gradient border-image, larger text, summary)
- Update technique list cards to use `recent-card` styles — either reuse class directly or adapt `creator-technique-card` to match
- The existing `creator-technique-card` hover has `transform: scale(1.02)` which `recent-card` doesn't — drop it for consistency

### "Featured" Selection Logic

No `featured_technique_slug` exists on the Creator or TechniquePage model. The `featured` boolean on Creator marks the creator as featured (used on homepage), not which technique is featured.

**Approach:** Select the first technique in the sorted list as "featured" client-side. This is the most recent technique by default (backend returns ordered by `created_at DESC`). No backend changes needed for selection logic. If admin wants to control which technique is featured, that's a future enhancement.

### Existing Patterns to Reuse

| Pattern | Source | Notes |
|---------|--------|-------|
| `home-featured` card | `App.css:1526` | Gradient border-image, summary, meta badges, creator link, moment count |
| `recent-card` | `App.css:1605` | Standard technique card — surface bg, border, hover glow, no transform |
| `card-stagger` animation | Various pages | `--stagger-index` CSS var for entrance animation |
| `TagList` component | `components/TagList.tsx` | Renders topic_tags as pills |
| `badge--category` | Various | Category badge styling |

### Constraints

- `CreatorTechniqueItem` enrichment is a schema expansion — fully backward compatible, new fields are optional/nullable
- `border-image` strips `border-radius` (per KNOWLEDGE.md) — the featured card won't have rounded corners, matching `home-featured`
- The featured card shouldn't duplicate the creator name (we're already on the creator page)

### Natural Seams

**T01 — Backend enrichment:** Extend `CreatorTechniqueItem` schema + query in creators.py. Verify with `curl` or integration test.

**T02 — Frontend featured card + grid restyle:** Update `CreatorTechniqueItem` interface, add featured card rendering, restyle technique grid. Verify with `tsc --noEmit` + `npm run build`.

### Verification

- `cd backend && python -c "from schemas import CreatorTechniqueItem; print(CreatorTechniqueItem.model_fields.keys())"` — confirms new fields
- `curl localhost:8000/api/v1/creators/{slug}` — response includes summary, topic_tags, key_moment_count in techniques array
- `cd frontend && npx tsc --noEmit` — zero type errors
- `cd frontend && npm run build` — clean production build
- Visual: featured card visible on creator page with summary and tags, remaining cards match recent-card styling
