Use the expanded size from localStorage when available (#16298)

GitOrigin-RevId: 7747881b99d23ebb0ee38d044c671bffb7504302

services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx

@@ -9,7 +9,7 @@ import { useOutlinePane } from '@/features/ide-react/hooks/use-outline-pane'
 export default function EditorSidebar() {
   const { view } = useLayoutContext()
 
-  const { outlineDisabled, outlineRef } = useOutlinePane()
+  const { outlineEnabled, outlinePanelRef } = useOutlinePane()
 
   return (
     <aside
@@ -28,7 +28,7 @@ export default function EditorSidebar() {
           <FileTree />
         </Panel>
 
-        <VerticalResizeHandle disabled={outlineDisabled} />
+        <VerticalResizeHandle disabled={!outlineEnabled} />
 
         <Panel
           defaultSize={50}
@@ -36,7 +36,7 @@ export default function EditorSidebar() {
           id="panel-outline"
           order={2}
           collapsible
-          ref={outlineRef}
+          ref={outlinePanelRef}
           style={{ minHeight: 32 }} // keep the header visible
         >
           <OutlineContainer />

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -23,7 +23,7 @@ export const MainLayout: FC = () => {
   const {
     isOpen: sidebarIsOpen,
     setIsOpen: setSidebarIsOpen,
-    fixedPanelRef: sidebarPanelRef,
+    panelRef: sidebarPanelRef,
     handleLayout: handleSidebarLayout,
     togglePane: toggleSidebar,
     handlePaneExpand: handleSidebarExpand,
@@ -34,7 +34,7 @@ export const MainLayout: FC = () => {
 
   const {
     isOpen: chatIsOpen,
-    fixedPanelRef: chatPanelRef,
+    panelRef: chatPanelRef,
     handleLayout: handleChatLayout,
     togglePane: toggleChat,
     resizing: chatResizing,

services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts

@@ -1,13 +1,16 @@
 import { useLayoutContext } from '@/shared/context/layout-context'
 import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
 import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
+import { ImperativePanelHandle } from 'react-resizable-panels'
 
 export const useChatPane = () => {
   const { chatIsOpen: isOpen, setChatIsOpen: setIsOpen } = useLayoutContext()
   const [resizing, setResizing] = useState(false)
-  const { fixedPanelRef, handleLayout } = useFixedSizeColumn(isOpen)
-  useCollapsiblePanel(isOpen, fixedPanelRef)
+  const panelRef = useRef<ImperativePanelHandle>(null)
+
+  const handleLayout = useFixedSizeColumn(isOpen, panelRef)
+  useCollapsiblePanel(isOpen, panelRef)
 
   const togglePane = useCallback(() => {
     setIsOpen(value => !value)
@@ -23,7 +26,7 @@ export const useChatPane = () => {
 
   return {
     isOpen,
-    fixedPanelRef,
+    panelRef,
     handleLayout,
     resizing,
     setResizing,

services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts

@@ -5,12 +5,29 @@ export default function useCollapsiblePanel(
   panelIsOpen: boolean,
   panelRef: RefObject<ImperativePanelHandle>
 ) {
+  // store the expanded height in localStorage when collapsing,
+  // so it can be restored when expanding after reloading the page
   useEffect(() => {
-    if (panelRef.current) {
-      if (panelIsOpen) {
-        panelRef.current.expand()
+    const panelHandle = panelRef.current
+
+    if (panelHandle) {
+      const storageKey = `ide-panel.expanded-size.${panelHandle.getId()}`
+      if (!panelIsOpen) {
+        // collapsing, so store the current size if > 0
+        const size = panelHandle.getSize()
+        if (size > 0) {
+          localStorage.setItem(storageKey, String(size))
+        }
+
+        panelHandle.collapse()
       } else {
-        panelRef.current.collapse()
+        const storedKey = localStorage.getItem(storageKey)
+
+        if (storedKey) {
+          panelHandle.resize(Number(storedKey))
+        } else {
+          panelHandle.expand()
+        }
       }
     }
   }, [panelIsOpen, panelRef])

services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts

@@ -1,12 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import {
   ImperativePanelHandle,
   PanelGroupOnLayout,
 } from 'react-resizable-panels'
 
-export default function useFixedSizeColumn(isOpen: boolean) {
-  const fixedPanelRef = useRef<ImperativePanelHandle>(null)
-
+export default function useFixedSizeColumn(
+  isOpen: boolean,
+  fixedPanelRef: RefObject<ImperativePanelHandle>
+) {
   const fixedPanelSizeRef = useRef<number>(0)
   const [initialLayoutDone, setInitialLayoutDone] = useState(false)
 
@@ -15,7 +16,7 @@ export default function useFixedSizeColumn(isOpen: boolean) {
       fixedPanelSizeRef.current = fixedPanelRef.current.getSize()
       setInitialLayoutDone(true)
     }
-  }, [])
+  }, [fixedPanelRef])
 
   useEffect(() => {
     if (!isOpen) {
@@ -51,5 +52,5 @@ export default function useFixedSizeColumn(isOpen: boolean) {
     return () => resizeObserver.unobserve(panelGroupElement)
   }, [fixedPanelRef, initialLayoutDone, isOpen])
 
-  return { fixedPanelRef, handleLayout }
+  return handleLayout
 }

services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts

@@ -1,44 +1,14 @@
 import { useOutlineContext } from '@/features/ide-react/context/outline-context'
-import { useProjectContext } from '@/shared/context/project-context'
-import { useEffect, useRef } from 'react'
+import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+import { useRef } from 'react'
 import { ImperativePanelHandle } from 'react-resizable-panels'
-import localStorage from '@/infrastructure/local-storage'
 
 export const useOutlinePane = () => {
   const { canShowOutline, outlineExpanded } = useOutlineContext()
-  const { _id: projectId } = useProjectContext()
-  const outlineDisabled = !canShowOutline || !outlineExpanded
+  const outlinePanelRef = useRef<ImperativePanelHandle>(null)
+  const outlineEnabled = canShowOutline && outlineExpanded
 
-  const outlineRef = useRef<ImperativePanelHandle>(null)
+  useCollapsiblePanel(outlineEnabled, outlinePanelRef)
 
-  // store the expanded height in localStorage when collapsing,
-  // so it can be restored when expanding after reloading the page
-  useEffect(() => {
-    const outlinePane = outlineRef.current
-
-    if (outlinePane) {
-      // NOTE: outline size is shared across projects
-      const storageKey = 'ide-panel.outline.size'
-
-      if (outlineDisabled) {
-        // collapsing, so store the current size if > 0
-        const size = outlinePane.getSize()
-        if (size > 0) {
-          localStorage.setItem(storageKey, size)
-        }
-
-        outlinePane.collapse()
-      } else {
-        outlinePane.expand()
-
-        // if the panel has been expanded to zero height, use the stored height instead
-        if (outlinePane.getSize() === 0) {
-          const size = Number(localStorage.getItem(storageKey) || 50)
-          outlinePane.resize(size)
-        }
-      }
-    }
-  }, [outlineDisabled, projectId])
-
-  return { outlineDisabled, outlineRef }
+  return { outlineEnabled, outlinePanelRef }
 }

services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts

@@ -1,12 +1,14 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
 import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+import { ImperativePanelHandle } from 'react-resizable-panels'
 
 export const useSidebarPane = () => {
   const [isOpen, setIsOpen] = useState(true)
   const [resizing, setResizing] = useState(false)
-  const { fixedPanelRef, handleLayout } = useFixedSizeColumn(isOpen)
-  useCollapsiblePanel(isOpen, fixedPanelRef)
+  const panelRef = useRef<ImperativePanelHandle>(null)
+  const handleLayout = useFixedSizeColumn(isOpen, panelRef)
+  useCollapsiblePanel(isOpen, panelRef)
 
   const togglePane = useCallback(() => {
     setIsOpen(value => !value)
@@ -23,7 +25,7 @@ export const useSidebarPane = () => {
   return {
     isOpen,
     setIsOpen,
-    fixedPanelRef,
+    panelRef,
     handleLayout,
     togglePane,
     handlePaneExpand,