Improve chat pane handling (#16123)

GitOrigin-RevId: b4185a192b393e339aee8bc27e615d61d66a8b34

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

@@ -36,8 +36,11 @@ export const MainLayout: FC = () => {
     isOpen: chatIsOpen,
     fixedPanelRef: chatPanelRef,
     handleLayout: handleChatLayout,
+    togglePane: toggleChat,
     resizing: chatResizing,
     setResizing: setChatResizing,
+    handlePaneCollapse: handleChatCollapse,
+    handlePaneExpand: handleChatExpand,
   } = useChatPane()
 
   const {
@@ -125,23 +128,25 @@ export const MainLayout: FC = () => {
                 )}
               </Panel>
 
-              {chatIsOpen && (
-                <>
-                  <HorizontalResizeHandle onDragging={setChatResizing} />
+              <HorizontalResizeHandle
+                onDoubleClick={toggleChat}
+                resizable={chatIsOpen}
+                onDragging={setChatResizing}
+              />
 
-                  {/* chat */}
-                  <Panel
-                    ref={chatPanelRef}
-                    id="panel-chat"
-                    order={2}
-                    defaultSizePixels={200}
-                    minSizePixels={150}
-                    collapsible
-                  >
-                    <ChatPane />
-                  </Panel>
-                </>
-              )}
+              {/* chat */}
+              <Panel
+                ref={chatPanelRef}
+                id="panel-chat"
+                order={2}
+                defaultSizePixels={200}
+                minSizePixels={150}
+                collapsible
+                onCollapse={handleChatCollapse}
+                onExpand={handleChatExpand}
+              >
+                <ChatPane />
+              </Panel>
             </PanelGroup>
           </Panel>
         </PanelGroup>

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

@@ -1,13 +1,34 @@
 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 { useState } from 'react'
+import { useCallback, useState } from 'react'
 
 export const useChatPane = () => {
-  const { chatIsOpen: isOpen } = useLayoutContext()
+  const { chatIsOpen: isOpen, setChatIsOpen: setIsOpen } = useLayoutContext()
   const [resizing, setResizing] = useState(false)
   const { fixedPanelRef, handleLayout } = useFixedSizeColumn(isOpen)
   useCollapsiblePanel(isOpen, fixedPanelRef)
 
-  return { isOpen, fixedPanelRef, handleLayout, resizing, setResizing }
+  const togglePane = useCallback(() => {
+    setIsOpen(value => !value)
+  }, [setIsOpen])
+
+  const handlePaneExpand = useCallback(() => {
+    setIsOpen(true)
+  }, [setIsOpen])
+
+  const handlePaneCollapse = useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
+
+  return {
+    isOpen,
+    fixedPanelRef,
+    handleLayout,
+    resizing,
+    setResizing,
+    togglePane,
+    handlePaneExpand,
+    handlePaneCollapse,
+  }
 }