Editor Redesign Cleanup: main layout, toolbar, and rail (#31031)

* feat: integrate  main layout, toolbar, and rail from redesign into main ide-react folder

* feat: remove additional files no longer used after ide redesign

GitOrigin-RevId: 8fd77f63cb9c67be91995a9dde13b0fe2376d80f

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

@@ -1,7 +1,4 @@
-import { lazy, Suspense } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
-import { MainLayout } from '@/features/ide-react/components/layout/main-layout'
-import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
 import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-event-tracking'
 import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners'
 import { useEditingSessionHeartbeat } from '@/features/ide-react/hooks/use-editing-session-heartbeat'
@@ -10,21 +7,13 @@ import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-e
 import { Modals } from '@/features/ide-react/components/modals/modals'
 import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context'
 import { GlobalToasts } from '../global-toasts'
-import {
-  canUseNewEditor,
-  useIsNewEditorEnabled,
-} from '@/features/ide-redesign/utils/new-editor-utils'
 import EditorSurvey from '../editor-survey'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useStatusFavicon } from '@/features/ide-react/hooks/use-status-favicon'
 import useThemedPage from '@/shared/hooks/use-themed-page'
 
-const MainLayoutNew = lazy(
-  () => import('@/features/ide-redesign/components/main-layout')
-)
-const SettingsModalNew = lazy(
-  () => import('@/features/ide-redesign/components/settings/settings-modal')
-)
+import MainLayout from '@/features/ide-react/components/layout/main-layout'
+import SettingsModalNew from '@/features/ide-redesign/components/settings/settings-modal'
 
 export default function IdePage() {
   useLayoutEventTracking() // sent event when the layout changes
@@ -35,26 +24,15 @@ export default function IdePage() {
   useStatusFavicon() // update the favicon based on the compile status
   useThemedPage() // set the page theme based on user settings
 
-  const newEditor = useIsNewEditorEnabled()
-  const canAccessNewEditor = canUseNewEditor()
   const editorSurveyFlag = useFeatureFlag('editor-popup-ux-survey')
-  const showEditorSurvey = editorSurveyFlag && !canAccessNewEditor
+  const showEditorSurvey = editorSurveyFlag
 
   return (
     <GlobalAlertsProvider>
       <Alerts />
       <Modals />
-      {newEditor ? (
-        <Suspense fallback={null}>
-          <SettingsModalNew />
-          <MainLayoutNew />
-        </Suspense>
-      ) : (
-        <>
-          <EditorLeftMenu />
-          <MainLayout />
-        </>
-      )}
+      <SettingsModalNew />
+      <MainLayout />
       <GlobalToasts />
       {showEditorSurvey && <EditorSurvey />}
     </GlobalAlertsProvider>

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

@@ -1,134 +1,136 @@
 import { Panel, PanelGroup } from 'react-resizable-panels'
-import { ElementType, FC } from 'react'
-import { HorizontalResizeHandle } from '../resize/horizontal-resize-handle'
 import classNames from 'classnames'
-import { useLayoutContext } from '@/shared/context/layout-context'
-import EditorNavigationToolbar from '@/features/ide-react/components/editor-navigation-toolbar'
-import ChatPane from '@/features/chat/components/chat-pane'
+import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
+import PdfPreview from '@/features/pdf-preview/components/pdf-preview'
+import { RailLayout } from '../rail/rail'
+import { Toolbar } from '../toolbar/toolbar'
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
-import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
-import EditorSidebar from '@/features/ide-react/components/editor-sidebar'
 import { useTranslation } from 'react-i18next'
-import { useSidebarPane } from '@/features/ide-react/hooks/use-sidebar-pane'
-import { useChatPane } from '@/features/ide-react/hooks/use-chat-pane'
-import { EditorAndPdf } from '@/features/ide-react/components/editor-and-pdf'
+import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import { ElementType, useState } from 'react'
+import EditorPanel from '../editor/editor-panel'
+import { useRailContext } from '../../context/rail-context'
 import HistoryContainer from '@/features/ide-react/components/history-container'
-import getMeta from '@/utils/meta'
-import { useEditorContext } from '@/shared/context/editor-context'
+import { DefaultSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 
+const mainEditorLayoutPanels: Array<{
+  import: { default: ElementType }
+  path: string
+}> = importOverleafModules('mainEditorLayoutPanels')
+
 const mainEditorLayoutModalsModules: Array<{
   import: { default: ElementType }
   path: string
 }> = importOverleafModules('mainEditorLayoutModals')
 
-export const MainLayout: FC = () => {
-  const { view } = useLayoutContext()
-  const { isRestrictedTokenMember } = useEditorContext()
-
+export default function MainLayout() {
+  const [resizing, setResizing] = useState(false)
+  const { resizing: railResizing } = useRailContext()
   const {
-    isOpen: sidebarIsOpen,
-    setIsOpen: setSidebarIsOpen,
-    panelRef: sidebarPanelRef,
-    togglePane: toggleSidebar,
-    handlePaneExpand: handleSidebarExpand,
-    handlePaneCollapse: handleSidebarCollapse,
-    resizing: sidebarResizing,
-    setResizing: setSidebarResizing,
-  } = useSidebarPane()
+    togglePdfPane,
+    handlePdfPaneExpand,
+    handlePdfPaneCollapse,
+    setPdfIsOpen: setIsPdfOpen,
+    pdfIsOpen: isPdfOpen,
+    pdfPanelRef,
+  } = usePdfPane()
+  const { view, pdfLayout } = useLayoutContext()
 
-  const {
-    isOpen: chatIsOpen,
-    panelRef: chatPanelRef,
-    togglePane: toggleChat,
-    resizing: chatResizing,
-    setResizing: setChatResizing,
-    handlePaneCollapse: handleChatCollapse,
-    handlePaneExpand: handleChatExpand,
-  } = useChatPane()
-
-  const chatEnabled =
-    getMeta('ol-capabilities')?.includes('chat') && !isRestrictedTokenMember
+  const editorIsOpen =
+    view === 'editor' || view === 'file' || pdfLayout === 'sideBySide'
 
   const { t } = useTranslation()
 
   return (
-    <div className="ide-react-main">
-      <EditorNavigationToolbar />
-      <div className="ide-react-body">
+    <div className="ide-redesign-main">
+      <Toolbar />
+      <div className="ide-redesign-body">
         <PanelGroup
-          autoSaveId="ide-outer-layout"
+          autoSaveId="ide-redesign-outer-layout"
           direction="horizontal"
-          className={classNames({
-            'ide-panel-group-resizing': sidebarResizing || chatResizing,
+          className={classNames('ide-redesign-inner', {
+            'ide-panel-group-resizing': resizing || railResizing,
           })}
         >
-          {/* sidebar */}
-          <Panel
-            ref={sidebarPanelRef}
-            id="panel-sidebar"
-            order={1}
-            defaultSize={15}
-            minSize={5}
-            maxSize={80}
-            collapsible
-            onCollapse={handleSidebarCollapse}
-            onExpand={handleSidebarExpand}
-          >
-            <EditorSidebar />
-            {view === 'history' && <HistorySidebar />}
-          </Panel>
-
-          <HorizontalResizeHandle
-            onDoubleClick={toggleSidebar}
-            resizable={sidebarIsOpen}
-            onDragging={setSidebarResizing}
-            hitAreaMargins={{ coarse: 0, fine: 0 }}
-          >
-            <HorizontalToggler
-              id="panel-sidebar"
-              togglerType="west"
-              isOpen={sidebarIsOpen}
-              setIsOpen={setSidebarIsOpen}
-              tooltipWhenOpen={t('tooltip_hide_filetree')}
-              tooltipWhenClosed={t('tooltip_show_filetree')}
-            />
-          </HorizontalResizeHandle>
-
-          <Panel id="panel-outer-main" order={2}>
-            <PanelGroup autoSaveId="ide-inner-layout" direction="horizontal">
-              <Panel className="ide-react-panel" id="panel-main" order={1}>
-                <HistoryContainer />
-                <EditorAndPdf />
+          <RailLayout />
+          <Panel id="ide-redesign-editor-and-pdf-panel" order={2}>
+            <HistoryContainer />
+            <PanelGroup
+              autoSaveId="ide-redesign-editor-and-pdf-panel-group"
+              direction="horizontal"
+              className={classNames({
+                hidden: view === 'history',
+              })}
+            >
+              <Panel
+                id="ide-redesign-editor-panel"
+                order={1}
+                className={classNames({
+                  hidden: !editorIsOpen || view === 'history',
+                })}
+                minSize={5}
+                defaultSize={50}
+                tagName="section"
+                aria-label={t('editor')}
+              >
+                <div className="ide-redesign-editor-container">
+                  <EditorPanel />
+                </div>
+              </Panel>
+              <HorizontalResizeHandle
+                resizable={pdfLayout === 'sideBySide'}
+                onDragging={setResizing}
+                onDoubleClick={togglePdfPane}
+                hitAreaMargins={{ coarse: 0, fine: 0 }}
+                className={classNames({
+                  hidden: !editorIsOpen,
+                })}
+              >
+                <HorizontalToggler
+                  id="ide-redesign-pdf-panel"
+                  togglerType="east"
+                  isOpen={isPdfOpen}
+                  setIsOpen={setIsPdfOpen}
+                  tooltipWhenOpen={t('tooltip_hide_pdf')}
+                  tooltipWhenClosed={t('tooltip_show_pdf')}
+                />
+                {pdfLayout === 'sideBySide' && (
+                  <div className="synctex-controls">
+                    <DefaultSynctexControl />
+                  </div>
+                )}
+              </HorizontalResizeHandle>
+              <Panel
+                collapsible
+                className={classNames('ide-redesign-pdf-container', {
+                  hidden: view === 'history',
+                })}
+                id="ide-redesign-pdf-panel"
+                order={2}
+                defaultSize={50}
+                minSize={5}
+                ref={pdfPanelRef}
+                onExpand={handlePdfPaneExpand}
+                onCollapse={handlePdfPaneCollapse}
+                tagName="section"
+                aria-label={t('pdf_preview')}
+              >
+                <PdfPreview />
+                {pdfLayout === 'flat' && view === 'pdf' && (
+                  <div className="synctex-controls" hidden>
+                    <DefaultSynctexControl />
+                  </div>
+                )}
               </Panel>
-
-              {chatEnabled && (
-                <>
-                  <HorizontalResizeHandle
-                    onDoubleClick={toggleChat}
-                    resizable={chatIsOpen}
-                    onDragging={setChatResizing}
-                    hitAreaMargins={{ coarse: 0, fine: 0 }}
-                  />
-
-                  {/* chat */}
-                  <Panel
-                    ref={chatPanelRef}
-                    id="panel-chat"
-                    order={2}
-                    defaultSize={20}
-                    minSize={5}
-                    maxSize={30}
-                    collapsible
-                    onCollapse={handleChatCollapse}
-                    onExpand={handleChatExpand}
-                  >
-                    <ChatPane />
-                  </Panel>
-                </>
-              )}
             </PanelGroup>
           </Panel>
+          {mainEditorLayoutPanels.map(
+            ({ import: { default: Component }, path }, i) => {
+              return <Component key={path} order={i + 3} />
+            }
+          )}
         </PanelGroup>
       </div>
       {mainEditorLayoutModalsModules.map(