Slates

app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx

@@ -30,11 +30,13 @@ import {
   FileVideo,
   Pencil,
   Check,
+  LayoutList,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import type { ShotWithDetails } from "@/types";
 import { ShotSettingsTab } from "@/components/shots/ShotSettingsTab";
 import { ShotExportsTab } from "@/components/shots/ShotExportsTab";
+import { ShotSlateTab } from "@/components/shots/ShotSlateTab";
 import { FootageViewer } from "@/components/shots/FootageViewer";
 import { HighResUploadDialog } from "@/components/shots/HighResUploadDialog";
 import { duplicateShot, internallyApproveShot, shareWithClient, unshareFromClient, unapproveShot, updateShotVersion } from "@/actions/shots";
@@ -90,7 +92,7 @@ export default function ShotDetailPage() {
   const [isDuplicating, setIsDuplicating] = useState(false);
   const [isActioning, setIsActioning] = useState(false);
   const [highResDialogOpen, setHighResDialogOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<"tasks" | "reviews" | "footage" | "exports" | "settings">("tasks");
+  const [activeTab, setActiveTab] = useState<"tasks" | "slate" | "reviews" | "footage" | "exports" | "settings">("tasks");
   const [editingVersion, setEditingVersion] = useState(false);
   const [versionInput, setVersionInput] = useState("");
   const [savingVersion, setSavingVersion] = useState(false);
@@ -520,6 +522,18 @@ export default function ShotDetailPage() {
             <ListTodo className="h-4 w-4" />
             Tasks
           </button>
+          <button
+            onClick={() => setActiveTab("slate")}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px",
+              activeTab === "slate"
+                ? "border-amber-500 text-amber-400"
+                : "border-transparent text-zinc-500 hover:text-zinc-300"
+            )}
+          >
+            <LayoutList className="h-4 w-4" />
+            Slate
+          </button>
           <button
             onClick={() => setActiveTab("reviews")}
             className={cn(
@@ -583,6 +597,10 @@ export default function ShotDetailPage() {
           />
         )}
 
+        {activeTab === "slate" && (
+          <ShotSlateTab shot={shot} projectName={projectName} onSaved={fetchShot} />
+        )}
+
         {activeTab === "reviews" && (
           <div className="space-y-3">
             {tasks.length === 0 ? (