feat(frontend): scrollbar annotations

5 files changed, 178 insertions, 30 deletions

diff --git a/subprojects/frontend/src/editor/DiagnosticValue.ts b/subprojects/frontend/src/editor/DiagnosticValue.ts
new file mode 100644
index 00000000..ad23c467
--- /dev/null
+++ b/subprojects/frontend/src/editor/DiagnosticValue.ts
@@ -0,0 +1,20 @@
+import type { Diagnostic } from '@codemirror/lint';
+import { RangeValue } from '@codemirror/state';
+
+export default class DiagnosticValue extends RangeValue {
+  static VALUES: Record<Diagnostic['severity'], DiagnosticValue> = {
+    error: new DiagnosticValue('error'),
+    warning: new DiagnosticValue('warning'),
+    info: new DiagnosticValue('info'),
+  };
+
+  private constructor(public readonly severity: Diagnostic['severity']) {
+    super();
+  }
+
+  override point = true;
+
+  override eq(other: RangeValue): boolean {
+    return other instanceof DiagnosticValue && other.severity === this.severity;
+  }
+}
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 4ee24779..acad3d09 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -11,6 +11,7 @@ import {
   type Transaction,
   type TransactionSpec,
   type EditorState,
+  RangeSet,
 } from '@codemirror/state';
 import { type Command, EditorView } from '@codemirror/view';
 import { makeAutoObservable, observable } from 'mobx';
@@ -20,6 +21,7 @@ import type PWAStore from '../PWAStore';
 import getLogger from '../utils/getLogger';
 import XtextClient from '../xtext/XtextClient';
 
+import DiagnosticValue from './DiagnosticValue';
 import LintPanelStore from './LintPanelStore';
 import SearchPanelStore from './SearchPanelStore';
 import createEditorState from './createEditorState';
