feat: implement project management features with storage integration, including project creation, deletion, and renaming dialogs

1 files changed, 172 insertions, 14 deletions

diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 43113fc1..4fff83c2 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -1,19 +1,32 @@
 import { TProject } from "@/types/project";

 import { create } from "zustand";

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

+import { toast } from "sonner";

 

 interface ProjectStore {

   activeProject: TProject | null;

+  savedProjects: TProject[];

+  isLoading: boolean;

+  isInitialized: boolean;

 

   // Actions

-  createNewProject: (name: string) => void;

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

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

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

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

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

   closeProject: () => void;

-  updateProjectName: (name: string) => void;

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

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

 }

 

-export const useProjectStore = create<ProjectStore>((set) => ({

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

   activeProject: null,

+  savedProjects: [],

+  isLoading: true,

+  isInitialized: false,

 

-  createNewProject: (name: string) => {

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

     const newProject: TProject = {

       id: crypto.randomUUID(),

       name,

@@ -21,22 +34,167 @@ export const useProjectStore = create<ProjectStore>((set) => ({
       createdAt: new Date(),

       updatedAt: new Date(),

     };

+

     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 });

+    }

+

+    try {

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

+      if (project) {

+        set({ activeProject: project });

+      }

+    } catch (error) {

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

+    } finally {

+      set({ isLoading: false });

+    }

+  },

+

+  saveCurrentProject: async () => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    try {

+      await storageService.saveProject(activeProject);

+      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 {

+      await storageService.deleteProject(id);

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

+

+      // If we deleted the active project, close it

+      const { activeProject } = get();

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

+        set({ activeProject: null });

+      }

+    } catch (error) {

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

+    }

   },

 

   closeProject: () => {

     set({ activeProject: null });

   },

 

-  updateProjectName: (name: string) => {

-    set((state) => ({

-      activeProject: state.activeProject

-        ? {

-            ...state.activeProject,

-            name,

-            updatedAt: new Date(),

-          }

-        : null,

-    }));

+  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: crypto.randomUUID(),

+        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;

+    }

   },

 }));