2 files changed, 135 insertions, 27 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 26fdcf8a..5e294fe7 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -32,39 +32,121 @@ export default function Editor() {
     setPropertiesPanel,
   } = usePanelStore();
 
-  const { activeProject, loadProject, createNewProject } = useProjectStore();
+  const {
+    activeProject,
+    loadProject,
+    createNewProject,
+    isInvalidProjectId,
+    markProjectIdAsInvalid,
+  } = useProjectStore();
   const params = useParams();
   const router = useRouter();
   const projectId = params.project_id as string;
   const handledProjectIds = useRef<Set<string>>(new Set());
+  const isInitializingRef = useRef<boolean>(false);
 
   usePlaybackControls();
 
   useEffect(() => {
+    let isCancelled = false;
+
     const initProject = async () => {
-      if (!projectId) return;
+      if (!projectId) {
+        return;
+      }
 
+      // Prevent duplicate initialization
+      if (isInitializingRef.current) {
+        return;
+      }
+
+      // Check if project is already loaded
       if (activeProject?.id === projectId) {
         return;
       }
 
+      // Check global invalid tracking first (most important for preventing duplicates)
+      if (isInvalidProjectId(projectId)) {
+        return;
+      }
+
+      // Check if we've already handled this project ID locally
       if (handledProjectIds.current.has(projectId)) {
         return;
       }
 
+      // Mark as initializing to prevent race conditions
+      isInitializingRef.current = true;
+      handledProjectIds.current.add(projectId);
+
       try {
         await loadProject(projectId);
+
+        // Check if component was unmounted during async operation
+        if (isCancelled) {
+          return;
+        }
+
+        // Project loaded successfully
+        isInitializingRef.current = false;
       } catch (error) {
-        handledProjectIds.current.add(projectId);
+        // Check if component was unmounted during async operation
+        if (isCancelled) {
+          return;
+        }
 
-        const newProjectId = await createNewProject("Untitled Project");
-        router.replace(`/editor/${newProjectId}`);
-        return;
+        // More specific error handling - only create new project for actual "not found" errors
+        const isProjectNotFound =
+          error instanceof Error &&
+          (error.message.includes("not found") ||
+            error.message.includes("does not exist") ||
+            error.message.includes("Project not found"));
+
+        if (isProjectNotFound) {
+          // Mark this project ID as invalid globally BEFORE creating project
+          markProjectIdAsInvalid(projectId);
+
+          try {
+            const newProjectId = await createNewProject("Untitled Project");
+
+            // Check again if component was unmounted
+            if (isCancelled) {
+              return;
+            }
+
+            router.replace(`/editor/${newProjectId}`);
+          } catch (createError) {
+            console.error("Failed to create new project:", createError);
+          }
+        } else {
+          // For other errors (storage issues, corruption, etc.), don't create new project
+          console.error(
+            "Project loading failed with recoverable error:",
+            error
+          );
+          // Remove from handled set so user can retry
+          handledProjectIds.current.delete(projectId);
+        }
+
+        isInitializingRef.current = false;
       }
     };
 
     initProject();
-  }, [projectId, activeProject?.id, loadProject, createNewProject, router]);
+
+    // Cleanup function to cancel async operations
+    return () => {
+      isCancelled = true;
+      isInitializingRef.current = false;
+    };
+  }, [
+    projectId,
+    loadProject,
+    createNewProject,
+    router,
+    isInvalidProjectId,
+    markProjectIdAsInvalid,
+  ]);
 
   return (
     <EditorProvider>
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 69aca3ec..bfabba1f 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -11,6 +11,7 @@ interface ProjectStore {
   savedProjects: TProject[];
   isLoading: boolean;
   isInitialized: boolean;
+  invalidProjectIds?: Set<string>;
 
   // Actions
   createNewProject: (name: string) => Promise<string>;
@@ -27,7 +28,7 @@ interface ProjectStore {
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
-  
+
   // Bookmark methods
   toggleBookmark: (time: number) => Promise<void>;
   isBookmarked: (time: number) => boolean;
@@ -37,6 +38,11 @@ interface ProjectStore {
     searchQuery: string,
     sortOption: string
   ) => TProject[];
+
+  // Global invalid project ID tracking
+  isInvalidProjectId: (id: string) => boolean;
+  markProjectIdAsInvalid: (id: string) => void;
+  clearInvalidProjectIds: () => void;
 }
 
 export const useProjectStore = create<ProjectStore>((set, get) => ({
@@ -44,24 +50,25 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   savedProjects: [],
   isLoading: true,
   isInitialized: false,
-  
+  invalidProjectIds: new Set<string>(),
+
   // Implementation of bookmark methods
   toggleBookmark: async (time: number) => {
     const { activeProject } = get();
     if (!activeProject) return;
-    
+
     // Round time to the nearest frame
     const fps = activeProject.fps || 30;
     const frameTime = Math.round(time * fps) / fps;
-    
+
     const bookmarks = activeProject.bookmarks || [];
     let updatedBookmarks: number[];
-    
+
     // Check if already bookmarked
     const bookmarkIndex = bookmarks.findIndex(
-      bookmark => Math.abs(bookmark - frameTime) < 0.001
+      (bookmark) => Math.abs(bookmark - frameTime) < 0.001
     );
-    
+
     if (bookmarkIndex !== -1) {
       // Remove bookmark
       updatedBookmarks = bookmarks.filter((_, i) => i !== bookmarkIndex);
@@ -69,13 +76,13 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       // Add bookmark
       updatedBookmarks = [...bookmarks, frameTime].sort((a, b) => a - b);
     }
-    
+
     const updatedProject = {
       ...activeProject,
       bookmarks: updatedBookmarks,
       updatedAt: new Date(),
     };
-    
+
     try {
       await storageService.saveProject(updatedProject);
       set({ activeProject: updatedProject });
@@ -87,43 +94,43 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       });
     }
   },
-  
+
   isBookmarked: (time: number) => {
     const { activeProject } = get();
     if (!activeProject || !activeProject.bookmarks) return false;
-    
+
     // Round time to the nearest frame
     const fps = activeProject.fps || 30;
     const frameTime = Math.round(time * fps) / fps;
-    
+
     return activeProject.bookmarks.some(
-      bookmark => Math.abs(bookmark - frameTime) < 0.001
+      (bookmark) => Math.abs(bookmark - frameTime) < 0.001
     );
   },
-  
+
   removeBookmark: async (time: number) => {
     const { activeProject } = get();
     if (!activeProject || !activeProject.bookmarks) return;
-    
+
     // Round time to the nearest frame
     const fps = activeProject.fps || 30;
     const frameTime = Math.round(time * fps) / fps;
-    
+
     const updatedBookmarks = activeProject.bookmarks.filter(
-      bookmark => Math.abs(bookmark - frameTime) >= 0.001
+      (bookmark) => Math.abs(bookmark - frameTime) >= 0.001
     );
-    
+
     if (updatedBookmarks.length === activeProject.bookmarks.length) {
       // No bookmark found to remove
       return;
     }
-    
+
     const updatedProject = {
       ...activeProject,
       bookmarks: updatedBookmarks,
       updatedAt: new Date(),
     };
-    
+
     try {
       await storageService.saveProject(updatedProject);
       set({ activeProject: updatedProject });
@@ -454,4 +461,23 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
 
     return sortedProjects;
   },
+
+  // Global invalid project ID tracking implementation
+  isInvalidProjectId: (id: string) => {
+    const invalidIds = get().invalidProjectIds || new Set();
+    return invalidIds.has(id);
+  },
+
+  markProjectIdAsInvalid: (id: string) => {
+    set((state) => ({
+      invalidProjectIds: new Set([
+        ...(state.invalidProjectIds || new Set()),
+        id,
+      ]),
+    }));
+  },
+
+  clearInvalidProjectIds: () => {
+    set({ invalidProjectIds: new Set() });
+  },
 }));