Refact/board UI

.gitignore

@@ -56,3 +56,4 @@ temp
 .claude
 .gemini
 .idea
+.agents

apps/server/src/modules/columns/create-column/schemas.ts

@@ -3,6 +3,7 @@ import { zDate } from "@/shared/schemas/zod-date";
 
 export const createColumnBodySchema = z.object({
 	name: z.string().min(1),
+	description: z.string().optional(),
 	color: z.string().optional(),
 	isCompleted: z.boolean().optional().default(false),
 });
@@ -11,6 +12,7 @@ export type CreateColumnInput = z.infer<typeof createColumnBodySchema>;
 
 export const createColumnResponseSchema = z.object({
 	name: z.string(),
+	description: z.string().nullable(),
 	id: z.string(),
 	createdAt: zDate,
 	updatedAt: zDate,

apps/server/src/modules/columns/create-column/use-case.ts

@@ -13,6 +13,7 @@ export async function createColumnUseCase(
 	return prisma.column.create({
 		data: {
 			name: input.name,
+			description: input.description,
 			color: input.color,
 			order: lastColumn ? lastColumn.order + 1 : 0,
 			isCompleted: input.isCompleted ?? false,

apps/server/src/modules/columns/delete-column/schemas.ts

@@ -8,6 +8,7 @@ export const deleteColumnParamsSchema = z.object({
 export const deleteColumnResponseSchema = z.object({
 	id: z.string(),
 	name: z.string(),
+	description: z.string().nullable(),
 	createdAt: zDate,
 	updatedAt: zDate,
 	organizationId: z.string(),

apps/server/src/modules/columns/get-columns/schemas.ts

@@ -33,6 +33,7 @@ export const getColumnsSucessResponseSchema = z
       .array(),
     id: z.string(),
     name: z.string(),
+    description: z.string().nullable(),
     color: z.string().nullable(),
     order: z.number(),
     isCompleted: z.boolean(),

apps/server/src/modules/columns/reorder-columns/schemas.ts

@@ -16,6 +16,7 @@ export const reorderColumnsResponseSchema = z
 	.object({
 		id: z.string(),
 		name: z.string(),
+		description: z.string().nullable(),
 		createdAt: zDate,
 		updatedAt: zDate,
 		organizationId: z.string(),

apps/server/src/modules/columns/update-column/schemas.ts

@@ -7,6 +7,7 @@ export const updateColumnParamsSchema = z.object({
 
 export const updateColumnBodySchema = z.object({
 	name: z.string().min(1).optional(),
+	description: z.string().nullable().optional(),
 	color: z.string().optional(),
 	order: z.number().int().optional(),
 	isCompleted: z.boolean().optional(),
@@ -17,6 +18,7 @@ export type UpdateColumnInput = z.infer<typeof updateColumnBodySchema>;
 export const updateColumnResponseSchema = z.object({
 	id: z.string(),
 	name: z.string(),
+	description: z.string().nullable(),
 	createdAt: zDate,
 	updatedAt: zDate,
 	organizationId: z.string(),

apps/server/src/modules/columns/update-column/use-case.ts

@@ -9,6 +9,7 @@ export async function updateColumnUseCase(
 		where: { id },
 		data: {
 			name: input.name,
+			description: input.description,
 			color: input.color,
 			order: input.order,
 			isCompleted: input.isCompleted,

apps/server/src/shared/http/index.ts

@@ -7,6 +7,7 @@ import { columnsRouter } from "../../modules/columns/router";
 import { tasksRouter } from "../../modules/tasks/router";
 import { openapiConfig } from "../config/openapi";
 import { authPlugin } from "./plugins/auth.plugin";
+import { wsPlugin } from "./plugins/ws.plugin";
 
 const app = new Elysia()
 	.use(
@@ -19,6 +20,7 @@ const app = new Elysia()
 	)
 	.use(openapi(openapiConfig))
 	.use(authPlugin)
+	.use(wsPlugin) 
 	.use([columnsRouter, tasksRouter])
 	.listen(env.PORT, ({ hostname, port }) =>
 		console.log(`Server is running on http://${hostname}:${port}`),

apps/server/src/shared/http/plugins/ws.plugin.ts

@@ -0,0 +1,163 @@
+import { auth } from "@blaboard/auth";
+import { Elysia, t } from "elysia";
+
+type WsClient = {
+	readyState: number;
+	send: (data: string) => void;
+};
+
+const orgClients: Map<string, Map<string, WsClient>> = new Map();
+const MAX_MESSAGE_SIZE = 1024 * 100; 
+
+function broadcastToOrg(orgId: string, message: unknown, excludeWsId?: string) {
+	const clients = orgClients.get(orgId);
+	if (!clients) return;
+
+	const messageStr = JSON.stringify(message);
+
+	if (messageStr.length > MAX_MESSAGE_SIZE) {
+		return;
+	}
+
+	for (const [wsId, ws] of clients.entries()) {
+		if (wsId !== excludeWsId && ws.readyState === 1) {
+			ws.send(messageStr);
+		}
+	}
+}
+
+function addClientToOrg(orgId: string, wsId: string, ws: WsClient) {
+	if (!orgClients.has(orgId)) {
+		orgClients.set(orgId, new Map());
+	}
+	orgClients.get(orgId)?.set(wsId, ws);
+}
+
+function removeClientFromOrg(orgId: string, wsId: string) {
+	const clients = orgClients.get(orgId);
+	if (!clients) return;
+
+	clients.delete(wsId);
+
+	if (clients.size === 0) {
+		orgClients.delete(orgId);
+	}
+}
+
+export const wsPlugin = new Elysia({ name: "ws" })
+	.ws("/ws", {
+		body: t.Union([
+			t.Object({
+				type: t.Literal("task:created"),
+				data: t.Object({
+					taskId: t.String(),
+					columnId: t.String(),
+					title: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("task:updated"),
+				data: t.Object({
+					taskId: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("task:deleted"),
+				data: t.Object({
+					taskId: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("task:moved"),
+				data: t.Object({
+					taskId: t.String(),
+					columnId: t.String(),
+					order: t.Number(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("column:created"),
+				data: t.Object({
+					columnId: t.String(),
+					name: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("column:updated"),
+				data: t.Object({
+					columnId: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("column:deleted"),
+				data: t.Object({
+					columnId: t.String(),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("columns:reordered"),
+				data: t.Object({
+					columns: t.Array(
+						t.Object({
+							id: t.String(),
+							order: t.Number(),
+						}),
+					),
+				}),
+			}),
+			t.Object({
+				type: t.Literal("ping"),
+			}),
+			t.Object({
+				type: t.Literal("pong"),
+			}),
+		]),
+		query: t.Object({
+			orgId: t.String(),
+		}),
+		async open(ws) {
+			const requestedOrgId = ws.data.query.orgId;
+
+			const headers = new Headers();
+			for (const [key, value] of Object.entries(ws.data.headers)) {
+				if (value) headers.set(key, value);
+			}
+			const session = await auth.api.getSession({ headers });
+
+			if (!session) {
+				ws.close(1008, "Unauthorized");
+				return;
+			}
+
+			const activeOrganizationId = session.session.activeOrganizationId;
+			if (typeof activeOrganizationId !== "string") {
+				ws.close(1008, "Organization required");
+				return;
+			}
+
+			if (requestedOrgId !== activeOrganizationId) {
+				ws.close(1008, "Forbidden");
+				return;
+			}
+
+			addClientToOrg(activeOrganizationId, ws.id, ws.raw);
+		},
+		message(ws, message) {
+			const orgId = ws.data.query.orgId;
+
+			if (message.type === "ping") {
+				if (ws.raw.readyState === 1) {
+					ws.raw.send(JSON.stringify({ type: "pong" }));
+				}
+				return;
+			}
+
+			if (message.type === "pong") return;
+
+			broadcastToOrg(orgId, message, ws.id);
+		},
+		close(ws) {
+			const orgId = ws.data.query.orgId;
+			removeClientFromOrg(orgId, ws.id);
+		},
+	});

apps/web/.env.example

@@ -1 +1,2 @@
 NEXT_PUBLIC_SERVER_URL="http://localhost:3000"
+NEXT_PUBLIC_FRONTEND_URL="http://localhost:3001"

apps/web/next.config.ts

@@ -2,8 +2,8 @@ import "@blaboard/env/web";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-	typedRoutes: true,
-	reactCompiler: true,
+  typedRoutes: true,
+  reactCompiler: true,
 };
 
 export default nextConfig;

apps/web/package.json

@@ -9,9 +9,9 @@
 	},
 	"dependencies": {
 		"@base-ui/react": "^1.0.0",
-		"@blaboard/server": "workspace:*",
 		"@blaboard/auth": "workspace:*",
 		"@blaboard/env": "workspace:*",
+		"@blaboard/server": "workspace:*",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
@@ -24,8 +24,10 @@
 		"better-auth": "catalog:",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
 		"dotenv": "catalog:",
 		"elysia": "1.4.22",
+		"framer-motion": "^12.31.0",
 		"lucide-react": "^0.563.0",
 		"next": "^16.1.1",
 		"next-themes": "^0.4.6",

apps/web/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

apps/web/src/app/(authenticated)/layout.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Sidebar, SidebarProvider, SidebarTrigger } from "~/components/layout";
+import { OrgGuard } from "~/components/org";
+import {
+  CommandPalette,
+  CommandPaletteProvider,
+} from "~/components/command-palette";
+
+export default function AuthenticatedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <OrgGuard>
+      <CommandPaletteProvider>
+        <SidebarProvider>
+          <div className="flex h-screen overflow-hidden bg-sidebar">
+            <Sidebar />
+            <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-border bg-sidebar my-2 mr-2">
+              {/* Mobile Header */}
+              <header className="flex h-14 shrink-0 items-center gap-4 border-b border-border bg-background px-4 md:hidden">
+                <SidebarTrigger />
+                <span className="font-semibold">Blaboard</span>
+              </header>
+              <main className="flex flex-1 flex-col overflow-hidden">
+                {children}
+              </main>
+            </div>
+          </div>
+          <CommandPalette />
+        </SidebarProvider>
+      </CommandPaletteProvider>
+    </OrgGuard>
+  );
+}

apps/web/src/app/(authenticated)/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { TaskBoard } from "~/components/board";
+import { authClient } from "~/lib/auth-client";
+
+export default function Home() {
+  const { data: session } = authClient.useSession();
+
+  if (!session?.user || !session?.session?.activeOrganizationId) {
+    return null;
+  }
+
+  return (
+    <TaskBoard
+      organizationId={session.session.activeOrganizationId}
+      userId={session.user.id}
+    />
+  );
+}