Better Error Handling

site/src/lib/ui/Searchbar.svelte

@@ -1,11 +1,17 @@
 <script>
-    import SearchIcon from "virtual:icons/heroicons/magnifying-glass";
-    export let query = "";
+  import SearchIcon from "virtual:icons/heroicons/magnifying-glass";
+  export let query = "";
 </script>
 
-
-<label class="flex gap-2 bg-gray-100 text-gray-800 pl-4 rounded-md items-center focus-within:ring-2 ring-orange-600">
-    <SearchIcon class="text-gray-500 w-4 h-4 min-w-max" />
-    <span class="sr-only">Search</span>
-    <input type="text" bind:value={query} class="bg-transparent py-2 pe-2 focus-within:outline-none" />
-</label>
+<label
+  class="flex gap-2 bg-gray-100 text-gray-800 pl-4 rounded-md items-center focus-within:ring-2 ring-orange-600"
+>
+  <SearchIcon class="text-gray-400 w-4 h-4 min-w-max" />
+  <span class="sr-only">Search</span>
+  <input
+    type="text"
+    bind:value={query}
+    class="bg-transparent py-2 pe-2 focus-within:outline-none placeholder:text-gray-400"
+    placeholder="Search"
+  />
+</label>

site/src/routes/+error.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { page } from "$app/stores";
+  import NotFoundPage from "./404/NotFoundPage.svelte";
+</script>
+
+{#if $page.status === 404}
+  <NotFoundPage />
+{:else}
+  <h1>Something went wrong {$page.status}</h1>
+{/if}

site/src/routes/404/+page.svelte

@@ -1,46 +1,5 @@
 <script>
-  import GithubIcon from "virtual:icons/simple-icons/github";
+  import NotFoundPage from "./NotFoundPage.svelte";
 </script>
 
-<svelte:head>
-    <meta name="robots" content="noindex">
-    <title>Page Not Found</title>
-</svelte:head>
-
-<main
-  class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"
->
-  <div class="text-center">
-    <p class="text-base font-semibold text-orange-600">404</p>
-    <h1
-      class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl"
-    >
-      Page not found
-    </h1>
-    <p class="mt-6 text-base leading-7 text-gray-600">
-      Sorry, we couldn’t find the page you’re looking for.
-    </p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
-      <a
-        href="/"
-        class="rounded-md bg-orange-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600"
-        >Go back home</a
-      >
-      <a
-        href="https://github.com/LorisSigrist/t18s/issues/new"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-sm font-semibold text-white bg-black hover:bg-zinc-950 px-3.5 py-2.5 rounded-md flex gap-2 items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
-      >
-        <GithubIcon class="w-4 h-4 min-w-max" />
-        Report Issue</a
-      >
-    </div>
-  </div>
-</main>
-
-<style lang="postcss">
-  :global(html, body) {
-    @apply h-full w-full;
-  }
-</style>
+<NotFoundPage />

site/src/routes/404/NotFoundPage.svelte

@@ -0,0 +1,47 @@
+<script>
+    import GithubIcon from "virtual:icons/simple-icons/github";
+  </script>
+
+  <svelte:head>
+      <meta name="robots" content="noindex">
+      <title>Page Not Found</title>
+  </svelte:head>
+
+  <main
+    class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"
+  >
+    <div class="text-center">
+      <p class="text-base font-semibold text-orange-600">404</p>
+      <h1
+        class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+      >
+        Page not found
+      </h1>
+      <p class="mt-6 text-base leading-7 text-gray-600">
+        Sorry, we couldn’t find the page you’re looking for.
+      </p>
+      <div class="mt-10 flex items-center justify-center gap-x-6">
+        <a
+          href="/"
+          class="rounded-md bg-orange-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600"
+          >Go back home</a
+        >
+        <a
+          href="https://github.com/LorisSigrist/t18s/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm font-semibold text-white bg-black hover:bg-zinc-950 px-3.5 py-2.5 rounded-md flex gap-2 items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
+        >
+          <GithubIcon class="w-4 h-4 min-w-max" />
+          Report Issue</a
+        >
+      </div>
+    </div>
+  </main>
+
+  <style lang="postcss">
+    :global(html, body) {
+      @apply h-full w-full;
+    }
+  </style>
+