misc: improve error page

src/lib/i18n/en.json

@@ -854,7 +854,9 @@
         "captcha_failed": "Incorrect CAPTCHA answer.",
         "cant_block_local_instance": "You can't block the instance you are actively using.",
         "invalid_vote_value": "You can't commit voter fraud on Lemmy posts, sorry.",
-        "language_not_allowed": "That language isn't allowed in this community. Unset it to use the community's default."
+        "language_not_allowed": "That language isn't allowed in this community. Unset it to use the community's default.",
+        "couldnt_find_person": "That user doesn't exist.",
+        "couldnt_find_community": "That community doesn't exist."
     },
     "aria": {
         "pagination": {

src/lib/lemmy/error.ts

@@ -6,6 +6,8 @@ export function errorMessage(error: any, instance?: string): string {
       error = JSON.parse(error?.body?.message).error
     } else if (error?.message) {
       error = error?.message
+    } else if (error?.error && typeof error?.error === 'string') {
+      error = error.error
     }
     if (!error) throw error
 

src/routes/+error.svelte

@@ -1,24 +1,50 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
+  import { errorMessage } from '$lib/lemmy/error'
   import { t } from '$lib/translations'
   import { Button } from 'mono-svelte'
   import { Icon, XMark } from 'svelte-hero-icons'
+
+  function getError(message: string): { string: string; code: boolean } {
+    try {
+      return { string: errorMessage(JSON.parse(message)), code: false }
+    } catch (e) {
+      return { string: message, code: true }
+    }
+  }
 </script>
 
-<div class="flex flex-col gap-4 mx-auto my-auto h-full justify-center">
-  <h1 class="text-red-500 text-4xl font-black flex items-center flex-row gap-2">
-    <div
-      class="rounded-full bg-red-500 text-red-100 dark:text-red-900 p-1 w-max"
-    >
-      <Icon src={XMark} mini size="24" />
-    </div>
+<div
+  class="flex flex-col gap-4 my-auto h-full justify-center max-w-md w-full mx-auto"
+>
+  <h1
+    class="text-primary-900 dark:text-primary-100 text-6xl font-black flex items-center flex-row gap-2
+    font-display border-b pb-4 border-slate-200 dark:border-zinc-800"
+  >
     {$page.status}
   </h1>
-  <code class="rounded-md dark:!bg-zinc-950 px-2 py-1 min-w-48">
-    {$page.error?.message}
-  </code>
-  <Button size="sm" class="w-max" on:click={() => goto($page.url)}>
-    {$t('message.retry')}
-  </Button>
+  {#if $page?.error?.message}
+    {@const error = getError($page?.error?.message)}
+    {#if error.code}
+      <code class="rounded-md dark:!bg-zinc-950 px-2 py-1 min-w-48">
+        {error.string}
+      </code>
+    {:else}
+      <p class="text-lg">
+        {error.string}
+      </p>
+    {/if}
+  {/if}
+  <div class="flex items-center gap-2">
+    <Button
+      rounding="xl"
+      on:click={() => goto($page.url, { invalidateAll: true })}
+    >
+      {$t('message.retry')}
+    </Button>
+    <Button rounding="xl" href="/">
+      {$t('nav.home')}
+    </Button>
+  </div>
 </div>