Add lib package, static dashboard UI components

apps/web/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@manifold/auth": "*",
     "@manifold/engine": "*",
+    "@manifold/lib": "*",
     "@manifold/router": "*",
     "@manifold/tailwind-config": "*",
     "@manifold/ui": "*",

apps/web/src/features/routing/routes/dashboard/components/dashboard-header/aphorism.tsx

@@ -0,0 +1,19 @@
+import { getRandomElement } from "@manifold/lib/utils/array";
+
+const SOURCES = {
+  dashboard: [
+    "Do you feel lucky?",
+    "You're in the right place.",
+    "What chance will fate decide today?",
+  ] as const satisfies string[],
+} as const;
+
+export function Aphorism({
+  source,
+  className,
+}: {
+  source: keyof typeof SOURCES;
+  className?: string;
+}) {
+  return <span className={className}>{getRandomElement(SOURCES[source])}</span>;
+}

apps/web/src/features/routing/routes/dashboard/components/dashboard-header/index.tsx

@@ -0,0 +1,47 @@
+import { useSession } from "@manifold/auth/client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@manifold/ui/components/ui/card";
+import { cn } from "@manifold/ui/lib/utils";
+
+import { QuickLauncher } from "../quick-launcher";
+import { Aphorism } from "./aphorism";
+
+function getGreeting(isAuthenticated: boolean, name?: string) {
+  if (isAuthenticated && name) {
+    return `Hello, ${name.split(" ")[0]} ✌️`;
+  }
+
+  return "Hello, stranger! 👋";
+}
+
+export function DashboardHeader({ className }: { className?: string }) {
+  const auth = useSession();
+
+  return (
+    <Card className={cn("flex flex-col sm:flex-row sm:gap-16", className)}>
+      <CardHeader>
+        <CardTitle>
+          {getGreeting(auth.status === "authenticated", auth.data?.user?.name)}
+        </CardTitle>
+
+        <CardDescription>
+          <Aphorism source="dashboard" />
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent
+        flush={false}
+        className="flex-grow pt-0 sm:!p-16 overflow-auto"
+      >
+        <QuickLauncher />
+      </CardContent>
+    </Card>
+  );
+
+  // <h2 className="mb-16">{greeting}</h2>;
+}

apps/web/src/features/routing/routes/dashboard/components/quick-launcher/index.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@manifold/ui/components/ui/button";
+import { Card, CardContent } from "@manifold/ui/components/ui/card";
+
+const ITEMS = [
+  {
+    title: "Cryptids",
+  },
+  {
+    title: "UFOs",
+  },
+  {
+    title: "Ghosts",
+  },
+  {
+    title: "Deities",
+  },
+  {
+    title: "Potions",
+  },
+];
+
+export function QuickLauncher() {
+  return (
+    <section className="flex gap-12 sm:gap-16">
+      {ITEMS.map((item) => {
+        return <QuickLaunchTile key={item.title} item={item} />;
+      })}
+    </section>
+  );
+}
+
+function QuickLaunchTile({ item }: { item: { title: string } }) {
+  return (
+    <Card>
+      <CardContent className="!p-0 flex items-center h-full">
+        <Button className="w-full h-full p-24" variant="link">
+          <h3>{item.title}</h3>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { Button } from "@manifold/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@manifold/ui/components/ui/card";
+
+const TABLES = [
+  {
+    id: 1,
+    title: "Cryptids",
+  },
+  {
+    id: 2,
+    title: "UFOs",
+  },
+  {
+    id: 3,
+    title: "Ghosts",
+  },
+  {
+    id: 4,
+    title: "Deities",
+  },
+  {
+    id: 5,
+    title: "Potions",
+  },
+];
+
+export function TableList() {
+  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) => {
+          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"
+                >
+                  <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>
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/features/routing/routes/dashboard/page.tsx

@@ -1,19 +1,11 @@
-import { useSession } from "@manifold/auth/client";
-
-import { Editor } from "#features/editor/editor.tsx";
+import { DashboardHeader } from "./components/dashboard-header";
+import { TableList } from "./components/table-list";
 
 export function Component() {
-  const auth = useSession();
-
-  let greeting = "Hello";
-  if (auth.status === "authenticated") {
-    greeting = `Hello, ${auth.data?.user?.name.split(" ")[0]} ✌️`;
-  }
-
   return (
-    <div className="flex flex-col grow p-12 sm:p-16 min-h-0">
-      <h2 className="mb-16">{greeting}</h2>
-      <Editor />
+    <div className="flex flex-col grow p-12 sm:p-16 min-h-0 space-y-12 sm:space-y-16">
+      <DashboardHeader />
+      <TableList />
     </div>
   );
 }

packages/lib/.eslintrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@manifold/eslint-config/index.js"],
+};

packages/lib/README.md

@@ -0,0 +1 @@
+# `@manifold/lib`

packages/lib/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@manifold/lib",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "scripts": {
+    "dev": "echo 'Add dev script here'",
+    "build": "echo 'Add build script here'",
+    "test": "echo 'Add test script here'",
+    "lint": "echo 'Add lint script here'"
+  },
+  "devDependencies": {
+    "@manifold/eslint-config": "*",
+    "@manifold/typescript-config": "*"
+  }
+}

packages/lib/src/utils/array.ts

@@ -0,0 +1,3 @@
+export function getRandomElement<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}

packages/lib/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@manifold/typescript-config/base.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/ui/src/components/ui/badge.tsx

@@ -1,7 +1,8 @@
-import { cn } from "@manifold/ui/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { cn } from "#lib/utils.ts";
+
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-10 py-2 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {

packages/ui/src/components/ui/button.tsx

@@ -1,8 +1,9 @@
-import { cn } from "@manifold/ui/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { cn } from "#lib/utils.ts";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm ring-offset-0 ring-0 focus-visible:ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -17,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary hover:underline decoration-from-font underline-offset-2 decoration-current",
       },
       size: {
         default: "h-36 px-16 py-8",

packages/ui/src/components/ui/card.tsx

@@ -1,6 +1,7 @@
-import { cn } from "@manifold/ui/lib/utils";
 import * as React from "react";
 
+import { cn } from "#lib/utils.ts";
+
 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
@@ -22,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-6 p-24", className)}
+    className={cn("flex flex-col space-y-6 p-16 sm:p-20 md:p-24", className)}
     {...props}
   />
 ));
@@ -54,9 +55,19 @@ CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-24 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement> & { flush?: boolean }
+>(({ className, flush = true, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "p-16 sm:p-20 md:p-24",
+      {
+        "!pt-0": flush,
+      },
+      className,
+    )}
+    {...props}
+  />
 ));
 CardContent.displayName = "CardContent";
 

packages/ui/src/components/ui/checkbox.tsx

@@ -1,8 +1,9 @@
-import { cn } from "@manifold/ui/lib/utils";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 
+import { cn } from "#lib/utils.ts";
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>

packages/ui/src/components/ui/resizable.tsx

@@ -1,7 +1,8 @@
-import { cn } from "@manifold/ui/lib/utils";
 import { DragHandleDots2Icon } from "@radix-ui/react-icons";
 import * as ResizablePrimitive from "react-resizable-panels";
 
+import { cn } from "#lib/utils.ts";
+
 const ResizablePanelGroup = ({
   className,
   ...props