feat: Split key moment card header into standalone h3 title and flex-ro…
- "frontend/src/pages/TechniquePage.tsx" - "frontend/src/App.css" GSD-Task: S03/T01
This commit is contained in:
jlightner
parent
b0038f21f7
commit
93a643f1b8
23 changed files with 4195 additions and 8 deletions
13
frontend/index.html
Normal file
13
frontend/index.html
Normal 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
1888
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
23
frontend/package.json
Normal file
23
frontend/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1341,7 +1341,15 @@ body {
|
||||||
border-radius: 0.5rem;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
|
@ -1349,11 +1357,6 @@ body {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.technique-moment__title {
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.technique-moment__time {
|
.technique-moment__time {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
|
|
|
||||||
193
frontend/src/api/client.ts
Normal file
193
frontend/src/api/client.ts
Normal 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
59
frontend/src/components/ModeToggle.tsx
Normal 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
135
frontend/src/components/ReportIssueModal.tsx
Normal 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
19
frontend/src/components/StatusBadge.tsx
Normal 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
13
frontend/src/main.tsx
Normal 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
246
frontend/src/pages/AdminReports.tsx
Normal 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
160
frontend/src/pages/CreatorDetail.tsx
Normal 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
185
frontend/src/pages/CreatorsBrowse.tsx
Normal 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
222
frontend/src/pages/Home.tsx
Normal 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
454
frontend/src/pages/MomentDetail.tsx
Normal 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
189
frontend/src/pages/ReviewQueue.tsx
Normal 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
184
frontend/src/pages/SearchResults.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -412,8 +412,8 @@ export default function TechniquePage() {
|
||||||
<ol className="technique-moments__list">
|
<ol className="technique-moments__list">
|
||||||
{technique.key_moments.map((km) => (
|
{technique.key_moments.map((km) => (
|
||||||
<li key={km.id} className="technique-moment">
|
<li key={km.id} className="technique-moment">
|
||||||
<div className="technique-moment__header">
|
<h3 className="technique-moment__title">{km.title}</h3>
|
||||||
<span className="technique-moment__title">{km.title}</span>
|
<div className="technique-moment__meta">
|
||||||
{km.video_filename && (
|
{km.video_filename && (
|
||||||
<span className="technique-moment__source">
|
<span className="technique-moment__source">
|
||||||
{km.video_filename}
|
{km.video_filename}
|
||||||
|
|
|
||||||
156
frontend/src/pages/TopicsBrowse.tsx
Normal file
156
frontend/src/pages/TopicsBrowse.tsx
Normal 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
1
frontend/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
25
frontend/tsconfig.app.json
Normal file
25
frontend/tsconfig.app.json
Normal 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
1
frontend/tsconfig.app.tsbuildinfo
Normal 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
4
frontend/tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [{ "path": "./tsconfig.app.json" }]
|
||||||
|
}
|
||||||
14
frontend/vite.config.ts
Normal file
14
frontend/vite.config.ts
Normal 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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue