React IDE page shell (#14988)

* React IDE page shell * Set the maximum height of the symbol palette to 336px * Tidy export * Remove unnecessary destructuring * Update comment * Optimize toggle Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Change snap-to-collapse threshold to 5% * Synchronize left column width between history and editor views and remove duplication in ide-page * Replace resizer dots with SVG * Rermove unnecessary import and comment the remaining ones * Use block prepend to avoid duplication * Improve vertical content divider styling * Implement fixed width during container resize on left column * Change IDE page file extension * Refactor fixed-size panel into a hook and use for chat panel --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> GitOrigin-RevId: aa881e48a2838a192b6f8f9e16e561f5cd706bd3
2026-11-15 14:43:46 +01:00 · 2023-10-03 08:04:04 +00:00
parent afcac7af86
commit ea1fc5f74e
27 changed files with 819 additions and 1 deletions
@@ -0,0 +1,66 @@
+import { Panel, PanelGroup } from 'react-resizable-panels'
+import { ReactNode } from 'react'
+import { HorizontalResizeHandle } from '../resize/horizontal-resize-handle'
+import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
+import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+
+const CHAT_DEFAULT_SIZE = 20
+
+type PageProps = {
+  headerContent: ReactNode
+  chatContent: ReactNode
+  mainContent: ReactNode
+  chatIsOpen: boolean
+  shouldPersistLayout: boolean
+}
+
+// The main area below the header is split into two: the main content and chat.
+// The reason for not splitting the left column containing the file tree and
+// outline here is that the history view has its own file tree, so it is more
+// convenient to replace the whole of the main content when in history view.
+export default function MainLayout({
+  headerContent,
+  chatContent,
+  mainContent,
+  chatIsOpen,
+  shouldPersistLayout,
+}: PageProps) {
+  const { fixedPanelRef: chatPanelRef, handleLayout } = useFixedSizeColumn(
+    CHAT_DEFAULT_SIZE,
+    chatIsOpen
+  )
+
+  useCollapsiblePanel(chatIsOpen, chatPanelRef)
+
+  return (
+    <div className="ide-react-main">
+      {headerContent}
+      <div className="ide-react-body">
+        <PanelGroup
+          autoSaveId={shouldPersistLayout ? 'ide-react-chat-layout' : undefined}
+          direction="horizontal"
+          onLayout={handleLayout}
+        >
+          <Panel id="main" order={1}>
+            {mainContent}
+          </Panel>
+          {chatIsOpen ? (
+            <>
+              <HorizontalResizeHandle />
+              <Panel
+                ref={chatPanelRef}
+                id="chat"
+                order={2}
+                defaultSize={CHAT_DEFAULT_SIZE}
+                minSize={5}
+                collapsible
+              >
+                {chatContent}
+              </Panel>
+            </>
+          ) : null}
+        </PanelGroup>
+      </div>
+    </div>
+  )
+}