feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,96 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ChevronDown, Clapperboard, ImageIcon, Plus, Scissors } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ProjectType } from "@/lib/projects";
+
+interface NewProjectMenuProps {
+  triggerLabel?: string;
+  triggerClassName?: string;
+  align?: "start" | "center" | "end";
+}
+
+export function NewProjectMenu({
+  triggerLabel = "New Project",
+  triggerClassName,
+  align = "end",
+}: NewProjectMenuProps) {
+  const router = useRouter();
+  const [isCreating, setIsCreating] = useState(false);
+
+  const createProject = async (type: ProjectType) => {
+    setIsCreating(true);
+    try {
+      const response = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type }),
+      });
+
+      const data = (await response.json()) as {
+        project?: { id: string; type: ProjectType };
+        error?: string;
+      };
+
+      if (!response.ok || !data.project) {
+        return;
+      }
+
+      if (data.project.type === "video") {
+        router.push(`/studio/video/${data.project.id}`);
+        return;
+      }
+      if (data.project.type === "image") {
+        router.push(`/studio/image/${data.project.id}`);
+        return;
+      }
+      router.push("/studio/trimmer");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className={triggerClassName} disabled={isCreating}>
+          <Plus className="h-4 w-4" aria-hidden />
+          {isCreating ? "Creating…" : triggerLabel}
+          <ChevronDown className="h-4 w-4 opacity-80" aria-hidden />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="w-56">
+        <DropdownMenuItem
+          className="cursor-pointer gap-2"
+          onClick={() => router.push("/studio/video/new")}
+        >
+          <Clapperboard className="h-4 w-4 text-primary-600" />
+          Video Project
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="cursor-pointer gap-2"
+          onClick={() => createProject("image")}
+        >
+          <ImageIcon className="h-4 w-4 text-violet-600" />
+          Image Project
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="cursor-pointer gap-2"
+          onClick={() => createProject("trimmer")}
+        >
+          <Scissors className="h-4 w-4 text-amber-600" />
+          Trim/Crop Video
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}