Improve errors in digiths

src/ui/Function/NewFunctionDraftDigith.tsx

@@ -1,25 +1,13 @@
-import { createSignal, For, Match, Show, Switch } from "solid-js";
+import { createSignal } from "solid-js";
 import { Digith } from "../Digith";
 import { useProgram } from "../ProgramProvider";
 import { CodeEditor } from "../CodeEditor";
-import { ParseError } from "src/lang/parser/parser";
-import { sourceText, SourceText } from "src/lang/parser/source_text";
-import { ShowParseError } from "../ParseError";
+import { sourceText } from "src/lang/parser/source_text";
 import { Program } from "src/lang/program";
 import { V, Validation, letValidate } from "../validation";
-import { ProgramErrorDisplay,  validateExprRaw, validateNameRaw, validateParamsRaw } from "./Helpers";
+import { validateExprRaw, validateNameRaw, validateParamsRaw } from "./Helpers";
 import { spawnFunctionDigith } from "../scrowlStore";
-
-
-type NewFnError =
-  | { tag: "Parse", field: "name" | "params" | "body", err: ParseError, src: SourceText }
-  | { tag: "Program", err: Program.Error };
-
-const fieldLabels: Record<string, string> = {
-  name: "Function Name",
-  params: "Parameters",
-  body: "Function Body"
-};
+import { DigithError } from "../DigithError";
 
 type Input = {
   raw_name: string,
@@ -27,11 +15,26 @@ type Input = {
   raw_body: string,
 }
 
-const validator: Validation<Input, Program.CreateFunction, NewFnError> = letValidate(
-  (input: Input) =>({
-    name: V.elseErr(validateNameRaw(input.raw_name), err => ({ tag: "Parse", field: "name", err, src: sourceText(input.raw_name) })),
-    parameters: V.elseErr(validateParamsRaw(input.raw_params), err => ({ tag: "Parse", field: "params", err, src: sourceText(input.raw_params) })),
-    body: V.elseErr(validateExprRaw(input.raw_body), err => ({ tag: "Parse", field: "body", err, src: sourceText(input.raw_body) })),
+const validator: Validation<Input, Program.CreateFunction, DigithError> = letValidate(
+  (input) =>({
+    name: V.elseErr(validateNameRaw(input.raw_name), err =>({
+      payload: { tag: "Parse", err, src: sourceText(input.raw_name) },
+      ids: ["name"],
+      tags: ["footer"],
+      config: { title: "Function Name", display: "flat" },
+    })),
+    parameters: V.elseErr(validateParamsRaw(input.raw_params), err => ({
+      payload: { tag: "Parse", err, src: sourceText(input.raw_params) },
+      ids: ["params"],
+      tags: ["footer"],
+      config: { title: "Parameters", display: "flat" },
+    })),
+    body: V.elseErr(validateExprRaw(input.raw_body), err => ({
+      payload: { tag: "Parse", err, src: sourceText(input.raw_body) },
+      ids: ["body"],
+      tags: ["footer"],
+      config: { title: "Function Body", display: "flat" },
+    })),
   }),
   (fields, input) => {
     const createFunction: Program.CreateFunction = {
@@ -44,44 +47,6 @@ const validator: Validation<Input, Program.CreateFunction, NewFnError> = letVali
     return V.ok(createFunction);
 })
 
-export function SingleErrorDisplay(props: { error: NewFnError }) {
-  return (
-    <div style={{ "margin-bottom": "1rem" }}>
-      <Switch>
-        <Match 
-          when={props.error.tag === "Parse" ? (props.error as Extract<NewFnError, { tag: "Parse" }>) : undefined}
-        >
-          {(err) => (
-            <article style={{ border: "1px solid var(--pico-del-color)", padding: "0.5rem 1rem" }}>
-              <header style={{ "margin-bottom": "0.5rem", color: "var(--pico-del-color)", "font-weight": "bold" }}>
-                {fieldLabels[err().field]} Error
-              </header>
-              <ShowParseError text={err().src} err={err().err} />
-            </article>
-          )}
-        </Match>
-
-        <Match 
-          when={props.error.tag === "Program" ? (props.error as Extract<NewFnError, { tag: "Program" }>) : undefined}
-        >
-          {(err) => ( <ProgramErrorDisplay error={err().err} />)}
-        </Match>
-      </Switch>
-    </div>
-  );
-}
-
-function ErrorListDisplay(props: { errors: NewFnError[] }) {
-  return (
-    <div style={{ "margin-top": "2rem", "border-top": "1px solid var(--pico-muted-border-color)", "padding-top": "1rem" }}>
-      <For each={props.errors}>
-        {(error) => <SingleErrorDisplay error={error} />}
-      </For>
-    </div>
-  );
-}
-
-
 export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }) {
   const program = useProgram();
 
@@ -89,20 +54,25 @@ export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }
   const [params, setParams] = createSignal(props.draft.raw_parameters);
   const [body, setBody] = createSignal(props.draft.raw_body);
 
-  const [errors, setErrors] = createSignal<NewFnError[]>([]);
+  const [errors, setErrors] = createSignal<DigithError[]>([]);
 
   function handleCommit() {
     setErrors([]);
     const validRes = validator({ raw_name: name(), raw_params: params(), raw_body: body() });
     if (validRes.tag === "errors") {
-      setErrors(validRes.errors as NewFnError[]);
+      setErrors(validRes.errors);
       return;
     }
     const createFunction = validRes.value;
 
     const programRes = Program.registerFunction(program, createFunction);
     if (programRes.tag === "error") {
-      setErrors([{ tag: "Program", err: programRes.error }]);
+      setErrors([{
+        payload: { tag: "Program", err: programRes.error },
+        ids: ["program"],
+        tags: ["footer"],
+        config: { title: "Registration Failed" },
+      }]);
       return;
     }
     const fnName = programRes.value;
@@ -146,9 +116,9 @@ export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }
         <button class="primary" onClick={handleCommit}>Commit</button>
       </footer>
 
-      <Show when={errors().length > 0}>
-        <ErrorListDisplay errors={errors()} />
-      </Show>
+      <div style={{ "margin-top": "1rem" }}>
+        <DigithError.ByTag errors={errors()} tag="footer" />
+      </div>
     </article>
   );
 }