Key Shots

components/shots/NewShotDialog.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select";
 import { createShot } from "@/actions/shots";
 import { useToast } from "@/components/ui/use-toast";
+import { Star } from "lucide-react";
 
 const shotSchema = z.object({
   scene: z.string().min(1, "Scene is required").max(50).regex(/^[A-Z0-9_]+$/i, "Alphanumeric and underscore only"),
@@ -50,6 +51,7 @@ export function NewShotDialog({ projectId, projectType = "STANDARD", shotGroups
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
   const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
+  const [isKeyShot, setIsKeyShot] = useState(false);
   const { toast } = useToast();
   const router = useRouter();
   const isEpisodic = projectType === "EPISODIC";
@@ -101,11 +103,12 @@ export function NewShotDialog({ projectId, projectType = "STANDARD", shotGroups
         thumbnailUrl = uploadData.url;
       }
 
-      await createShot({ projectId, ...data, thumbnailUrl });
+      await createShot({ projectId, ...data, thumbnailUrl, isKeyShot });
       toast({ title: "Shot created" });
       reset();
       setThumbnailFile(null);
       setThumbnailPreview(null);
+      setIsKeyShot(false);
       router.refresh();
       onSuccess?.();
       onClose();
@@ -240,6 +243,32 @@ export function NewShotDialog({ projectId, projectType = "STANDARD", shotGroups
             </div>
           </div>
 
+          {/* Key shot toggle */}
+          <div className="flex items-center justify-between rounded-lg border border-zinc-700 px-4 py-3">
+            <div className="flex items-center gap-2.5">
+              <Star className={isKeyShot ? "h-4 w-4 text-amber-400 fill-amber-400" : "h-4 w-4 text-zinc-500"} />
+              <div>
+                <p className="text-sm font-medium text-zinc-200">Key Shot</p>
+                <p className="text-xs text-zinc-500">Prioritised and highlighted across the project</p>
+              </div>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={isKeyShot}
+              onClick={() => setIsKeyShot((v) => !v)}
+              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 ${
+                isKeyShot ? "bg-amber-500" : "bg-zinc-600"
+              }`}
+            >
+              <span
+                className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg transition-transform ${
+                  isKeyShot ? "translate-x-4" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+
           <DialogFooter>
             <Button type="button" variant="outline" onClick={onClose}>
               Cancel