@@ -46,11 +48,7 @@ export default class EditorStore {
 
   showLineNumbers = false;
 
-  errorCount = 0;
-
-  warningCount = 0;
-
-  infoCount = 0;
+  diagnostics: RangeSet<DiagnosticValue> = RangeSet.of([]);
 
   constructor(initialValue: string, pwaStore: PWAStore) {
     this.id = nanoid();
@@ -161,6 +159,9 @@ export default class EditorStore {
     log.trace('Editor transaction', tr);
     this.state = tr.state;
     this.client.onTransaction(tr);
+    if (tr.docChanged) {
+      this.diagnostics = this.diagnostics.map(tr.changes);
+    }
   }
 
   doCommand(command: Command): boolean {
@@ -178,25 +179,31 @@ export default class EditorStore {
   }
 
   updateDiagnostics(diagnostics: Diagnostic[]): void {
+    diagnostics.sort((a, b) => a.from - b.from);
     this.dispatch(setDiagnostics(this.state, diagnostics));
-    this.errorCount = 0;
-    this.warningCount = 0;
-    this.infoCount = 0;
-    diagnostics.forEach(({ severity }) => {
-      switch (severity) {
-        case 'error':
-          this.errorCount += 1;
-          break;
-        case 'warning':
-          this.warningCount += 1;
-          break;
-        case 'info':
-          this.infoCount += 1;
-          break;
-        default:
-          throw new Error('Unknown severity');
-      }
-    });
+    this.diagnostics = RangeSet.of(
+      diagnostics.map(({ severity, from, to }) =>
+        DiagnosticValue.VALUES[severity].range(from, to),
+      ),
+    );
+  }
+
+  countDiagnostics(severity: Diagnostic['severity']): number {
+    return this.diagnostics.update({
+      filter: (_from, _to, value) => value.eq(DiagnosticValue.VALUES[severity]),
+    }).size;
+  }
+
+  get errorCount(): number {
+    return this.countDiagnostics('error');
+  }
+
+  get warningCount(): number {
+    return this.countDiagnostics('warning');
+  }
+
+  get infoCount(): number {
+    return this.countDiagnostics('info');
   }
 
   nextDiagnostic(): void {
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 829b709f..f5267682 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -137,7 +137,7 @@ export default styled('div', {
       background: 'transparent',
     },
     '.cm-cursor, .cm-cursor-primary': {
-      borderLeft: `2px solid ${theme.palette.primary.main}`,
+      borderLeft: `2px solid ${theme.palette.highlight.cursor}`,
     },
     '.cm-selectionBackground': {
       background: theme.palette.highlight.selection,
@@ -245,6 +245,17 @@ export default styled('div', {
         boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`,
       },
     },
+    '.cm-scroller-selection': {
+      position: 'absolute',
+      right: 0,
+      boxShadow: `0 2px 0 ${theme.palette.highlight.cursor} inset`,
+      zIndex: 200,
+    },
+    '.cm-scroller-occurrence': {
+      position: 'absolute',
+      background: theme.palette.text.secondary,
+      zIndex: 150,
+    },
   };
 
   const lineNumberStyle: CSSObject = {
@@ -288,6 +299,7 @@ export default styled('div', {
   function lintSeverityStyle(
     severity: 'error' | 'warning' | 'info',
     icon: string,
+    zIndex: number,
   ): CSSObject {
     const palette = theme.palette[severity];
     const color = palette.main;
@@ -342,6 +354,12 @@ export default styled('div', {
           display: 'none',
         },
       },
+      [`.cm-scroller-diagnostic-${severity}`]: {
+        position: 'absolute',
+        right: 0,
+        background: color,
+        zIndex,
+      },
     };
   }
 
@@ -400,9 +418,9 @@ export default styled('div', {
     '.cm-lintRange-active': {
       background: theme.palette.highlight.activeLintRange,
     },
-    ...lintSeverityStyle('error', errorSVG),
-    ...lintSeverityStyle('warning', warningSVG),
-    ...lintSeverityStyle('info', infoSVG),
+    ...lintSeverityStyle('error', errorSVG, 120),
+    ...lintSeverityStyle('warning', warningSVG, 110),
+    ...lintSeverityStyle('info', infoSVG, 100),
   };
 
   const foldStyle = {
diff --git a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
index 2882f02e..c95e581d 100644
--- a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
+++ b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
@@ -2,6 +2,7 @@ import { type PluginValue, ViewPlugin } from '@codemirror/view';
 import { reaction } from 'mobx';
 
 import type EditorStore from './EditorStore';
+import findOccurrences from './findOccurrences';
 
 export const HOLDER_CLASS = 'cm-scroller-holder';
 export const THUMB_CLASS = 'cm-scroller-thumb';
@@ -10,8 +11,13 @@ export const THUMB_X_CLASS = 'cm-scroller-thumb-x';
 export const THUMB_ACTIVE_CLASS = 'active';
 export const GUTTER_DECORATION_CLASS = 'cm-scroller-gutter-decoration';
 export const TOP_DECORATION_CLASS = 'cm-scroller-top-decoration';
+export const ANNOTATION_SELECTION_CLASS = 'cm-scroller-selection';
+export const ANNOTATION_DIAGNOSTIC_CLASS = 'cm-scroller-diagnostic';
+export const ANNOTATION_OCCURRENCE_CLASS = 'cm-scroller-occurrence';
 export const SHADOW_WIDTH = 10;
 export const SCROLLBAR_WIDTH = 12;
+export const ANNOTATION_WIDTH = SCROLLBAR_WIDTH / 2;
+export const MIN_ANNOTATION_HEIGHT = 1;
 
 export default function scrollbarViewPlugin(
   editorStore: EditorStore,
@@ -94,6 +100,84 @@ export default function scrollbarViewPlugin(
     let gutters: Element | undefined;
 
     let requested = false;
+    let rebuildRequested = false;
+
+    const annotations: HTMLDivElement[] = [];
+
+    function rebuildAnnotations(trackYHeight: number) {
+      const annotationOverlayHeight = Math.min(
+        view.contentHeight,
+        trackYHeight,
+      );
+      const lineHeight = annotationOverlayHeight / editorStore.state.doc.lines;
+
+      let i = 0;
+
+      function getOrCreateAnnotation(
+        from: number,
+        to?: number,
+      ): HTMLDivElement {
+        const startLine = editorStore.state.doc.lineAt(from).number;
+        const endLine =
+          to === undefined
+            ? startLine
+            : editorStore.state.doc.lineAt(to).number;
+        const top = (startLine - 1) * lineHeight;
+        const height = Math.max(
+          MIN_ANNOTATION_HEIGHT,
+          Math.max(1, endLine - startLine) * lineHeight,
+        );
+
+        let annotation: HTMLDivElement;
+        if (i < annotations.length) {
+          annotation = annotations[i];
+        } else {
+          annotation = ownerDocument.createElement('div');
+          annotations.push(annotation);
+          holder.appendChild(annotation);
+        }
+        i += 1;
+
+        annotation.style.top = `${top}px`;
+        annotation.style.height = `${height}px`;
+
+        return annotation;
+      }
+
+      editorStore.state.selection.ranges.forEach(({ head }) => {
+        const selectionAnnotation = getOrCreateAnnotation(head);
+        selectionAnnotation.className = ANNOTATION_SELECTION_CLASS;
+        selectionAnnotation.style.width = `${SCROLLBAR_WIDTH}px`;
+      });
+
+      const diagnosticsIter = editorStore.diagnostics.iter();
+      while (diagnosticsIter.value !== null) {
+        const diagnosticAnnotation = getOrCreateAnnotation(
+          diagnosticsIter.from,
+          diagnosticsIter.to,
+        );
+        diagnosticAnnotation.className = `${ANNOTATION_DIAGNOSTIC_CLASS} ${ANNOTATION_DIAGNOSTIC_CLASS}-${diagnosticsIter.value.severity}`;
+        diagnosticAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
+        diagnosticsIter.next();
+      }
+
+      const occurrences = editorStore.state.field(findOccurrences);
+      const occurrencesIter = occurrences.iter();
+      while (occurrencesIter.value !== null) {
+        const occurrenceAnnotation = getOrCreateAnnotation(
+          occurrencesIter.from,
+          occurrencesIter.to,
+        );
+        occurrenceAnnotation.className = ANNOTATION_OCCURRENCE_CLASS;
+        occurrenceAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
+        occurrenceAnnotation.style.right = `${ANNOTATION_WIDTH}px`;
+        occurrencesIter.next();
+      }
+
+      annotations
+        .splice(i)
+        .forEach((staleAnnotation) => holder.removeChild(staleAnnotation));
+    }
 
     function update() {
       requested = false;
@@ -148,6 +232,11 @@ export default function scrollbarViewPlugin(
         0,
         Math.min(scrollTop, SHADOW_WIDTH),
       )}px`;
+
+      if (rebuildRequested) {
+        rebuildAnnotations(trackYHeight);
+        rebuildRequested = false;
+      }
     }
 
     function requestUpdate() {
@@ -157,16 +246,27 @@ export default function scrollbarViewPlugin(
       }
     }
 
-    observer = new ResizeObserver(requestUpdate);
+    function requestRebuild() {
+      requestUpdate();
+      rebuildRequested = true;
+    }
+
+    observer = new ResizeObserver(requestRebuild);
     observer.observe(scrollDOM);
 
     scrollDOM.addEventListener('scroll', requestUpdate);
 
-    requestUpdate();
+    requestRebuild();
+
+    const disposeRebuildReaction = reaction(
+      () => editorStore.diagnostics,
+      requestRebuild,
+    );
 
     return {
-      update: requestUpdate,
+      update: requestRebuild,
       destroy() {
+        disposeRebuildReaction();
         disposePanelReaction();
         observer?.disconnect();
         scrollDOM.removeEventListener('scroll', requestUpdate);
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 47062314..a00d70fe 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -22,6 +22,7 @@ interface OuterPalette {
 }
 
 interface HighlightPalette {
+  cursor: string;
   number: string;
   parameter: string;
   comment: string;
@@ -175,6 +176,7 @@ const lightTheme = createResponsiveTheme({
       border: '#c8c8c8',
     },
     highlight: {
+      cursor: '#4078f2',
       number: '#0084bc',
       parameter: '#6a3e3e',
       comment: '#a0a1a7',
@@ -249,6 +251,7 @@ const darkTheme = createResponsiveTheme({
       border: '#181a1f',
     },
     highlight: {
+      cursor: '#61afef',
       number: '#6188a6',
       parameter: '#c8ae9d',
       comment: '#7f848e',