8 files changed, 173 insertions, 119 deletions

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index dba20f6e..14294371 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,17 +1,13 @@
-import { Command, EditorView } from '@codemirror/view';
-import { closeSearchPanel, openSearchPanel } from '@codemirror/search';
 import { closeLintPanel, openLintPanel } from '@codemirror/lint';
+import { closeSearchPanel, openSearchPanel } from '@codemirror/search';
+import { type Command, EditorView } from '@codemirror/view';
 import { observer } from 'mobx-react-lite';
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { EditorParent } from './EditorParent';
 import { useRootStore } from '../RootStore';
-import { getLogger } from '../utils/logger';
+import getLogger from '../utils/getLogger';
+
+import EditorParent from './EditorParent';
 
 const log = getLogger('editor.EditorArea');
 
@@ -70,10 +66,12 @@ function fixCodeMirrorAccessibility(editorView: EditorView) {
   contentDOM.setAttribute('aria-label', 'Code editor');
 }
 
-export const EditorArea = observer(() => {
+function EditorArea(): JSX.Element {
   const { editorStore } = useRootStore();
   const editorParentRef = useRef<HTMLDivElement | null>(null);
-  const [editorViewState, setEditorViewState] = useState<EditorView | null>(null);
+  const [editorViewState, setEditorViewState] = useState<EditorView | null>(
+    null,
+  );
 
   const setSearchPanelOpen = usePanel(
     'search',
@@ -131,22 +129,21 @@ export const EditorArea = observer(() => {
       editorView.destroy();
       log.info('Editor destroyed');
     };
-  }, [
-    editorParentRef,
-    editorStore,
-    setSearchPanelOpen,
-    setLintPanelOpen,
-  ]);
+  }, [editorStore, setSearchPanelOpen, setLintPanelOpen]);
 
   return (
     <EditorParent
       className="dark"
       sx={{
-        '.cm-lineNumbers': editorStore.showLineNumbers ? {} : {
-          display: 'none !important',
-        },
+        '.cm-lineNumbers': editorStore.showLineNumbers
+          ? {}
+          : {
+              display: 'none !important',
+            },
       }}
       ref={editorParentRef}
     />
   );
-});
+}
+
+export default observer(EditorArea);
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 150aa00d..652ca71e 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -1,9 +1,4 @@
 import type { Diagnostic } from '@codemirror/lint';
-import { observer } from 'mobx-react-lite';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
@@ -13,6 +8,11 @@ import RedoIcon from '@mui/icons-material/Redo';
 import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
 import WarningIcon from '@mui/icons-material/Warning';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useRootStore } from '../RootStore';
@@ -27,23 +27,17 @@ function getLintIcon(severity: Diagnostic['severity'] | null) {
       return <WarningIcon fontSize="small" />;
     case 'info':
       return <InfoOutlinedIcon fontSize="small" />;
-    case null:
+    default:
       return <CheckIcon fontSize="small" />;
   }
 }
 
