refactor(frontend): improve code splitting

13 files changed, 179 insertions, 101 deletions

diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index 12c66eb9..3a25f43a 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,23 +1,14 @@
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
+import Stack from '@mui/material/Stack';
 import React from 'react';
 
 import TopBar from './TopBar';
-import EditorArea from './editor/EditorArea';
-import EditorButtons from './editor/EditorButtons';
-import GenerateButton from './editor/GenerateButton';
+import EditorPane from './editor/EditorPane';
 
 export default function App(): JSX.Element {
   return (
-    <Box display="flex" flexDirection="column" sx={{ height: '100vh' }}>
+    <Stack direction="column" height="100vh" overflow="auto">
       <TopBar />
-      <Toolbar variant="dense">
-        <EditorButtons />
-        <GenerateButton />
-      </Toolbar>
-      <Box flexGrow={1} flexShrink={1} overflow="auto">
-        <EditorArea />
-      </Box>
-    </Box>
+      <EditorPane />
+    </Stack>
   );
 }
diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx
index a699adca..72020a43 100644
--- a/subprojects/frontend/src/Loading.tsx
+++ b/subprojects/frontend/src/Loading.tsx
@@ -3,8 +3,8 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 
 const LoadingRoot = styled('div')({
-  width: '100vw',
-  height: '100vh',
+  width: '100%',
+  height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/subprojects/frontend/src/RootStore.tsx b/subprojects/frontend/src/RootStore.tsx
index 4a267b0e..e08dd750 100644
--- a/subprojects/frontend/src/RootStore.tsx
+++ b/subprojects/frontend/src/RootStore.tsx
@@ -1,16 +1,31 @@
+import { getLogger } from 'loglevel';
+import { makeObservable, observable, runInAction } from 'mobx';
 import React, { createContext, useContext } from 'react';
 
-import EditorStore from './editor/EditorStore';
+import type EditorStore from './editor/EditorStore';
 import ThemeStore from './theme/ThemeStore';
 
+const log = getLogger('RootStore');
+
 export default class RootStore {
-  readonly editorStore: EditorStore;
+  editorStore: EditorStore | undefined;
 
   readonly themeStore: ThemeStore;
 
   constructor(initialValue: string) {
-    this.editorStore = new EditorStore(initialValue);
     this.themeStore = new ThemeStore();
+    makeObservable(this, {
+      editorStore: observable,
+    });
+    import('./editor/EditorStore')
+      .then(({ default: EditorStore }) => {
+        runInAction(() => {
+          this.editorStore = new EditorStore(initialValue);
+        });
+      })
+      .catch((error) => {
+        log.error('Failed to load EditorStore', error);
+      });
   }
 }
 
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 915ec657..1c9b031b 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,17 +1,15 @@
-import Portal from '@mui/material/Portal';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect } from 'react';
 
-import { useRootStore } from '../RootStore';
-
+import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
-import SearchToolbar from './SearchToolbar';
 
-function EditorArea(): JSX.Element {
-  const { editorStore } = useRootStore();
-  const { searchPanel: searchPanelStore } = editorStore;
-  const { element: searchPanelContainer } = searchPanelStore;
+function EditorArea({
+  editorStore,
+}: {
+  editorStore: EditorStore;
+}): JSX.Element {
   const {
     palette: { mode: paletteMode },
   } = useTheme();
@@ -32,13 +30,7 @@ function EditorArea(): JSX.Element {
     <EditorTheme
       showLineNumbers={editorStore.showLineNumbers}
       ref={editorParentRef}
-    >
-      {searchPanelContainer !== undefined && (
-        <Portal container={searchPanelContainer}>
-          <SearchToolbar store={searchPanelStore} />
-        </Portal>
-      )}
-    </EditorTheme>
+    />
   );
 }
 
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 8db9dfb7..cbe7c424 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -15,7 +15,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { useRootStore } from '../RootStore';
+import type EditorStore from './EditorStore';
 
 // Exhastive switch as proven by TypeScript.
 // eslint-disable-next-line consistent-return
@@ -32,22 +32,24 @@ function getLintIcon(severity: Diagnostic['severity'] | undefined) {
   }
 }
 
-function EditorButtons(): JSX.Element {
-  const { editorStore } = useRootStore();
-
+function EditorButtons({
+  editorStore,
+}: {
+  editorStore: EditorStore | undefined;
+}): JSX.Element {
   return (
     <Stack direction="row" flexGrow={1}>
       <IconButton
-        disabled={!editorStore.canUndo}
-        onClick={() => editorStore.undo()}
+        disabled={editorStore === undefined || !editorStore.canUndo}
+        onClick={() => editorStore?.undo()}
         aria-label="Undo"
         color="inherit"
       >
         <UndoIcon fontSize="small" />
       </IconButton>
       <IconButton
-        disabled={!editorStore.canRedo}
-        onClick={() => editorStore.redo()}
+        disabled={editorStore === undefined || !editorStore.canRedo}
+        onClick={() => editorStore?.redo()}
         aria-label="Redo"
         color="inherit"
       >
@@ -55,38 +57,44 @@ function EditorButtons(): JSX.Element {
       </IconButton>
       <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
         <ToggleButton
-          selected={editorStore.showLineNumbers}
-          onClick={() => editorStore.toggleLineNumbers()}
+          selected={editorStore?.showLineNumbers ?? false}
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.toggleLineNumbers()}
           aria-label="Show line numbers"
           value="show-line-numbers"
         >
           <FormatListNumberedIcon fontSize="small" />
         </ToggleButton>
         <ToggleButton
-          selected={editorStore.searchPanel.state}
-          onClick={() => editorStore.searchPanel.toggle()}
+          selected={editorStore?.searchPanel?.state ?? false}
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.searchPanel?.toggle()}
           aria-label="Show find/replace"
-          {...(editorStore.searchPanel.state && {
-            'aria-controls': editorStore.searchPanel.id,
-          })}
+          {...(editorStore !== undefined &&
+            editorStore.searchPanel.state && {
+              'aria-controls': editorStore.searchPanel.id,
+            })}
           value="show-search-panel"
         >
           <SearchIcon fontSize="small" />
         </ToggleButton>
         <ToggleButton
-          selected={editorStore.lintPanel.state}
-          onClick={() => editorStore.lintPanel.toggle()}
+          selected={editorStore?.lintPanel?.state ?? false}
+          disabled={editorStore === undefined}
+          onClick={() => editorStore?.lintPanel.toggle()}
           aria-label="Show diagnostics panel"
-          {...(editorStore.lintPanel.state && {
-            'aria-controls': editorStore.lintPanel.id,
-          })}
+          {...(editorStore !== undefined &&
+            editorStore.lintPanel.state && {
+              'aria-controls': editorStore.lintPanel.id,
+            })}
           value="show-lint-panel"
         >
-          {getLintIcon(editorStore.highestDiagnosticLevel)}
+          {getLintIcon(editorStore?.highestDiagnosticLevel)}
         </ToggleButton>
       </ToggleButtonGroup>
       <IconButton
-        onClick={() => editorStore.formatText()}
+        disabled={editorStore === undefined}
+        onClick={() => editorStore?.formatText()}
         aria-label="Automatic format"
         color="inherit"
       >
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
new file mode 100644
index 00000000..935a84e8
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -0,0 +1,38 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Toolbar from '@mui/material/Toolbar';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import Loading from '../Loading';
+import { useRootStore } from '../RootStore';
+
+import EditorArea from './EditorArea';
+import EditorButtons from './EditorButtons';
+import GenerateButton from './GenerateButton';
+import SearchPanelPortal from './SearchPanelPortal';
+
+function EditorPane(): JSX.Element {
+  const { editorStore } = useRootStore();
+
+  return (
+    <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto">
+      <Toolbar variant="dense">
+        <EditorButtons editorStore={editorStore} />
+        <GenerateButton editorStore={editorStore} />
+      </Toolbar>
+      <Box flexGrow={1} flexShrink={1} overflow="auto">
+        {editorStore === undefined ? (
+          <Loading />
+        ) : (
+          <>
+            <SearchPanelPortal editorStore={editorStore} />
+            <EditorArea editorStore={editorStore} />
+          </>
+        )}
+      </Box>
+    </Stack>
+  );
+}
+
+export default observer(EditorPane);
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index d8680070..ca07d602 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -4,8 +4,6 @@ import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
 import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw';
 import { alpha, styled, type CSSObject } from '@mui/material/styles';
 
-import editorClassNames from './editorClassNames';
-
 function svgURL(svg: string): string {
   return `url('data:image/svg+xml;utf8,${svg}')`;
 }
@@ -315,7 +313,7 @@ export default styled('div', {
     '.cm-gutters:hover .cm-foldGutter': {
       opacity: 1,
     },
-    [`.${editorClassNames.foldMarker}`]: {
+    '.problem-editor-foldMarker': {
       display: 'block',
       margin: '4px 0',
       padding: 0,
@@ -330,10 +328,10 @@ export default styled('div', {
         margin: '2px 0',
       },
     },
-    [`.${editorClassNames.foldMarkerClosed}`]: {
+    '.problem-editor-foldMarker-closed': {
       transform: 'rotate(-90deg)',
     },
-    [`.${editorClassNames.foldPlaceholder}`]: {
+    '.problem-editor-foldPlaceholder': {
       ...editorFontStyle,
       padding: 0,
       fontFamily: 'inherit',
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 4b998af6..a28f6b4b 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -3,12 +3,23 @@ import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { useRootStore } from '../RootStore';
+import type EditorStore from './EditorStore';
 
 const GENERATE_LABEL = 'Generate';
 
-function GenerateButton(): JSX.Element {
-  const { editorStore } = useRootStore();
+function GenerateButton({
+  editorStore,
+}: {
+  editorStore: EditorStore | undefined;
+}): JSX.Element {
+  if (editorStore === undefined) {
+    return (
+      <Button color="inherit" className="rounded" disabled>
+        Loading&hellip;
+      </Button>
+    );
+  }
+
   const { errorCount, warningCount } = editorStore;
 
   const diagnostics: string[] = [];
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);
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 45f1336d..7e6ff4f7 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -20,12 +20,16 @@ import type SearchPanelStore from './SearchPanelStore';
 const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)';
 const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)';
 
-function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
+function SearchToolbar({
+  searchPanelStore,
+}: {
+  searchPanelStore: SearchPanelStore;
+}): JSX.Element {
   const {
     id: panelId,
     query: { search, valid, caseSensitive, literal, regexp, replace },
     invalidRegexp,
-  } = store;
+  } = searchPanelStore;
   const split = useMediaQuery(SPLIT_MEDIA_QUERY);
   const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY);
   const [showRepalceState, setShowReplaceState] = useState(false);
@@ -37,8 +41,8 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
 
   const searchFieldRef = useCallback(
     (element: HTMLInputElement | null) =>
-      store.setSearchField(element ?? undefined),
-    [store],
+      searchPanelStore.setSearchField(element ?? undefined),
+    [searchPanelStore],
   );
 
   return (
@@ -68,15 +72,15 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             value={search}
             error={invalidRegexp}
             onChange={(event) =>
-              store.updateQuery({ search: event.target.value })
+              searchPanelStore.updateQuery({ search: event.target.value })
             }
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 event.preventDefault();
                 if (event.shiftKey) {
-                  store.findPrevious();
+                  searchPanelStore.findPrevious();
                 } else {
-                  store.findNext();
+                  searchPanelStore.findNext();
                 }
               }
             }}
@@ -108,7 +112,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             <IconButton
               aria-label="Previous"
               disabled={!valid}
-              onClick={() => store.findPrevious()}
+              onClick={() => searchPanelStore.findPrevious()}
               color="inherit"
             >
               <KeyboardArrowUpIcon fontSize="small" />
@@ -116,7 +120,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             <IconButton
               aria-label="Next"
               disabled={!valid}
-              onClick={() => store.findNext()}
+              onClick={() => searchPanelStore.findNext()}
               color="inherit"
             >
               <KeyboardArrowDownIcon fontSize="small" />
@@ -133,7 +137,9 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                 <Checkbox
                   checked={caseSensitive}
                   onChange={(event) =>
-                    store.updateQuery({ caseSensitive: event.target.checked })
+                    searchPanelStore.updateQuery({
+                      caseSensitive: event.target.checked,
+                    })
                   }
                   size="small"
                 />
@@ -146,7 +152,9 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                 <Checkbox
                   checked={literal}
                   onChange={(event) =>
-                    store.updateQuery({ literal: event.target.checked })
+                    searchPanelStore.updateQuery({
+                      literal: event.target.checked,
+                    })
                   }
                   size="small"
                 />
@@ -159,7 +167,9 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                 <Checkbox
                   checked={regexp}
                   onChange={(event) =>
-                    store.updateQuery({ regexp: event.target.checked })
+                    searchPanelStore.updateQuery({
+                      regexp: event.target.checked,
+                    })
                   }
                   size="small"
                 />
@@ -172,7 +182,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                 selected={showReplace}
                 onClick={() => {
                   if (showReplace) {
-                    store.updateQuery({ replace: '' });
+                    searchPanelStore.updateQuery({ replace: '' });
                     setShowReplaceState(false);
                   } else {
                     setShowReplaceState(true);
@@ -201,12 +211,12 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             aria-label="Replace with"
             value={replace}
             onChange={(event) =>
-              store.updateQuery({ replace: event.target.value })
+              searchPanelStore.updateQuery({ replace: event.target.value })
             }
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 event.preventDefault();
-                store.replaceNext();
+                searchPanelStore.replaceNext();
               }
             }}
             variant="standard"
@@ -221,7 +231,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
           >
             <Button
               disabled={!valid}
-              onClick={() => store.replaceNext()}
+              onClick={() => searchPanelStore.replaceNext()}
               color="inherit"
               startIcon={<FindReplaceIcon fontSize="inherit" />}
             >
@@ -229,7 +239,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             </Button>
             <Button
               disabled={!valid}
-              onClick={() => store.replaceAll()}
+              onClick={() => searchPanelStore.replaceAll()}
               color="inherit"
               startIcon={<FindReplaceIcon fontSize="inherit" />}
             >
@@ -241,7 +251,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
       <Stack direction="row" alignSelf="stretch" alignItems="start" mt="1px">
         <IconButton
           aria-label="Close find/replace"
-          onClick={() => store.close()}
+          onClick={() => searchPanelStore.close()}
           color="inherit"
         >
           <CloseIcon fontSize="small" />
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts
index 7b0f3c07..c61f4a22 100644
--- a/subprojects/frontend/src/editor/createEditorState.ts
+++ b/subprojects/frontend/src/editor/createEditorState.ts
@@ -36,7 +36,6 @@ import problemLanguageSupport from '../language/problemLanguageSupport';
 
 import type EditorStore from './EditorStore';
 import SearchPanel from './SearchPanel';
-import editorClassNames from './editorClassNames';
 import findOccurrences from './findOccurrences';
 import semanticHighlighting from './semanticHighlighting';
 
@@ -75,7 +74,7 @@ export default function createEditorState(
       codeFolding({
         placeholderDOM(_view, onClick) {
           const button = document.createElement('button');
-          button.className = editorClassNames.foldPlaceholder;
+          button.className = 'problem-editor-foldPlaceholder';
           button.ariaLabel = 'Unfold lines';
           const span = document.createElement('span');
           span.innerText = '...';
@@ -88,10 +87,8 @@ export default function createEditorState(
         markerDOM(open) {
           const div = document.createElement('div');
           div.className = [
-            editorClassNames.foldMarker,
-            open
-              ? editorClassNames.foldMarkerOpen
-              : editorClassNames.foldMarkerClosed,
+            'problem-editor-foldMarker',
+            `problem-editor-foldMarker-${open ? 'open' : 'closed'}`,
           ].join(' ');
           return div;
         },
diff --git a/subprojects/frontend/src/editor/editorClassNames.ts b/subprojects/frontend/src/editor/editorClassNames.ts
deleted file mode 100644
index 5584e8c2..00000000
--- a/subprojects/frontend/src/editor/editorClassNames.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const PREFIX = 'problem-editor-';
-
-const editorClassNames = {
-  foldPlaceholder: `${PREFIX}fold-placeholder`,
-  foldMarker: `${PREFIX}fold-marker`,
-  foldMarkerClosed: `${PREFIX}fold-marker-closed`,
-  foldMarkerOpen: `${PREFIX}fold-marker-open`,
-};
-
-export default editorClassNames;
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 460f6f77..3f06b332 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,3 +1,4 @@
+import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import { SnackbarProvider } from 'notistack';
 import React, { Suspense, lazy } from 'react';
@@ -71,9 +72,11 @@ const app = (
         <WindowControlsOverlayColor />
         <SnackbarProvider>
           <RegisterServiceWorker />
-          <Suspense fallback={<Loading />}>
-            <App />
-          </Suspense>
+          <Box height="100vh" overflow="auto">
+            <Suspense fallback={<Loading />}>
+              <App />
+            </Suspense>
+          </Box>
         </SnackbarProvider>
       </ThemeProvider>
     </RootStoreProvider>