New Switchable Library Layout

frontend/src/hooks/useLibraryLayout.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export type LibraryLayoutType = 'sidebar' | 'toolbar' | 'minimal';
+
+const LAYOUT_STORAGE_KEY = 'storycove-library-layout';
+
+export function useLibraryLayout() {
+  const [layout, setLayoutState] = useState<LibraryLayoutType>('sidebar');
+
+  // Load layout from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY) as LibraryLayoutType;
+      if (savedLayout && ['sidebar', 'toolbar', 'minimal'].includes(savedLayout)) {
+        setLayoutState(savedLayout);
+      }
+    }
+  }, []);
+
+  // Save layout to localStorage when it changes
+  const setLayout = (newLayout: LibraryLayoutType) => {
+    setLayoutState(newLayout);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LAYOUT_STORAGE_KEY, newLayout);
+    }
+  };
+
+  return { layout, setLayout };
+}