Merge pull request #24177 from overleaf/mj-ide-symbol-palette

[web] Editor redesign: Add symbol palette

GitOrigin-RevId: c9c1e15adef86023b18a6d6efea854777fa4fb11

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

@@ -5,6 +5,11 @@ import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-o
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import classNames from 'classnames'
 import SourceEditor from '@/features/source-editor/components/source-editor'
+import { Panel, PanelGroup } from 'react-resizable-panels'
+import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
+import { Suspense } from 'react'
+import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
+import SymbolPalettePane from '@/features/ide-react/components/editor/symbol-palette-pane'
 
 export const Editor = () => {
   const [editor] = useScopeValue<EditorScopeValue>('editor')
@@ -27,8 +32,35 @@ export const Editor = () => {
         hidden: openEntity?.type !== 'doc' || selectedEntityCount !== 1,
       })}
     >
-      <SourceEditor />
-      {isLoading && <LoadingPane />}
+      <PanelGroup
+        autoSaveId="ide-redesign-editor-symbol-palette"
+        direction="vertical"
+      >
+        <Panel
+          id="ide-redesign-panel-source-editor"
+          order={1}
+          className="ide-redesign-editor-panel"
+        >
+          <SourceEditor />
+          {isLoading && <LoadingPane />}
+        </Panel>
+        {editor.showSymbolPalette && (
+          <>
+            <VerticalResizeHandle id="ide-redesign-editor-symbol-palette" />
+            <Panel
+              id="ide-redesign-panel-symbol-palette"
+              order={2}
+              defaultSize={25}
+              minSize={10}
+              maxSize={50}
+            >
+              <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
+                <SymbolPalettePane />
+              </Suspense>
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
     </div>
   )
 }