fix(web): #268 multiple new projects bug

apps/web/src/app/editor/[project_id]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -33,25 +33,38 @@ export default function Editor() {
 
   const { activeProject, loadProject, createNewProject } = useProjectStore();
   const params = useParams();
+  const router = useRouter();
   const projectId = params.project_id as string;
+  const handledProjectIds = useRef<Set<string>>(new Set());
 
   usePlaybackControls();
 
   useEffect(() => {
-    const initializeProject = async () => {
+    const initProject = async () => {
-      if (projectId && (!activeProject || activeProject.id !== projectId)) {
+
-        try {
+      if (!projectId) return;
-          await loadProject(projectId);
+
-        } catch (error) {
+      if (activeProject?.id === projectId) {
-          console.error("Failed to load project:", error);
+        return;
-          // If project doesn't exist, create a new one
+      }
-          await createNewProject("Untitled Project");
+
-        }
+      if (handledProjectIds.current.has(projectId)) {
+        return;
+      }
+
+      try {
+        await loadProject(projectId);
+      } catch (error) {
+        handledProjectIds.current.add(projectId);
+
+        const newProjectId = await createNewProject("Untitled Project");
+        router.replace(`/editor/${newProjectId}`);
+        return;
       }
     };
 
-    initializeProject();
+    initProject();
-  }, [projectId, activeProject, loadProject, createNewProject]);
+  }, [projectId, activeProject?.id, loadProject, createNewProject, router]);
 
   return (
     <EditorProvider>