style: complete re-design of whole editor

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

@@ -17,12 +17,15 @@ interface PanelState {
   mainContent: number;
   timeline: number;
 
+  mediaViewMode: "grid" | "list";
+
   // Actions
   setToolsPanel: (size: number) => void;
   setPreviewPanel: (size: number) => void;
   setPropertiesPanel: (size: number) => void;
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
+  setMediaViewMode: (mode: "grid" | "list") => void;
 }
 
 export const usePanelStore = create<PanelState>()(
@@ -31,12 +34,15 @@ export const usePanelStore = create<PanelState>()(
       // Default sizes - optimized for responsiveness
       ...DEFAULT_PANEL_SIZES,
 
+      mediaViewMode: "grid" as const,
+
       // Actions
       setToolsPanel: (size) => set({ toolsPanel: size }),
       setPreviewPanel: (size) => set({ previewPanel: size }),
       setPropertiesPanel: (size) => set({ propertiesPanel: size }),
       setMainContent: (size) => set({ mainContent: size }),
       setTimeline: (size) => set({ timeline: size }),
+      setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
     }),
     {
       name: "panel-sizes",