feat(frontend): actual error page

Foxnouns.Frontend/src/lib/i18n/locales/en.json

@@ -73,7 +73,14 @@
 		"extra-info-header": "Extra error information",
 		"noscript-title": "This page requires JavaScript",
 		"noscript-info": "This page requires JavaScript to function correctly. Some buttons may not work, or the page may not work at all.",
-		"noscript-short": "Requires JavaScript"
+		"noscript-short": "Requires JavaScript",
+		"404-description": "The page you were trying to visit was not found. If you're sure the page should exist, check your address bar for any typos.",
+		"back-to-profile-button": "Go back to your profile",
+		"back-to-main-page-button": "Go back to the main page",
+		"back-to-prev-page-button": "Go back to the previous page",
+		"400-description": "Something went wrong with your request. This error should never land you on this page, so it's probably a bug.",
+		"500-description": "Something went wrong on the server. Please try again later.",
+		"unknown-status-description": "Something went wrong, but we're not sure what. Please try again."
 	},
 	"settings": {
 		"general-information-tab": "General information",

Foxnouns.Frontend/src/routes/+error.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { t } from "$lib/i18n";
+	import type { LayoutData } from "./$types";
+
+	let error = $derived($page.error!);
+
+	type Props = { data: LayoutData };
+	let { data }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{$t("title.an-error-occurred")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h3>{$t("title.an-error-occurred")}</h3>
+	<p>
+		<strong>{$page.status}</strong>: {error.message}
+	</p>
+	<p>
+		{#if $page.status === 400}
+			{$t("error.400-description")}
+		{:else if $page.status === 404}
+			{$t("error.404-description")}
+		{:else if $page.status === 500}
+			{$t("error.500-description")}
+		{:else}
+			{$t("error.unknown-status-description")}
+		{/if}
+	</p>
+	<div class="btn-group">
+		{#if data.meUser}
+			<a class="btn btn-primary" href="/@{data.meUser.username}">
+				{$t("error.back-to-profile-button")}
+			</a>
+		{:else}
+			<a class="btn btn-primary" href="/">{$t("error.back-to-main-page-button")}</a>
+		{/if}
+		<button class="btn btn-secondary" type="button" onclick={() => history.back()}>
+			{$t("error.back-to-prev-page-button")}
+		</button>
+	</div>
+</div>