From 7bf0984698e43b9aa2dd879f65951318ed410390 Mon Sep 17 00:00:00 2001 From: Maze <167211895+mazeincoding@users.noreply.github.com> Date: Sat, 31 Jan 2026 00:20:04 +0100 Subject: codebase overhaul (#697) --- .../src/components/providers/editor-provider.tsx | 169 +++++++++++++++----- .../providers/migrators/scenes-migrator.tsx | 177 --------------------- 2 files changed, 126 insertions(+), 220 deletions(-) delete mode 100644 apps/web/src/components/providers/migrators/scenes-migrator.tsx (limited to 'apps/web/src/components/providers') 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(); - - // Set up action handlers - useEditorActions(); - - // Set up keybinding listener - useKeybindingsListener(); - - // Disable keybindings when initializing - useEffect(() => { - if (isInitializing || !isPanelsReady) { - disableKeybindings(); - } else { - enableKeybindings(); - } - }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]); - - useEffect(() => { - initializeApp(); - }, [initializeApp]); - - // Show loading screen while initializing - if (isInitializing || !isPanelsReady) { - return ( -
-
- -

Loading editor...

-
-
- ); - } - - // App is ready, render children - return <>{children}; +export function EditorProvider({ projectId, children }: EditorProviderProps) { + const editor = useEditor(); + const router = useRouter(); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + const { disableKeybindings, enableKeybindings } = useKeybindingDisabler(); + const activeProject = editor.project.getActiveOrNull(); + + useEffect(() => { + if (isLoading) { + disableKeybindings(); + } else { + enableKeybindings(); + } + }, [isLoading, disableKeybindings, enableKeybindings]); + + useEffect(() => { + let cancelled = false; + + const loadProject = async () => { + try { + setIsLoading(true); + await editor.project.loadProject({ id: projectId }); + + if (cancelled) return; + + setIsLoading(false); + } catch (err) { + if (cancelled) return; + + 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 ( +
+
+

{error}

+
+
+ ); + } + + if (isLoading) { + return ( +
+
+ +

Loading project...

+
+
+ ); + } + + if (!activeProject) { + return ( +
+
+ +

Exiting project...

+
+
+ ); + } + + return ( + <> + + {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({ - 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 ( - - e.preventDefault()} - > - - Updating Projects - - We're adding scene support to your projects. This will only take a - moment. - - - -
-
-
- Progress - - {progress.current} of {progress.total} - -
- -
- - {progress.currentProjectName && ( -
- {progress.current < progress.total - ? `Updating: ${progress.currentProjectName}` - : progress.currentProjectName} -
- )} -
- - - ); - } - - return children; -} -- cgit v1.3.1