xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Split key moment card header into standalone h3 title and flex-ro…

Browse source 
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.css"

GSD-Task: S03/T01
This commit is contained in:
jlightner 2026-03-30 08:55:48 +00:00
parent b0038f21f7
commit 93a643f1b8
23 changed files with 4195 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0a0a12" />
<title>Chrysopedia</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1888
frontend/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

23
frontend/package.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "chrysopedia-web",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.28.0"
},
"devDependencies": {
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "~5.6.3",
"vite": "^6.0.3"
}
}

15
frontend/src/App.css
View file

@ -1341,7 +1341,15 @@ body {
border-radius: 0.5rem;
}
.technique-moment__header {
.technique-moment__title {
display: block;
margin: 0 0 0.25rem 0;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
}
.technique-moment__meta {
display: flex;
align-items: center;
gap: 0.5rem;
@ -1349,11 +1357,6 @@ body {
flex-wrap: wrap;
}
.technique-moment__title {
font-size: 0.9375rem;
font-weight: 600;
}
.technique-moment__time {
font-size: 0.75rem;
color: var(--color-text-secondary);

193
frontend/src/api/client.ts Normal file
View file

@ -0,0 +1,193 @@
/**
* Typed API client for Chrysopedia review queue endpoints.
*
* All functions use fetch() with JSON handling and throw on non-OK responses.
* Base URL is empty so requests go through the Vite dev proxy or nginx in prod.
*/
// ── Types ───────────────────────────────────────────────────────────────────
export interface KeyMomentRead {
id: string;
source_video_id: string;
technique_page_id: string | null;
title: string;
summary: string;
start_time: number;
end_time: number;
content_type: string;
plugins: string[] | null;
raw_transcript: string | null;
review_status: string;
created_at: string;
updated_at: string;
}
export interface ReviewQueueItem extends KeyMomentRead {
video_filename: string;
creator_name: string;
}
export interface ReviewQueueResponse {
items: ReviewQueueItem[];
total: number;
offset: number;
limit: number;
}
export interface ReviewStatsResponse {
pending: number;
approved: number;
edited: number;
rejected: number;
}
export interface ReviewModeResponse {
review_mode: boolean;
}
export interface MomentEditRequest {
title?: string;
summary?: string;
start_time?: number;
end_time?: number;
content_type?: string;
plugins?: string[];
}
export interface MomentSplitRequest {
split_time: number;
}
export interface MomentMergeRequest {
target_moment_id: string;
}
export interface QueueParams {
status?: string;
offset?: number;
limit?: number;
}
// ── Helpers ──────────────────────────────────────────────────────────────────
const BASE = "/api/v1/review";
class ApiError extends Error {
constructor(
public status: number,
public detail: string,
) {
super(`API ${status}: ${detail}`);
this.name = "ApiError";
}
}
async function request<T>(url: string, init?: RequestInit): Promise<T> {
const res = await fetch(url, {
...init,
headers: {
"Content-Type": "application/json",
...init?.headers,
},
});
if (!res.ok) {
let detail = res.statusText;
try {
const body = await res.json();
detail = body.detail ?? detail;
} catch {
// body not JSON — keep statusText
}
throw new ApiError(res.status, detail);
}
return res.json() as Promise<T>;
}
// ── Queue ────────────────────────────────────────────────────────────────────
export async function fetchQueue(
params: QueueParams = {},
): Promise<ReviewQueueResponse> {
const qs = new URLSearchParams();
if (params.status) qs.set("status", params.status);
if (params.offset !== undefined) qs.set("offset", String(params.offset));
if (params.limit !== undefined) qs.set("limit", String(params.limit));
const query = qs.toString();
return request<ReviewQueueResponse>(
`${BASE}/queue${query ? `?${query}` : ""}`,
);
}
export async function fetchMoment(
momentId: string,
): Promise<ReviewQueueItem> {
return request<ReviewQueueItem>(`${BASE}/moments/${momentId}`);
}
export async function fetchStats(): Promise<ReviewStatsResponse> {
return request<ReviewStatsResponse>(`${BASE}/stats`);
}
// ── Actions ──────────────────────────────────────────────────────────────────
export async function approveMoment(id: string): Promise<KeyMomentRead> {
return request<KeyMomentRead>(`${BASE}/moments/${id}/approve`, {
method: "POST",
});
}
export async function rejectMoment(id: string): Promise<KeyMomentRead> {
return request<KeyMomentRead>(`${BASE}/moments/${id}/reject`, {
method: "POST",
});
}
export async function editMoment(
id: string,
data: MomentEditRequest,
): Promise<KeyMomentRead> {
return request<KeyMomentRead>(`${BASE}/moments/${id}`, {
method: "PUT",
body: JSON.stringify(data),
});
}
export async function splitMoment(
id: string,
splitTime: number,
): Promise<KeyMomentRead[]> {
const body: MomentSplitRequest = { split_time: splitTime };
return request<KeyMomentRead[]>(`${BASE}/moments/${id}/split`, {
method: "POST",
body: JSON.stringify(body),
});
}
export async function mergeMoments(
id: string,
targetId: string,
): Promise<KeyMomentRead> {
const body: MomentMergeRequest = { target_moment_id: targetId };
return request<KeyMomentRead>(`${BASE}/moments/${id}/merge`, {
method: "POST",
body: JSON.stringify(body),
});
}
// ── Mode ─────────────────────────────────────────────────────────────────────
export async function getReviewMode(): Promise<ReviewModeResponse> {
return request<ReviewModeResponse>(`${BASE}/mode`);
}
export async function setReviewMode(
enabled: boolean,
): Promise<ReviewModeResponse> {
return request<ReviewModeResponse>(`${BASE}/mode`, {
method: "PUT",
body: JSON.stringify({ review_mode: enabled }),
});
}

59
frontend/src/components/ModeToggle.tsx Normal file
View file

@ -0,0 +1,59 @@
/**
* Review / Auto mode toggle switch.
*
* Reads and writes mode via getReviewMode / setReviewMode API.
* Green dot = review mode active; amber = auto mode.
*/
import { useEffect, useState } from "react";
import { getReviewMode, setReviewMode } from "../api/client";
export default function ModeToggle() {
const [reviewMode, setReviewModeState] = useState<boolean | null>(null);
const [toggling, setToggling] = useState(false);
useEffect(() => {
let cancelled = false;
getReviewMode()
.then((res) => {
if (!cancelled) setReviewModeState(res.review_mode);
})
.catch(() => {
// silently fail — mode indicator will just stay hidden
});
return () => { cancelled = true; };
}, []);
async function handleToggle() {
if (reviewMode === null || toggling) return;
setToggling(true);
try {
const res = await setReviewMode(!reviewMode);
setReviewModeState(res.review_mode);
} catch {
// swallow — leave previous state
} finally {
setToggling(false);
}
}
if (reviewMode === null) return null;
return (
<div className="mode-toggle">
<span
className={`mode-toggle__dot ${reviewMode ? "mode-toggle__dot--review" : "mode-toggle__dot--auto"}`}
/>
<span className="mode-toggle__label">
{reviewMode ? "Review Mode" : "Auto Mode"}
</span>
<button
type="button"
className={`mode-toggle__switch ${reviewMode ? "mode-toggle__switch--active" : ""}`}
onClick={handleToggle}
disabled={toggling}
aria-label={`Switch to ${reviewMode ? "auto" : "review"} mode`}
/>
</div>
);
}

135
frontend/src/components/ReportIssueModal.tsx Normal file
View file

@ -0,0 +1,135 @@
import { useState } from "react";
import { submitReport, type ContentReportCreate } from "../api/public-client";
interface ReportIssueModalProps {
contentType: string;
contentId?: string | null;
contentTitle?: string | null;
onClose: () => void;
}
const REPORT_TYPES = [
{ value: "inaccurate", label: "Inaccurate content" },
{ value: "missing_info", label: "Missing information" },
{ value: "wrong_attribution", label: "Wrong attribution" },
{ value: "formatting", label: "Formatting issue" },
{ value: "other", label: "Other" },
];
export default function ReportIssueModal({
contentType,
contentId,
contentTitle,
onClose,
}: ReportIssueModalProps) {
const [reportType, setReportType] = useState("inaccurate");
const [description, setDescription] = useState("");
const [submitting, setSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (description.trim().length < 10) {
setError("Please provide at least 10 characters describing the issue.");
return;
}
setSubmitting(true);
setError(null);
try {
const body: ContentReportCreate = {
content_type: contentType,
content_id: contentId ?? null,
content_title: contentTitle ?? null,
report_type: reportType,
description: description.trim(),
page_url: window.location.href,
};
await submitReport(body);
setSubmitted(true);
} catch (err) {
setError(
err instanceof Error ? err.message : "Failed to submit report",
);
} finally {
setSubmitting(false);
}
};
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content report-modal" onClick={(e) => e.stopPropagation()}>
{submitted ? (
<>
<h3 className="report-modal__title">Thank you</h3>
<p className="report-modal__success">
Your report has been submitted. We'll review it shortly.
</p>
<button className="btn btn--primary" onClick={onClose}>
Close
</button>
</>
) : (
<>
<h3 className="report-modal__title">Report an issue</h3>
{contentTitle && (
<p className="report-modal__context">
About: <strong>{contentTitle}</strong>
</p>
)}
<form onSubmit={handleSubmit}>
<label className="report-modal__label">
Issue type
<select
className="report-modal__select"
value={reportType}
onChange={(e) => setReportType(e.target.value)}
>
{REPORT_TYPES.map((t) => (
<option key={t.value} value={t.value}>
{t.label}
</option>
))}
</select>
</label>
<label className="report-modal__label">
Description
<textarea
className="report-modal__textarea"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Describe the issue…"
rows={4}
maxLength={2000}
/>
</label>
{error && <p className="report-modal__error">{error}</p>}
<div className="report-modal__actions">
<button
type="button"
className="btn btn--secondary"
onClick={onClose}
disabled={submitting}
>
Cancel
</button>
<button
type="submit"
className="btn btn--primary"
disabled={submitting || description.trim().length < 10}
>
{submitting ? "Submitting…" : "Submit report"}
</button>
</div>
</form>
</>
)}
</div>
</div>
);
}

19
frontend/src/components/StatusBadge.tsx Normal file
View file

@ -0,0 +1,19 @@
/**
* Reusable status badge with color coding.
*
* Maps review_status values to colored pill shapes:
* pending → amber, approved → green, edited → blue, rejected → red
*/
interface StatusBadgeProps {
status: string;
}
export default function StatusBadge({ status }: StatusBadgeProps) {
const normalized = status.toLowerCase();
return (
<span className={`badge badge--${normalized}`}>
{normalized}
</span>
);
}

13
frontend/src/main.tsx Normal file
View file

@ -0,0 +1,13 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./App.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
);

246
frontend/src/pages/AdminReports.tsx Normal file
View file

@ -0,0 +1,246 @@
/**
* Admin content reports management page.
*
* Lists user-submitted issue reports with filtering by status,
* inline triage (acknowledge/resolve/dismiss), and admin notes.
*/
import { useEffect, useState } from "react";
import {
fetchReports,
updateReport,
type ContentReport,
} from "../api/public-client";
const STATUS_OPTIONS = [
{ value: "", label: "All" },
{ value: "open", label: "Open" },
{ value: "acknowledged", label: "Acknowledged" },
{ value: "resolved", label: "Resolved" },
{ value: "dismissed", label: "Dismissed" },
];
const STATUS_ACTIONS: Record<string, { label: string; next: string }[]> = {
open: [
{ label: "Acknowledge", next: "acknowledged" },
{ label: "Resolve", next: "resolved" },
{ label: "Dismiss", next: "dismissed" },
],
acknowledged: [
{ label: "Resolve", next: "resolved" },
{ label: "Dismiss", next: "dismissed" },
{ label: "Reopen", next: "open" },
],
resolved: [{ label: "Reopen", next: "open" }],
dismissed: [{ label: "Reopen", next: "open" }],
};
function formatDate(iso: string): string {
return new Date(iso).toLocaleString(undefined, {
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
function reportTypeLabel(rt: string): string {
return rt.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
}
export default function AdminReports() {
const [reports, setReports] = useState<ContentReport[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [statusFilter, setStatusFilter] = useState("");
const [expandedId, setExpandedId] = useState<string | null>(null);
const [noteText, setNoteText] = useState("");
const [actionLoading, setActionLoading] = useState<string | null>(null);
const load = async () => {
setLoading(true);
setError(null);
try {
const res = await fetchReports({
status: statusFilter || undefined,
limit: 100,
});
setReports(res.items);
setTotal(res.total);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load reports");
} finally {
setLoading(false);
}
};
useEffect(() => {
void load();
}, [statusFilter]);
const handleAction = async (reportId: string, newStatus: string) => {
setActionLoading(reportId);
try {
const updated = await updateReport(reportId, {
status: newStatus,
...(noteText.trim() ? { admin_notes: noteText.trim() } : {}),
});
setReports((prev) =>
prev.map((r) => (r.id === reportId ? updated : r)),
);
setNoteText("");
if (newStatus === "resolved" || newStatus === "dismissed") {
setExpandedId(null);
}
} catch (err) {
setError(err instanceof Error ? err.message : "Action failed");
} finally {
setActionLoading(null);
}
};
const toggleExpand = (id: string) => {
if (expandedId === id) {
setExpandedId(null);
setNoteText("");
} else {
setExpandedId(id);
const report = reports.find((r) => r.id === id);
setNoteText(report?.admin_notes ?? "");
}
};
return (
<div className="admin-reports">
<h2 className="admin-reports__title">Content Reports</h2>
<p className="admin-reports__subtitle">
{total} report{total !== 1 ? "s" : ""} total
</p>
{/* Status filter */}
<div className="admin-reports__filters">
<div className="sort-toggle" role="group" aria-label="Filter by status">
{STATUS_OPTIONS.map((opt) => (
<button
key={opt.value}
className={`sort-toggle__btn${statusFilter === opt.value ? " sort-toggle__btn--active" : ""}`}
onClick={() => setStatusFilter(opt.value)}
aria-pressed={statusFilter === opt.value}
>
{opt.label}
</button>
))}
</div>
</div>
{/* Content */}
{loading ? (
<div className="loading">Loading reports…</div>
) : error ? (
<div className="loading error-text">Error: {error}</div>
) : reports.length === 0 ? (
<div className="empty-state">
{statusFilter ? `No ${statusFilter} reports.` : "No reports yet."}
</div>
) : (
<div className="admin-reports__list">
{reports.map((report) => (
<div
key={report.id}
className={`report-card report-card--${report.status}`}
>
<div
className="report-card__header"
onClick={() => toggleExpand(report.id)}
>
<div className="report-card__meta">
<span className={`pill pill--${report.status}`}>
{report.status}
</span>
<span className="pill">{reportTypeLabel(report.report_type)}</span>
<span className="report-card__date">
{formatDate(report.created_at)}
</span>
</div>
<div className="report-card__summary">
{report.content_title && (
<span className="report-card__content-title">
{report.content_title}
</span>
)}
<span className="report-card__description">
{report.description.length > 120
? report.description.slice(0, 120) + "…"
: report.description}
</span>
</div>
</div>
{expandedId === report.id && (
<div className="report-card__detail">
<div className="report-card__full-description">
<strong>Full description:</strong>
<p>{report.description}</p>
</div>
{report.page_url && (
<div className="report-card__url">
<strong>Page:</strong>{" "}
<a href={report.page_url} target="_blank" rel="noopener noreferrer">
{report.page_url}
</a>
</div>
)}
<div className="report-card__info-row">
<span>Type: {report.content_type}</span>
{report.content_id && <span>ID: {report.content_id.slice(0, 8)}…</span>}
{report.resolved_at && (
<span>Resolved: {formatDate(report.resolved_at)}</span>
)}
</div>
{/* Admin notes */}
<label className="report-card__notes-label">
Admin notes:
<textarea
className="report-card__notes"
value={noteText}
onChange={(e) => setNoteText(e.target.value)}
rows={2}
placeholder="Add notes…"
/>
</label>
{/* Action buttons */}
<div className="report-card__actions">
{(STATUS_ACTIONS[report.status] ?? []).map((action) => (
<button
key={action.next}
className={`btn btn--${action.next === "resolved" ? "primary" : action.next === "dismissed" ? "danger" : "secondary"}`}
onClick={() => handleAction(report.id, action.next)}
disabled={actionLoading === report.id}
>
{actionLoading === report.id ? "…" : action.label}
</button>
))}
{noteText !== (report.admin_notes ?? "") && (
<button
className="btn btn--secondary"
onClick={() => handleAction(report.id, report.status)}
disabled={actionLoading === report.id}
>
Save notes
</button>
)}
</div>
</div>
)}
</div>
))}
</div>
)}
</div>
);
}

160
frontend/src/pages/CreatorDetail.tsx Normal file
View file

@ -0,0 +1,160 @@
/**
* Creator detail page.
*
* Shows creator info (name, genres, video/technique counts) and lists
* their technique pages with links. Handles loading and 404 states.
*/
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
fetchCreator,
fetchTechniques,
type CreatorDetailResponse,
type TechniqueListItem,
} from "../api/public-client";
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);
useEffect(() => {
if (!slug) return;
let cancelled = false;
setLoading(true);
setNotFound(false);
setError(null);
void (async () => {
try {
const [creatorData, techData] = await Promise.all([
fetchCreator(slug),
fetchTechniques({ creator_slug: slug, limit: 100 }),
]);
if (!cancelled) {
setCreator(creatorData);
setTechniques(techData.items);
}
} catch (err) {
if (!cancelled) {
if (err instanceof Error && err.message.includes("404")) {
setNotFound(true);
} else {
setError(
err instanceof Error ? err.message : "Failed to load creator",
);
}
}
} finally {
if (!cancelled) setLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [slug]);
if (loading) {
return <div className="loading">Loading creator…</div>;
}
if (notFound) {
return (
<div className="technique-404">
<h2>Creator Not Found</h2>
<p>The creator "{slug}" doesn't exist.</p>
<Link to="/creators" className="btn">
Back to Creators
</Link>
</div>
);
}
if (error || !creator) {
return (
<div className="loading error-text">
Error: {error ?? "Unknown error"}
</div>
);
}
return (
<div className="creator-detail">
<Link to="/creators" className="back-link">
← Creators
</Link>
{/* Header */}
<header className="creator-detail__header">
<h1 className="creator-detail__name">{creator.name}</h1>
<div className="creator-detail__meta">
{creator.genres && creator.genres.length > 0 && (
<span className="creator-detail__genres">
{creator.genres.map((g) => (
<span key={g} className="pill">
{g}
</span>
))}
</span>
)}
<span className="creator-detail__stats">
{creator.video_count} video{creator.video_count !== 1 ? "s" : ""}
<span className="queue-card__separator">·</span>
{creator.view_count.toLocaleString()} views
</span>
</div>
</header>
{/* Technique pages */}
<section className="creator-techniques">
<h2 className="creator-techniques__title">
Techniques ({techniques.length})
</h2>
{techniques.length === 0 ? (
<div className="empty-state">No techniques yet.</div>
) : (
<div className="creator-techniques__list">
{techniques.map((t) => (
<Link
key={t.id}
to={`/techniques/${t.slug}`}
className="creator-technique-card"
>
<span className="creator-technique-card__title">
{t.title}
</span>
<span className="creator-technique-card__meta">
<span className="badge badge--category">
{t.topic_category}
</span>
{t.topic_tags && t.topic_tags.length > 0 && (
<span className="creator-technique-card__tags">
{t.topic_tags.map((tag) => (
<span key={tag} className="pill">
{tag}
</span>
))}
</span>
)}
</span>
{t.summary && (
<span className="creator-technique-card__summary">
{t.summary.length > 120
? `${t.summary.slice(0, 120)}…`
: t.summary}
</span>
)}
</Link>
))}
</div>
)}
</section>
</div>
);
}

185
frontend/src/pages/CreatorsBrowse.tsx Normal file
View file

@ -0,0 +1,185 @@
/**
* Creators browse page (R007, R014).
*
* - Default sort: random (creator equity — no featured/highlighted creators)
* - Genre filter pills from canonical taxonomy
* - Type-to-narrow client-side name filter
* - Sort toggle: Random | Alphabetical | Views
* - Click row → /creators/{slug}
*/
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
fetchCreators,
type CreatorBrowseItem,
} from "../api/public-client";
const GENRES = [
"Bass music",
"Drum & bass",
"Dubstep",
"Halftime",
"House",
"Techno",
"IDM",
"Glitch",
"Downtempo",
"Neuro",
"Ambient",
"Experimental",
"Cinematic",
];
type SortMode = "random" | "alpha" | "views";
const SORT_OPTIONS: { value: SortMode; label: string }[] = [
{ value: "random", label: "Random" },
{ value: "alpha", label: "A–Z" },
{ value: "views", label: "Views" },
];
export default function CreatorsBrowse() {
const [creators, setCreators] = useState<CreatorBrowseItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [sort, setSort] = useState<SortMode>("random");
const [genreFilter, setGenreFilter] = useState<string | null>(null);
const [nameFilter, setNameFilter] = useState("");
useEffect(() => {
let cancelled = false;
setLoading(true);
setError(null);
void (async () => {
try {
const res = await fetchCreators({
sort,
genre: genreFilter ?? undefined,
limit: 100,
});
if (!cancelled) setCreators(res.items);
} catch (err) {
if (!cancelled) {
setError(
err instanceof Error ? err.message : "Failed to load creators",
);
}
} finally {
if (!cancelled) setLoading(false);
}
})();
return () => {
cancelled = true;
};
}, [sort, genreFilter]);
// Client-side name filtering
const displayed = nameFilter
? creators.filter((c) =>
c.name.toLowerCase().includes(nameFilter.toLowerCase()),
)
: creators;
return (
<div className="creators-browse">
<h2 className="creators-browse__title">Creators</h2>
<p className="creators-browse__subtitle">
Discover creators and their technique libraries
</p>
{/* Controls row */}
<div className="creators-controls">
{/* Sort toggle */}
<div className="sort-toggle" role="group" aria-label="Sort creators">
{SORT_OPTIONS.map((opt) => (
<button
key={opt.value}
className={`sort-toggle__btn${sort === opt.value ? " sort-toggle__btn--active" : ""}`}
onClick={() => setSort(opt.value)}
aria-pressed={sort === opt.value}
>
{opt.label}
</button>
))}
</div>
{/* Name filter */}
<input
type="search"
className="creators-filter-input"
placeholder="Filter by name…"
value={nameFilter}
onChange={(e) => setNameFilter(e.target.value)}
aria-label="Filter creators by name"
/>
</div>
{/* Genre pills */}
<div className="genre-pills" role="group" aria-label="Filter by genre">
<button
className={`genre-pill${genreFilter === null ? " genre-pill--active" : ""}`}
onClick={() => setGenreFilter(null)}
>
All
</button>
{GENRES.map((g) => (
<button
key={g}
className={`genre-pill${genreFilter === g ? " genre-pill--active" : ""}`}
onClick={() => setGenreFilter(genreFilter === g ? null : g)}
>
{g}
</button>
))}
</div>
{/* Content */}
{loading ? (
<div className="loading">Loading creators…</div>
) : error ? (
<div className="loading error-text">Error: {error}</div>
) : displayed.length === 0 ? (
<div className="empty-state">
{nameFilter
? `No creators matching "${nameFilter}"`
: "No creators found."}
</div>
) : (
<div className="creators-list">
{displayed.map((creator) => (
<Link
key={creator.id}
to={`/creators/${creator.slug}`}
className="creator-row"
>
<span className="creator-row__name">{creator.name}</span>
<span className="creator-row__genres">
{creator.genres?.map((g) => (
<span key={g} className="pill">
{g}
</span>
))}
</span>
<span className="creator-row__stats">
<span className="creator-row__stat">
{creator.technique_count} technique{creator.technique_count !== 1 ? "s" : ""}
</span>
<span className="creator-row__separator">·</span>
<span className="creator-row__stat">
{creator.video_count} video{creator.video_count !== 1 ? "s" : ""}
</span>
<span className="creator-row__separator">·</span>
<span className="creator-row__stat">
{creator.view_count.toLocaleString()} views
</span>
</span>
</Link>
))}
</div>
)}
</div>
);
}

222
frontend/src/pages/Home.tsx Normal file
View file

@ -0,0 +1,222 @@
/**
* Home / landing page.
*
* Prominent search bar with 300ms debounced typeahead (top 5 results after 2+ chars),
* navigation cards for Topics and Creators, and a "Recently Added" section.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import {
searchApi,
fetchTechniques,
type SearchResultItem,
type TechniqueListItem,
} from "../api/public-client";
export default function Home() {
const [query, setQuery] = useState("");
const [suggestions, setSuggestions] = useState<SearchResultItem[]>([]);
const [showDropdown, setShowDropdown] = useState(false);
const [recent, setRecent] = useState<TechniqueListItem[]>([]);
const [recentLoading, setRecentLoading] = useState(true);
const navigate = useNavigate();
const inputRef = useRef<HTMLInputElement>(null);
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
// Auto-focus search on mount
useEffect(() => {
inputRef.current?.focus();
}, []);
// Load recently added techniques
useEffect(() => {
let cancelled = false;
void (async () => {
try {
const res = await fetchTechniques({ limit: 5 });
if (!cancelled) setRecent(res.items);
} catch {
// silently ignore — not critical
} finally {
if (!cancelled) setRecentLoading(false);
}
})();
return () => {
cancelled = true;
};
}, []);
// Close dropdown on outside click
useEffect(() => {
function handleClick(e: MouseEvent) {
if (
dropdownRef.current &&
!dropdownRef.current.contains(e.target as Node)
) {
setShowDropdown(false);
}
}
document.addEventListener("mousedown", handleClick);
return () => document.removeEventListener("mousedown", handleClick);
}, []);
// Debounced typeahead
const handleInputChange = useCallback(
(value: string) => {
setQuery(value);
if (debounceRef.current) clearTimeout(debounceRef.current);
if (value.length < 2) {
setSuggestions([]);
setShowDropdown(false);
return;
}
debounceRef.current = setTimeout(() => {
void (async () => {
try {
const res = await searchApi(value, undefined, 5);
setSuggestions(res.items);
setShowDropdown(res.items.length > 0);
} catch {
setSuggestions([]);
setShowDropdown(false);
}
})();
}, 300);
},
[],
);
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (query.trim()) {
setShowDropdown(false);
navigate(`/search?q=${encodeURIComponent(query.trim())}`);
}
}
function handleKeyDown(e: React.KeyboardEvent) {
if (e.key === "Escape") {
setShowDropdown(false);
}
}
return (
<div className="home">
{/* Hero search */}
<section className="home-hero">
<h2 className="home-hero__title">Chrysopedia</h2>
<p className="home-hero__subtitle">
Search techniques, key moments, and creators
</p>
<div className="search-container" ref={dropdownRef}>
<form onSubmit={handleSubmit} className="search-form search-form--hero">
<input
ref={inputRef}
type="search"
className="search-input search-input--hero"
placeholder="Search techniques…"
value={query}
onChange={(e) => handleInputChange(e.target.value)}
onFocus={() => {
if (suggestions.length > 0) setShowDropdown(true);
}}
onKeyDown={handleKeyDown}
aria-label="Search techniques"
/>
<button type="submit" className="btn btn--search">
Search
</button>
</form>
{showDropdown && suggestions.length > 0 && (
<div className="typeahead-dropdown">
{suggestions.map((item) => (
<Link
key={`${item.type}-${item.slug}`}
to={`/techniques/${item.slug}`}
className="typeahead-item"
onClick={() => setShowDropdown(false)}
>
<span className="typeahead-item__title">{item.title}</span>
<span className="typeahead-item__meta">
<span className={`typeahead-item__type typeahead-item__type--${item.type}`}>
{item.type === "technique_page" ? "Technique" : "Key Moment"}
</span>
{item.creator_name && (
<span className="typeahead-item__creator">
{item.creator_name}
</span>
)}
</span>
</Link>
))}
<Link
to={`/search?q=${encodeURIComponent(query)}`}
className="typeahead-see-all"
onClick={() => setShowDropdown(false)}
>
See all results for "{query}"
</Link>
</div>
)}
</div>
</section>
{/* Navigation cards */}
<section className="nav-cards">
<Link to="/topics" className="nav-card">
<h3 className="nav-card__title">Topics</h3>
<p className="nav-card__desc">
Browse techniques organized by category and sub-topic
</p>
</Link>
<Link to="/creators" className="nav-card">
<h3 className="nav-card__title">Creators</h3>
<p className="nav-card__desc">
Discover creators and their technique libraries
</p>
</Link>
</section>
{/* Recently Added */}
<section className="recent-section">
<h3 className="recent-section__title">Recently Added</h3>
{recentLoading ? (
<div className="loading">Loading…</div>
) : recent.length === 0 ? (
<div className="empty-state">No techniques yet.</div>
) : (
<div className="recent-list">
{recent.map((t) => (
<Link
key={t.id}
to={`/techniques/${t.slug}`}
className="recent-card"
>
<span className="recent-card__title">{t.title}</span>
<span className="recent-card__meta">
<span className="badge badge--category">
{t.topic_category}
</span>
{t.summary && (
<span className="recent-card__summary">
{t.summary.length > 100
? `${t.summary.slice(0, 100)}…`
: t.summary}
</span>
)}
</span>
</Link>
))}
</div>
)}
</section>
</div>
);
}

454
frontend/src/pages/MomentDetail.tsx Normal file
View file

@ -0,0 +1,454 @@
/**
* Moment review detail page.
*
* Displays full moment data with action buttons:
* - Approve / Reject → navigate back to queue
* - Edit → inline edit mode for title, summary, content_type
* - Split → dialog with timestamp input
* - Merge → dialog with moment selector
*/
import { useCallback, useEffect, useState } from "react";
import { useParams, useNavigate, Link } from "react-router-dom";
import {
fetchMoment,
fetchQueue,
approveMoment,
rejectMoment,
editMoment,
splitMoment,
mergeMoments,
type ReviewQueueItem,
} from "../api/client";
import StatusBadge from "../components/StatusBadge";
function formatTime(seconds: number): string {
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s.toString().padStart(2, "0")}`;
}
export default function MomentDetail() {
const { momentId } = useParams<{ momentId: string }>();
const navigate = useNavigate();
// ── Data state ──
const [moment, setMoment] = useState<ReviewQueueItem | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [actionError, setActionError] = useState<string | null>(null);
const [acting, setActing] = useState(false);
// ── Edit state ──
const [editing, setEditing] = useState(false);
const [editTitle, setEditTitle] = useState("");
const [editSummary, setEditSummary] = useState("");
const [editContentType, setEditContentType] = useState("");
// ── Split state ──
const [showSplit, setShowSplit] = useState(false);
const [splitTime, setSplitTime] = useState("");
// ── Merge state ──
const [showMerge, setShowMerge] = useState(false);
const [mergeCandidates, setMergeCandidates] = useState<ReviewQueueItem[]>([]);
const [mergeTargetId, setMergeTargetId] = useState("");
const loadMoment = useCallback(async () => {
if (!momentId) return;
setLoading(true);
setError(null);
try {
// Fetch all moments and find the one matching our ID
const found = await fetchMoment(momentId);
setMoment(found);
setEditTitle(found.title);
setEditSummary(found.summary);
setEditContentType(found.content_type);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load moment");
} finally {
setLoading(false);
}
}, [momentId]);
useEffect(() => {
void loadMoment();
}, [loadMoment]);
// ── Action handlers ──
async function handleApprove() {
if (!momentId || acting) return;
setActing(true);
setActionError(null);
try {
await approveMoment(momentId);
navigate("/admin/review");
} catch (err) {
setActionError(err instanceof Error ? err.message : "Approve failed");
} finally {
setActing(false);
}
}
async function handleReject() {
if (!momentId || acting) return;
setActing(true);
setActionError(null);
try {
await rejectMoment(momentId);
navigate("/admin/review");
} catch (err) {
setActionError(err instanceof Error ? err.message : "Reject failed");
} finally {
setActing(false);
}
}
function startEdit() {
if (!moment) return;
setEditTitle(moment.title);
setEditSummary(moment.summary);
setEditContentType(moment.content_type);
setEditing(true);
setActionError(null);
}
async function handleEditSave() {
if (!momentId || acting) return;
setActing(true);
setActionError(null);
try {
await editMoment(momentId, {
title: editTitle,
summary: editSummary,
content_type: editContentType,
});
setEditing(false);
await loadMoment();
} catch (err) {
setActionError(err instanceof Error ? err.message : "Edit failed");
} finally {
setActing(false);
}
}
function openSplitDialog() {
if (!moment) return;
setSplitTime("");
setShowSplit(true);
setActionError(null);
}
async function handleSplit() {
if (!momentId || !moment || acting) return;
const t = parseFloat(splitTime);
if (isNaN(t) || t <= moment.start_time || t >= moment.end_time) {
setActionError(
`Split time must be between ${formatTime(moment.start_time)} and ${formatTime(moment.end_time)}`
);
return;
}
setActing(true);
setActionError(null);
try {
await splitMoment(momentId, t);
setShowSplit(false);
navigate("/admin/review");
} catch (err) {
setActionError(err instanceof Error ? err.message : "Split failed");
} finally {
setActing(false);
}
}
async function openMergeDialog() {
if (!moment) return;
setShowMerge(true);
setMergeTargetId("");
setActionError(null);
try {
// Load moments from the same video for merge candidates
const res = await fetchQueue({ limit: 100 });
const candidates = res.items.filter(
(m) => m.source_video_id === moment.source_video_id && m.id !== moment.id
);
setMergeCandidates(candidates);
} catch {
setMergeCandidates([]);
}
}
async function handleMerge() {
if (!momentId || !mergeTargetId || acting) return;
setActing(true);
setActionError(null);
try {
await mergeMoments(momentId, mergeTargetId);
setShowMerge(false);
navigate("/admin/review");
} catch (err) {
setActionError(err instanceof Error ? err.message : "Merge failed");
} finally {
setActing(false);
}
}
// ── Render ──
if (loading) return <div className="loading">Loading…</div>;
if (error)
return (
<div>
<Link to="/admin/review" className="back-link">
← Back to queue
</Link>
<div className="loading error-text">Error: {error}</div>
</div>
);
if (!moment) return null;
return (
<div className="detail-page">
<Link to="/admin/review" className="back-link">
← Back to queue
</Link>
{/* ── Moment header ── */}
<div className="detail-header">
<h2>{moment.title}</h2>
<StatusBadge status={moment.review_status} />
</div>
{/* ── Moment data ── */}
<div className="card detail-card">
<div className="detail-field">
<label>Content Type</label>
<span>{moment.content_type}</span>
</div>
<div className="detail-field">
<label>Time Range</label>
<span>
{formatTime(moment.start_time)} – {formatTime(moment.end_time)}
</span>
</div>
<div className="detail-field">
<label>Source</label>
<span>
{moment.creator_name} · {moment.video_filename}
</span>
</div>
{moment.plugins && moment.plugins.length > 0 && (
<div className="detail-field">
<label>Plugins</label>
<span>{moment.plugins.join(", ")}</span>
</div>
)}
<div className="detail-field detail-field--full">
<label>Summary</label>
<p>{moment.summary}</p>
</div>
{moment.raw_transcript && (
<div className="detail-field detail-field--full">
<label>Raw Transcript</label>
<p className="detail-transcript">{moment.raw_transcript}</p>
</div>
)}
</div>
{/* ── Action error ── */}
{actionError && <div className="action-error">{actionError}</div>}
{/* ── Edit mode ── */}
{editing ? (
<div className="card edit-form">
<h3>Edit Moment</h3>
<div className="edit-field">
<label htmlFor="edit-title">Title</label>
<input
id="edit-title"
type="text"
value={editTitle}
onChange={(e) => setEditTitle(e.target.value)}
/>
</div>
<div className="edit-field">
<label htmlFor="edit-summary">Summary</label>
<textarea
id="edit-summary"
rows={4}
value={editSummary}
onChange={(e) => setEditSummary(e.target.value)}
/>
</div>
<div className="edit-field">
<label htmlFor="edit-content-type">Content Type</label>
<input
id="edit-content-type"
type="text"
value={editContentType}
onChange={(e) => setEditContentType(e.target.value)}
/>
</div>
<div className="edit-actions">
<button
type="button"
className="btn btn--approve"
onClick={handleEditSave}
disabled={acting}
>
Save
</button>
<button
type="button"
className="btn"
onClick={() => setEditing(false)}
disabled={acting}
>
Cancel
</button>
</div>
</div>
) : (
/* ── Action buttons ── */
<div className="action-bar">
<button
type="button"
className="btn btn--approve"
onClick={handleApprove}
disabled={acting}
>
✓ Approve
</button>
<button
type="button"
className="btn btn--reject"
onClick={handleReject}
disabled={acting}
>
✕ Reject
</button>
<button
type="button"
className="btn"
onClick={startEdit}
disabled={acting}
>
✎ Edit
</button>
<button
type="button"
className="btn"
onClick={openSplitDialog}
disabled={acting}
>
✂ Split
</button>
<button
type="button"
className="btn"
onClick={openMergeDialog}
disabled={acting}
>
⊕ Merge
</button>
</div>
)}
{/* ── Split dialog ── */}
{showSplit && (
<div className="dialog-overlay" onClick={() => setShowSplit(false)}>
<div className="dialog" onClick={(e) => e.stopPropagation()}>
<h3>Split Moment</h3>
<p className="dialog__hint">
Enter a timestamp (in seconds) between{" "}
{formatTime(moment.start_time)} and {formatTime(moment.end_time)}.
</p>
<div className="edit-field">
<label htmlFor="split-time">Split Time (seconds)</label>
<input
id="split-time"
type="number"
step="0.1"
min={moment.start_time}
max={moment.end_time}
value={splitTime}
onChange={(e) => setSplitTime(e.target.value)}
placeholder={`e.g. ${((moment.start_time + moment.end_time) / 2).toFixed(1)}`}
/>
</div>
<div className="dialog__actions">
<button
type="button"
className="btn btn--approve"
onClick={handleSplit}
disabled={acting}
>
Split
</button>
<button
type="button"
className="btn"
onClick={() => setShowSplit(false)}
>
Cancel
</button>
</div>
</div>
</div>
)}
{/* ── Merge dialog ── */}
{showMerge && (
<div className="dialog-overlay" onClick={() => setShowMerge(false)}>
<div className="dialog" onClick={(e) => e.stopPropagation()}>
<h3>Merge Moment</h3>
<p className="dialog__hint">
Select another moment from the same video to merge with.
</p>
{mergeCandidates.length === 0 ? (
<p className="dialog__hint">
No other moments from this video available.
</p>
) : (
<div className="edit-field">
<label htmlFor="merge-target">Target Moment</label>
<select
id="merge-target"
value={mergeTargetId}
onChange={(e) => setMergeTargetId(e.target.value)}
>
<option value="">Select a moment…</option>
{mergeCandidates.map((c) => (
<option key={c.id} value={c.id}>
{c.title} ({formatTime(c.start_time)} –{" "}
{formatTime(c.end_time)})
</option>
))}
</select>
</div>
)}
<div className="dialog__actions">
<button
type="button"
className="btn btn--approve"
onClick={handleMerge}
disabled={acting || !mergeTargetId}
>
Merge
</button>
<button
type="button"
className="btn"
onClick={() => setShowMerge(false)}
>
Cancel
</button>
</div>
</div>
</div>
)}
</div>
);
}

189
frontend/src/pages/ReviewQueue.tsx Normal file
View file

@ -0,0 +1,189 @@
/**
* Admin review queue page.
*
* Shows stats bar, status filter tabs, paginated moment list, and mode toggle.
*/
import { useCallback, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
fetchQueue,
fetchStats,
type ReviewQueueItem,
type ReviewStatsResponse,
} from "../api/client";
import StatusBadge from "../components/StatusBadge";
import ModeToggle from "../components/ModeToggle";
const PAGE_SIZE = 20;
type StatusFilter = "all" | "pending" | "approved" | "edited" | "rejected";
const FILTERS: { label: string; value: StatusFilter }[] = [
{ label: "All", value: "all" },
{ label: "Pending", value: "pending" },
{ label: "Approved", value: "approved" },
{ label: "Edited", value: "edited" },
{ label: "Rejected", value: "rejected" },
];
function formatTime(seconds: number): string {
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s.toString().padStart(2, "0")}`;
}
export default function ReviewQueue() {
const [items, setItems] = useState<ReviewQueueItem[]>([]);
const [stats, setStats] = useState<ReviewStatsResponse | null>(null);
const [total, setTotal] = useState(0);
const [offset, setOffset] = useState(0);
const [filter, setFilter] = useState<StatusFilter>("pending");
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const loadData = useCallback(async (status: StatusFilter, page: number) => {
setLoading(true);
setError(null);
try {
const [queueRes, statsRes] = await Promise.all([
fetchQueue({
status: status === "all" ? undefined : status,
offset: page,
limit: PAGE_SIZE,
}),
fetchStats(),
]);
setItems(queueRes.items);
setTotal(queueRes.total);
setStats(statsRes);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to load queue");
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
void loadData(filter, offset);
}, [filter, offset, loadData]);
function handleFilterChange(f: StatusFilter) {
setFilter(f);
setOffset(0);
}
const hasNext = offset + PAGE_SIZE < total;
const hasPrev = offset > 0;
return (
<div>
{/* ── Header row with title and mode toggle ── */}
<div className="queue-header">
<h2>Review Queue</h2>
<ModeToggle />
</div>
{/* ── Stats bar ── */}
{stats && (
<div className="stats-bar">
<div className="stats-card stats-card--pending">
<span className="stats-card__count">{stats.pending}</span>
<span className="stats-card__label">Pending</span>
</div>
<div className="stats-card stats-card--approved">
<span className="stats-card__count">{stats.approved}</span>
<span className="stats-card__label">Approved</span>
</div>
<div className="stats-card stats-card--edited">
<span className="stats-card__count">{stats.edited}</span>
<span className="stats-card__label">Edited</span>
</div>
<div className="stats-card stats-card--rejected">
<span className="stats-card__count">{stats.rejected}</span>
<span className="stats-card__label">Rejected</span>
</div>
</div>
)}
{/* ── Filter tabs ── */}
<div className="filter-tabs">
{FILTERS.map((f) => (
<button
key={f.value}
type="button"
className={`filter-tab ${filter === f.value ? "filter-tab--active" : ""}`}
onClick={() => handleFilterChange(f.value)}
>
{f.label}
</button>
))}
</div>
{/* ── Queue list ── */}
{loading ? (
<div className="loading">Loading…</div>
) : error ? (
<div className="loading error-text">Error: {error}</div>
) : items.length === 0 ? (
<div className="empty-state">
<p>No moments match the "{filter}" filter.</p>
</div>
) : (
<>
<div className="queue-list">
{items.map((item) => (
<Link
key={item.id}
to={`/admin/review/${item.id}`}
className="queue-card"
>
<div className="queue-card__header">
<span className="queue-card__title">{item.title}</span>
<StatusBadge status={item.review_status} />
</div>
<p className="queue-card__summary">
{item.summary.length > 150
? `${item.summary.slice(0, 150)}…`
: item.summary}
</p>
<div className="queue-card__meta">
<span>{item.creator_name}</span>
<span className="queue-card__separator">·</span>
<span>{item.video_filename}</span>
<span className="queue-card__separator">·</span>
<span>
{formatTime(item.start_time)} – {formatTime(item.end_time)}
</span>
</div>
</Link>
))}
</div>
{/* ── Pagination ── */}
<div className="pagination">
<button
type="button"
className="btn"
disabled={!hasPrev}
onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
>
← Previous
</button>
<span className="pagination__info">
{offset + 1}–{Math.min(offset + PAGE_SIZE, total)} of {total}
</span>
<button
type="button"
className="btn"
disabled={!hasNext}
onClick={() => setOffset(offset + PAGE_SIZE)}
>
Next →
</button>
</div>
</>
)}
</div>
);
}

184
frontend/src/pages/SearchResults.tsx Normal file
View file

@ -0,0 +1,184 @@
/**
* Full search results page.
*
* Reads `q` from URL search params, calls searchApi, groups results by type
* (technique_pages first, then key_moments). Shows fallback banner when
* keyword search was used.
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { Link, useSearchParams, useNavigate } from "react-router-dom";
import { searchApi, type SearchResultItem } from "../api/public-client";
export default function SearchResults() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const q = searchParams.get("q") ?? "";
const [results, setResults] = useState<SearchResultItem[]>([]);
const [fallbackUsed, setFallbackUsed] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [localQuery, setLocalQuery] = useState(q);
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const doSearch = useCallback(async (query: string) => {
if (!query.trim()) {
setResults([]);
setFallbackUsed(false);
return;
}
setLoading(true);
setError(null);
try {
const res = await searchApi(query.trim());
setResults(res.items);
setFallbackUsed(res.fallback_used);
} catch (err) {
setError(err instanceof Error ? err.message : "Search failed");
setResults([]);
} finally {
setLoading(false);
}
}, []);
// Search when URL param changes
useEffect(() => {
setLocalQuery(q);
if (q) void doSearch(q);
}, [q, doSearch]);
function handleInputChange(value: string) {
setLocalQuery(value);
if (debounceRef.current) clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => {
if (value.trim()) {
navigate(`/search?q=${encodeURIComponent(value.trim())}`, {
replace: true,
});
}
}, 400);
}
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (debounceRef.current) clearTimeout(debounceRef.current);
if (localQuery.trim()) {
navigate(`/search?q=${encodeURIComponent(localQuery.trim())}`, {
replace: true,
});
}
}
// Group results by type
const techniqueResults = results.filter((r) => r.type === "technique_page");
const momentResults = results.filter((r) => r.type === "key_moment");
return (
<div className="search-results-page">
{/* Inline search bar */}
<form onSubmit={handleSubmit} className="search-form search-form--inline">
<input
type="search"
className="search-input search-input--inline"
placeholder="Search techniques…"
value={localQuery}
onChange={(e) => handleInputChange(e.target.value)}
aria-label="Refine search"
/>
<button type="submit" className="btn btn--search">
Search
</button>
</form>
{/* Status */}
{loading && <div className="loading">Searching…</div>}
{error && <div className="loading error-text">Error: {error}</div>}
{/* Fallback banner */}
{!loading && fallbackUsed && results.length > 0 && (
<div className="search-fallback-banner">
Showing keyword results — semantic search unavailable
</div>
)}
{/* No results */}
{!loading && !error && q && results.length === 0 && (
<div className="empty-state">
<p>No results found for "{q}"</p>
</div>
)}
{/* Technique pages */}
{techniqueResults.length > 0 && (
<section className="search-group">
<h3 className="search-group__title">
Techniques ({techniqueResults.length})
</h3>
<div className="search-group__list">
{techniqueResults.map((item) => (
<SearchResultCard key={`tp-${item.slug}`} item={item} />
))}
</div>
</section>
)}
{/* Key moments */}
{momentResults.length > 0 && (
<section className="search-group">
<h3 className="search-group__title">
Key Moments ({momentResults.length})
</h3>
<div className="search-group__list">
{momentResults.map((item, i) => (
<SearchResultCard key={`km-${item.slug}-${i}`} item={item} />
))}
</div>
</section>
)}
</div>
);
}
function SearchResultCard({ item }: { item: SearchResultItem }) {
return (
<Link
to={`/techniques/${item.slug}`}
className="search-result-card"
>
<div className="search-result-card__header">
<span className="search-result-card__title">{item.title}</span>
<span className={`badge badge--type badge--type-${item.type}`}>
{item.type === "technique_page" ? "Technique" : "Key Moment"}
</span>
</div>
{item.summary && (
<p className="search-result-card__summary">
{item.summary.length > 200
? `${item.summary.slice(0, 200)}…`
: item.summary}
</p>
)}
<div className="search-result-card__meta">
{item.creator_name && <span>{item.creator_name}</span>}
{item.topic_category && (
<>
<span className="queue-card__separator">·</span>
<span>{item.topic_category}</span>
</>
)}
{item.topic_tags.length > 0 && (
<span className="search-result-card__tags">
{item.topic_tags.map((tag) => (
<span key={tag} className="pill">
{tag}
</span>
))}
</span>
)}
</div>
</Link>
);
}

