From df0ff28f5ef8a6218c94be7a886fe9efd2719673 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Fri, 3 Apr 2026 08:50:12 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Synced=20CreatorDetailResponse=20with?=
 =?UTF-8?q?=20backend=20schema=20(7=20new=20fields)=20a=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/CreatorDetail.tsx"

GSD-Task: S01/T01
---
 frontend/src/api/public-client.ts    | 14 ++++++++
 frontend/src/pages/CreatorDetail.tsx | 51 +++++++++++-----------------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts
index 954874a..59830fc 100644
--- a/frontend/src/api/public-client.ts
+++ b/frontend/src/api/public-client.ts
@@ -174,6 +174,13 @@ export interface CreatorBrowseResponse {
   limit: number;
 }
 
+export interface CreatorTechniqueItem {
+  title: string;
+  slug: string;
+  topic_category: string;
+  created_at: string;
+}
+
 export interface CreatorDetailResponse {
   id: string;
   name: string;
@@ -184,6 +191,13 @@ export interface CreatorDetailResponse {
   created_at: string;
   updated_at: string;
   video_count: number;
+  bio: string | null;
+  social_links: Record<string, string> | null;
+  featured: boolean;
+  avatar_url: string | null;
+  technique_count: number;
+  techniques: CreatorTechniqueItem[];
+  genre_breakdown: Record<string, number>;
 }
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
diff --git a/frontend/src/pages/CreatorDetail.tsx b/frontend/src/pages/CreatorDetail.tsx
index 6d0091d..8344d21 100644
--- a/frontend/src/pages/CreatorDetail.tsx
+++ b/frontend/src/pages/CreatorDetail.tsx
@@ -9,14 +9,12 @@ import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import {
   fetchCreator,
-  fetchTechniques,
   type CreatorDetailResponse,
-  type TechniqueListItem,
+  type CreatorTechniqueItem,
 } from "../api/public-client";
 import CreatorAvatar from "../components/CreatorAvatar";
 import SortDropdown from "../components/SortDropdown";
 import { catSlug } from "../utils/catSlug";
-import TagList from "../components/TagList";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import { useSortPreference } from "../hooks/useSortPreference";
 
@@ -29,7 +27,6 @@ const CREATOR_SORT_OPTIONS = [
 export default function CreatorDetail() {
   const { slug } = useParams<{ slug: string }>();
   const [creator, setCreator] = useState<CreatorDetailResponse | null>(null);
-  const [techniques, setTechniques] = useState<TechniqueListItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -47,13 +44,9 @@ export default function CreatorDetail() {
 
     void (async () => {
       try {
-        const [creatorData, techData] = await Promise.all([
-          fetchCreator(slug),
-          fetchTechniques({ creator_slug: slug, limit: 100, sort }),
-        ]);
+        const creatorData = await fetchCreator(slug);
         if (!cancelled) {
           setCreator(creatorData);
-          setTechniques(techData.items);
         }
       } catch (err) {
         if (!cancelled) {
@@ -73,7 +66,7 @@ export default function CreatorDetail() {
     return () => {
       cancelled = true;
     };
-  }, [slug, sort]);
+  }, [slug]);
 
   if (loading) {
     return <div className="loading">Loading creator…</div>;
@@ -99,6 +92,18 @@ export default function CreatorDetail() {
     );
   }
 
+  const techniques = [...creator.techniques].sort((a, b) => {
+    switch (sort) {
+      case "oldest":
+        return a.created_at.localeCompare(b.created_at);
+      case "alpha":
+        return a.title.localeCompare(b.title);
+      case "newest":
+      default:
+        return b.created_at.localeCompare(a.created_at);
+    }
+  });
+
   return (
     <div className="creator-detail">
       <Link to="/creators" className="back-link">
@@ -120,17 +125,11 @@ export default function CreatorDetail() {
           )}
           <span className="creator-detail__stats">
             {creator.video_count} video{creator.video_count !== 1 ? "s" : ""}
-            {techniques.length > 0 && (
+            {Object.keys(creator.genre_breakdown).length > 0 && (
               <>
                 <span className="queue-card__separator">·</span>
                 <span className="creator-detail__topic-pills">
-                  {Object.entries(
-                    techniques.reduce<Record<string, number>>((acc, t) => {
-                      const cat = t.topic_category || "Uncategorized";
-                      acc[cat] = (acc[cat] || 0) + 1;
-                      return acc;
-                    }, {}),
-                  )
+                  {Object.entries(creator.genre_breakdown)
                     .sort(([, a], [, b]) => b - a)
                     .map(([cat, count]) => (
                       <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
@@ -148,7 +147,7 @@ export default function CreatorDetail() {
       <section className="creator-techniques">
         <div className="creator-techniques__header">
           <h2 className="creator-techniques__title">
-            Techniques ({techniques.length})
+            Techniques ({creator.technique_count})
           </h2>
           <SortDropdown
             options={CREATOR_SORT_OPTIONS}
@@ -162,7 +161,7 @@ export default function CreatorDetail() {
           <div className="creator-techniques__list">
             {techniques.map((t, i) => (
               <Link
-                key={t.id}
+                key={t.slug}
                 to={`/techniques/${t.slug}`}
                 className="creator-technique-card card-stagger"
                 style={{ '--stagger-index': i } as React.CSSProperties}
@@ -174,19 +173,7 @@ export default function CreatorDetail() {
                   <span className="badge badge--category">
                     {t.topic_category}
                   </span>
-                  {t.topic_tags && t.topic_tags.length > 0 && (
-                    <span className="creator-technique-card__tags">
-                      <TagList tags={t.topic_tags} />
-                    </span>
-                  )}
                 </span>
-                {t.summary && (
-                  <span className="creator-technique-card__summary">
-                    {t.summary.length > 120
-                      ? `${t.summary.slice(0, 120)}…`
-                      : t.summary}
-                  </span>
-                )}
               </Link>
             ))}
           </div>