Revert "merge main"

This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.

5 files changed, 519 insertions, 522 deletions

diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
index aac7077e..c24929a2 100644
--- a/apps/web/src/stores/editor-store.ts
+++ b/apps/web/src/stores/editor-store.ts
@@ -1,104 +1,105 @@
-import { create } from "zustand";
-import { CanvasSize, CanvasPreset } from "@/types/editor";
-
-type CanvasMode = "preset" | "original" | "custom";
-
-interface EditorState {
-  // Loading states
-  isInitializing: boolean;
-  isPanelsReady: boolean;
-
-  // Canvas/Project settings
-  canvasSize: CanvasSize;
-  canvasMode: CanvasMode;
-  canvasPresets: CanvasPreset[];
-
-  // Actions
-  setInitializing: (loading: boolean) => void;
-  setPanelsReady: (ready: boolean) => void;
-  initializeApp: () => Promise<void>;
-  setCanvasSize: (size: CanvasSize) => void;
-  setCanvasSizeToOriginal: (aspectRatio: number) => void;
-  setCanvasSizeFromAspectRatio: (aspectRatio: number) => void;
-}
-
-const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [
-  { name: "16:9", width: 1920, height: 1080 },
-  { name: "9:16", width: 1080, height: 1920 },
-  { name: "1:1", width: 1080, height: 1080 },
-  { name: "4:3", width: 1440, height: 1080 },
-];
-
-// Helper function to find the best matching canvas preset for an aspect ratio
-const findBestCanvasPreset = (aspectRatio: number): CanvasSize => {
-  // Calculate aspect ratio for each preset and find the closest match
-  let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD
-  let smallestDifference = Math.abs(
-    aspectRatio - bestMatch.width / bestMatch.height
-  );
-
-  for (const preset of DEFAULT_CANVAS_PRESETS) {
-    const presetAspectRatio = preset.width / preset.height;
-    const difference = Math.abs(aspectRatio - presetAspectRatio);
-
-    if (difference < smallestDifference) {
-      smallestDifference = difference;
-      bestMatch = preset;
-    }
-  }
-
-  // If the difference is still significant (> 0.1), create a custom size
-  // based on the media aspect ratio with a reasonable resolution
-  const bestAspectRatio = bestMatch.width / bestMatch.height;
-  if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) {
-    // Create custom dimensions based on the aspect ratio
-    if (aspectRatio > 1) {
-      // Landscape - use 1920 width
-      return { width: 1920, height: Math.round(1920 / aspectRatio) };
-    }
-    // Portrait or square - use 1080 height
-    return { width: Math.round(1080 * aspectRatio), height: 1080 };
-  }
-
-  return { width: bestMatch.width, height: bestMatch.height };
-};
-
-export const useEditorStore = create<EditorState>((set, get) => ({
-  // Initial states
-  isInitializing: true,
-  isPanelsReady: false,
-  canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD
-  canvasMode: "preset" as CanvasMode,
-  canvasPresets: DEFAULT_CANVAS_PRESETS,
-
-  // Actions
-  setInitializing: (loading) => {
-    set({ isInitializing: loading });
-  },
-
-  setPanelsReady: (ready) => {
-    set({ isPanelsReady: ready });
-  },
-
-  initializeApp: async () => {
-    console.log("Initializing video editor...");
-    set({ isInitializing: true, isPanelsReady: false });
-
-    set({ isPanelsReady: true, isInitializing: false });
-    console.log("Video editor ready");
-  },
-
-  setCanvasSize: (size) => {
-    set({ canvasSize: size, canvasMode: "preset" });
-  },
-
-  setCanvasSizeToOriginal: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "original" });
-  },
-
-  setCanvasSizeFromAspectRatio: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "custom" });
-  },
-}));
+import { create } from "zustand";

+import { CanvasSize, CanvasPreset } from "@/types/editor";

+

+type CanvasMode = "preset" | "original" | "custom";

+

+interface EditorState {

+  // Loading states

+  isInitializing: boolean;

+  isPanelsReady: boolean;

+

+  // Canvas/Project settings

+  canvasSize: CanvasSize;

+  canvasMode: CanvasMode;

+  canvasPresets: CanvasPreset[];

+

+  // Actions

+  setInitializing: (loading: boolean) => void;

+  setPanelsReady: (ready: boolean) => void;

+  initializeApp: () => Promise<void>;

+  setCanvasSize: (size: CanvasSize) => void;

+  setCanvasSizeToOriginal: (aspectRatio: number) => void;

+  setCanvasSizeFromAspectRatio: (aspectRatio: number) => void;

+}

