Modularize UI, make it a bit more Lisp independent

src/ui/languages/lisp/LispApp.tsx

@@ -0,0 +1,114 @@
+import { createMemo, createSignal } from 'solid-js';
+import { sourceText } from 'source-region';
+import type { CodePointSpan, SourceRegion, SourceText } from 'source-region';
+import {
+  parseDocument,
+  programOf,
+} from '../../../languages/lisp';
+import type {
+  ConcreteSyntaxResult,
+  ParseError,
+  PartialConcreteSyntax,
+} from '../../../languages/lisp';
+import { spanLabel } from '../../format';
+import { hoverAnnotation } from '../../annotations';
+import { PaneHeader, PaneSplitter } from '../../Pane';
+import { SourceGrid } from '../../SourceGrid';
+import type { HoverTarget } from '../../types';
+import { clamp } from '../../utils';
+import { StructureTree } from './LispStructurePane';
+
+type ParsedDocument = {
+  source: SourceText;
+  region: SourceRegion;
+  syntax: ConcreteSyntaxResult;
+  program: PartialConcreteSyntax;
+  errors: ParseError[];
+};
+
+const SAMPLE_INPUT = `(define square (_ x) (mul x x))
+
+[add, 1, 2]
+
+(define pyth (_ x y) (+ (square x) (square y)))
+
+foo ) @@@ (bar 1)
+(nested [list, 123, abc_9, name-with-dash])
+[a, b c, d]
+123fasd`;
+
+export function LispApp() {
+  const [input, setInput] = createSignal(SAMPLE_INPUT);
+  const [hovered, setHovered] = createSignal<HoverTarget | undefined>();
+  const [leftWidth, setLeftWidth] = createSignal(420);
+  const [middleWidth, setMiddleWidth] = createSignal(420);
+
+  const parsed = createMemo<ParsedDocument>(() => {
+    const source = sourceText(input());
+    const region = source.fullRegion();
+    const result = parseDocument(region);
+    return { source, region, syntax: result.syntax, program: programOf(result.syntax), errors: result.errors };
+  });
+
+  return (
+    <main
+      class="app-shell"
+      style={{
+        "--left-width": `${leftWidth()}px`,
+        "--middle-width": `${middleWidth()}px`,
+      }}
+    >
+      <section class="pane input-pane">
+        <PaneHeader title="Source" detail={`${input().length} UTF-16 units`} />
+        <textarea
+          class="source-input"
+          spellcheck={false}
+          value={input()}
+          onInput={(event) => {
+            setInput(event.currentTarget.value);
+            setHovered(undefined);
+          }}
+        />
+      </section>
+
+      <PaneSplitter
+        label="Resize source and structure panes"
+        onDrag={(delta) => {
+          setLeftWidth((width) => clamp(width + delta, 280, 760));
+        }}
+      />
+
+      <section class="pane structure-pane">
+        <PaneHeader
+          title="Structure"
+          detail={`${parsed().syntax.tag}, ${parsed().program.expressions.length} expressions, ${parsed().errors.length} errors`}
+        />
+        <StructureTree
+          program={parsed().program}
+          isValid={parsed().syntax.tag === "valid"}
+          errorCount={parsed().errors.length}
+          onHover={setHovered}
+        />
+      </section>
+
+      <PaneSplitter
+        label="Resize structure and source grid panes"
+        onDrag={(delta) => {
+          setMiddleWidth((width) => clamp(width + delta, 260, 760));
+        }}
+      />
+
+      <section class="pane source-pane">
+        <PaneHeader
+          title="Source Grid"
+          detail={hovered() ? spanLabel(hovered()!.span) : "nothing hovered"}
+        />
+        <SourceGrid
+          source={parsed().source}
+          region={parsed().region}
+          annotations={hovered() ? [hoverAnnotation(hovered()!)] : []}
+        />
+      </section>
+    </main>
+  );
+}