refactor(core): switch to scene-based architecture

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>
+  );
+}

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">