+

+const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [

+  { name: "16:9", width: 1920, height: 1080 },

+  { name: "9:16", width: 1080, height: 1920 },

+  { name: "1:1", width: 1080, height: 1080 },

+  { name: "4:3", width: 1440, height: 1080 },

+];

+

+// Helper function to find the best matching canvas preset for an aspect ratio

+const findBestCanvasPreset = (aspectRatio: number): CanvasSize => {

+  // Calculate aspect ratio for each preset and find the closest match

+  let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD

+  let smallestDifference = Math.abs(

+    aspectRatio - bestMatch.width / bestMatch.height

+  );

+

+  for (const preset of DEFAULT_CANVAS_PRESETS) {

+    const presetAspectRatio = preset.width / preset.height;

+    const difference = Math.abs(aspectRatio - presetAspectRatio);

+

+    if (difference < smallestDifference) {

+      smallestDifference = difference;

+      bestMatch = preset;

+    }

+  }

+

+  // If the difference is still significant (> 0.1), create a custom size

+  // based on the media aspect ratio with a reasonable resolution

+  const bestAspectRatio = bestMatch.width / bestMatch.height;

+  if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) {

+    // Create custom dimensions based on the aspect ratio

+    if (aspectRatio > 1) {

+      // Landscape - use 1920 width

+      return { width: 1920, height: Math.round(1920 / aspectRatio) };

+    } else {

+      // Portrait or square - use 1080 height

+      return { width: Math.round(1080 * aspectRatio), height: 1080 };

+    }

+  }

+

+  return { width: bestMatch.width, height: bestMatch.height };

+};

+

