>
+}
+
+export default function PlaceholderHistory({
+ shouldPersistLayout,
+ leftColumnDefaultSize,
+ setLeftColumnDefaultSize,
+}: PlaceholderHistoryProps) {
+ const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true)
+
+ const leftColumnContent = (
+
+ )
+ const rightColumnContent = (
+ History document diff viewer and versions list placeholder
+ )
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx b/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx
new file mode 100644
index 0000000000..8deb584dd0
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx
@@ -0,0 +1,80 @@
+import React, { ReactNode, useEffect } from 'react'
+import { Panel, PanelGroup } from 'react-resizable-panels'
+import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
+import { useTranslation } from 'react-i18next'
+import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
+import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
+import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
+
+type TwoColumnMainContentProps = {
+ leftColumnId: string
+ leftColumnContent: ReactNode
+ leftColumnDefaultSize: number
+ setLeftColumnDefaultSize: React.Dispatch>
+ rightColumnContent: ReactNode
+ leftColumnIsOpen: boolean
+ setLeftColumnIsOpen: (
+ leftColumnIsOpen: TwoColumnMainContentProps['leftColumnIsOpen']
+ ) => void
+ shouldPersistLayout?: boolean
+}
+
+export default function TwoColumnMainContent({
+ leftColumnId,
+ leftColumnContent,
+ leftColumnDefaultSize,
+ setLeftColumnDefaultSize,
+ rightColumnContent,
+ leftColumnIsOpen,
+ setLeftColumnIsOpen,
+ shouldPersistLayout = false,
+}: TwoColumnMainContentProps) {
+ const { t } = useTranslation()
+
+ const {
+ fixedPanelRef: leftColumnPanelRef,
+ fixedPanelWidthRef: leftColumnWidthRef,
+ handleLayout,
+ } = useFixedSizeColumn(leftColumnDefaultSize, leftColumnIsOpen)
+
+ useCollapsiblePanel(leftColumnIsOpen, leftColumnPanelRef)
+
+ // Update the left column default size on unmount rather than doing it on
+ // every resize, which causes ResizeObserver errors
+ useEffect(() => {
+ if (leftColumnWidthRef.current) {
+ setLeftColumnDefaultSize(leftColumnWidthRef.current.size)
+ }
+ }, [leftColumnWidthRef, setLeftColumnDefaultSize])
+
+ return (
+
+ setLeftColumnIsOpen(!collapsed)}
+ >
+ {leftColumnIsOpen ? leftColumnContent : null}
+
+
+ setLeftColumnIsOpen(isOpen)}
+ tooltipWhenOpen={t('tooltip_hide_filetree')}
+ tooltipWhenClosed={t('tooltip_show_filetree')}
+ />
+
+ {rightColumnContent}
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx b/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
new file mode 100644
index 0000000000..776fdefc56
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
@@ -0,0 +1,19 @@
+import { PanelResizeHandle } from 'react-resizable-panels'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
+
+export const HorizontalResizeHandle: FC = ({
+ children,
+ ...props
+}) => {
+ const { t } = useTranslation()
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx b/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx
new file mode 100644
index 0000000000..0ca790f1f5
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx
@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import Tooltip from '@/shared/components/tooltip'
+
+type HorizontalTogglerType = 'west' | 'east'
+
+type HorizontalTogglerProps = {
+ id: string
+ isOpen: boolean
+ setIsOpen: (isClosed: boolean) => void
+ togglerType: HorizontalTogglerType
+ tooltipWhenOpen: string
+ tooltipWhenClosed: string
+}
+
+export function HorizontalToggler({
+ id,
+ isOpen,
+ setIsOpen,
+ togglerType,
+ tooltipWhenOpen,
+ tooltipWhenClosed,
+}: HorizontalTogglerProps) {
+ const description = isOpen ? tooltipWhenOpen : tooltipWhenClosed
+
+ return (
+
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx b/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx
new file mode 100644
index 0000000000..36a58a29a2
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/components/resize/vertical-resize-handle.tsx
@@ -0,0 +1,13 @@
+import { PanelResizeHandle } from 'react-resizable-panels'
+import { useTranslation } from 'react-i18next'
+import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
+
+export function VerticalResizeHandle(props: PanelResizeHandleProps) {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+ )
+}
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
new file mode 100644
index 0000000000..ad286284b3
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts
@@ -0,0 +1,19 @@
+import { RefObject, useEffect } from 'react'
+import { ImperativePanelHandle } from 'react-resizable-panels'
+
+export default function useCollapsiblePanel(
+ panelIsOpen: boolean,
+ panelRef: RefObject
+) {
+ useEffect(() => {
+ const panel = panelRef.current
+ if (!panel) {
+ return
+ }
+ if (panelIsOpen) {
+ panel.expand()
+ } else {
+ panel.collapse()
+ }
+ }, [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
new file mode 100644
index 0000000000..4ca2e32fce
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/hooks/use-fixed-size-column.ts
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ImperativePanelHandle } from 'react-resizable-panels'
+import { PanelGroupOnLayout } from 'react-resizable-panels/src/types'
+
+export default function useFixedSizeColumn(
+ defaultSize: number,
+ isOpen: boolean
+) {
+ const fixedPanelRef = useRef(null)
+
+ const fixedPanelWidthRef = useRef({ size: defaultSize, pixels: 0 })
+ const [initialLayoutDone, setInitialLayoutDone] = useState(false)
+
+ const measureFixedPanelSizePixels = useCallback(() => {
+ return fixedPanelRef.current?.getSize('pixels') || 0
+ }, [fixedPanelRef])
+
+ const handleLayout = useCallback(
+ sizes => {
+ // Measure the pixel width here because it's not always up to date in the
+ // panel's onResize
+ fixedPanelWidthRef.current = {
+ size: sizes[0],
+ pixels: measureFixedPanelSizePixels(),
+ }
+ setInitialLayoutDone(true)
+ },
+ [measureFixedPanelSizePixels]
+ ) as PanelGroupOnLayout
+
+ 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()}"]`
+ )
+
+ const panelGroupElement = fixedPanelElement?.closest('[data-panel-group]')
+ if (!panelGroupElement || !fixedPanelElement) {
+ return
+ }
+
+ const resizeObserver = new ResizeObserver(() => {
+ fixedPanelRef.current?.resize(fixedPanelWidthRef.current.pixels, 'pixels')
+ })
+
+ resizeObserver.observe(panelGroupElement)
+
+ return () => resizeObserver.unobserve(panelGroupElement)
+ }, [fixedPanelRef, measureFixedPanelSizePixels, initialLayoutDone, isOpen])
+
+ return {
+ fixedPanelRef,
+ fixedPanelWidthRef,
+ handleLayout,
+ }
+}
diff --git a/services/web/frontend/js/pages/ide.jsx b/services/web/frontend/js/pages/ide.jsx
new file mode 100644
index 0000000000..d3eea73afc
--- /dev/null
+++ b/services/web/frontend/js/pages/ide.jsx
@@ -0,0 +1,13 @@
+// Configure dynamically loaded assets (via webpack) to be downloaded from CDN
+import '../utils/webpack-public-path'
+
+// Set up error reporting, including Sentry
+import '../infrastructure/error-reporter'
+
+import ReactDOM from 'react-dom'
+import IdeRoot from '../features/ide-react/components/ide-root'
+
+const element = document.getElementById('ide-root')
+if (element) {
+ ReactDOM.render(, element)
+}
diff --git a/services/web/frontend/stories/ide-page/layout.stories.tsx b/services/web/frontend/stories/ide-page/layout.stories.tsx
new file mode 100644
index 0000000000..cc30a14a95
--- /dev/null
+++ b/services/web/frontend/stories/ide-page/layout.stories.tsx
@@ -0,0 +1,27 @@
+import LayoutWithPlaceholders from '@/features/ide-react/components/layout/layout-with-placeholders'
+
+export default {
+ title: 'Editor / Page Layout',
+ component: LayoutWithPlaceholders,
+ decorators: [
+ (Story: any) => (
+
+
+
+ ),
+ ],
+}
+
+export const Persisted = {
+ args: {
+ shouldPersistLayout: true,
+ },
+}
+
+export const Unpersisted = {
+ args: {
+ shouldPersistLayout: false,
+ },
+}
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 8f1da9570f..8182f948e6 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -19,6 +19,7 @@
@import './editor/dictionary.less';
@import './editor/compile-button.less';
@import './editor/figure-modal.less';
+@import './editor/ide-react.less';
@ui-layout-toggler-def-height: 50px;
@ui-resizer-size: 7px;
diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less
new file mode 100644
index 0000000000..0aa7402696
--- /dev/null
+++ b/services/web/frontend/stylesheets/app/editor/ide-react.less
@@ -0,0 +1,90 @@
+#ide-react-page {
+ height: 100vh;
+}
+
+.ide-react-main {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .toolbar.toolbar-header {
+ position: static;
+ flex-grow: 0;
+ color: var(--neutral-20);
+ }
+}
+
+.ide-react-body {
+ flex-grow: 1;
+}
+
+.horizontal-resize-handle {
+ width: @ui-resizer-size !important;
+ height: 100%;
+
+ // Enable ::before and ::after pseudo-elements to position themselves correctly
+ position: relative;
+
+ background-color: @editor-resizer-bg-color;
+
+ .custom-toggler {
+ padding: 0;
+ border-width: 0;
+ }
+
+ &::before,
+ &::after {
+ // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+ // we'd have to change this SVG too
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+ display: block;
+ position: absolute;
+ text-align: center;
+ left: 0;
+ width: 7px;
+ height: 18px;
+ }
+ &::before {
+ top: 25%;
+ }
+ &::after {
+ top: 75%;
+ }
+}
+
+.vertical-resize-handle {
+ height: 6px;
+ background-color: @vertical-resizable-resizer-bg;
+
+ &:hover {
+ background-color: @vertical-resizable-resizer-hover-bg;
+ }
+
+ &::after {
+ // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+ // we'd have to change this SVG too
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+ display: block;
+ text-align: center;
+ line-height: 0;
+ }
+}
+
+// Styles for placeholder elements that will eventually be replaced
+.ide-react-placeholder-chat {
+ background-color: var(--editor-toolbar-bg);
+ color: var(--neutral-20);
+ height: 100%;
+}
+
+.ide-react-placeholder-editor-sidebar {
+ height: 100%;
+ background-color: @file-tree-bg;
+ color: var(--neutral-20);
+}
+
+.ide-react-placeholder-symbol-palette {
+ height: 100%;
+ background-color: @symbol-palette-bg;
+ color: var(--neutral-20);
+}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 5076911b81..163e91b741 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1467,6 +1467,7 @@
"resending_confirmation_email": "Resending confirmation email",
"reset_password": "Reset Password",
"reset_your_password": "Reset your password",
+ "resize": "Resize",
"resolve": "Resolve",
"resolved_comments": "Resolved comments",
"restore": "Restore",
diff --git a/services/web/package.json b/services/web/package.json
index cedda9a331..1b56bab0bf 100644
--- a/services/web/package.json
+++ b/services/web/package.json
@@ -330,6 +330,7 @@
"react-refresh": "^0.14.0",
"react2angular": "^4.0.6",
"react2angular-shared-context": "^1.1.0",
+ "react-resizable-panels": "^0.0.55",
"requirejs": "^2.3.6",
"samlp": "^7.0.2",
"sandboxed-module": "overleaf/node-sandboxed-module#cafa2d60f17ce75cc023e6f296eb8de79d92d35d",