codebase overhaul (#697)

2 files changed, 120 insertions, 214 deletions

diff --git a/apps/web/src/components/providers/editor-provider.tsx b/apps/web/src/components/providers/editor-provider.tsx
index b8e9ae1d..b1b5ab3a 100644
--- a/apps/web/src/components/providers/editor-provider.tsx
+++ b/apps/web/src/components/providers/editor-provider.tsx
@@ -1,53 +1,136 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
-import { useEditorStore } from "@/stores/editor-store";
+import { useEditor } from "@/hooks/use-editor";
 import {
-  useKeybindingsListener,
-  useKeybindingDisabler,
+	useKeybindingsListener,
+	useKeybindingDisabler,
 } from "@/hooks/use-keybindings";
-import { useEditorActions } from "@/hooks/use-editor-actions";
+import { useEditorActions } from "@/hooks/actions/use-editor-actions";
 
 interface EditorProviderProps {
-  children: React.ReactNode;
+	projectId: string;
+	children: React.ReactNode;
 }
 
-export function EditorProvider({ children }: EditorProviderProps) {
-  const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
-  const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
+export function EditorProvider({ projectId, children }: EditorProviderProps) {
+	const editor = useEditor();
+	const router = useRouter();
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
+	const activeProject = editor.project.getActiveOrNull();
 
-  // Set up action handlers
-  useEditorActions();
+	useEffect(() => {
+		if (isLoading) {
+			disableKeybindings();
+		} else {
+			enableKeybindings();
+		}
+	}, [isLoading, disableKeybindings, enableKeybindings]);
 
-  // Set up keybinding listener
-  useKeybindingsListener();
+	useEffect(() => {
+		let cancelled = false;
 
-  // Disable keybindings when initializing
-  useEffect(() => {
-    if (isInitializing || !isPanelsReady) {
-      disableKeybindings();
-    } else {
-      enableKeybindings();
-    }
-  }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]);
+		const loadProject = async () => {
+			try {
+				setIsLoading(true);
+				await editor.project.loadProject({ id: projectId });
 
-  useEffect(() => {
-    initializeApp();
-  }, [initializeApp]);
+				if (cancelled) return;
 
-  // Show loading screen while initializing
-  if (isInitializing || !isPanelsReady) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">Loading editor...</p>
-        </div>
-      </div>
-    );
-  }
+				setIsLoading(false);
+			} catch (err) {
+				if (cancelled) return;
 
-  // App is ready, render children
-  return <>{children}</>;
+				const isNotFound =
+					err instanceof Error &&
+					(err.message.includes("not found") ||
+						err.message.includes("does not exist"));
+
+				if (isNotFound) {
+					try {
+						const newProjectId = await editor.project.createNewProject({
+							name: "Untitled Project",
+						});
+						router.replace(`/editor/${newProjectId}`);
+					} catch (_createErr) {
+						setError("Failed to create project");
+						setIsLoading(false);
+					}
+				} else {
+					setError(
+						err instanceof Error ? err.message : "Failed to load project",
+					);
+					setIsLoading(false);
+				}
+			}
+		};
+
+		loadProject();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [projectId, editor, router]);
+
+	if (error) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<p className="text-destructive text-sm">{error}</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (isLoading) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground size-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Loading project...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (!activeProject) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground size-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Exiting project...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<EditorRuntimeBindings />
+			{children}
+		</>
+	);
+}
+
+function EditorRuntimeBindings() {
+	const editor = useEditor();
+
+	useEffect(() => {
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (!editor.save.getIsDirty()) return;
+			event.preventDefault();
+			(event as unknown as { returnValue: string }).returnValue = "";
+		};
+
+		window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+	}, [editor]);
+
+	useEditorActions();
+	useKeybindingsListener();
+	return null;
 }
