Add 404 and error boundary components wired into router

frontend/src/components/error-state.tsx

@@ -0,0 +1,25 @@
+import { AlertTriangle } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
+import { Button } from '~/components/ui/button'
+
+type Props = {
+  error: Error
+  reset?: () => void
+}
+
+export function ErrorState({ error, reset }: Props) {
+  return (
+    <Alert variant="destructive" className="my-3 rounded-md py-10">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <AlertTriangle className="h-8 w-8" />
+        <AlertTitle className="mt-4 text-lg">Something went wrong</AlertTitle>
+        <AlertDescription className="max-w-sm">{error.message}</AlertDescription>
+        {reset && (
+          <Button variant="outline" size="sm" onClick={reset} className="mt-3">
+            Try again
+          </Button>
+        )}
+      </div>
+    </Alert>
+  )
+}

frontend/src/components/not-found.tsx

@@ -0,0 +1,14 @@
+import { Frown } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
+
+export function NotFound({ title = '404: Page Not Found', message = 'Try going back or something …' }) {
+  return (
+    <Alert variant="info" className="my-3 rounded-md py-10">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <Frown className="h-8 w-8" />
+        <AlertTitle className="mt-4 text-lg">{title}</AlertTitle>
+        <AlertDescription className="max-w-sm">{message}</AlertDescription>
+      </div>
+    </Alert>
+  )
+}