1 files changed, 27 insertions, 13 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 315e0764..aa5b7315 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
-import { useParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -16,6 +16,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
+import { Onboarding } from "@/components/onboarding";
 
 export default function Editor() {
   const {
@@ -33,25 +34,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());
+  const [isOnboardingOpen, setIsOnboardingOpen] = useState(true);
 
   usePlaybackControls();
 
   useEffect(() => {
-    const initializeProject = async () => {
-      if (projectId && (!activeProject || activeProject.id !== projectId)) {
-        try {
-          await loadProject(projectId);
-        } catch (error) {
-          console.error("Failed to load project:", error);
-          // If project doesn't exist, create a new one
-          await createNewProject("Untitled Project");
-        }
+    const initProject = async () => {
+      if (!projectId) return;
+
+      if (activeProject?.id === projectId) {
+        return;
+      }
+
+      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();
-  }, [projectId, activeProject, loadProject, createNewProject]);
+    initProject();
+  }, [projectId, activeProject?.id, loadProject, createNewProject, router]);
 
   return (
     <EditorProvider>