feat: custom error page (#178)

Co-authored-by: Daniel Roe <daniel@roe.dev>

error.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+// prevent reactive update when clearing error
+const { error } = defineProps<{
+  error: Partial<NuxtError>
+}>()
+
+usePageHeader()
+
+// add more custom status codes messages here
+const errorCodes: Record<number, string> = {
+  404: 'Page not found',
+}
+
+const defaultMessage = 'Something went wrong'
+
+const message = error.message ?? errorCodes[error.statusCode!] ?? defaultMessage
+
+const state = ref<'error' | 'reloading'>('error')
+const reload = async () => {
+  state.value = 'reloading'
+  try {
+    if (!useMasto())
+      await loginTo(currentUser.value)
+    clearError({ redirect: currentUser.value ? '/home' : '/public' })
+  }
+  catch {
+    state.value = 'error'
+  }
+}
+</script>
+
+<template>
+  <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
+  <NuxtLayout>
+    <MainContent>
+      <template #title>
+        <span text-lg font-bold>Error</span>
+      </template>
+      <slot>
+        <form p5 grid gap-y-4 @submit="reload">
+          <div text-lg>
+            Something went wrong
+          </div>
+          <div text-secondary>
+            {{ message }}
+          </div>
+          <button flex items-center gap-2 justify-center btn-solid text-center :disabled="state === 'reloading'">
+            <span v-if="state === 'reloading'" i-ri:loader-2-fill animate-spin inline-block />
+            {{ state === 'reloading' ? 'Reloading' : 'Reload' }}
+          </button>
+        </form>
+      </slot>
+    </MainContent>
+  </NuxtLayout>
+</template>