Add workbench as a separate panel (#29922)

GitOrigin-RevId: de1a168e6081dee94313ba2e2a8952028cf455bb

services/web/config/settings.defaults.js

@@ -999,6 +999,7 @@ module.exports = {
     sourceEditorToolbarEndButtons: [],
     rootContextProviders: [],
     mainEditorLayoutModals: [],
+    mainEditorLayoutPanels: [],
     langFeedbackLinkingWidgets: [],
     labsExperiments: [],
     integrationLinkingWidgets: [],

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

@@ -15,6 +15,11 @@ import HistoryContainer from '@/features/ide-react/components/history-container'
 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
@@ -121,6 +126,11 @@ export default function MainLayout() {
               </Panel>
             </PanelGroup>
           </Panel>
+          {mainEditorLayoutPanels.map(
+            ({ import: { default: Component }, path }, i) => {
+              return <Component key={path} order={i + 3} />
+            }
+          )}
         </PanelGroup>
       </div>
       {mainEditorLayoutModalsModules.map(