Add NotFound page and root error element

apps/web/src/app.tsx

@@ -14,10 +14,6 @@ export function App() {
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <RouterProvider router={router} />
-          {/* <div className="flex flex-col h-full">
-            <AuthTest />
-            <Editor />
-          </div> */}
         </QueryClientProvider>
       </trpc.Provider>
     </SessionProvider>

apps/web/src/features/dashboard/pages/root/page.tsx

@@ -1,11 +1,13 @@
 import { DashboardHeader } from "~features/dashboard/components/dashboard-header";
 import { TableList } from "~features/dashboard/components/table-list";
 
-export function Component() {
+export function DashboardRoot() {
   return (
     <div className="flex flex-col grow p-12 sm:p-16 min-h-0 space-y-12 sm:space-y-16">
       <DashboardHeader />
       <TableList />
     </div>
   );
 }
+
+export const Component = DashboardRoot;

apps/web/src/features/routing/index.tsx

@@ -1,19 +1,25 @@
 import { createBrowserRouter } from "react-router-dom";
 
-import { RootLayout } from "~features/routing/routes/root/layout";
-import { rootLoader } from "~features/routing/routes/root/loader";
+import { RootError } from "~features/routing/root/error";
+import { RootLayout } from "~features/routing/root/layout";
+import { rootLoader } from "~features/routing/root/loader";
 
 export const router = createBrowserRouter(
   [
     {
       path: "/",
       element: <RootLayout />,
       loader: rootLoader,
+      errorElement: <RootError />,
       children: [
         {
           index: true,
           lazy: () => import("~features/dashboard/pages/root/page"),
         },
+        {
+          path: "*",
+          lazy: () => import("~features/routing/root/not-found"),
+        },
       ],
     },
   ],

apps/web/src/features/routing/root/error.tsx

@@ -0,0 +1,38 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@manifold/ui/components/ui/card";
+import { isError } from "@tanstack/react-query";
+import { GiDiceTwentyFacesOne } from "react-icons/gi";
+import { useRouteError } from "react-router-dom";
+
+const FALLBACK_ERROR_MESSAGE =
+  "The details remain elusive, but our quest to understand their true nature is just beginning…" as const;
+
+export function RootError() {
+  const error = useRouteError();
+
+  return (
+    <div className="flex flex-col grow items-center justify-center">
+      <Card className="min-w-256 max-w-sm text-center">
+        <CardHeader>
+          <GiDiceTwentyFacesOne className="text-emerald-100 size-40 mx-auto mb-8" />
+
+          <CardTitle>Unlucky!</CardTitle>
+          <CardDescription>We rolled a natural 1…</CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <p>
+            {isError(error)
+              ? error.message || FALLBACK_ERROR_MESSAGE
+              : FALLBACK_ERROR_MESSAGE}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/features/routing/routes/root/layout.tsx → apps/web/src/features/routing/root/layout.tsx

@@ -1,11 +1,16 @@
 import { signIn, signOut, useSession } from "@manifold/auth/client";
+import { CommandPalette } from "@manifold/ui/components/command-palette";
 import { GlobalHeader } from "@manifold/ui/components/global-header";
 import { Skeleton } from "@manifold/ui/components/ui/skeleton";
-import { Outlet } from "react-router-dom";
+import { useCommandPalette } from "@manifold/ui/hooks/use-command-palette";
+import { Outlet, useNavigate } from "react-router-dom";
 import { match } from "ts-pattern";
 
 export function RootLayout() {
   const auth = useSession();
+  const [isCommandPaletteOpen, closeCommandPalette] = useCommandPalette();
+
+  const navigate = useNavigate();
 
   return (
     <div className="flex flex-col h-full bg-architect">
@@ -33,6 +38,15 @@ export function RootLayout() {
       </GlobalHeader.Root>
 
       <Outlet />
+
+      <CommandPalette
+        isOpen={isCommandPaletteOpen}
+        onClose={closeCommandPalette}
+        onCreateTable={() => {
+          navigate("/tables/new");
+          closeCommandPalette();
+        }}
+      />
     </div>
   );
 }

apps/web/src/features/routing/root/not-found.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@manifold/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@manifold/ui/components/ui/card";
+import { GiSuspicious } from "react-icons/gi";
+import { GoChevronRight } from "react-icons/go";
+import { Link } from "react-router-dom";
+
+export function NotFound() {
+  return (
+    <div className="flex flex-col grow items-center justify-center">
+      <Card className="min-w-256 max-w-sm text-center">
+        <CardHeader>
+          <GiSuspicious className="text-emerald-100 size-40 mx-auto mb-8" />
+
+          <CardTitle>An empty room…</CardTitle>
+          <CardDescription>…how suspicious!</CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <Button asChild variant="outline">
+            <Link to="/" className="flex gap-8 items-center group">
+              Take me back to safety
+              <GoChevronRight className="group-hover:translate-x-4 transition-transform" />
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export const Component = NotFound;