Improve catching of errors when loading routes

- Handle ResponseParseErros, ResponseErrors and normal errors
  differently.
- Show them all in the same `LoadError` view
- Add a subtitle to give users some more information on what could have
  gone wrong.
- Add more properties to the copyable error message to make debugging
  easier.

src/components/ErrorMessage.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
+  import type {
+    ResponseError,
+    ResponseParseError,
+  } from "@httpd-client/lib/fetcher";
+  import type { ComponentProps } from "svelte";
+
+  import { config } from "@app/lib/config";
   import Command from "./Command.svelte";
   import ExternalLink from "./ExternalLink.svelte";
   import Icon from "./Icon.svelte";
 
-  export let message: string;
-  export let error: any | undefined = undefined;
+  export let title: string;
+  export let description: string;
+  export let error: Error | ResponseParseError | ResponseError | undefined =
+    undefined;
+  export let icon: ComponentProps<Icon>["name"] = "alert";
 </script>
 
 <style>
@@ -19,6 +29,18 @@
     border-radius: var(--border-radius-small);
     gap: 1rem;
   }
+  .label {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    max-width: 36rem;
+  }
+  .error :global(code) {
+    font-family: var(--font-family-monospace);
+    font-size: var(--font-size-small);
+    background-color: var(--color-fill-ghost);
+    border-radius: var(--border-radius-tiny);
+    padding: 0.125rem 0.25rem;
+  }
 
   .help {
     font-size: var(--font-size-small);
@@ -27,8 +49,12 @@
 </style>
 
 <div class="error">
-  <Icon name="alert" size="48" />
-  {message}
+  <Icon name={icon} size="48" />
+  <div class="txt-medium txt-bold">
+    {title}
+  </div>
+  <!-- This @html is secure since we don't allow user input -->
+  <div class="label">{@html description}</div>
   {#if error}
     <div class="help">
       If you need help resolving this issue, copy the error message
@@ -40,11 +66,7 @@
     </div>
     <div style:max-width="25rem">
       <Command
-        command={JSON.stringify({
-          message: error.message,
-          stack: error.stack,
-          ...error,
-        })}
+        command={JSON.stringify(error, Object.getOwnPropertyNames(error))}
         fullWidth
         showPrompt={false} />
     </div>

src/components/LoadError.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import AppLayout from "@app/App/AppLayout.svelte";
-  import Command from "./Command.svelte";
-  import ExternalLink from "./ExternalLink.svelte";
-  import Icon from "./Icon.svelte";
-
-  export let title: string;
-  export let errorMessage: string;
-  export let stackTrace: string;
-</script>
-
-<style>
-  .wrapper {
-    gap: 1.5rem;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    gap: 0.5rem;
-  }
-
-  .help {
-    font-size: var(--font-size-small);
-  }
-</style>
-
-<AppLayout>
-  <div class="wrapper">
-    <Icon name="desert" size="48" />
-    <div class="container">
-      <div class="txt-medium txt-bold">
-        {title}
-      </div>
-      <div class="help">
-        If you need help resolving this issue, copy the error message
-        <br class="global-hide-on-mobile" />
-        below and send it to us on
-        <ExternalLink href="https://radicle.zulipchat.com">
-          radicle.zulipchat.com
-        </ExternalLink>
-      </div>
-    </div>
-
-    <div style:max-width="25rem">
-      <Command
-        command={JSON.stringify({ errorMessage, stackTrace })}
-        fullWidth
-        showPrompt={false} />
-    </div>
-  </div>
-</AppLayout>