add: default not found component for tanstack under apps/web

robsdevcraft · robsdevcraft · commit 1297bb569993 · 2026-01-12T21:41:32.000-05:00
diff --git a/apps/web/src/components/NotFound.tsx b/apps/web/src/components/NotFound.tsx
@@ -0,0 +1,28 @@
+import { Link } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button";
+
+export function NotFound() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 text-center">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-7xl font-bold tracking-tighter text-foreground">
+          404
+        </h1>
+        <h2 className="text-xl font-semibold text-foreground">
+          Page not found
+        </h2>
+        <p className="max-w-md text-sm text-muted-foreground">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+      </div>
+      <div className="flex gap-3">
+        <Button variant="outline" onClick={() => window.history.back()}>
+          Go back
+        </Button>
+        <Button asChild>
+          <Link to="/">Return home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
@@ -1,62 +1,72 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { TanStackDevtools } from "@tanstack/react-devtools";
 
+import { ConvexClerkProvider } from "../lib/convex-clerk";
+import { ThemeProvider } from "../components/dashboard/ThemeProvider";
+import { Toaster } from "@/components/ui/sonner";
+import { MonitoringErrorBoundary } from "@stackdock/monitoring";
+import { initWebMonitoring } from "../lib/monitoring";
+import { NotFound } from "../components/NotFound";
 
-import { ConvexClerkProvider } from '../lib/convex-clerk'
-import { ThemeProvider } from '../components/dashboard/ThemeProvider'
-import { Toaster } from '@/components/ui/sonner'
-import { MonitoringErrorBoundary } from '@stackdock/monitoring'
-import { initWebMonitoring } from '../lib/monitoring'
-
-import appCss from '../styles.css?url'
+import appCss from "../styles.css?url";
 
 // Initialize monitoring
-initWebMonitoring()
+initWebMonitoring();
 
 export const Route = createRootRoute({
   head: () => ({
     meta: [
       {
-        charSet: 'utf-8',
+        charSet: "utf-8",
       },
       {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
       },
       {
-        title: 'StackDock',
+        title: "StackDock",
       },
     ],
     links: [
       {
-        rel: 'stylesheet',
+        rel: "stylesheet",
         href: appCss,
       },
     ],
   }),
-
+  component: RootComponent,
+  notFoundComponent: NotFound,
   shellComponent: RootDocument,
-})
+});
+
+function RootComponent() {
+  return <Outlet />;
+}
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   const content = (
     <>
       {children}
       <TanStackDevtools
         config={{
-          position: 'bottom-right',
+          position: "bottom-right",
         }}
         plugins={[
           {
-            name: 'Tanstack Router',
+            name: "Tanstack Router",
             render: <TanStackRouterDevtoolsPanel />,
           },
         ]}
       />
       <Scripts />
     </>
-  )
+  );
 
   return (
     <html lang="en" suppressHydrationWarning>
@@ -97,5 +107,5 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }
