ubiquitous-invention/apps/web/app/(app)/[workspaceSlug]/whiteboards/page.tsx

"use client";

import { useParams, useRouter } from "next/navigation";
import { Plus, PenTool, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/trpc";

export default function WhiteboardsPage() {
  const params = useParams();
  const router = useRouter();
  const workspaceSlug = params.workspaceSlug as string;

  const { data, isLoading } = api.objects.list.useQuery(
    { workspace: workspaceSlug, type: "whiteboard", limit: 200 },
    { enabled: Boolean(workspaceSlug) },
  );

  const createMutation = api.objects.create.useMutation({
    onSuccess: (newObj) => {
      router.push(`/${workspaceSlug}/whiteboards/${newObj.id}`);
    },
  });

  const whiteboards = data?.objects ?? [];

  return (
    <div className="flex h-full flex-col">
      <div className="flex shrink-0 items-center justify-between border-b px-6 py-4">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
            <PenTool className="size-5 text-primary" />
          </div>
          <h1 className="text-lg font-semibold">Whiteboards</h1>
        </div>
        <Button
          size="sm"
          className="gap-1.5"
          onClick={() =>
            createMutation.mutate({
              type: "whiteboard",
              title: "Untitled Whiteboard",
              workspace: workspaceSlug,
            })
          }
          disabled={createMutation.isPending}
        >
          <Plus className="size-4" />
          New Whiteboard
        </Button>
      </div>

      <div className="flex-1 overflow-y-auto p-6">
        {isLoading ? (
          <div className="flex items-center justify-center py-20">
            <Loader2 className="size-6 animate-spin text-muted-foreground" />
          </div>
        ) : whiteboards.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-20 text-muted-foreground">
            <PenTool className="size-10 opacity-40" />
            <p className="text-sm">No whiteboards yet</p>
            <Button
              variant="outline"
              size="sm"
              className="gap-1.5"
              onClick={() =>
                createMutation.mutate({
                  type: "whiteboard",
                  title: "Untitled Whiteboard",
                  workspace: workspaceSlug,
                })
              }
            >
              <Plus className="size-4" />
              Create your first whiteboard
            </Button>
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {whiteboards.map((wb) => (
              <button
                key={wb.id}
                type="button"
                onClick={() => router.push(`/${workspaceSlug}/whiteboards/${wb.id}`)}
                className="group flex flex-col gap-2 rounded-lg border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-accent/50"
              >
                <div className="flex h-32 w-full items-center justify-center rounded-md bg-muted">
                  <PenTool className="size-8 text-muted-foreground/40" />
                </div>
                <p className="truncate text-sm font-medium">{wb.title || "Untitled"}</p>
                <p className="text-xs text-muted-foreground">
                  {new Date(wb.updatedAt ?? wb.createdAt).toLocaleDateString()}
                </p>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}