Add auth route guards, create/edit table pages, login page, fetch and…

… show tables

apps/web/package.json

@@ -13,22 +13,27 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@manifold/auth": "*",
     "@manifold/engine": "*",
     "@manifold/lib": "*",
     "@manifold/router": "*",
     "@manifold/tailwind-config": "*",
     "@manifold/ui": "*",
+    "@manifold/validators": "*",
     "@radix-ui/react-icons": "^1.3.0",
     "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "comlink": "^4.4.1",
+    "date-fns": "^4.1.0",
     "framer-motion": "^11.11.1",
     "jotai": "^2.10.0",
     "lru-cache": "^11.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.27.0",
     "ts-pattern": "^5.5.0"
   },

apps/web/src/app.tsx

@@ -1,5 +1,6 @@
 import { SessionProvider } from "@manifold/auth/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useState } from "react";
 import { RouterProvider } from "react-router-dom";
 
@@ -14,6 +15,7 @@ export function App() {
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <RouterProvider router={router} />
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </trpc.Provider>
     </SessionProvider>

apps/web/src/features/auth/components/auth-guard.tsx

@@ -0,0 +1,17 @@
+import { useSession } from "@manifold/auth/client";
+import { Navigate, Outlet } from "react-router-dom";
+
+export function AuthGuard() {
+  const { status } = useSession();
+
+  if (status === "loading") {
+    // @TODO: better loading state, suspense, router?
+    return null;
+  }
+
+  if (status === "authenticated") {
+    return <Outlet />;
+  }
+
+  return <Navigate replace to="/" />;
+}

apps/web/src/features/auth/components/guest-guard.tsx

@@ -0,0 +1,17 @@
+import { useSession } from "@manifold/auth/client";
+import { Navigate, Outlet } from "react-router-dom";
+
+export function GuestGuard() {
+  const { status } = useSession();
+
+  if (status === "loading") {
+    // @TODO: better loading state, suspense, router?
+    return null;
+  }
+
+  if (status === "unauthenticated") {
+    return <Outlet />;
+  }
+
+  return <Navigate replace to="/dashboard" />;
+}

apps/web/src/features/auth/pages/login/page.tsx

@@ -0,0 +1,12 @@
+import { signIn } from "@manifold/auth/client";
+import { useEffect } from "react";
+
+export function Login() {
+  useEffect(() => {
+    signIn();
+  }, []);
+
+  return null;
+}
+
+export const Component = Login;

apps/web/src/features/dashboard/components/table-list/index.tsx

@@ -5,53 +5,50 @@ import {
   CardHeader,
   CardTitle,
 } from "@manifold/ui/components/ui/card";
+import { formatRelative } from "date-fns";
+import { Link } from "react-router-dom";
 
-const TABLES = [
-  {
-    id: 1,
-    title: "Cryptids",
-  },
-  {
-    id: 2,
-    title: "UFOs",
-  },
-  {
-    id: 3,
-    title: "Ghosts",
-  },
-  {
-    id: 4,
-    title: "Deities",
-  },
-  {
-    id: 5,
-    title: "Potions",
-  },
-];
+import { trpc } from "~utils/trpc";
+
+const NOW = new Date();
 
 export function TableList() {
+  const [data, query] = trpc.table.list.useSuspenseQuery(undefined, {
+    staleTime: 1000 * 60 * 5,
+  });
+
+  // @TODO: error state
+  if (query.isError) {
+    console.error(query.error);
+  }
+
   return (
     <Card>
       <CardHeader>
         {/* @TODO: Maybe this is a dropdown - recent/created at/used */}
         <CardTitle>Recently Edited:</CardTitle>
       </CardHeader>
 
-      <CardContent className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-12 sm:gap-16">
-        {TABLES.map((table) => {
+      <CardContent className="grid grid-cols-[repeat(auto-fill,minmax(150px,200px))] gap-12 sm:gap-16">
+        {data.map((table) => {
           return (
             <div key={table.id} className="border rounded-sm">
               <div className="w-full aspect-square">
                 <Button
                   className="group w-full h-full flex flex-col items-center justify-center p-16 gap-6 !no-underline"
                   variant="link"
+                  asChild
                 >
-                  <h3 className="text-lg sm:text-xl group-hover:underline decoration-from-font underline-offset-2">
-                    {table.title}
-                  </h3>
-                  <span className="text-gray-500 text-sm text-balance text-center">
-                    Last edited 2 days ago
-                  </span>
+                  <Link to={`/table/${table.id}/edit`}>
+                    <h3 className="text-lg sm:text-xl group-hover:underline decoration-from-font underline-offset-2 text-center whitespace-normal">
+                      {table.title}
+                    </h3>
+
+                    <span className="text-gray-500 text-sm text-balance text-center">
+                      Last edited{" "}
+                      {formatRelative(new Date(table.updatedAt), NOW)}
+                    </span>
+                  </Link>
                 </Button>
               </div>
             </div>

apps/web/src/features/editor/editor.tsx

@@ -3,14 +3,33 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@manifold/ui/components/ui/resizable";
-import { useCallback, useRef } from "react";
+import { type MutableRefObject, useCallback, useRef } from "react";
+import type { RefCallBack } from "react-hook-form";
 
 import { InputPanel } from "./input-panel";
 import { AvailableTables, RollResults } from "./results-panel";
 
-export function Editor() {
+type Props = {
+  name: string;
+  value: string | undefined;
+  onChange: (value: string) => void;
+  onBlur: () => void;
+  refCallback: RefCallBack;
+  onParseError: (error: string) => void;
+  onParseSuccess: () => void;
+};
+
+export function Editor({
+  name,
+  value,
+  onChange,
+  onBlur,
+  refCallback,
+  onParseError,
+  onParseSuccess,
+}: Props) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleRoll = useCallback(() => {
     listRef.current?.scrollTo({ top: 0, behavior: "smooth" });
@@ -23,17 +42,26 @@ export function Editor() {
     >
       <ResizablePanel
         minSize={20}
-        defaultSize={30}
+        defaultSize={50}
         className="flex flex-col flex-1 lg:flex-initial"
       >
-        <InputPanel textAreaRef={textAreaRef} />
+        <InputPanel
+          inputRef={inputRef as MutableRefObject<HTMLTextAreaElement>}
+          name={name}
+          value={value ?? ""}
+          onChange={onChange}
+          onBlur={onBlur}
+          refCallback={refCallback}
+          onParseError={onParseError}
+          onParseSuccess={onParseSuccess}
+        />
       </ResizablePanel>
 
       <ResizableHandle withHandle />
 
       <ResizablePanel minSize={50} className="flex flex-col flex-1">
-        <div className="flex flex-1 flex-col min-h-0 @container">
-          <AvailableTables textAreaRef={textAreaRef} onRoll={handleRoll} />
+        <div className="flex flex-1 flex-col min-h-0 @container bg-background/60">
+          <AvailableTables inputRef={inputRef} onRoll={handleRoll} />
           <RollResults listRef={listRef} />
         </div>
       </ResizablePanel>