+export const useEditorStore = create<EditorState>((set, get) => ({

+  // Initial states

+  isInitializing: true,

+  isPanelsReady: false,

+  canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD

+  canvasMode: "preset" as CanvasMode,

+  canvasPresets: DEFAULT_CANVAS_PRESETS,

+

+  // Actions

+  setInitializing: (loading) => {

+    set({ isInitializing: loading });

+  },

+

+  setPanelsReady: (ready) => {

+    set({ isPanelsReady: ready });

+  },

+

+  initializeApp: async () => {

+    console.log("Initializing video editor...");

+    set({ isInitializing: true, isPanelsReady: false });

+

+    set({ isPanelsReady: true, isInitializing: false });

+    console.log("Video editor ready");

+  },

+

+  setCanvasSize: (size) => {

+    set({ canvasSize: size, canvasMode: "preset" });

+  },

+

+  setCanvasSizeToOriginal: (aspectRatio) => {

+    const newCanvasSize = findBestCanvasPreset(aspectRatio);

+    set({ canvasSize: newCanvasSize, canvasMode: "original" });

+  },

+

+  setCanvasSizeFromAspectRatio: (aspectRatio) => {

+    const newCanvasSize = findBestCanvasPreset(aspectRatio);

+    set({ canvasSize: newCanvasSize, canvasMode: "custom" });

+  },

+}));

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 029307d9..c4ee5f3e 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -219,19 +219,15 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
         mediaItems.map(async (item) => {
           if (item.type === "video" && item.file) {
             try {
-              const { thumbnailUrl, width, height } =
-                await generateVideoThumbnail(item.file);
+              const { thumbnailUrl, width, height } = await generateVideoThumbnail(item.file);
               return {
                 ...item,
                 thumbnailUrl,
                 width: width || item.width,
-                height: height || item.height,
+                height: height || item.height
               };
             } catch (error) {
-              console.error(
-                `Failed to regenerate thumbnail for video ${item.id}:`,
-                error
-              );
+              console.error(`Failed to regenerate thumbnail for video ${item.id}:`, error);
               return item;
             }
           }
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index b97235fa..450b6a6e 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -1,45 +1,45 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-const DEFAULT_PANEL_SIZES = {
-  toolsPanel: 45,
-  previewPanel: 75,
-  propertiesPanel: 20,
-  mainContent: 70,
-  timeline: 30,
-} as const;
-
-interface PanelState {
-  // Panel sizes as percentages
-  toolsPanel: number;
-  previewPanel: number;
-  propertiesPanel: number;
-  mainContent: number;
-  timeline: number;
-
-  // Actions
-  setToolsPanel: (size: number) => void;
-  setPreviewPanel: (size: number) => void;
-  setPropertiesPanel: (size: number) => void;
-  setMainContent: (size: number) => void;
-  setTimeline: (size: number) => void;
-}
-
-export const usePanelStore = create<PanelState>()(
-  persist(
-    (set) => ({
-      // Default sizes - optimized for responsiveness
-      ...DEFAULT_PANEL_SIZES,
-
-      // Actions
-      setToolsPanel: (size) => set({ toolsPanel: size }),
-      setPreviewPanel: (size) => set({ previewPanel: size }),
-      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
-      setMainContent: (size) => set({ mainContent: size }),
-      setTimeline: (size) => set({ timeline: size }),
-    }),
-    {
-      name: "panel-sizes",
-    }
-  )
-);
+import { create } from "zustand";

+import { persist } from "zustand/middleware";

+

+const DEFAULT_PANEL_SIZES = {

+  toolsPanel: 45,

+  previewPanel: 75,

+  propertiesPanel: 20,

+  mainContent: 70,

+  timeline: 30,

+} as const;

+

+interface PanelState {

+  // Panel sizes as percentages

+  toolsPanel: number;

+  previewPanel: number;

+  propertiesPanel: number;

+  mainContent: number;

+  timeline: number;

+

+  // Actions

+  setToolsPanel: (size: number) => void;

+  setPreviewPanel: (size: number) => void;

+  setPropertiesPanel: (size: number) => void;

+  setMainContent: (size: number) => void;

+  setTimeline: (size: number) => void;

+}

+

+export const usePanelStore = create<PanelState>()(

+  persist(

+    (set) => ({

+      // Default sizes - optimized for responsiveness

+      ...DEFAULT_PANEL_SIZES,

+

+      // Actions

+      setToolsPanel: (size) => set({ toolsPanel: size }),

+      setPreviewPanel: (size) => set({ previewPanel: size }),

+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),

+      setMainContent: (size) => set({ mainContent: size }),

+      setTimeline: (size) => set({ timeline: size }),

+    }),

+    {

+      name: "panel-sizes",

+    }

+  )

+);

diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 7bb38039..a8833982 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -1,360 +1,361 @@
-import { TProject } from "@/types/project";
-import { create } from "zustand";
-import { storageService } from "@/lib/storage/storage-service";
-import { toast } from "sonner";
-import { useMediaStore } from "./media-store";
-import { useTimelineStore } from "./timeline-store";
-import { generateUUID } from "@/lib/utils";
-
-interface ProjectStore {
-  activeProject: TProject | null;
-  savedProjects: TProject[];
-  isLoading: boolean;
-  isInitialized: boolean;
-
-  // Actions
-  createNewProject: (name: string) => Promise<string>;
-  loadProject: (id: string) => Promise<void>;
-  saveCurrentProject: () => Promise<void>;
-  loadAllProjects: () => Promise<void>;
-  deleteProject: (id: string) => Promise<void>;
-  closeProject: () => void;
-  renameProject: (projectId: string, name: string) => Promise<void>;
-  duplicateProject: (projectId: string) => Promise<string>;
-  updateProjectBackground: (backgroundColor: string) => Promise<void>;
-  updateBackgroundType: (
-    type: "color" | "blur",
-    options?: { backgroundColor?: string; blurIntensity?: number }
-  ) => Promise<void>;
-  updateProjectFps: (fps: number) => Promise<void>;
-
-  getFilteredAndSortedProjects: (
-    searchQuery: string,
-    sortOption: string
-  ) => TProject[];
-}
-
-export const useProjectStore = create<ProjectStore>((set, get) => ({
-  activeProject: null,
-  savedProjects: [],
-  isLoading: true,
-  isInitialized: false,
-
-  createNewProject: async (name: string) => {
-    const newProject: TProject = {
-      id: generateUUID(),
-      name,
-      thumbnail: "",
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      backgroundColor: "#000000",
-      backgroundType: "color",
-      blurIntensity: 8,
-    };
-
-    set({ activeProject: newProject });
-
-    try {
-      await storageService.saveProject(newProject);
-      // Reload all projects to update the list
-      await get().loadAllProjects();
-      return newProject.id;
-    } catch (error) {
-      toast.error("Failed to save new project");
-      throw error;
-    }
-  },
-
-  loadProject: async (id: string) => {
-    if (!get().isInitialized) {
-      set({ isLoading: true });
-    }
-
-    // Clear media and timeline immediately to prevent flickering when switching projects
-    const mediaStore = useMediaStore.getState();
-    const timelineStore = useTimelineStore.getState();
-    mediaStore.clearAllMedia();
-    timelineStore.clearTimeline();
-
-    try {
-      const project = await storageService.loadProject(id);
-      if (project) {
-        set({ activeProject: project });
-
-        // Load project-specific data in parallel
-        await Promise.all([
-          mediaStore.loadProjectMedia(id),
-          timelineStore.loadProjectTimeline(id),
-        ]);
-      } else {
-        throw new Error(`Project with id ${id} not found`);
-      }
-    } catch (error) {
-      console.error("Failed to load project:", error);
-      throw error; // Re-throw so the editor page can handle it
-    } finally {
-      set({ isLoading: false });
-    }
-  },
-
-  saveCurrentProject: async () => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    try {
-      // Save project metadata and timeline data in parallel
-      const timelineStore = useTimelineStore.getState();
-      await Promise.all([
-        storageService.saveProject(activeProject),
-        timelineStore.saveProjectTimeline(activeProject.id),
-      ]);
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to save project:", error);
-    }
-  },
-
-  loadAllProjects: async () => {
-    if (!get().isInitialized) {
-      set({ isLoading: true });
-    }
-
-    try {
-      const projects = await storageService.loadAllProjects();
-      set({ savedProjects: projects });
-    } catch (error) {
-      console.error("Failed to load projects:", error);
-    } finally {
-      set({ isLoading: false, isInitialized: true });
-    }
-  },
-
-  deleteProject: async (id: string) => {
-    try {
-      // Delete project data in parallel
-      await Promise.all([
-        storageService.deleteProjectMedia(id),
-        storageService.deleteProjectTimeline(id),
-        storageService.deleteProject(id),
-      ]);
-      await get().loadAllProjects(); // Refresh the list
-
-      // If we deleted the active project, close it and clear data
-      const { activeProject } = get();
-      if (activeProject?.id === id) {
-        set({ activeProject: null });
-        const mediaStore = useMediaStore.getState();
-        const timelineStore = useTimelineStore.getState();
-        mediaStore.clearAllMedia();
-        timelineStore.clearTimeline();
-      }
-    } catch (error) {
-      console.error("Failed to delete project:", error);
-    }
-  },
-
-  closeProject: () => {
-    set({ activeProject: null });
-
-    // Clear data from stores when closing project
-    const mediaStore = useMediaStore.getState();
-    const timelineStore = useTimelineStore.getState();
-    mediaStore.clearAllMedia();
-    timelineStore.clearTimeline();
-  },
-
-  renameProject: async (id: string, name: string) => {
-    const { savedProjects } = get();
-
-    // Find the project to rename
-    const projectToRename = savedProjects.find((p) => p.id === id);
-    if (!projectToRename) {
-      toast.error("Project not found", {
-        description: "Please try again",
-      });
-      return;
-    }
-
-    const updatedProject = {
-      ...projectToRename,
-      name,
-      updatedAt: new Date(),
-    };
-
-    try {
-      // Save to storage
-      await storageService.saveProject(updatedProject);
-
-      await get().loadAllProjects();
-
-      // Update activeProject if it's the same project
-      const { activeProject } = get();
-      if (activeProject?.id === id) {
-        set({ activeProject: updatedProject });
-      }
-    } catch (error) {
-      console.error("Failed to rename project:", error);
-      toast.error("Failed to rename project", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-    }
-  },
-
-  duplicateProject: async (projectId: string) => {
-    try {
-      const project = await storageService.loadProject(projectId);
-      if (!project) {
-        toast.error("Project not found", {
-          description: "Please try again",
-        });
-        throw new Error("Project not found");
-      }
-
-      const { savedProjects } = get();
-
-      // Extract the base name (remove any existing numbering)
-      const numberMatch = project.name.match(/^\((\d+)\)\s+(.+)$/);
-      const baseName = numberMatch ? numberMatch[2] : project.name;
-      const existingNumbers: number[] = [];
-
-      // Check for pattern "(number) baseName" in existing projects
-      savedProjects.forEach((p) => {
-        const match = p.name.match(/^\((\d+)\)\s+(.+)$/);
-        if (match && match[2] === baseName) {
-          existingNumbers.push(parseInt(match[1], 10));
-        }
-      });
-
-      const nextNumber =
-        existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
-
-      const newProject: TProject = {
-        id: generateUUID(),
-        name: `(${nextNumber}) ${baseName}`,
-        thumbnail: project.thumbnail,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      await storageService.saveProject(newProject);
-      await get().loadAllProjects();
-      return newProject.id;
-    } catch (error) {
-      console.error("Failed to duplicate project:", error);
-      toast.error("Failed to duplicate project", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-      throw error;
-    }
-  },
-
-  updateProjectBackground: async (backgroundColor: string) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      backgroundColor,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update project background:", error);
-      toast.error("Failed to update background", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  updateBackgroundType: async (
-    type: "color" | "blur",
-    options?: { backgroundColor?: string; blurIntensity?: number }
-  ) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      backgroundType: type,
-      ...(options?.backgroundColor && {
-        backgroundColor: options.backgroundColor,
-      }),
-      ...(options?.blurIntensity && { blurIntensity: options.blurIntensity }),
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update background type:", error);
-      toast.error("Failed to update background", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  updateProjectFps: async (fps: number) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      fps,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update project FPS:", error);
-      toast.error("Failed to update project FPS", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {
-    const { savedProjects } = get();
-
-    // Filter projects by search query
-    const filteredProjects = savedProjects.filter((project) =>
-      project.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-
-    // Sort filtered projects
-    const sortedProjects = [...filteredProjects].sort((a, b) => {
-      const [key, order] = sortOption.split("-");
-
-      if (key !== "createdAt" && key !== "name") {
-        console.warn(`Invalid sort key: ${key}`);
-        return 0;
-      }
-
-      const aValue = a[key];
-      const bValue = b[key];
-
-      if (aValue === undefined || bValue === undefined) return 0;
-
-      if (order === "asc") {
-        if (aValue < bValue) return -1;
-        if (aValue > bValue) return 1;
-        return 0;
-      }
-      if (aValue > bValue) return -1;
-      if (aValue < bValue) return 1;
-      return 0;
-    });
-
-    return sortedProjects;
-  },
-}));
+import { TProject } from "@/types/project";

+import { create } from "zustand";

+import { storageService } from "@/lib/storage/storage-service";

+import { toast } from "sonner";

+import { useMediaStore } from "./media-store";

+import { useTimelineStore } from "./timeline-store";

+import { generateUUID } from "@/lib/utils";

+

+interface ProjectStore {

+  activeProject: TProject | null;

+  savedProjects: TProject[];

+  isLoading: boolean;

+  isInitialized: boolean;

+

+  // Actions

+  createNewProject: (name: string) => Promise<string>;

+  loadProject: (id: string) => Promise<void>;

+  saveCurrentProject: () => Promise<void>;

+  loadAllProjects: () => Promise<void>;

+  deleteProject: (id: string) => Promise<void>;

+  closeProject: () => void;

+  renameProject: (projectId: string, name: string) => Promise<void>;

+  duplicateProject: (projectId: string) => Promise<string>;

+  updateProjectBackground: (backgroundColor: string) => Promise<void>;

+  updateBackgroundType: (

+    type: "color" | "blur",

+    options?: { backgroundColor?: string; blurIntensity?: number }

+  ) => Promise<void>;

+  updateProjectFps: (fps: number) => Promise<void>;

+

+  getFilteredAndSortedProjects: (

+    searchQuery: string,

+    sortOption: string

+  ) => TProject[];

+}

+

+export const useProjectStore = create<ProjectStore>((set, get) => ({

+  activeProject: null,

+  savedProjects: [],

+  isLoading: true,

+  isInitialized: false,

+

+  createNewProject: async (name: string) => {

+    const newProject: TProject = {

+      id: generateUUID(),

+      name,

+      thumbnail: "",

+      createdAt: new Date(),

+      updatedAt: new Date(),

+      backgroundColor: "#000000",

+      backgroundType: "color",

+      blurIntensity: 8,

+    };

+

+    set({ activeProject: newProject });

+

+    try {

+      await storageService.saveProject(newProject);

+      // Reload all projects to update the list

+      await get().loadAllProjects();

+      return newProject.id;

+    } catch (error) {

+      toast.error("Failed to save new project");

+      throw error;

+    }

+  },

+

+  loadProject: async (id: string) => {

+    if (!get().isInitialized) {

+      set({ isLoading: true });

+    }

+

+    // Clear media and timeline immediately to prevent flickering when switching projects

+    const mediaStore = useMediaStore.getState();

+    const timelineStore = useTimelineStore.getState();

+    mediaStore.clearAllMedia();

+    timelineStore.clearTimeline();

+

+    try {

+      const project = await storageService.loadProject(id);

+      if (project) {

+        set({ activeProject: project });

+

+        // Load project-specific data in parallel

+        await Promise.all([

+          mediaStore.loadProjectMedia(id),

+          timelineStore.loadProjectTimeline(id),

+        ]);

+      } else {

+        throw new Error(`Project with id ${id} not found`);

+      }

+    } catch (error) {

+      console.error("Failed to load project:", error);

+      throw error; // Re-throw so the editor page can handle it

+    } finally {

+      set({ isLoading: false });

+    }

+  },

+

+  saveCurrentProject: async () => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    try {

+      // Save project metadata and timeline data in parallel

+      const timelineStore = useTimelineStore.getState();

+      await Promise.all([

+        storageService.saveProject(activeProject),

+        timelineStore.saveProjectTimeline(activeProject.id),

+      ]);

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to save project:", error);

+    }

+  },

+

+  loadAllProjects: async () => {

+    if (!get().isInitialized) {

+      set({ isLoading: true });

+    }

+

+    try {

+      const projects = await storageService.loadAllProjects();

+      set({ savedProjects: projects });

+    } catch (error) {

+      console.error("Failed to load projects:", error);

+    } finally {

+      set({ isLoading: false, isInitialized: true });

+    }

+  },

+

+  deleteProject: async (id: string) => {

+    try {

+      // Delete project data in parallel

+      await Promise.all([

+        storageService.deleteProjectMedia(id),

+        storageService.deleteProjectTimeline(id),

+        storageService.deleteProject(id),

+      ]);

+      await get().loadAllProjects(); // Refresh the list

+

+      // If we deleted the active project, close it and clear data

+      const { activeProject } = get();

+      if (activeProject?.id === id) {

+        set({ activeProject: null });

+        const mediaStore = useMediaStore.getState();

+        const timelineStore = useTimelineStore.getState();

+        mediaStore.clearAllMedia();

+        timelineStore.clearTimeline();

+      }

+    } catch (error) {

+      console.error("Failed to delete project:", error);

+    }

+  },

+

+  closeProject: () => {

+    set({ activeProject: null });

+

+    // Clear data from stores when closing project

+    const mediaStore = useMediaStore.getState();

+    const timelineStore = useTimelineStore.getState();

+    mediaStore.clearAllMedia();

+    timelineStore.clearTimeline();

+  },

+

+  renameProject: async (id: string, name: string) => {

+    const { savedProjects } = get();

+

+    // Find the project to rename

+    const projectToRename = savedProjects.find((p) => p.id === id);

+    if (!projectToRename) {

+      toast.error("Project not found", {

+        description: "Please try again",

+      });

+      return;

+    }

+

+    const updatedProject = {

+      ...projectToRename,

+      name,

+      updatedAt: new Date(),

+    };

+

+    try {

+      // Save to storage

+      await storageService.saveProject(updatedProject);

+

+      await get().loadAllProjects();

+

+      // Update activeProject if it's the same project

+      const { activeProject } = get();

+      if (activeProject?.id === id) {

+        set({ activeProject: updatedProject });

+      }

+    } catch (error) {

+      console.error("Failed to rename project:", error);

+      toast.error("Failed to rename project", {

+        description:

+          error instanceof Error ? error.message : "Please try again",

+      });

+    }

+  },

+

+  duplicateProject: async (projectId: string) => {

+    try {

+      const project = await storageService.loadProject(projectId);

+      if (!project) {

+        toast.error("Project not found", {

+          description: "Please try again",

+        });

+        throw new Error("Project not found");

+      }

+

+      const { savedProjects } = get();

+

+      // Extract the base name (remove any existing numbering)

+      const numberMatch = project.name.match(/^\((\d+)\)\s+(.+)$/);

+      const baseName = numberMatch ? numberMatch[2] : project.name;

+      const existingNumbers: number[] = [];

+

+      // Check for pattern "(number) baseName" in existing projects

+      savedProjects.forEach((p) => {

+        const match = p.name.match(/^\((\d+)\)\s+(.+)$/);

+        if (match && match[2] === baseName) {

+          existingNumbers.push(parseInt(match[1], 10));

+        }

+      });

+

+      const nextNumber =

+        existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;

+

+      const newProject: TProject = {

+        id: generateUUID(),

+        name: `(${nextNumber}) ${baseName}`,

+        thumbnail: project.thumbnail,

+        createdAt: new Date(),

+        updatedAt: new Date(),

+      };

+

+      await storageService.saveProject(newProject);

+      await get().loadAllProjects();

+      return newProject.id;

+    } catch (error) {

+      console.error("Failed to duplicate project:", error);

+      toast.error("Failed to duplicate project", {

+        description:

+          error instanceof Error ? error.message : "Please try again",

+      });

+      throw error;

+    }

+  },

+

+  updateProjectBackground: async (backgroundColor: string) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      backgroundColor,

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update project background:", error);

+      toast.error("Failed to update background", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  updateBackgroundType: async (

+    type: "color" | "blur",

+    options?: { backgroundColor?: string; blurIntensity?: number }

+  ) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      backgroundType: type,

+      ...(options?.backgroundColor && {

+        backgroundColor: options.backgroundColor,

+      }),

+      ...(options?.blurIntensity && { blurIntensity: options.blurIntensity }),

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update background type:", error);

+      toast.error("Failed to update background", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  updateProjectFps: async (fps: number) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      fps,

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update project FPS:", error);

+      toast.error("Failed to update project FPS", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {

+    const { savedProjects } = get();

+

+    // Filter projects by search query

+    const filteredProjects = savedProjects.filter((project) =>

+      project.name.toLowerCase().includes(searchQuery.toLowerCase())

+    );

+

+    // Sort filtered projects

+    const sortedProjects = [...filteredProjects].sort((a, b) => {

+      const [key, order] = sortOption.split("-");

+

+      if (key !== "createdAt" && key !== "name") {

+        console.warn(`Invalid sort key: ${key}`);

+        return 0;

+      }

+

+      const aValue = a[key];

+      const bValue = b[key];

+

+      if (aValue === undefined || bValue === undefined) return 0;

+

+      if (order === "asc") {

+        if (aValue < bValue) return -1;

+        if (aValue > bValue) return 1;

+        return 0;

+      } else {

+        if (aValue > bValue) return -1;

+        if (aValue < bValue) return 1;

+        return 0;

+      }

+    });

+

+    return sortedProjects;

+  },

+}));

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 820025cc..8a4abc6a 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -295,8 +295,9 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
                   { trackId, elementId },
                 ],
               };
+        } else {
+          return { selectedElements: [{ trackId, elementId }] };
         }
-        return { selectedElements: [{ trackId, elementId }] };
       });
     },
 
@@ -679,8 +680,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
                 (element) => element.id !== elementId
               ),
             };
-          }
-          if (track.id === toTrackId) {
+          } else if (track.id === toTrackId) {
             return {
               ...track,
               elements: [...track.elements, elementToMove],
@@ -1091,7 +1091,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
         if (!fileType) return false;
 
         // Process the new media file
-        const mediaData: any = {
+        let mediaData: any = {
           name: newFile.name,
           type: fileType,
           file: newFile,
@@ -1204,8 +1204,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
           );
           const { thumbnailUrl } = await generateVideoThumbnail(mediaItem.file);
           return thumbnailUrl;
-        }
-        if (mediaItem.type === "image" && mediaItem.url) {
+        } else if (mediaItem.type === "image" && mediaItem.url) {
           return mediaItem.url;
         }