From 66090688f99faddea03cc77596838cdecafa7060 Mon Sep 17 00:00:00 2001 From: Luca Rossi Date: Fri, 13 Mar 2026 07:11:31 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20extract=20useLayoutPanels=20hook=20?= =?UTF-8?q?from=20App.tsx=20=E2=80=94=20reduce=20god=20component=20churn?= =?UTF-8?q?=20(#195)=20(#196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Test Co-authored-by: Claude Opus 4.6 --- src/App.tsx | 12 +----------- src/hooks/useLayoutPanels.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 src/hooks/useLayoutPanels.ts 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(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 } +}