added custom grouping on project pages

components/shots/NewShotDialog.tsx

@@ -29,6 +29,7 @@ import { useToast } from "@/components/ui/use-toast";
 const shotSchema = z.object({
   scene: z.string().min(1, "Scene is required").max(50).regex(/^[A-Z0-9_]+$/i, "Alphanumeric and underscore only"),
   episode: z.string().max(50).optional(),
+  shotGroupName: z.string().max(100).optional(),
   description: z.string().optional(),
   priority: z.enum(["LOW", "NORMAL", "HIGH", "URGENT"]),
   fps: z.coerce.number().min(1).max(120),
@@ -39,12 +40,13 @@ type ShotFormValues = z.infer<typeof shotSchema>;
 interface NewShotDialogProps {
   projectId: string;
   projectType?: "STANDARD" | "EPISODIC";
+  shotGroups?: { id: string; name: string }[];
   open: boolean;
   onClose: () => void;
   onSuccess?: () => void;
 }
 
-export function NewShotDialog({ projectId, projectType = "STANDARD", open, onClose, onSuccess }: NewShotDialogProps) {
+export function NewShotDialog({ projectId, projectType = "STANDARD", shotGroups = [], open, onClose, onSuccess }: NewShotDialogProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
   const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
@@ -160,6 +162,23 @@ export function NewShotDialog({ projectId, projectType = "STANDARD", open, onClo
             {isEpisodic ? "SHOW_EP01_SC010_0010" : "SHOW_SC010_0010"})
           </p>
 
+          <div className="space-y-1.5">
+            <Label htmlFor="shotGroupName">Group <span className="text-muted-foreground font-normal">(optional)</span></Label>
+            <Input
+              id="shotGroupName"
+              list="shot-group-suggestions"
+              placeholder={shotGroups.length > 0 ? "Choose or type a new group" : "e.g. Action Sequences"}
+              {...register("shotGroupName")}
+            />
+            {shotGroups.length > 0 && (
+              <datalist id="shot-group-suggestions">
+                {shotGroups.map((g) => (
+                  <option key={g.id} value={g.name} />
+                ))}
+              </datalist>
+            )}
+          </div>
+
           <div className="space-y-1.5">
             <Label htmlFor="description">Description</Label>
             <Textarea