{!busy && (
diff --git a/client/src/components/timeline/Timeline.tsx b/client/src/components/timeline/Timeline.tsx
index 359d99a..cb9f65e 100644
--- a/client/src/components/timeline/Timeline.tsx
+++ b/client/src/components/timeline/Timeline.tsx
@@ -164,7 +164,6 @@ export function Timeline() {
title={`${r.start.toFixed(1)}s – ${r.end.toFixed(1)}s`}
>
{thumbnails[i]?.map((src, k) => (
- // eslint-disable-next-line @next/next/no-img-element -- locally generated data URL, not a static asset
{logoUrl && (
- // eslint-disable-next-line @next/next/no-img-element -- served from local storage, not a static asset Next can optimize
tag
+ * in index.html instead -- see index.html for why (no build-time
+ * font-fetch-and-self-host step in a plain Vite SPA, and this is a
+ * locally-run single-user tool, not a public site optimizing first-load
+ * metrics on a slow network).
+ */
+:root {
+ --font-plex-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+ --font-plex-mono: "IBM Plex Mono", ui-monospace, monospace;
+}
+
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
diff --git a/client/src/main.tsx b/client/src/main.tsx
new file mode 100644
index 0000000..bd4961a
--- /dev/null
+++ b/client/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { App } from "./App";
+import "./globals.css";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+);
diff --git a/client/src/routes/DashboardRoute.tsx b/client/src/routes/DashboardRoute.tsx
new file mode 100644
index 0000000..d232af1
--- /dev/null
+++ b/client/src/routes/DashboardRoute.tsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { Dashboard } from "@/components/dashboard/Dashboard";
+import type { Project } from "@/types/project";
+
+export function DashboardRoute() {
+ const [projects, setProjects] = useState
(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ fetch("/api/projects")
+ .then((res) => res.json())
+ .then((data: { success: true; projects: Project[] }) => {
+ if (!cancelled) setProjects(data.projects);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ if (projects === null) {
+ return Loading…
;
+ }
+
+ return ;
+}
diff --git a/client/src/routes/EditorRoute.tsx b/client/src/routes/EditorRoute.tsx
new file mode 100644
index 0000000..f2242d4
--- /dev/null
+++ b/client/src/routes/EditorRoute.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { EditorHydrator } from "@/components/editor/EditorHydrator";
+import { NotFoundRoute } from "@/routes/NotFoundRoute";
+import { toLogoPosition } from "@/lib/video/logo";
+import type { Transcript } from "@/types/transcript";
+import type { EditOperation } from "@/types/edit-operation";
+import type { CaptionStyle } from "@/lib/captions/style";
+import type { VideoProperties } from "@/types/video-properties";
+
+type ProjectDetailResponse = {
+ success: true;
+ project: {
+ id: string;
+ name: string;
+ duration: number | null;
+ filterId: string;
+ burnInCaptions: boolean;
+ captionStyle: CaptionStyle | null;
+ properties: VideoProperties | null;
+ logoPosition: string;
+ logoPaddingX: number;
+ logoPaddingY: number;
+ logoOpacity: number;
+ createdAt: string;
+ updatedAt: string;
+ };
+ transcript: Transcript | null;
+ operations: EditOperation[];
+ videoUrl: string | null;
+ logoUrl: string | null;
+};
+
+type FetchState =
+ | { status: "loading" }
+ | { status: "not-found" }
+ | { status: "error" }
+ | ({ status: "loaded" } & ProjectDetailResponse);
+
+export function EditorRoute() {
+ const { projectId } = useParams<{ projectId: string }>();
+ const [state, setState] = useState({ status: "loading" });
+
+ useEffect(() => {
+ let cancelled = false;
+ setState({ status: "loading" });
+
+ fetch(`/api/projects/${projectId}`)
+ .then(async (res) => {
+ if (res.status === 404) return { status: "not-found" as const };
+ if (!res.ok) return { status: "error" as const };
+ const data: ProjectDetailResponse = await res.json();
+ return { status: "loaded" as const, ...data };
+ })
+ .then((next) => {
+ if (!cancelled) setState(next);
+ })
+ .catch(() => {
+ if (!cancelled) setState({ status: "error" });
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [projectId]);
+
+ if (state.status === "loading") {
+ return Loading…
;
+ }
+ if (state.status === "not-found") {
+ return ;
+ }
+ if (state.status === "error") {
+ return (
+
+ Could not load this project. Try refreshing.
+
+ );
+ }
+
+ const { project, transcript, operations, videoUrl, logoUrl } = state;
+
+ return (
+
+ );
+}
diff --git a/client/src/app/new/page.tsx b/client/src/routes/NewProjectRoute.tsx
similarity index 68%
rename from client/src/app/new/page.tsx
rename to client/src/routes/NewProjectRoute.tsx
index 4580488..dff45e7 100644
--- a/client/src/app/new/page.tsx
+++ b/client/src/routes/NewProjectRoute.tsx
@@ -1,5 +1,5 @@
import { UploadScreen } from "@/components/editor/UploadScreen";
-export default function NewProjectPage() {
+export function NewProjectRoute() {
return ;
}
diff --git a/client/src/routes/NotFoundRoute.tsx b/client/src/routes/NotFoundRoute.tsx
new file mode 100644
index 0000000..a2df7f9
--- /dev/null
+++ b/client/src/routes/NotFoundRoute.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+import { ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function NotFoundRoute() {
+ return (
+
+
Project not found
+
+ It may have been deleted, or the link is wrong.
+
+
+
Loading…
;
+ }
+
+ return (
+
+
+
+
{hasApiKey ? "Replace API key" : "Welcome"}
+
+ {hasApiKey
+ ? "Enter a new OpenAI API key to replace the one currently configured."
+ : "This app uses your own OpenAI API key for transcription and AI features -- it's stored only on this machine, never sent anywhere but OpenAI."}
+
+
+
+
+ setKeyDraft(e.target.value)}
+ placeholder="sk-..."
+ disabled={saving}
+ autoFocus
+ onKeyDown={(e) => {
+ if (e.key === "Enter") void handleSave();
+ }}
+ />
+
+ {hasApiKey && (
+
+ )}
+
+
+ {error ? (
+
{error}
+ ) : (
+
+ platform.openai.com/api-keys
+
+ )}
+
+