feat: public workspace

apps/web/src/pages/[...workspaceSlug]/index.tsx

@@ -0,0 +1,5 @@
+import WorkspaceSlugView from "~/views/workspaceSlug";
+
+export default function WorkspaceSlugPage() {
+  return <WorkspaceSlugView />;
+}

apps/web/src/views/workspaceSlug/index.tsx

@@ -0,0 +1,97 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
+import { api } from "~/utils/api";
+
+export default function WorkspaceSlugPage() {
+  const router = useRouter();
+
+  const workspaceSlug = Array.isArray(router.query.workspaceSlug)
+    ? router.query.workspaceSlug[0]
+    : router.query.workspaceSlug;
+
+  const { data, isLoading } = api.workspace.bySlug.useQuery(
+    {
+      workspaceSlug: workspaceSlug ?? "",
+    },
+    { enabled: !!workspaceSlug },
+  );
+
+  const BoardsList = ({
+    isLoading,
+    boards,
+    workspaceSlug,
+  }: {
+    isLoading: boolean;
+    boards: { publicId: string; name: string }[];
+    workspaceSlug: string;
+  }) => {
+    if (isLoading)
+      return (
+        <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-4">
+          <div className="flex h-full w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+          <div className="flex h-full w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+          <div className="flex h-full w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+          <div className="flex h-full w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+        </div>
+      );
+
+    if (boards.length === 0) return <></>;
+
+    return (
+      <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-4">
+        {boards.map((board) => (
+          <Link
+            key={board.publicId}
+            href={`/${workspaceSlug}/${board.publicId}`}
+            className="h-full"
+          >
+            <div className="relative flex h-full w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
+              <PatternedBackground />
+              <p className="text-md px-4 font-medium text-neutral-900 dark:text-dark-1000">
+                {board.name}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <PageHead title={`${"Board"} | ${"Workspace"}`} />
+      <style jsx global>{`
+        html {
+          height: 100vh;
+          overflow: hidden;
+        }
+      `}</style>
+      <div className="flex h-screen flex-col items-center justify-center bg-light-100 dark:bg-dark-50">
+        <h1 className="mb-2 text-2xl font-bold text-light-1000 dark:text-dark-1000">
+          {data?.name}
+        </h1>
+        <p className="mb-6 text-light-1000 dark:text-dark-900">
+          The open source Trello alternative.
+        </p>
+        <div className="mb-4 h-[400px] w-[600px] rounded-xl border border-light-400 bg-light-200 p-4 dark:border-dark-200 dark:bg-dark-100">
+          {data?.boards && workspaceSlug && (
+            <BoardsList
+              isLoading={isLoading}
+              boards={data.boards}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
+        </div>
+        <Link
+          className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"
+          href="/"
+        >
+          kan.bn
+        </Link>
+      </div>
+    </>
+  );
+}

packages/api/src/routers/workspace.ts

@@ -64,6 +64,29 @@ export const workspaceRouter = createTRPCRouter({
           code: "NOT_FOUND",
         });
 
+      return result;
+    }),
+  bySlug: publicProcedure
+    .meta({
+      openapi: {
+        summary: "Get a workspace by slug",
+        method: "GET",
+        path: "/workspaces/slug/{workspaceSlug}",
+        description: "Retrieves a workspace by its slug",
+        tags: ["Workspaces"],
+        protect: true,
+      },
+    })
+    .input(z.object({ workspaceSlug: z.string().min(3).max(24) }))
+    .output(
+      z.custom<Awaited<ReturnType<typeof workspaceRepo.getBySlugWithBoards>>>(),
+    )
+    .query(async ({ ctx, input }) => {
+      const result = await workspaceRepo.getBySlugWithBoards(
+        ctx.db,
+        input.workspaceSlug,
+      );
+
       return result;
     }),
   create: protectedProcedure

packages/db/src/repository/workspace.repo.ts

@@ -101,6 +101,32 @@ export const getByPublicIdWithMembers = async (
   return data;
 };
 
+export const getBySlugWithBoards = async (
+  db: SupabaseClient<Database>,
+  workspaceSlug: string,
+) => {
+  const { data } = await db
+    .from("workspace")
+    .select(
+      `
+        publicId,
+        name,
+        slug,
+        boards: board (
+          publicId,
+          name
+        )
+      `,
+    )
+    .eq("slug", workspaceSlug)
+    .is("deletedAt", null)
+    .is("boards.deletedAt", null)
+    .limit(1)
+    .single();
+
+  return data;
+};
+
 export const getAllByUserId = async (
   db: SupabaseClient<Database>,
   userId: string,