diff --git a/src/App.tsx b/src/App.tsx
index a125d413..8e48f05e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,6 +39,7 @@ import { useAppNavigation } from './hooks/useAppNavigation'
 import { useAiActivity } from './hooks/useAiActivity'
 import { useBulkActions } from './hooks/useBulkActions'
 import { useDeleteActions } from './hooks/useDeleteActions'
+import { useLayoutPanels } from './hooks/useLayoutPanels'
 import { ConflictResolverModal } from './components/ConflictResolverModal'
 import { ConfirmDeleteDialog } from './components/ConfirmDeleteDialog'
 import { UpdateBanner } from './components/UpdateBanner'
@@ -62,17 +63,6 @@ declare global {
 
 const DEFAULT_SELECTION: SidebarSelection = { kind: 'filter', filter: 'all' }
 
-function useLayoutPanels() {
-  const [sidebarWidth, setSidebarWidth] = useState(250)
-  const [noteListWidth, setNoteListWidth] = useState(300)
-  const [inspectorWidth, setInspectorWidth] = useState(280)
-  const [inspectorCollapsed, setInspectorCollapsed] = useState(false)
-  const handleSidebarResize = useCallback((delta: number) => setSidebarWidth((w) => Math.max(150, Math.min(400, w + delta))), [])
-  const handleNoteListResize = useCallback((delta: number) => setNoteListWidth((w) => Math.max(200, Math.min(500, w + delta))), [])
-  const handleInspectorResize = useCallback((delta: number) => setInspectorWidth((w) => Math.max(200, Math.min(500, w - delta))), [])
-  return { sidebarWidth, noteListWidth, inspectorWidth, inspectorCollapsed, setInspectorCollapsed, handleSidebarResize, handleNoteListResize, handleInspectorResize }
-}
-
 /** Wraps useEditorSave to also keep outgoingLinks in sync on save and on content change. */
 function App() {
   const [selection, setSelection] = useState<SidebarSelection>(DEFAULT_SELECTION)
diff --git a/src/hooks/useLayoutPanels.ts b/src/hooks/useLayoutPanels.ts
new file mode 100644
index 00000000..192c276f
--- /dev/null
+++ b/src/hooks/useLayoutPanels.ts
@@ -0,0 +1,12 @@
+import { useCallback, useState } from 'react'
+
+export function useLayoutPanels() {
+  const [sidebarWidth, setSidebarWidth] = useState(250)
+  const [noteListWidth, setNoteListWidth] = useState(300)
+  const [inspectorWidth, setInspectorWidth] = useState(280)
+  const [inspectorCollapsed, setInspectorCollapsed] = useState(false)
+  const handleSidebarResize = useCallback((delta: number) => setSidebarWidth((w) => Math.max(150, Math.min(400, w + delta))), [])
+  const handleNoteListResize = useCallback((delta: number) => setNoteListWidth((w) => Math.max(200, Math.min(500, w + delta))), [])
+  const handleInspectorResize = useCallback((delta: number) => setInspectorWidth((w) => Math.max(200, Math.min(500, w - delta))), [])
+  return { sidebarWidth, noteListWidth, inspectorWidth, inspectorCollapsed, setInspectorCollapsed, handleSidebarResize, handleNoteListResize, handleInspectorResize }
+}