4
frontend/src/pages/TechniquePage.tsx
View file

@ -412,8 +412,8 @@ export default function TechniquePage() {
<ol className="technique-moments__list">
{technique.key_moments.map((km) => (
<li key={km.id} className="technique-moment">
<div className="technique-moment__header">
<span className="technique-moment__title">{km.title}</span>
<h3 className="technique-moment__title">{km.title}</h3>
<div className="technique-moment__meta">
{km.video_filename && (
<span className="technique-moment__source">
{km.video_filename}

156
frontend/src/pages/TopicsBrowse.tsx Normal file
View file

@ -0,0 +1,156 @@
/**
* Topics browse page (R008).
*
* Two-level hierarchy: 6 top-level categories with expandable/collapsible
* sub-topics. Each sub-topic shows technique_count and creator_count.
* Filter input narrows categories and sub-topics.
* Click sub-topic → search results filtered to that topic.
*/
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { fetchTopics, type TopicCategory } from "../api/public-client";
export default function TopicsBrowse() {
const [categories, setCategories] = useState<TopicCategory[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [expanded, setExpanded] = useState<Set<string>>(new Set());
const [filter, setFilter] = useState("");
useEffect(() => {
let cancelled = false;
setLoading(true);
setError(null);
void (async () => {
try {
const data = await fetchTopics();
if (!cancelled) {
setCategories(data);
// All expanded by default
setExpanded(new Set(data.map((c) => c.name)));
}
} catch (err) {
if (!cancelled) {
setError(
err instanceof Error ? err.message : "Failed to load topics",
);
}
} finally {
if (!cancelled) setLoading(false);
}
})();
return () => {
cancelled = true;
};
}, []);
function toggleCategory(name: string) {
setExpanded((prev) => {
const next = new Set(prev);
if (next.has(name)) {
next.delete(name);
} else {
next.add(name);
}
return next;
});
}
// Apply filter: show categories whose name or sub-topics match
const lowerFilter = filter.toLowerCase();
const filtered = filter
? categories
.map((cat) => {
const catMatches = cat.name.toLowerCase().includes(lowerFilter);
const matchingSubs = cat.sub_topics.filter((st) =>
st.name.toLowerCase().includes(lowerFilter),
);
if (catMatches) return cat; // show full category
if (matchingSubs.length > 0) {
return { ...cat, sub_topics: matchingSubs };
}
return null;
})
.filter(Boolean) as TopicCategory[]
: categories;
if (loading) {
return <div className="loading">Loading topics…</div>;
}
if (error) {
return <div className="loading error-text">Error: {error}</div>;
}
return (
<div className="topics-browse">
<h2 className="topics-browse__title">Topics</h2>
<p className="topics-browse__subtitle">
Browse techniques organized by category and sub-topic
</p>
{/* Filter */}
<input
type="search"
className="topics-filter-input"
placeholder="Filter topics…"
value={filter}
onChange={(e) => setFilter(e.target.value)}
aria-label="Filter topics"
/>
{filtered.length === 0 ? (
<div className="empty-state">
No topics matching "{filter}"
</div>
) : (
<div className="topics-list">
{filtered.map((cat) => (
<div key={cat.name} className="topic-category">
<button
className="topic-category__header"
onClick={() => toggleCategory(cat.name)}
aria-expanded={expanded.has(cat.name)}
>
<span className="topic-category__chevron">
{expanded.has(cat.name) ? "▼" : "▶"}
</span>
<span className="topic-category__name">{cat.name}</span>
<span className="topic-category__desc">{cat.description}</span>
<span className="topic-category__count">
{cat.sub_topics.length} sub-topic{cat.sub_topics.length !== 1 ? "s" : ""}
</span>
</button>
{expanded.has(cat.name) && (
<div className="topic-subtopics">
{cat.sub_topics.map((st) => (
<Link
key={st.name}
to={`/search?q=${encodeURIComponent(st.name)}&scope=topics`}
className="topic-subtopic"
>
<span className="topic-subtopic__name">{st.name}</span>
<span className="topic-subtopic__counts">
<span className="topic-subtopic__count">
{st.technique_count} technique{st.technique_count !== 1 ? "s" : ""}
</span>
<span className="topic-subtopic__separator">·</span>
<span className="topic-subtopic__count">
{st.creator_count} creator{st.creator_count !== 1 ? "s" : ""}
</span>
</span>
</Link>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
);
}

1
frontend/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

25
frontend/tsconfig.app.json Normal file
View file

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true
},
"include": ["src"]
}

1
frontend/tsconfig.app.tsbuildinfo Normal file
View file

@ -0,0 +1 @@
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/public-client.ts","./src/components/ModeToggle.tsx","./src/components/ReportIssueModal.tsx","./src/components/StatusBadge.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/MomentDetail.tsx","./src/pages/ReviewQueue.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}

4
frontend/tsconfig.json Normal file
View file

@ -0,0 +1,4 @@
{
"files": [],
"references": [{ "path": "./tsconfig.app.json" }]
}

14
frontend/vite.config.ts Normal file
View file

@ -0,0 +1,14 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:8001",
changeOrigin: true,
},
},
},
});