refactor(core): switch to scene-based architecture

2 files changed, 73 insertions, 4 deletions

diff --git a/apps/web/src/components/editor/scenes-view.tsx b/apps/web/src/components/editor/scenes-view.tsx
new file mode 100644
index 00000000..f1df32e9
--- /dev/null
+++ b/apps/web/src/components/editor/scenes-view.tsx
@@ -0,0 +1,64 @@
+"use client";

+

+import {

+  Sheet,

+  SheetContent,

+  SheetDescription,

+  SheetHeader,

+  SheetTitle,

+  SheetTrigger,

+} from "@/components/ui/sheet";

+import { Button } from "@/components/ui/button";

+import { useSceneStore } from "@/stores/scene-store";

+import { Check } from "lucide-react";

+

+export function ScenesView({ children }: { children: React.ReactNode }) {

+  const { scenes, currentScene, switchToScene } = useSceneStore();

+

+  const handleSceneSwitch = async (sceneId: string) => {

+    try {

+      await switchToScene({ sceneId });

+    } catch (error) {

+      console.error("Failed to switch scene:", error);

+    }

+  };

+

+  return (

+    <Sheet>

+      <SheetTrigger asChild>{children}</SheetTrigger>

+      <SheetContent>

+        <SheetHeader>

+          <SheetTitle>Scenes</SheetTitle>

+          <SheetDescription>

+            Switch between scenes in your project

+          </SheetDescription>

+        </SheetHeader>

+        <div className="py-4">

+          {scenes.length === 0 ? (

+            <div className="text-sm text-muted-foreground">

+              No scenes available

+            </div>

+          ) : (

+            <div className="space-y-2">

+              {scenes.map((scene) => (

+                <Button

+                  key={scene.id}

+                  variant={

+                    currentScene?.id === scene.id ? "default" : "outline"

+                  }

+                  className="w-full justify-between"

+                  onClick={() => handleSceneSwitch(scene.id)}

+                >

+                  <span>{scene.name}</span>

+                  {currentScene?.id === scene.id && (

+                    <Check className="h-4 w-4" />

+                  )}

+                </Button>

+              ))}

+            </div>

+          )}

+        </div>

+      </SheetContent>

+    </Sheet>

+  );

+}

diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
index cc9190e2..2daf1ccc 100644
--- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
@@ -1,6 +1,7 @@
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
+import { useSceneStore } from "@/stores/scene-store";
 import { toast } from "sonner";
 import {
   TooltipProvider,
@@ -38,6 +39,7 @@ import { DEFAULT_FPS } from "@/stores/project-store";
 import { formatTimeCode } from "@/lib/time";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { EditableTimecode } from "@/components/ui/editable-timecode";
+import { ScenesView } from "../scenes-view";
 
 export function TimelineToolbar({
   zoomLevel,
@@ -65,6 +67,7 @@ export function TimelineToolbar({
   } = useTimelineStore();
   const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
   const { toggleBookmark, isBookmarked, activeProject } = useProjectStore();
+  const { currentScene } = useSceneStore();
 
   const handleSplitSelected = () => {
     if (selectedElements.length === 0) return;
@@ -357,11 +360,13 @@ export function TimelineToolbar({
       </div>
       <div>
         <SplitButton>
-          <SplitButtonLeft>Main scene</SplitButtonLeft>
+          <SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft>
           <SplitButtonSeparator />
-          <SplitButtonRight onClick={() => {}}>
-            <LayersIcon />
-          </SplitButtonRight>
+          <ScenesView>
+            <SplitButtonRight onClick={() => {}}>
+              <LayersIcon />
+            </SplitButtonRight>
+          </ScenesView>
         </SplitButton>
       </div>
       <div className="flex items-center gap-1">