diff --git a/apps/web/src/components/providers/migrators/scenes-migrator.tsx b/apps/web/src/components/providers/migrators/scenes-migrator.tsx
deleted file mode 100644
index b984a7f4..00000000
--- a/apps/web/src/components/providers/migrators/scenes-migrator.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import { storageService } from "@/lib/storage/storage-service";
-import { TProject, Scene } from "@/types/project";
-import { generateUUID } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Progress } from "@/components/ui/progress";
-import { createMainScene } from "@/stores/project-store";
-
-interface MigrationProgress {
-  current: number;
-  total: number;
-  currentProjectName: string;
-}
-
-export function ScenesMigrator({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const [isMigrating, setIsMigrating] = useState(false);
-  const [progress, setProgress] = useState<MigrationProgress>({
-    current: 0,
-    total: 0,
-    currentProjectName: "",
-  });
-
-  const shouldCheckMigration =
-    pathname.startsWith("/editor") || pathname.startsWith("/projects");
-
-  useEffect(() => {
-    if (!shouldCheckMigration) return;
-
-    checkAndMigrateProjects();
-  }, [shouldCheckMigration]);
-
-  const checkAndMigrateProjects = async () => {
-    try {
-      const projects = await storageService.loadAllProjects();
-      const legacyProjects = projects.filter(
-        (project) => !project.scenes || project.scenes.length === 0
-      );
-
-      if (legacyProjects.length === 0) {
-        // No migration needed
-        return;
-      }
-
-      setIsMigrating(true);
-      setProgress({
-        current: 0,
-        total: legacyProjects.length,
-        currentProjectName: "",
-      });
-
-      // Migrate each legacy project
-      for (let i = 0; i < legacyProjects.length; i++) {
-        const project = legacyProjects[i];
-
-        setProgress({
-          current: i,
-          total: legacyProjects.length,
-          currentProjectName: project.name,
-        });
-
-        await migrateLegacyProject(project);
-      }
-
-      setProgress({
-        current: legacyProjects.length,
-        total: legacyProjects.length,
-        currentProjectName: "Complete!",
-      });
-
-      setTimeout(() => {
-        setIsMigrating(false);
-      }, 1000);
-    } catch (error) {
-      console.error("Migration failed:", error);
-      setIsMigrating(false);
-    }
-  };
-
-  const migrateLegacyProject = async (project: TProject) => {
-    try {
-      const mainScene: Scene = {
-        id: generateUUID(),
-        name: "Main Scene",
-        isMain: true,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      const migratedProject: TProject = {
-        ...project,
-        scenes: [mainScene],
-        currentSceneId: mainScene.id,
-        updatedAt: new Date(),
-      };
-
-      // Load existing timeline data (legacy format)
-      const legacyTimeline = await storageService.loadTimeline({
-        projectId: project.id,
-      });
-
-      await storageService.saveProject({ project: migratedProject });
-
-      // If timeline data, migrate it to the main scene
-      if (legacyTimeline && legacyTimeline.length > 0) {
-        await storageService.saveTimeline({
-          projectId: project.id,
-          tracks: legacyTimeline,
-          sceneId: mainScene.id,
-        });
-      }
-
-      // Clean up legacy timeline storage
-      await storageService.deleteProjectTimeline({ projectId: project.id });
-    } catch (error) {
-      console.error(`Failed to migrate project ${project.name}:`, error);
-      throw error;
-    }
-  };
-
-  if (!shouldCheckMigration) {
-    return children;
-  }
-
-  if (isMigrating) {
-    const progressPercent =
-      progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
-
-    return (
-      <Dialog open={true}>
-        <DialogContent
-          className="sm:max-w-md"
-          onPointerDownOutside={(e) => e.preventDefault()}
-        >
-          <DialogHeader>
-            <DialogTitle>Updating Projects</DialogTitle>
-            <DialogDescription>
-              We're adding scene support to your projects. This will only take a
-              moment.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span>Progress</span>
-                <span>
-                  {progress.current} of {progress.total}
-                </span>
-              </div>
-              <Progress value={progressPercent} className="w-full" />
-            </div>
-
-            {progress.currentProjectName && (
-              <div className="text-sm text-muted-foreground">
-                {progress.current < progress.total
-                  ? `Updating: ${progress.currentProjectName}`
-                  : progress.currentProjectName}
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return children;
-}