UI work

packages/webui/src/main.tsx

@@ -20,7 +20,7 @@ declare module "@tanstack/react-router" {
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <Theme>
+        <Theme appearance="dark">
             <TRPCClientProvider>
                 <RouterProvider router={router} />
             </TRPCClientProvider>

packages/webui/src/routes/__root.tsx

@@ -1,4 +1,5 @@
-import { Link, createRootRoute, useMatch, useMatches } from "@tanstack/react-router"
+import { Button, Container, Flex } from "@radix-ui/themes"
+import { createRootRoute, useMatch, useMatches, useNavigate } from "@tanstack/react-router"
 import { AnimatePresence } from "framer-motion"
 import { Suspense, lazy } from "react"
 import { AnimatedOutlet } from "../AnimatedOutlet"
@@ -10,6 +11,12 @@ const TanStackRouterDevtools = process.env.NODE_ENV === "production"
         default: res.TanStackRouterDevtools
     })))
 
+const ThemePanel = process.env.NODE_ENV === "production"
+    ? () => null
+    : lazy(() => import("@radix-ui/themes").then(res => ({
+        default: res.ThemePanel
+    })))
+
 
 export function Root() {
 
@@ -17,33 +24,48 @@ export function Root() {
     const match     = useMatch({ strict: false })
     const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ]
 
+    const navigate  = useNavigate()
+
 
     return <>
-        <div className="container mx-auto mt-8">
-            <div className="flex flex-row gap-2 justify-center content-center">
-                <Link to="/">
+        <Container pt="8" pb="4">
+            <Flex
+                gap="4"
+                justify="center"
+                align="center"
+            >
+                <Button
+                    variant="soft"
+                    onClick={() => navigate({ to: "/" })}
+                >
                     Home
-                </Link>
+                </Button>
 
-                <Link to="/about">
+                <Button
+                    variant="soft"
+                    onClick={() => navigate({ to: "/about" })}
+                >
                     About
-                </Link>
-            </div>
+                </Button>
+            </Flex>
+        </Container>
 
-            <AnimatePresence mode="popLayout">
-                <AnimatedOutlet
-                    key={nextMatch.id}
+        <AnimatePresence mode="popLayout">
+            <AnimatedOutlet
+                key={nextMatch.id}
 
-                    transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }}
+                transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }}
 
-                    initial={{ x: "100vw", opacity: 0 }}
-                    animate={{ x: "0", opacity: 1 }}
-                    exit={{ x: "-100vw", opacity: 0 }}
-                />
-            </AnimatePresence>
-        </div>
+                initial={{ x: "100vw", opacity: 0 }}
+                animate={{ x: "0", opacity: 1 }}
+                exit={{ x: "-100vw", opacity: 0 }}
+            />
+        </AnimatePresence>
 
-        <Suspense><TanStackRouterDevtools /></Suspense>
+        <Suspense>
+            <TanStackRouterDevtools />
+            <ThemePanel />
+        </Suspense>
     </>
 
 }