refactor(frontend): improve code splitting

1 files changed, 25 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
new file mode 100644
index 00000000..e8301489
--- /dev/null
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -0,0 +1,25 @@
+import Portal from '@mui/material/Portal';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import type EditorStore from './EditorStore';
+import SearchToolbar from './SearchToolbar';
+
+function SearchPanelPortal({
+  editorStore: { searchPanel: searchPanelStore },
+}: {
+  editorStore: EditorStore;
+}): JSX.Element | null {
+  const { element: searchPanelContainer } = searchPanelStore;
+
+  if (searchPanelContainer === undefined) {
+    return null;
+  }
+  return (
+    <Portal container={searchPanelContainer}>
+      <SearchToolbar searchPanelStore={searchPanelStore} />
+    </Portal>
+  );
+}
+
+export default observer(SearchPanelPortal);