fix: update board slug availability check to be unique to workspace

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -167,7 +167,8 @@ export function UpdateBoardSlugForm({
               !isDirty ||
               updateBoardSlug.isPending ||
               errors.slug?.message !== undefined ||
-              isBoardSlugAvailable?.isReserved
+              isBoardSlugAvailable?.isReserved ||
+              checkBoardSlugAvailability.isLoading
             }
           >
             {t`Update`}

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

@@ -97,7 +97,7 @@ export default function MembersPage() {
         </td>
         <td
           className={twMerge(
-            "w-auto min-w-[120px] overflow-visible sm:w-[35%] sm:min-w-[150px]",
+            "w-auto min-w-[120px] sm:w-[35%] sm:min-w-[150px]",
             isLastRow && "rounded-br-lg",
           )}
         >
@@ -121,7 +121,7 @@ export default function MembersPage() {
             </div>
             <div
               className={twMerge(
-                "relative z-50",
+                "relative",
                 (workspace.role !== "admin" || showSkeleton) && "hidden",
               )}
             >
@@ -172,10 +172,10 @@ export default function MembersPage() {
         </div>
 
         <div className="mt-8 flow-root">
-          <div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div className="inline-block min-w-full overflow-x-auto px-4 py-2 pb-16 align-middle sm:px-6 lg:px-8">
+            <div className="inline-block min-w-full px-4 py-2 align-middle sm:px-6 lg:px-8">
               <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-                <table className="min-w-full divide-y divide-light-600 overflow-visible dark:divide-dark-600">
+                <table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
                   <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
                     <tr>
                       <th
@@ -192,7 +192,7 @@ export default function MembersPage() {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-light-600 overflow-visible bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
+                  <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
                     {!isLoading &&
                       data?.members.map((member, index) => (
                         <TableRow

packages/api/src/routers/board.ts

@@ -276,6 +276,21 @@ export const boardRouter = createTRPCRouter({
 
       await assertUserInWorkspace(ctx.db, userId, board.workspaceId);
 
+      if (input.slug) {
+        const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
+          ctx.db,
+          input.slug,
+          board.workspaceId,
+        );
+
+        if (!isBoardSlugAvailable) {
+          throw new TRPCError({
+            message: `Board slug ${input.slug} is not available`,
+            code: "BAD_REQUEST",
+          });
+        }
+      }
+
       const result = await boardRepo.update(ctx.db, {
         name: input.name,
         slug: input.slug,
@@ -407,11 +422,23 @@ export const boardRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
+      const board = await boardRepo.getWorkspaceAndBoardIdByBoardPublicId(
+        ctx.db,
+        input.boardPublicId,
+      );
+
+      if (!board)
+        throw new TRPCError({
+          message: `Board with public ID ${input.boardPublicId} not found`,
+          code: "NOT_FOUND",
+        });
+
       const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
         ctx.db,
         input.boardSlug,
-        input.boardPublicId,
+        board.workspaceId,
       );
+
       return {
         isReserved: !isBoardSlugAvailable,
       };

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

@@ -1,4 +1,4 @@
-import { and, asc, desc, eq, exists, inArray, isNull, or, sql } from "drizzle-orm";
+import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";
 
 import type { dbClient } from "@kan/db/client";
 import type { BoardVisibilityStatus } from "@kan/db/schema";
@@ -481,30 +481,18 @@ export const getWorkspaceAndBoardIdByBoardPublicId = async (
 export const isBoardSlugAvailable = async (
   db: dbClient,
   boardSlug: string,
-  boardPublicId: string,
+  workspaceId: number,
 ) => {
-  const result = await db
+  const result = await db.query.boards.findFirst({
-    .select({ id: boards.id })
+    columns: {
-    .from(boards)
+      id: true,
-    .where(
+    },
-      and(
+    where: and(
-        eq(boards.publicId, boardPublicId),
+      eq(boards.slug, boardSlug),
-        exists(
+      eq(boards.workspaceId, workspaceId),
-          db
+      isNull(boards.deletedAt),
-            .select({ id: boards.id })
+    ),
-            .from(boards)
+  });
-            .where(
-              and(
-                eq(boards.slug, boardSlug),
-                eq(boards.workspaceId, sql`${boards.workspaceId}`), // Reference outer query's workspaceId
-                isNull(boards.deletedAt),
-              ),
-            )
-            .limit(1),
-        ),
-      ),
-    )
-    .limit(1);
 
-  return result.length === 0;
+  return result === undefined;
 };