Added error page

project.inlang/messages/de.json

@@ -279,5 +279,13 @@
 	"locales": {
 		"en": "Englisch",
 		"de": "Deutsch"
+	},
+	"errorPages": {
+		"title": "Da ist was schiefgelaufen",
+		"descriptions": {
+			"500": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es später erneut.",
+			"404": "Die Seite, die Du suchst, existiert nicht."
+		},
+		"action": "Zur Startseite"
 	}
 }

project.inlang/messages/en.json

@@ -288,5 +288,13 @@
 	"locales": {
 		"en": "English",
 		"de": "German"
+	},
+	"errorPages": {
+		"title": "Something went wrong",
+		"descriptions": {
+			"500": "An unexpected error occurred. Please try again later.",
+			"404": "The page you are looking for does not exist."
+		},
+		"action": "Go to Homepage"
 	}
 }

src/lib/components/templates/empty-state/center-state.svelte

@@ -20,12 +20,14 @@
   let {
     class: className = "",
     Icon,
+    iconBadge,
     headline,
     description,
     size,
   }: {
     class?: string;
     Icon: Component;
+    iconBadge?: string;
     headline: string;
     description: string;
     size?: VariantProps<typeof variants>["size"];
@@ -40,7 +42,18 @@
     className,
   )}
 >
-  <Icon class={cn(variants({ size }))} strokeWidth={1} />
+  <div class="relative">
+    {#if iconBadge}
+      <div
+        class="bg-secondary border-primary absolute top-1/2 left-1/2 ml-4 rounded-md border-2 px-2 pb-0.5"
+      >
+        <Text style="xs" class="font-mono font-medium">
+          {iconBadge}
+        </Text>
+      </div>
+    {/if}
+    <Icon class={cn(variants({ size }))} strokeWidth={1} />
+  </div>
   <Headline level={isSmaller ? "h3" : "h1"} style={isSmaller ? "h3" : "h2"}>
     {headline}
   </Headline>

src/lib/const/routes.ts

@@ -1,4 +1,5 @@
 export const ROUTES = {
+  MAIN: "/",
   SETUP: {
     MAIN: "/setup",
     CREATE_ADMIN_ACCOUNT: "/setup/create-admin-account",

src/routes/+error.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { CenteredCard } from "$lib/components/layouts";
+  import { m } from "$i18n/messages";
+  import { CenterState } from "$lib/components/templates/empty-state";
+  import { PageWithClaim } from "$lib/components/ui/page";
+  import { CircleX } from "@lucide/svelte/icons";
+  import { ROUTES } from "$lib/const/routes";
+  import { Button } from "$lib/components/ui/button";
+
+  let description = "";
+  switch (page.status) {
+    case 404:
+      description = m["errorPages.descriptions.404"]();
+      break;
+    default:
+      description = m["errorPages.descriptions.500"]();
+      break;
+  }
+</script>
+
+<PageWithClaim isWithLanguageSwitch>
+  <CenteredCard.Root>
+    <CenteredCard.Main>
+      <CenterState
+        Icon={CircleX}
+        headline={m["errorPages.title"]()}
+        iconBadge={page.status.toString()}
+        {description}
+      />
+    </CenteredCard.Main>
+    <CenteredCard.Action>
+      <Button size="lg" class="w-full" href={ROUTES.MAIN}>
+        {m["errorPages.action"]()}
+      </Button>
+    </CenteredCard.Action>
+  </CenteredCard.Root>
+</PageWithClaim>

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
   import { browser } from "$app/environment";
   import { Toaster } from "$lib/components/ui/sonner/index.js";
   import { ModeWatcher, setMode } from "mode-watcher";
-  import "../../app.css";
+  import "../app.css";
   import { setLocale } from "$i18n/runtime";
 
   let { data, children } = $props();