Feat: Random Script picker

Author: michelroegl-brunner

frontend/src/app/random-script/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { fetchCategories } from "@/lib/data";
+import { Category, Script } from "@/lib/types";
+import { ScriptItem } from "@/app/scripts/_components/ScriptItem";
+import { Loader2, RefreshCw } from "lucide-react";
+
+function getRandomScript(categories: Category[]): Script | null {
+  const allScripts = categories.flatMap((cat) => cat.scripts || []);
+  if (allScripts.length === 0) return null;
+  const idx = Math.floor(Math.random() * allScripts.length);
+  return allScripts[idx];
+}
+
+export default function RandomScriptPage() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [randomScript, setRandomScript] = useState<Script | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch categories/scripts on mount
+  useEffect(() => {
+    setLoading(true);
+    fetchCategories()
+      .then((cats) => {
+        setCategories(cats);
+        setRandomScript(getRandomScript(cats));
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Handler to re-roll a new random script
+  const reroll = () => {
+    setRandomScript(getRandomScript(categories));
+  };
+
+  return (
+    <div className="mb-3">
+      <div className="mt-20 flex flex-col items-center sm:px-4 xl:px-0">
+        <div className="w-full max-w-5xl flex flex-col items-center">
+          <div className="w-full flex justify-between items-center mb-6">
+            <h1 className="text-2xl font-semibold tracking-tight">Random Script</h1>
+            <button
+              onClick={reroll}
+              className="flex items-center gap-2 rounded-lg bg-accent/30 px-4 py-2 text-base font-medium hover:bg-accent/50 transition-colors"
+              title="Pick another random script"
+              disabled={loading || categories.length === 0}
+            >
+              <RefreshCw className="h-5 w-5" />
+              Re-Roll
+            </button>
+          </div>
+          {loading ? (
+            <div className="flex flex-col items-center justify-center w-full h-64">
+              <Loader2 className="h-10 w-10 animate-spin" />
+            </div>
+          ) : randomScript ? (
+            <ScriptItem item={randomScript} setSelectedScript={() => { }} />
+          ) : (
+            <div className="text-center text-muted-foreground">
+              No scripts available.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}