refactor: move canvas size to be a project-level setting instead of editor-level

1 files changed, 41 insertions, 12 deletions

diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 5c617dff..db6d014a 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -5,6 +5,22 @@ import { toast } from "sonner";
 import { useMediaStore } from "./media-store";
 import { useTimelineStore } from "./timeline-store";
 import { generateUUID } from "@/lib/utils";
+import { CanvasSize, CanvasMode } from "@/types/editor";
+
+const DEFAULT_PROJECT: TProject = {
+  id: generateUUID(),
+  name: "Untitled",
+  thumbnail: "",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  backgroundColor: "#000000",
+  backgroundType: "color",
+  blurIntensity: 8,
+  bookmarks: [],
+  fps: 30,
+  canvasSize: { width: 1920, height: 1080 },
+  canvasMode: "preset",
+};
 
 interface ProjectStore {
   activeProject: TProject | null;
@@ -28,6 +44,7 @@ interface ProjectStore {
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
+  updateCanvasSize: (size: CanvasSize, mode: CanvasMode) => Promise<void>;
 
   // Bookmark methods
   toggleBookmark: (time: number) => Promise<void>;
@@ -144,18 +161,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   },
 
   createNewProject: async (name: string) => {
-    const newProject: TProject = {
-      id: generateUUID(),
-      name,
-      thumbnail: "",
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      backgroundColor: "#000000",
-      backgroundType: "color",
-      blurIntensity: 8,
-      bookmarks: [],
-      fps: 30,
-    };
+    const newProject: TProject = { ...DEFAULT_PROJECT, name };
 
     set({ activeProject: newProject });
 
@@ -428,6 +434,29 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     }
   },
 
+  updateCanvasSize: async (size: CanvasSize, mode: CanvasMode) => {
+    const { activeProject } = get();
+    if (!activeProject) return;
+
+    const updatedProject = {
+      ...activeProject,
+      canvasSize: size,
+      canvasMode: mode,
+      updatedAt: new Date(),
+    };
+
+    try {
+      await storageService.saveProject(updatedProject);
+      set({ activeProject: updatedProject });
+      await get().loadAllProjects(); // Refresh the list
+    } catch (error) {
+      console.error("Failed to update canvas size:", error);
+      toast.error("Failed to update canvas size", {
+        description: "Please try again",
+      });
+    }
+  },
+
   getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {
     const { savedProjects } = get();