From 6b77e83ca0a14111fb675338102f7b0683ea1fcb Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 13:08:37 +0200
Subject: rename app provider to editor provider and add it to the editor
 instead

---
 apps/web/src/app/editor/page.tsx            | 99 +++++++++++++++--------------
 apps/web/src/app/layout.tsx                 | 13 ++--
 apps/web/src/components/app-provider.tsx    | 42 ------------
 apps/web/src/components/editor-provider.tsx | 42 ++++++++++++
 apps/web/src/stores/app-store.ts            | 35 ----------
 apps/web/src/stores/editor-store.ts         | 35 ++++++++++
 6 files changed, 133 insertions(+), 133 deletions(-)
 delete mode 100644 apps/web/src/components/app-provider.tsx
 create mode 100644 apps/web/src/components/editor-provider.tsx
 delete mode 100644 apps/web/src/stores/app-store.ts
 create mode 100644 apps/web/src/stores/editor-store.ts

(limited to 'apps/web/src')

diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index f9f64ee6..cc2db108 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -13,6 +13,7 @@ import { PreviewPanel } from "../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
+import { EditorProvider } from "@/components/editor-provider";
 
 export default function Editor() {
   const {
@@ -38,59 +39,61 @@ export default function Editor() {
   }, [activeProject, createNewProject]);
 
   return (
-    <div className="h-screen w-screen flex flex-col bg-background">
-      <EditorHeader />
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel
-          defaultSize={mainContent}
-          minSize={30}
-          onResize={setMainContent}
-        >
-          {/* Main content area */}
-          <ResizablePanelGroup direction="horizontal">
-            {/* Tools Panel */}
-            <ResizablePanel
-              defaultSize={toolsPanel}
-              minSize={15}
-              onResize={setToolsPanel}
-            >
-              <MediaPanel />
-            </ResizablePanel>
+    <EditorProvider>
+      <div className="h-screen w-screen flex flex-col bg-background">
+        <EditorHeader />
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel
+            defaultSize={mainContent}
+            minSize={30}
+            onResize={setMainContent}
+          >
+            {/* Main content area */}
+            <ResizablePanelGroup direction="horizontal">
+              {/* Tools Panel */}
+              <ResizablePanel
+                defaultSize={toolsPanel}
+                minSize={15}
+                onResize={setToolsPanel}
+              >
+                <MediaPanel />
+              </ResizablePanel>
 
-            <ResizableHandle withHandle />
+              <ResizableHandle withHandle />
 
-            {/* Preview Area */}
-            <ResizablePanel
-              defaultSize={previewPanel}
-              onResize={setPreviewPanel}
-            >
-              <PreviewPanel />
-            </ResizablePanel>
+              {/* Preview Area */}
+              <ResizablePanel
+                defaultSize={previewPanel}
+                onResize={setPreviewPanel}
+              >
+                <PreviewPanel />
+              </ResizablePanel>
 
-            <ResizableHandle withHandle />
+              <ResizableHandle withHandle />
 
-            {/* Properties Panel */}
-            <ResizablePanel
-              defaultSize={propertiesPanel}
-              minSize={15}
-              onResize={setPropertiesPanel}
-            >
-              <PropertiesPanel />
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </ResizablePanel>
+              {/* Properties Panel */}
+              <ResizablePanel
+                defaultSize={propertiesPanel}
+                minSize={15}
+                onResize={setPropertiesPanel}
+              >
+                <PropertiesPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
 
-        <ResizableHandle withHandle />
+          <ResizableHandle withHandle />
 
-        {/* Timeline */}
-        <ResizablePanel
-          defaultSize={timeline}
-          minSize={15}
-          onResize={setTimeline}
-        >
-          <Timeline />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
+          {/* Timeline */}
+          <ResizablePanel
+            defaultSize={timeline}
+            minSize={15}
+            onResize={setTimeline}
+          >
+            <Timeline />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </EditorProvider>
   );
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 6696e884..b07aef21 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -5,7 +5,6 @@ import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
-import { AppProvider } from "@/components/app-provider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -26,13 +25,11 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} font-sans antialiased`}>
         <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
-          <AppProvider>
-            <TooltipProvider>
-              {children}
-              <Analytics />
-              <Toaster />
-            </TooltipProvider>
-          </AppProvider>
+          <TooltipProvider>
+            {children}
+            <Analytics />
+            <Toaster />
+          </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/apps/web/src/components/app-provider.tsx b/apps/web/src/components/app-provider.tsx
deleted file mode 100644
index 257fc8fa..00000000
--- a/apps/web/src/components/app-provider.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { Loader2 } from "lucide-react";
-import { useAppStore } from "@/stores/app-store";
-import { usePanelStore } from "@/stores/panel-store";
-
-interface AppProviderProps {
-  children: React.ReactNode;
-}
-
-export function AppProvider({ children }: AppProviderProps) {
-  const { isInitializing, isPanelsReady, initializeApp } = useAppStore();
-  const { setInitialized } = usePanelStore();
-
-  useEffect(() => {
-    const initialize = async () => {
-      // Initialize the app
-      await initializeApp();
-
-      // Initialize panel store for future resize events
-      setInitialized();
-    };
-
-    initialize();
-  }, [initializeApp, setInitialized]);
-
-  // 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>
-    );
-  }
-
-  // App is ready, render children
-  return <>{children}</>;
-}
diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
new file mode 100644
index 00000000..fbae4c90
--- /dev/null
+++ b/apps/web/src/components/editor-provider.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { Loader2 } from "lucide-react";
+import { useAppStore } from "@/stores/editor-store";
+import { usePanelStore } from "@/stores/panel-store";
+
+interface EditorProviderProps {
+  children: React.ReactNode;
+}
+
+export function EditorProvider({ children }: EditorProviderProps) {
+  const { isInitializing, isPanelsReady, initializeApp } = useAppStore();
+  const { setInitialized } = usePanelStore();
+
+  useEffect(() => {
+    const initialize = async () => {
+      // Initialize the app
+      await initializeApp();
+
+      // Initialize panel store for future resize events
+      setInitialized();
+    };
+
+    initialize();
+  }, [initializeApp, setInitialized]);
+
+  // 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>
+    );
+  }
+
+  // App is ready, render children
+  return <>{children}</>;
+}
diff --git a/apps/web/src/stores/app-store.ts b/apps/web/src/stores/app-store.ts
deleted file mode 100644
index 746fdc45..00000000
--- a/apps/web/src/stores/app-store.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { create } from "zustand";
-
-interface AppState {
-  // Loading states
-  isInitializing: boolean;
-  isPanelsReady: boolean;
-
-  // Actions
-  setInitializing: (loading: boolean) => void;
-  setPanelsReady: (ready: boolean) => void;
-  initializeApp: () => Promise<void>;
-}
-
-export const useAppStore = create<AppState>((set, get) => ({
-  // Initial states
-  isInitializing: true,
-  isPanelsReady: false,
-
-  // Actions
-  setInitializing: (loading) => {
-    set({ isInitializing: loading });
-  },
-
-  setPanelsReady: (ready) => {
-    set({ isPanelsReady: ready });
-  },
-
-  initializeApp: async () => {
-    console.log("Initializing video editor...");
-    set({ isInitializing: true, isPanelsReady: false });
-
-    set({ isPanelsReady: true, isInitializing: false });
-    console.log("Video editor ready");
-  },
-}));
diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
new file mode 100644
index 00000000..746fdc45
--- /dev/null
+++ b/apps/web/src/stores/editor-store.ts
@@ -0,0 +1,35 @@
+import { create } from "zustand";
+
+interface AppState {
+  // Loading states
+  isInitializing: boolean;
+  isPanelsReady: boolean;
+
+  // Actions
+  setInitializing: (loading: boolean) => void;
+  setPanelsReady: (ready: boolean) => void;
+  initializeApp: () => Promise<void>;
+}
+
+export const useAppStore = create<AppState>((set, get) => ({
+  // Initial states
+  isInitializing: true,
+  isPanelsReady: false,
+
+  // Actions
+  setInitializing: (loading) => {
+    set({ isInitializing: loading });
+  },
+
+  setPanelsReady: (ready) => {
+    set({ isPanelsReady: ready });
+  },
+
+  initializeApp: async () => {
+    console.log("Initializing video editor...");
+    set({ isInitializing: true, isPanelsReady: false });
+
+    set({ isPanelsReady: true, isInitializing: false });
+    console.log("Video editor ready");
+  },
+}));
-- 
cgit v1.3.1