-export const EditorButtons = observer(() => {
+function EditorButtons(): JSX.Element {
   const { editorStore } = useRootStore();
 
   return (
-    <Stack
-      direction="row"
-      spacing={1}
-    >
-      <Stack
-        direction="row"
-        alignItems="center"
-      >
+    <Stack direction="row" spacing={1}>
+      <Stack direction="row" alignItems="center">
         <IconButton
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
@@ -59,9 +53,7 @@ export const EditorButtons = observer(() => {
           <RedoIcon fontSize="small" />
         </IconButton>
       </Stack>
-      <ToggleButtonGroup
-        size="small"
-      >
+      <ToggleButtonGroup size="small">
         <ToggleButton
           selected={editorStore.showLineNumbers}
           onClick={() => editorStore.toggleLineNumbers()}
@@ -95,4 +87,6 @@ export const EditorButtons = observer(() => {
       </IconButton>
     </Stack>
   );
-});
+}
+
+export default observer(EditorButtons);
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
index 9aaf541a..dbc35a0d 100644
--- a/subprojects/frontend/src/editor/EditorParent.ts
+++ b/subprojects/frontend/src/editor/EditorParent.ts
@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 
 /**
  * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64.
@@ -17,7 +17,9 @@ function underline(color: string) {
   return `url('data:image/svg+xml;base64,${svgBase64}')`;
 }
 
-export const EditorParent = styled('div')(({ theme }) => {
+export default styled('div', {
+  name: 'EditorParent',
+})(({ theme }) => {
   const codeMirrorLintStyle: Record<string, unknown> = {};
   (['error', 'warning', 'info'] as const).forEach((severity) => {
     const color = theme.palette[severity].main;
@@ -37,19 +39,20 @@ export const EditorParent = styled('div')(({ theme }) => {
     '.cm-content': {
       padding: 0,
     },
-    '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
-      fontSize: 16,
-      fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
-      fontFeatureSettings: '"liga", "calt"',
-      fontWeight: 400,
-      letterSpacing: 0,
-      textRendering: 'optimizeLegibility',
-    },
+    '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail':
+      {
+        fontSize: 16,
+        fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+        fontFeatureSettings: '"liga", "calt"',
+        fontWeight: 400,
+        letterSpacing: 0,
+        textRendering: 'optimizeLegibility',
+      },
     '.cm-scroller': {
       color: theme.palette.text.secondary,
     },
     '.cm-gutters': {
-      background: 'rgba(255, 255, 255, 0.1)',
+      background: 'transparent',
       color: theme.palette.text.disabled,
       border: 'none',
     },
@@ -57,7 +60,19 @@ export const EditorParent = styled('div')(({ theme }) => {
       color: theme.palette.secondary.main,
     },
     '.cm-activeLine': {
-      background: 'rgba(0, 0, 0, 0.3)',
+      background: alpha(theme.palette.text.secondary, 0.06),
+    },
+    '.cm-foldGutter': {
+      color: alpha(theme.palette.text.primary, 0),
+      transition: theme.transitions.create('color', {
+        duration: theme.transitions.duration.short,
+      }),
+      '@media (hover: none)': {
+        color: theme.palette.text.primary,
+      },
+    },
+    '.cm-gutters:hover .cm-foldGutter': {
+      color: theme.palette.text.primary,
     },
     '.cm-activeLineGutter': {
       background: 'transparent',
@@ -66,8 +81,7 @@ export const EditorParent = styled('div')(({ theme }) => {
       color: theme.palette.text.primary,
     },
     '.cm-cursor, .cm-cursor-primary': {
-      borderColor: theme.palette.primary.main,
-      background: theme.palette.common.black,
+      borderLeft: `2px solid ${theme.palette.primary.main}`,
     },
     '.cm-selectionBackground': {
       background: '#3e4453',
@@ -115,9 +129,26 @@ export const EditorParent = styled('div')(({ theme }) => {
       },
     },
     '.cm-foldPlaceholder': {
-      background: theme.palette.background.paper,
-      borderColor: theme.palette.text.disabled,
       color: theme.palette.text.secondary,
+      backgroundColor: alpha(theme.palette.text.secondary, 0),
+      border: `1px solid ${alpha(theme.palette.text.secondary, 0.5)}`,
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create(
+        ['background-color', 'border-color', 'color'],
+        {
+          duration: theme.transitions.duration.short,
+        },
+      ),
+      '&:hover': {
+        backgroundColor: alpha(
+          theme.palette.text.secondary,
+          theme.palette.action.hoverOpacity,
+        ),
+        borderColor: theme.palette.text.secondary,
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
     },
     '.tok-comment': {
       fontStyle: 'italic',
@@ -168,9 +199,14 @@ export const EditorParent = styled('div')(({ theme }) => {
     },
     '.cm-tooltip-autocomplete': {
       background: theme.palette.background.paper,
-      boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%),
-        0px 4px 5px 0px rgb(0 0 0 / 14%),
-        0px 1px 10px 0px rgb(0 0 0 / 12%)`,
+      ...(theme.palette.mode === 'dark' && {
+        overflow: 'hidden',
+        borderRadius: theme.shape.borderRadius,
+        // https://github.com/mui/material-ui/blob/10c72729c7d03bab8cdce6eb422642684c56dca2/packages/mui-material/src/Paper/Paper.js#L18
+        backgroundImage:
+          'linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))',
+      }),
+      boxShadow: theme.shadows[4],
       '.cm-completionIcon': {
         color: theme.palette.text.secondary,
       },
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 0f4d2936..f75147a4 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -21,18 +21,14 @@ import {
   indentOnInput,
   syntaxHighlighting,
 } from '@codemirror/language';
-import {
-  Diagnostic,
-  lintKeymap,
-  setDiagnostics,
-} from '@codemirror/lint';
+import { type Diagnostic, lintKeymap, setDiagnostics } from '@codemirror/lint';
 import { search, searchKeymap } from '@codemirror/search';
 import {
   EditorState,
-  StateCommand,
+  type StateCommand,
   StateEffect,
-  Transaction,
-  TransactionSpec,
+  type Transaction,
+  type TransactionSpec,
 } from '@codemirror/state';
 import {
   drawSelection,
@@ -45,26 +41,25 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import { classHighlighter } from '@lezer/highlight';
-import {
-  makeAutoObservable,
-  observable,
-  reaction,
-} from 'mobx';
-
-import { findOccurrences, IOccurrence, setOccurrences } from './findOccurrences';
-import { problemLanguageSupport } from '../language/problemLanguageSupport';
-import {
-  IHighlightRange,
-  semanticHighlighting,
+import { makeAutoObservable, observable, reaction } from 'mobx';
+
+import problemLanguageSupport from '../language/problemLanguageSupport';
+import type ThemeStore from '../theme/ThemeStore';
+import getLogger from '../utils/getLogger';
+import XtextClient from '../xtext/XtextClient';
+
+import findOccurrences, {
+  type IOccurrence,
+  setOccurrences,
+} from './findOccurrences';
+import semanticHighlighting, {
+  type IHighlightRange,
   setSemanticHighlighting,
 } from './semanticHighlighting';
-import type { ThemeStore } from '../theme/ThemeStore';
-import { getLogger } from '../utils/logger';
-import { XtextClient } from '../xtext/XtextClient';
 
 const log = getLogger('editor.EditorStore');
 
-export class EditorStore {
+export default class EditorStore {
   private readonly themeStore;
 
   state: EditorState;
@@ -96,17 +91,18 @@ export class EditorStore {
       extensions: [
         autocompletion({
           activateOnTyping: true,
-          override: [
-            (context) => this.client.contentAssist(context),
-          ],
+          override: [(context) => this.client.contentAssist(context)],
         }),
         closeBrackets(),
         bracketMatching(),
         drawSelection(),
         EditorState.allowMultipleSelections.of(true),
-        EditorView.theme({}, {
-          dark: this.themeStore.darkMode,
-        }),
+        EditorView.theme(
+          {},
+          {
+            dark: this.themeStore.darkMode,
+          },
+        ),
         findOccurrences,
         highlightActiveLine(),
         highlightActiveLineGutter(),
@@ -134,8 +130,16 @@ export class EditorStore {
           { key: 'Mod-Shift-m', run: () => this.setLintPanelOpen(true) },
           ...lintKeymap,
           // Override keys in `searchKeymap` to go through the `EditorStore`.
-          { key: 'Mod-f', run: () => this.setSearchPanelOpen(true), scope: 'editor search-panel' },
-          { key: 'Escape', run: () => this.setSearchPanelOpen(false), scope: 'editor search-panel' },
+          {
+            key: 'Mod-f',
+            run: () => this.setSearchPanelOpen(true),
+            scope: 'editor search-panel',
+          },
+          {
+            key: 'Escape',
+            run: () => this.setSearchPanelOpen(false),
+            scope: 'editor search-panel',
+          },
           ...searchKeymap,
           ...defaultKeymap,
         ]),
@@ -149,9 +153,14 @@ export class EditorStore {
         log.debug('Update editor dark mode', darkMode);
         this.dispatch({
           effects: [
-            StateEffect.appendConfig.of(EditorView.theme({}, {
-              dark: darkMode,
-            })),
+            StateEffect.appendConfig.of(
+              EditorView.theme(
+                {},
+                {
+                  dark: darkMode,
+                },
+              ),
+            ),
           ],
         });
       },
@@ -198,6 +207,8 @@ export class EditorStore {
         case 'info':
           this.infoCount += 1;
           break;
+        default:
+          throw new Error('Unknown severity');
       }
     });
   }
@@ -261,7 +272,7 @@ export class EditorStore {
    * This matches the behavior of the `openSearchPanel` and `closeSearchPanel`
    * commands from `'@codemirror/search'`.
    *
-   * @param newShosSearchPanel whether we should show the search panel
+   * @param newShowSearchPanel whether we should show the search panel
    * @returns `true` if the state was changed, `false` otherwise
    */
   setSearchPanelOpen(newShowSearchPanel: boolean): boolean {
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 3834cec4..fc337da9 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -1,13 +1,13 @@
-import { observer } from 'mobx-react-lite';
-import Button from '@mui/material/Button';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useRootStore } from '../RootStore';
 
 const GENERATE_LABEL = 'Generate';
 
-export const GenerateButton = observer(() => {
+function GenerateButton(): JSX.Element {
   const { editorStore } = useRootStore();
   const { errorCount, warningCount } = editorStore;
 
@@ -41,4 +41,6 @@ export const GenerateButton = observer(() => {
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </Button>
   );
-});
+}
+
+export default observer(GenerateButton);
diff --git a/subprojects/frontend/src/editor/decorationSetExtension.ts b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
index 2d630c20..d9c7bc7d 100644
--- a/subprojects/frontend/src/editor/decorationSetExtension.ts
+++ b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
@@ -1,11 +1,16 @@
 import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
 import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
 
-export type TransactionSpecFactory = (decorations: DecorationSet) => TransactionSpec;
+export type TransactionSpecFactory = (
+  decorations: DecorationSet,
+) => TransactionSpec;
 
-export function decorationSetExtension(): [TransactionSpecFactory, StateField<DecorationSet>] {
+export default function defineDecorationSetExtension(): [
+  TransactionSpecFactory,
+  StateField<DecorationSet>,
+] {
   const setEffect = StateEffect.define<DecorationSet>();
-  const field = StateField.define<DecorationSet>({
+  const stateField = StateField.define<DecorationSet>({
     create() {
       return Decoration.none;
     },
@@ -24,16 +29,14 @@ export function decorationSetExtension(): [TransactionSpecFactory, StateField<De
       }
       return newDecorations;
     },
-    provide: (f) => EditorView.decorations.from(f),
+    provide: (field) => EditorView.decorations.from(field),
   });
 
   function transactionSpecFactory(decorations: DecorationSet) {
     return {
-      effects: [
-        setEffect.of(decorations),
-      ],
+      effects: [setEffect.of(decorations)],
     };
   }
 
-  return [transactionSpecFactory, field];
+  return [transactionSpecFactory, stateField];
 }
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts
index c4a4e8ec..d7aae8d1 100644
--- a/subprojects/frontend/src/editor/findOccurrences.ts
+++ b/subprojects/frontend/src/editor/findOccurrences.ts
@@ -1,7 +1,7 @@
-import { Range, RangeSet, type TransactionSpec } from '@codemirror/state';
+import { type Range, RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
-import { decorationSetExtension } from './decorationSetExtension';
+import defineDecorationSetExtension from './defineDecorationSetExtension';
 
 export interface IOccurrence {
   from: number;
@@ -9,7 +9,7 @@ export interface IOccurrence {
   to: number;
 }
 
-const [setOccurrencesInteral, findOccurrences] = decorationSetExtension();
+const [setOccurrencesInteral, findOccurrences] = defineDecorationSetExtension();
 
 const writeDecoration = Decoration.mark({
   class: 'cm-problem-write',
@@ -19,7 +19,10 @@ const readDecoration = Decoration.mark({
   class: 'cm-problem-read',
 });
 
-export function setOccurrences(write: IOccurrence[], read: IOccurrence[]): TransactionSpec {
+export function setOccurrences(
+  write: IOccurrence[],
+  read: IOccurrence[],
+): TransactionSpec {
   const decorations: Range<Decoration>[] = [];
   write.forEach(({ from, to }) => {
     decorations.push(writeDecoration.range(from, to));
@@ -31,4 +34,4 @@ export function setOccurrences(write: IOccurrence[], read: IOccurrence[]): Trans
   return setOccurrencesInteral(rangeSet);
 }
 
-export { findOccurrences };
+export default findOccurrences;
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts
index a5d0af7a..2c1bd67d 100644
--- a/subprojects/frontend/src/editor/semanticHighlighting.ts
+++ b/subprojects/frontend/src/editor/semanticHighlighting.ts
@@ -1,7 +1,7 @@
 import { RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
-import { decorationSetExtension } from './decorationSetExtension';
+import defineDecorationSetExtension from './defineDecorationSetExtension';
 
 export interface IHighlightRange {
   from: number;
@@ -11,13 +11,21 @@ export interface IHighlightRange {
   classes: string[];
 }
 
-const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExtension();
+const [setSemanticHighlightingInternal, semanticHighlighting] =
+  defineDecorationSetExtension();
 
-export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec {
-  const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({
-    class: classes.map((c) => `tok-problem-${c}`).join(' '),
-  }).range(from, to)), true);
+export function setSemanticHighlighting(
+  ranges: IHighlightRange[],
+): TransactionSpec {
+  const rangeSet = RangeSet.of(
+    ranges.map(({ from, to, classes }) =>
+      Decoration.mark({
+        class: classes.map((c) => `tok-problem-${c}`).join(' '),
+      }).range(from, to),
+    ),
+    true,
+  );
   return setSemanticHighlightingInternal(rangeSet);
 }
 
-export { semanticHighlighting };
+export default semanticHighlighting;