[ide-react] Remove useFixedSizeColumn (#16299)

GitOrigin-RevId: 7cee1e153d5ae3d15250097dc87f430f4e799957

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

@@ -24,7 +24,6 @@ export const MainLayout: FC = () => {
     isOpen: sidebarIsOpen,
     setIsOpen: setSidebarIsOpen,
     panelRef: sidebarPanelRef,
-    handleLayout: handleSidebarLayout,
     togglePane: toggleSidebar,
     handlePaneExpand: handleSidebarExpand,
     handlePaneCollapse: handleSidebarCollapse,
@@ -35,7 +34,6 @@ export const MainLayout: FC = () => {
   const {
     isOpen: chatIsOpen,
     panelRef: chatPanelRef,
-    handleLayout: handleChatLayout,
     togglePane: toggleChat,
     resizing: chatResizing,
     setResizing: setChatResizing,
@@ -57,7 +55,6 @@ export const MainLayout: FC = () => {
         <PanelGroup
           autoSaveId="ide-outer-layout"
           direction="horizontal"
-          onLayout={handleSidebarLayout}
           className={classNames({
             'ide-panel-group-resizing': sidebarResizing || chatResizing,
           })}
@@ -94,11 +91,7 @@ export const MainLayout: FC = () => {
           </HorizontalResizeHandle>
 
           <Panel id="panel-outer-main" order={2}>
-            <PanelGroup
+            <PanelGroup autoSaveId="ide-inner-layout" direction="horizontal">
-              autoSaveId="ide-inner-layout"
-              direction="horizontal"
-              onLayout={handleChatLayout}
-            >
               <Panel className="ide-react-panel" id="panel-main" order={1}>
                 {view === 'history' ? (
                   <HistoryProvider>

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

@@ -1,5 +1,4 @@
 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, useRef, useState } from 'react'
 import { ImperativePanelHandle } from 'react-resizable-panels'
@@ -9,7 +8,6 @@ export const useChatPane = () => {
   const [resizing, setResizing] = useState(false)
   const panelRef = useRef<ImperativePanelHandle>(null)
 
-  const handleLayout = useFixedSizeColumn(isOpen, panelRef)
   useCollapsiblePanel(isOpen, panelRef)
 
   const togglePane = useCallback(() => {
@@ -27,7 +25,6 @@ export const useChatPane = () => {
   return {
     isOpen,
     panelRef,
-    handleLayout,
     resizing,
     setResizing,
     togglePane,

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

@@ -1,56 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
-import {
-  ImperativePanelHandle,
-  PanelGroupOnLayout,
-} from 'react-resizable-panels'
-
-export default function useFixedSizeColumn(
-  isOpen: boolean,
-  fixedPanelRef: RefObject<ImperativePanelHandle>
-) {
-  const fixedPanelSizeRef = useRef<number>(0)
-  const [initialLayoutDone, setInitialLayoutDone] = useState(false)
-
-  const handleLayout: PanelGroupOnLayout = useCallback(() => {
-    if (fixedPanelRef.current) {
-      fixedPanelSizeRef.current = fixedPanelRef.current.getSize()
-      setInitialLayoutDone(true)
-    }
-  }, [fixedPanelRef])
-
-  useEffect(() => {
-    if (!isOpen) {
-      return
-    }
-
-    // Only start watching for resizes once the initial layout is done,
-    // otherwise we could measure the fixed column while it has zero width and
-    // collapse it
-    if (!initialLayoutDone || !fixedPanelRef.current) {
-      return
-    }
-
-    const fixedPanelElement = document.querySelector(
-      `[data-panel-id="${fixedPanelRef.current.getId()}"]`
-    )
-    if (!fixedPanelElement) {
-      return
-    }
-
-    const panelGroupElement = fixedPanelElement.closest('[data-panel-group]')
-    if (!panelGroupElement) {
-      return
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      // when the panel group resizes, set the size of this panel to the previous size, in pixels
-      fixedPanelRef.current?.resize(fixedPanelSizeRef.current)
-    })
-
-    resizeObserver.observe(panelGroupElement)
-
-    return () => resizeObserver.unobserve(panelGroupElement)
-  }, [fixedPanelRef, initialLayoutDone, isOpen])
-
-  return handleLayout
-}

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

@@ -1,5 +1,4 @@
 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'
 
@@ -7,7 +6,6 @@ export const useSidebarPane = () => {
   const [isOpen, setIsOpen] = useState(true)
   const [resizing, setResizing] = useState(false)
   const panelRef = useRef<ImperativePanelHandle>(null)
-  const handleLayout = useFixedSizeColumn(isOpen, panelRef)
   useCollapsiblePanel(isOpen, panelRef)
 
   const togglePane = useCallback(() => {
@@ -26,7 +24,6 @@ export const useSidebarPane = () => {
     isOpen,
     setIsOpen,
     panelRef,
-    handleLayout,
     togglePane,
     handlePaneExpand,
     handlePaneCollapse,