+
);
}
diff --git a/app/(auth)/setup/_components/setup-form.tsx b/app/(auth)/setup/_components/setup-form.tsx
deleted file mode 100644
index 640886b..0000000
--- a/app/(auth)/setup/_components/setup-form.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client";
-
-import {
- IconCheck,
- IconCopy,
- IconExternalLink,
- IconKey,
-} from "@tabler/icons-react";
-import { motion } from "motion/react";
-import { useRouter } from "next/navigation";
-import { useActionState, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
-import { checkTmdbConfigured } from "@/lib/actions/setup";
-
-const steps = [
- {
- number: "1",
- title: "Create a TMDB account",
- description: (
- <>
- Head to{" "}
-
- themoviedb.org
-
- {" "}
- and sign up for a free account.
-
- ),
- },
- {
- number: "2",
- title: "Request an API key",
- description: (
- <>
- Go to{" "}
-
- Settings → API
-
- {" "}
- and request an API key. Choose “Developer” when asked. You
- need the{" "}
-
- API Read Access Token
- {" "}
- (the long one).
-
- ),
- },
- {
- number: "3",
- title: "Add it to your environment",
- description:
- "Set the TMDB_API_READ_ACCESS_TOKEN environment variable and restart Sofa.",
- },
-];
-
-const envSnippets = [
- {
- label: ".env file",
- code: "TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here",
- },
- {
- label: "Docker Compose",
- code: `environment:
- - TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here`,
- },
- {
- label: "Docker run",
- code: "docker run -e TMDB_API_READ_ACCESS_TOKEN=your_token ...",
- },
-];
-
-const sectionVariants = {
- hidden: { opacity: 0, y: 24 },
- visible: {
- opacity: 1,
- y: 0,
- transition: { type: "spring" as const, stiffness: 200, damping: 24 },
- },
-};
-
-export function SetupForm() {
- const router = useRouter();
- const [configured, checkAction, isPending] = useActionState(
- () => checkTmdbConfigured(),
- false,
- );
- const [copiedIdx, setCopiedIdx] = useState(null);
-
- useEffect(() => {
- if (configured) {
- const t = setTimeout(() => router.push("/"), 1500);
- return () => clearTimeout(t);
- }
- }, [configured, router]);
-
- function copySnippet(idx: number, code: string) {
- navigator.clipboard.writeText(code);
- setCopiedIdx(idx);
- setTimeout(() => setCopiedIdx(null), 2000);
- }
-
- return (
-
- {/* Header */}
-
-
-
- Setup required
-
-
- Connect to TMDB
-
-
- Sofa uses{" "}
-
- The Movie Database
- {" "}
- for movie & TV metadata, posters, and streaming availability.
- You'll need a free API key to get started.
-
This page was left on the cutting room floor. It may have been
@@ -50,7 +33,7 @@ export default function NotFound() {
{/* Actions */}
diff --git a/app/setup/_components/copy-button.tsx b/app/setup/_components/copy-button.tsx
new file mode 100644
index 0000000..663201f
--- /dev/null
+++ b/app/setup/_components/copy-button.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function CopyButton({ code }: { code: string }) {
+ const [copied, setCopied] = useState(false);
+
+ function handleCopy() {
+ navigator.clipboard.writeText(code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+
+ return (
+
+ );
+}
diff --git a/app/setup/_components/refresh-button.tsx b/app/setup/_components/refresh-button.tsx
new file mode 100644
index 0000000..fcd0976
--- /dev/null
+++ b/app/setup/_components/refresh-button.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { IconRefresh } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+export function RefreshButton() {
+ const router = useRouter();
+ const [isRefreshing, startTransition] = useTransition();
+
+ function handleRefresh() {
+ startTransition(async () => {
+ router.refresh();
+ });
+ }
+
+ return (
+
+ );
+}
diff --git a/app/setup/page.tsx b/app/setup/page.tsx
new file mode 100644
index 0000000..a82ae24
--- /dev/null
+++ b/app/setup/page.tsx
@@ -0,0 +1,197 @@
+import { IconExternalLink, IconKey } from "@tabler/icons-react";
+import { redirect } from "next/navigation";
+import { connection } from "next/server";
+import { Suspense } from "react";
+import { TmdbLogo } from "@/components/tmdb-logo";
+import { isTmdbConfigured } from "@/lib/config";
+import { CopyButton } from "./_components/copy-button";
+import { RefreshButton } from "./_components/refresh-button";
+
+const steps = [
+ {
+ number: "1",
+ title: "Create a TMDB account",
+ description: (
+ <>
+ Head to{" "}
+
+ themoviedb.org
+
+ {" "}
+ and sign up for a free account.
+
+ ),
+ },
+ {
+ number: "2",
+ title: "Request an API key",
+ description: (
+ <>
+ Go to{" "}
+
+ Settings → API
+
+ {" "}
+ and request an API key. Choose “Developer” when asked. You
+ need the{" "}
+
+ API Read Access Token
+ {" "}
+ (the long one).
+
+ ),
+ },
+ {
+ number: "3",
+ title: "Add it to your environment",
+ description:
+ "Set the TMDB_API_READ_ACCESS_TOKEN environment variable and restart Sofa.",
+ },
+];
+
+const envSnippets = [
+ {
+ label: ".env file",
+ code: "TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here",
+ },
+ {
+ label: "Docker Compose",
+ code: `environment:
+ - TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here`,
+ },
+ {
+ label: "Docker run",
+ code: "docker run -e TMDB_API_READ_ACCESS_TOKEN=your_api_read_access_token_here ...",
+ },
+];
+
+export default function SetupPage() {
+ return (
+
+
+
+ );
+}
+
+export async function SetupContent() {
+ await connection();
+ if (isTmdbConfigured()) redirect("/");
+
+ return (
+
+ {/* Header */}
+
+
+
+ Setup required
+
+
+ Connect to TMDB
+
+
+ Sofa uses{" "}
+
+ The Movie Database
+
+ {" "}
+ for movie & TV metadata, posters, and streaming availability.
+ You'll need a free API key to get started.
+
+
+
+ {/* Steps */}
+
+ {steps.map((step, i) => (
+
+
+
+ {step.number}
+
+
+
+
{step.title}
+
+ {step.description}
+
+
+ {/* Show env snippets for step 3 */}
+ {i === 2 && (
+