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,114 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Info } from "lucide-react";
+
+import { useStudioStore } from "@/lib/studio-store";
+import type { SceneTransition } from "@/lib/studio-types";
+import { cn } from "@/lib/utils";
+
+const TRANSITION_OPTIONS = [
+  {
+    id: "random",
+    label: "Random Transition",
+    description: "Random",
+    gradientFrom: "#3b82f6",
+    gradientTo: "#8b5cf6",
+  },
+  {
+    id: "none",
+    label: "No Transition",
+    description: "None",
+    gradientFrom: "#374151",
+    gradientTo: "#1f2937",
+  },
+] as const;
+
+type TransitionOptionId = (typeof TRANSITION_OPTIONS)[number]["id"];
+
+function scenesUseTransition(scenes: { transitionType?: SceneTransition }[]): boolean {
+  return scenes.some((scene) => (scene.transitionType ?? "none") !== "none");
+}
+
+function optionToTransitionType(id: TransitionOptionId): SceneTransition {
+  return id === "random" ? "fade" : "none";
+}
+
+function TransitionOptionCard({
+  option,
+  selected,
+  onSelect,
+}: {
+  option: (typeof TRANSITION_OPTIONS)[number];
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "w-full cursor-pointer overflow-hidden rounded-lg ring-2 ring-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+        selected && "ring-[#4c6ef5]"
+      )}
+    >
+      <div
+        className="flex aspect-[4/3] flex-col items-center justify-center gap-1"
+        style={{
+          background: `linear-gradient(135deg, ${option.gradientFrom}, ${option.gradientTo})`,
+        }}
+      >
+        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
+        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
+        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
+      </div>
+      <p className="bg-gray-100 py-1.5 text-center text-[11px] font-semibold text-gray-700">
+        {option.label}
+      </p>
+    </button>
+  );
+}
+
+export function TransitionsSidebarContent() {
+  const scenes = useStudioStore((state) => state.scenes);
+  const applyTransitionToAllScenes = useStudioStore(
+    (state) => state.applyTransitionToAllScenes
+  );
+
+  const [selectedOption, setSelectedOption] = useState<TransitionOptionId>(() =>
+    scenesUseTransition(scenes) ? "random" : "none"
+  );
+
+  useEffect(() => {
+    setSelectedOption(scenesUseTransition(scenes) ? "random" : "none");
+  }, [scenes]);
+
+  const handleSelect = (id: TransitionOptionId) => {
+    setSelectedOption(id);
+    applyTransitionToAllScenes(optionToTransitionType(id));
+  };
+
+  return (
+    <aside className="flex h-full w-full flex-col overflow-hidden bg-white text-gray-900">
+      <h2 className="shrink-0 border-b border-gray-200 px-3 py-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
+        Transitions
+      </h2>
+
+      <div className="grid grid-cols-2 gap-2 p-2">
+        {TRANSITION_OPTIONS.map((option) => (
+          <TransitionOptionCard
+            key={option.id}
+            option={option}
+            selected={selectedOption === option.id}
+            onSelect={() => handleSelect(option.id)}
+          />
+        ))}
+      </div>
+
+      <div className="flex items-start gap-2 px-3 py-2 text-[10px] leading-relaxed text-gray-500">
+        <Info className="mt-0.5 h-3 w-3 shrink-0 text-gray-600" aria-hidden />
+        <p>Applied transitions will be visible on all scenes after export.</p>
+      </div>
+    </aside>
+  );
+}