so much stuff???

apps/web/src/stores/app-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");
+  },
+}));

apps/web/src/stores/media-store.ts

@@ -0,0 +1,35 @@
+import { create } from "zustand";
+
+export interface MediaItem {
+  id: string;
+  name: string;
+  type: "image" | "video" | "audio";
+}
+
+interface MediaStore {
+  mediaItems: MediaItem[];
+
+  // Actions
+  addMediaItem: (item: Omit<MediaItem, "id">) => void;
+  removeMediaItem: (id: string) => void;
+}
+
+export const useMediaStore = create<MediaStore>((set, get) => ({
+  mediaItems: [],
+
+  addMediaItem: (item) => {
+    const newItem: MediaItem = {
+      ...item,
+      id: crypto.randomUUID(),
+    };
+    set((state) => ({
+      mediaItems: [...state.mediaItems, newItem],
+    }));
+  },
+
+  removeMediaItem: (id) => {
+    set((state) => ({
+      mediaItems: state.mediaItems.filter((item) => item.id !== id),
+    }));
+  },
+}));

apps/web/src/stores/panel-store.ts

@@ -0,0 +1,79 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface PanelState {
+  // Horizontal panel sizes
+  toolsPanel: number;
+  previewPanel: number;
+  propertiesPanel: number;
+
+  // Vertical panel sizes
+  mainContent: number;
+  timeline: number;
+
+  // Flag to prevent initial overwrites
+  isInitialized: boolean;
+
+  // Actions
+  setToolsPanel: (size: number) => void;
+  setPreviewPanel: (size: number) => void;
+  setPropertiesPanel: (size: number) => void;
+  setMainContent: (size: number) => void;
+  setTimeline: (size: number) => void;
+  setInitialized: () => void;
+}
+
+export const usePanelStore = create<PanelState>()(
+  persist(
+    (set, get) => ({
+      // Default sizes
+      toolsPanel: 20,
+      previewPanel: 60,
+      propertiesPanel: 20,
+      mainContent: 50,
+      timeline: 50,
+      isInitialized: false,
+
+      // Actions
+      setToolsPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ toolsPanel: size });
+      },
+      setPreviewPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ previewPanel: size });
+      },
+      setPropertiesPanel: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ propertiesPanel: size });
+      },
+      setMainContent: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ mainContent: size });
+      },
+      setTimeline: (size) => {
+        const state = get();
+        if (!state.isInitialized) return;
+        set({ timeline: size });
+      },
+      setInitialized: () => {
+        console.log("Panel store initialized for resize events");
+        set({ isInitialized: true });
+      },
+    }),
+    {
+      name: "panel-sizes",
+      partialize: (state) => ({
+        toolsPanel: state.toolsPanel,
+        previewPanel: state.previewPanel,
+        propertiesPanel: state.propertiesPanel,
+        mainContent: state.mainContent,
+        timeline: state.timeline,
+      }),
+    }
+  )
+);

apps/web/src/stores/project-store.ts

@@ -0,0 +1,28 @@
+import { TProject } from "@/types/project";
+import { create } from "zustand";
+
+interface ProjectStore {
+  activeProject: TProject | null;
+
+  // Actions
+  createNewProject: (name: string) => void;
+  closeProject: () => void;
+}
+
+export const useProjectStore = create<ProjectStore>((set) => ({
+  activeProject: null,
+
+  createNewProject: (name: string) => {
+    const newProject: TProject = {
+      id: crypto.randomUUID(),
+      name,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    set({ activeProject: newProject });
+  },
+
+  closeProject: () => {
+    set({ activeProject: null });
+  },
+}));

apps/web/src/stores/timeline-store.ts

@@ -0,0 +1,61 @@
+import { create } from "zustand";
+
+export interface TimelineClip {
+  id: string;
+  mediaId: string;
+  name: string;
+  duration: number;
+}
+
+export interface TimelineTrack {
+  id: string;
+  name: string;
+  type: "video" | "audio" | "effects";
+  clips: TimelineClip[];
+}
+
+interface TimelineStore {
+  tracks: TimelineTrack[];
+
+  // Actions
+  addTrack: (type: "video" | "audio" | "effects") => void;
+  removeTrack: (trackId: string) => void;
+  addClipToTrack: (trackId: string, clip: Omit<TimelineClip, "id">) => void;
+}
+
+export const useTimelineStore = create<TimelineStore>((set) => ({
+  tracks: [],
+
+  addTrack: (type) => {
+    const newTrack: TimelineTrack = {
+      id: crypto.randomUUID(),
+      name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
+      type,
+      clips: [],
+    };
+    set((state) => ({
+      tracks: [...state.tracks, newTrack],
+    }));
+  },
+
+  removeTrack: (trackId) => {
+    set((state) => ({
+      tracks: state.tracks.filter((track) => track.id !== trackId),
+    }));
+  },
+
+  addClipToTrack: (trackId, clipData) => {
+    const newClip: TimelineClip = {
+      ...clipData,
+      id: crypto.randomUUID(),
+    };
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? { ...track, clips: [...track.clips, newClip] }
+          : track
+      ),
+    }));
+  },
+}));