From 597c7e4e0ba0cbd8301ed179beb91f0c98307dc9 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Tue, 12 Nov 2024 16:09:24 +0100
Subject: [PATCH] more fancy pancy error component

---
 src/routes/(editor).tsx      | 14 +++++++++++---
 src/routes/(editor)/edit.tsx | 17 +++++++++++++----
 src/routes/editor.module.css | 12 +++++++++++-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index 69d7f98..511f4f5 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -64,7 +64,7 @@ export default function Editor(props: ParentProps) {
             </nav>
 
             <section>
-                <ErrorBoundary fallback={err => <ErrorComp error={err.message} />}>
+                <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
                     <FilesProvider>
                         {props.children}
                     </FilesProvider>
@@ -76,6 +76,14 @@ export default function Editor(props: ParentProps) {
     </MenuProvider>
 }
 
-const ErrorComp: Component<{ error: string }> = (props) => {
-    return <div class={css.error}>{props.error}</div>
+const ErrorComp: Component<{ error: Error }> = (props) => {
+    return <div class={css.error}>
+        <b>{props.error.message}</b>
+
+        <Show when={props.error.cause}>{
+            cause => <>{cause().description}</>
+        }</Show>
+
+        <a href="/">Return to start</a>
+    </div>;
 };
diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx
index f21e107..3192d40 100644
--- a/src/routes/(editor)/edit.tsx
+++ b/src/routes/(editor)/edit.tsx
@@ -42,6 +42,19 @@ interface Entries extends Map<string, Record<string, { value: string, handle: Fi
 export default function Edit(props: ParentProps) {
     const filesContext = useFiles();
 
+    onMount(() => {
+        if (!('showDirectoryPicker' in window)) {
+            throw new Error('Unable to manage files', {
+                cause: {
+                    description: <p>
+                        The browser you are using does not support the File Access API.<br />
+                        This API is crutial for this app.
+                    </p>
+                }
+            });
+        }
+    });
+
     const open = createCommand('open folder', async () => {
         const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
@@ -319,10 +332,6 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
     const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
     const [api, setApi] = createSignal<GridApi>();
 
-    if (!isServer && !('showDirectoryPicker' in window)) {
-        throw new Error('Unable to manage files');
-    }
-
     createEffect(() => {
         props.entries?.(entries());
     });
diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css
index c4d0c22..b6f301a 100644
--- a/src/routes/editor.module.css
+++ b/src/routes/editor.module.css
@@ -51,6 +51,11 @@
     }
 
     & > section {
+        display: grid;
+        grid: 100% / 100%;
+        inline-size: 100%;
+        block-size: 100%;
+        overflow: clip;
         view-transition-name: content;
     }
 }
@@ -59,7 +64,12 @@
     display: grid;
     place-content: center;
 
-    background-color: color(from var(--fail) xyz x y z / .3);
+    background: repeating-linear-gradient(-45deg,
+            color(from var(--fail) xyz x y z / .05),
+            color(from var(--fail) xyz x y z / .05) 10px,
+            color(from var(--fail) xyz x y z / .25) 10px,
+            color(from var(--fail) xyz x y z / .25) 12px,
+            color(from var(--fail) xyz x y z / .05) 12px);
     color: var(--text-2);
     border: 1px solid var(--fail);
     border-radius: var(--radii-m);