From 5c6b8ec015abdea1ede2ff922f56061200edd22e Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 20 Dec 2023 11:48:24 +0000
Subject: [PATCH] Use the expanded size from localStorage when available
 (#16298)

GitOrigin-RevId: 7747881b99d23ebb0ee38d044c671bffb7504302
---
 .../ide-react/components/editor-sidebar.tsx   |  6 +--
 .../components/layout/main-layout.tsx         |  4 +-
 .../features/ide-react/hooks/use-chat-pane.ts | 11 +++--
 .../ide-react/hooks/use-collapsible-panel.ts  | 25 +++++++++--
 .../ide-react/hooks/use-fixed-size-column.ts  | 13 +++---
 .../ide-react/hooks/use-outline-pane.ts       | 42 +++----------------
 .../ide-react/hooks/use-sidebar-pane.ts       | 10 +++--
 7 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx b/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx
index 8a443eba78..bbc29dbd79 100644
--- a/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx
+++ b/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 />
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index ff40cb11e3..8dcd65a4cc 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/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,
diff --git a/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts
index d45fb802e2..6f0c7ce89f 100644
--- a/services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts
+++ b/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,
diff --git a/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts b/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts
index e375f2415d..9aabe2734c 100644
--- a/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts
+++ b/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])
diff --git a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts b/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts
index 65c2a39aa2..938ad8a2fd 100644
--- a/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts
+++ b/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
 }
diff --git a/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts
index 0c5a77727e..f17c94427b 100644
--- a/services/web/frontend/js/features/ide-react/hooks/use-outline-pane.ts
+++ b/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 }
 }
diff --git a/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts b/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts
index bf4f5cc33f..a6ea3c4709 100644
--- a/services/web/frontend/js/features/ide-react/hooks/use-sidebar-pane.ts
+++ b/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,