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>
+  )
+}

frontend/src/routes/$slug.tsx

@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute, notFound } from '@tanstack/react-router'
 import { Helmet } from 'react-helmet-async'
+import { NotFound } from '~/components/not-found'
 import { PageView } from '~/components/page-view'
 import { pageBySlugQuery } from '~/lib/queries'
 
@@ -10,6 +11,7 @@ export const Route = createFileRoute('/$slug')({
     if (!page) throw notFound()
   },
   component: CmsPage,
+  notFoundComponent: () => <NotFound />,
 })
 
 function CmsPage() {

frontend/src/routes/__root.tsx

@@ -3,7 +3,9 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { lazy, Suspense } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { ErrorState } from '~/components/error-state'
 import { Shell } from '~/components/layout/shell'
+import { NotFound } from '~/components/not-found'
 import { globalsQuery, menusQuery } from '~/lib/queries'
 
 const TanStackRouterDevtools = import.meta.env.PROD
@@ -19,6 +21,16 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
     await Promise.all([queryClient.ensureQueryData(globalsQuery), queryClient.ensureQueryData(menusQuery)])
   },
   component: RootComponent,
+  notFoundComponent: () => (
+    <Shell>
+      <NotFound />
+    </Shell>
+  ),
+  errorComponent: ({ error, reset }) => (
+    <Shell>
+      <ErrorState error={error} reset={reset} />
+    </Shell>
+  ),
 })
 
 function RootComponent() {