Merge pull request #15742 from overleaf/td-ide-page-double-click-divider

React IDE page: make column dividers double clickable

GitOrigin-RevId: 005b03ec5837293a2182d2d30d0955abaadc8e0c

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

@@ -60,12 +60,15 @@ export default function EditorAndPdf({
           {editorContent}
         </Panel>
       ) : null}
-      <HorizontalResizeHandle resizable={isDualPane}>
+      <HorizontalResizeHandle
+        resizable={isDualPane}
+        onDoubleClick={() => setPdfIsOpen(!pdfIsOpen)}
+      >
         <HorizontalToggler
           id="editor-pdf"
           togglerType="east"
           isOpen={pdfIsOpen}
-          setIsOpen={isOpen => setPdfIsOpen(isOpen)}
+          setIsOpen={setPdfIsOpen}
           tooltipWhenOpen={t('tooltip_hide_pdf')}
           tooltipWhenClosed={t('tooltip_show_pdf')}
         />

services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx

@@ -66,12 +66,12 @@ export default function PlaceholderEditorAndPdf({
           ) : null}
         </PanelGroup>
       </Panel>
-      <HorizontalResizeHandle>
+      <HorizontalResizeHandle onDoubleClick={() => setPdfIsOpen(!pdfIsOpen)}>
         <HorizontalToggler
           id="editor-pdf"
           togglerType="east"
           isOpen={pdfIsOpen}
-          setIsOpen={pdfIsOpen => setPdfIsOpen(pdfIsOpen)}
+          setIsOpen={setPdfIsOpen}
           tooltipWhenOpen={t('tooltip_hide_pdf')}
           tooltipWhenClosed={t('tooltip_show_pdf')}
         />

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

@@ -64,12 +64,15 @@ export default function TwoColumnMainContent({
       >
         {leftColumnIsOpen ? leftColumnContent : null}
       </Panel>
-      <HorizontalResizeHandle>
+      <HorizontalResizeHandle
+        onDoubleClick={() => setLeftColumnIsOpen(!leftColumnIsOpen)}
+        resizable={leftColumnIsOpen}
+      >
         <HorizontalToggler
           id={leftColumnId}
           togglerType="west"
           isOpen={leftColumnIsOpen}
-          setIsOpen={isOpen => setLeftColumnIsOpen(isOpen)}
+          setIsOpen={setLeftColumnIsOpen}
           tooltipWhenOpen={t('tooltip_hide_filetree')}
           tooltipWhenClosed={t('tooltip_show_filetree')}
         />

services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx

@@ -4,9 +4,14 @@ import { useTranslation } from 'react-i18next'
 import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
 import classNames from 'classnames'
 
+type HorizontalResizeHandleOwnProps = {
+  resizable?: boolean
+  onDoubleClick?: () => void
+}
+
 export const HorizontalResizeHandle: FC<
-  { resizable?: boolean } & PanelResizeHandleProps
-> = ({ children, resizable = true, ...props }) => {
+  HorizontalResizeHandleOwnProps & PanelResizeHandleProps
+> = ({ children, resizable = true, onDoubleClick, ...props }) => {
   const { t } = useTranslation()
 
   return (
@@ -16,6 +21,7 @@ export const HorizontalResizeHandle: FC<
           'horizontal-resize-handle-enabled': resizable,
         })}
         title={t('resize')}
+        onDoubleClick={() => onDoubleClick?.()}
       >
         {children}
       </div>

services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx

@@ -6,7 +6,7 @@ type HorizontalTogglerType = 'west' | 'east'
 type HorizontalTogglerProps = {
   id: string
   isOpen: boolean
-  setIsOpen: (isClosed: boolean) => void
+  setIsOpen: (isOpen: boolean) => void
   togglerType: HorizontalTogglerType
   tooltipWhenOpen: string
   tooltipWhenClosed: string