Improve draft room UX with better error handling and UI refinements (#17)

* Remove pause/resume controls when draft is complete, rename Live to Connected

- Hide Pause/Resume Draft buttons when isDraftComplete is true
- Change 'Live' status indicator to 'Connected' in both draft room and draft board views

https://claude.ai/code/session_01AUaKzx465NrY29Qv6MVwjC

* Fix code review issues in draft room: security, bugs, and quality

Security:
- Fix inconsistent commissioner check: draft.start, force-autopick, force-manual-pick,
  and make-pick all now query the commissioners table instead of league.createdBy,
  so co-commissioners have consistent access to all draft controls

Bugs:
- canPick now includes !isPaused so the UI correctly blocks picks during a pause
- isDraftComplete initial state now covers 'completed' season status, not just 'active'
- Guard JSON.parse in queue.reorder.ts with try/catch to return 400 instead of 500

Code quality:
- Add error handling (try/catch + toast) to handlePauseDraft, handleResumeDraft,
  handleRemoveFromQueue, and handleReorderQueue
- Replace alert() with toast.error() in handleMakePick, handleForceAutopick,
  handleForceManualPick for consistent UX
- Memoize filteredParticipants with useMemo to avoid recomputing on every render
- Replace custom force-pick dialog div with ShadCN Dialog component for proper
  keyboard support (Escape to close, focus trap, accessible markup); add dialog.tsx
- Remove console.log debug statements from socket event handlers and API routes
- Replace (global as any).__socketIO with getSocketIO() across all API routes
- Replace window.location.reload() in handleStartDraft with useRevalidator

https://claude.ai/code/session_01AUaKzx465NrY29Qv6MVwjC

---------

Co-authored-by: Claude <noreply@anthropic.com>

app/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

app/routes/api/draft.force-autopick.ts

@@ -1,7 +1,7 @@
 import { getAuth } from "@clerk/react-router/server";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
-import { eq } from "drizzle-orm";
+import { eq, and } from "drizzle-orm";
 import { executeAutoPick } from "~/models/draft-utils";
 
 export async function action(args: any) {
@@ -27,9 +27,6 @@ export async function action(args: any) {
   // Get season details to verify commissioner permissions
   const season = await db.query.seasons.findFirst({
     where: eq(schema.seasons.id, seasonId),
-    with: {
-      league: true,
-    },
   });
 
   if (!season) {
@@ -37,8 +34,15 @@ export async function action(args: any) {
   }
 
   // Check if user is commissioner
-  if (season.league.createdBy !== userId) {
+  const isCommissioner = await db.query.commissioners.findFirst({
-    return Response.json({ error: "Only commissioner can force autopick" }, { status: 403 });
+    where: and(
+      eq(schema.commissioners.leagueId, season.leagueId),
+      eq(schema.commissioners.userId, userId)
+    ),
+  });
+
+  if (!isCommissioner) {
+    return Response.json({ error: "Only commissioners can force autopick" }, { status: 403 });
   }
 
   // Execute the autopick using the unified function

app/routes/api/draft.force-manual-pick.ts

@@ -6,6 +6,7 @@ import { calculateDraftEligibility } from "~/lib/draft-eligibility";
 import { getDraftPicksWithSports, getTeamDraftPicksWithSports } from "~/models/draft-pick";
 import { getParticipantsForSeasonWithSports } from "~/models/participant";
 import { getSeasonSportsSimple } from "~/models/season-sport";
+import { getSocketIO } from "../../../server/socket";
 
 export async function action(args: any) {
   const { request } = args;
@@ -31,9 +32,6 @@ export async function action(args: any) {
   // Get season details
   const season = await db.query.seasons.findFirst({
     where: eq(schema.seasons.id, seasonId),
-    with: {
-      league: true,
-    },
   });
 
   if (!season) {
@@ -41,8 +39,15 @@ export async function action(args: any) {
   }
 
   // Check if user is commissioner
-  if (season.league.createdBy !== userId) {
+  const isCommissioner = await db.query.commissioners.findFirst({
-    return Response.json({ error: "Only commissioner can force manual pick" }, { status: 403 });
+    where: and(
+      eq(schema.commissioners.leagueId, season.leagueId),
+      eq(schema.commissioners.userId, userId)
+    ),
+  });
+
+  if (!isCommissioner) {
+    return Response.json({ error: "Only commissioners can force a manual pick" }, { status: 403 });
   }
 
   // Check if participant is already drafted
@@ -156,8 +161,7 @@ export async function action(args: any) {
 
     // Emit timer update to all clients
     try {
-      const io = (global as any).__socketIO;
+      getSocketIO().to(`draft-${seasonId}`).emit("timer-update", {
-      io.to(`draft-${seasonId}`).emit("timer-update", {
         seasonId,
         teamId,
         timeRemaining: newTimeRemaining,
@@ -186,10 +190,6 @@ export async function action(args: any) {
       const nextTeamId = nextDraftSlot.teamId;
       const initialTime = season.draftInitialTime || 120;
 
-      console.log(
-        `[ForceManualPick] Initializing timer for next team ${nextTeamId} with ${initialTime}s (pick ${nextPickNumber})`
-      );
-
       // Check if timer already exists for next team
       const nextTimer = await db.query.draftTimers.findFirst({
         where: and(
@@ -218,8 +218,7 @@ export async function action(args: any) {
 
       // Emit timer update for next team
       try {
-        const io = (global as any).__socketIO;
+        getSocketIO().to(`draft-${seasonId}`).emit("timer-update", {
-        io.to(`draft-${seasonId}`).emit("timer-update", {
           seasonId,
           teamId: nextTeamId,
           timeRemaining: initialTime,
@@ -252,8 +251,7 @@ export async function action(args: any) {
 
   // Notify all clients that this participant was removed from queues
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("participant-removed-from-queues", {
-    io.to(`draft-${seasonId}`).emit("participant-removed-from-queues", {
       participantId,
     });
   } catch (error) {
@@ -262,7 +260,7 @@ export async function action(args: any) {
 
   // Emit socket event
   try {
-    const io = (global as any).__socketIO;
+    const io = getSocketIO();
     const team = draftSlots.find((slot) => slot.team.id === teamId)?.team;
 
     io.to(`draft-${seasonId}`).emit("pick-made", {

app/routes/api/draft.make-pick.ts

@@ -6,6 +6,7 @@ import { calculateDraftEligibility } from "~/lib/draft-eligibility";
 import { getDraftPicksWithSports, getTeamDraftPicksWithSports } from "~/models/draft-pick";
 import { getParticipantsForSeasonWithSports } from "~/models/participant";
 import { getSeasonSportsSimple } from "~/models/season-sport";
+import { getSocketIO } from "../../../server/socket";
 
 export async function action(args: any) {
   const { request } = args;
@@ -29,9 +30,6 @@ export async function action(args: any) {
   // Get season details
   const season = await db.query.seasons.findFirst({
     where: eq(schema.seasons.id, seasonId),
-    with: {
-      league: true,
-    },
   });
 
   if (!season) {
@@ -67,7 +65,13 @@ export async function action(args: any) {
 
   // Check permissions: must be team owner or commissioner
   const isTeamOwner = currentDraftSlot.team.ownerId === userId;
-  const isCommissioner = season.league.createdBy === userId;
+  const commissionerRecord = await db.query.commissioners.findFirst({
+    where: and(
+      eq(schema.commissioners.leagueId, season.leagueId),
+      eq(schema.commissioners.userId, userId)
+    ),
+  });
+  const isCommissioner = !!commissionerRecord;
 
   if (!isTeamOwner && !isCommissioner) {
     return Response.json({ error: "Not your turn to pick" }, { status: 403 });
@@ -153,8 +157,7 @@ export async function action(args: any) {
 
   // Notify all clients that this participant was removed from queues
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("participant-removed-from-queues", {
-    io.to(`draft-${seasonId}`).emit("participant-removed-from-queues", {
       participantId,
     });
   } catch (error) {
@@ -187,8 +190,7 @@ export async function action(args: any) {
 
     // Emit timer update to all clients
     try {
-      const io = (global as any).__socketIO;
+      getSocketIO().to(`draft-${seasonId}`).emit("timer-update", {
-      io.to(`draft-${seasonId}`).emit("timer-update", {
         seasonId,
         teamId: currentDraftSlot.teamId,
         timeRemaining: newTimeRemaining,
@@ -217,10 +219,6 @@ export async function action(args: any) {
       const nextTeamId = nextDraftSlot.teamId;
       const initialTime = season.draftInitialTime || 120;
 
-      console.log(
-        `[MakePick] Initializing timer for next team ${nextTeamId} with ${initialTime}s (pick ${nextPickNumber})`
-      );
-
       // Check if timer already exists for next team
       const nextTimer = await db.query.draftTimers.findFirst({
         where: and(
@@ -249,8 +247,7 @@ export async function action(args: any) {
 
       // Emit timer update for next team
       try {
-        const io = (global as any).__socketIO;
+        getSocketIO().to(`draft-${seasonId}`).emit("timer-update", {
-        io.to(`draft-${seasonId}`).emit("timer-update", {
           seasonId,
           teamId: nextTeamId,
           timeRemaining: initialTime,
@@ -273,8 +270,7 @@ export async function action(args: any) {
 
   // Emit socket event
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("pick-made", {
-    io.to(`draft-${seasonId}`).emit("pick-made", {
       pick: {
         ...draftPick,
         team: currentDraftSlot.team,
@@ -289,7 +285,7 @@ export async function action(args: any) {
     });
 
     if (isDraftComplete) {
-      io.to(`draft-${seasonId}`).emit("draft-completed");
+      getSocketIO().to(`draft-${seasonId}`).emit("draft-completed");
     }
   } catch (error) {
     console.error("Socket.IO error:", error);

app/routes/api/draft.pause.ts

@@ -2,6 +2,7 @@ import { getAuth } from "@clerk/react-router/server";
 import { eq, and } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
+import { getSocketIO } from "../../../server/socket";
 
 export async function action(args: any) {
   const { request } = args;
@@ -61,8 +62,7 @@ export async function action(args: any) {
 
   // Emit socket event
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("draft-paused", {
-    io.to(`draft-${seasonId}`).emit("draft-paused", {
       seasonId,
       paused: true,
     });

app/routes/api/draft.resume.ts

@@ -2,6 +2,7 @@ import { getAuth } from "@clerk/react-router/server";
 import { eq, and } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
+import { getSocketIO } from "../../../server/socket";
 
 export async function action(args: any) {
   const { request } = args;
@@ -61,8 +62,7 @@ export async function action(args: any) {
 
   // Emit socket event
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("draft-resumed", {
-    io.to(`draft-${seasonId}`).emit("draft-resumed", {
       seasonId,
       paused: false,
     });

app/routes/api/draft.start.ts

@@ -1,7 +1,8 @@
 import { getAuth } from "@clerk/react-router/server";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
-import { eq } from "drizzle-orm";
+import { eq, and } from "drizzle-orm";
+import { getSocketIO } from "../../../server/socket";
 
 export async function action(args: any) {
   const { request } = args;
@@ -24,9 +25,6 @@ export async function action(args: any) {
   // Get season details
   const season = await db.query.seasons.findFirst({
     where: eq(schema.seasons.id, seasonId),
-    with: {
-      league: true,
-    },
   });
 
   if (!season) {
@@ -34,8 +32,15 @@ export async function action(args: any) {
   }
 
   // Check if user is commissioner
-  if (season.league.createdBy !== userId) {
+  const isCommissioner = await db.query.commissioners.findFirst({
-    return Response.json({ error: "Only commissioner can start draft" }, { status: 403 });
+    where: and(
+      eq(schema.commissioners.leagueId, season.leagueId),
+      eq(schema.commissioners.userId, userId)
+    ),
+  });
+
+  if (!isCommissioner) {
+    return Response.json({ error: "Only commissioners can start the draft" }, { status: 403 });
   }
 
   // Check if draft already started
@@ -77,8 +82,7 @@ export async function action(args: any) {
 
   // Emit socket event
   try {
-    const io = (global as any).__socketIO;
+    getSocketIO().to(`draft-${seasonId}`).emit("draft-started", {
-    io.to(`draft-${seasonId}`).emit("draft-started", {
       seasonId,
       currentPickNumber: 1,
     });

app/routes/api/queue.reorder.ts

@@ -22,7 +22,12 @@ export async function action(args: any) {
     return Response.json({ error: "Missing required fields" }, { status: 400 });
   }
 
-  const participantIds = JSON.parse(participantIdsJson as string);
+  let participantIds: string[];
+  try {
+    participantIds = JSON.parse(participantIdsJson as string);
+  } catch {
+    return Response.json({ error: "Invalid participantIds format" }, { status: 400 });
+  }
 
   const db = database();
 

app/routes/leagues/$leagueId.draft-board.$seasonId.tsx

@@ -165,7 +165,7 @@ export default function DraftBoard() {
                   }`}
                 />
                 <span className="text-sm font-medium">
-                  {isConnected ? "Live" : "Disconnected"}
+                  {isConnected ? "Connected" : "Disconnected"}
                 </span>
               </div>
             )}

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData, Link } from "react-router";
+import { useLoaderData, Link, useRevalidator } from "react-router";
 import { eq, and, asc, desc, inArray } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
@@ -8,6 +8,7 @@ import { Card } from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
 import { getAuth } from "@clerk/react-router/server";
 import { getTeamQueue } from "~/models/draft-queue";
 import { DraftSidebar } from "~/components/DraftSidebar";
@@ -195,6 +196,7 @@ export default function DraftRoom() {
     currentUserId,
     numFlexPicks,
   } = useLoaderData<typeof loader>();
+  const { revalidate } = useRevalidator();
   const { isConnected, connectionError, isReconnecting, on, off } = useDraftSocket(season.id, userTeam?.id);
   const {
     permissionState: notificationsPermission,
@@ -223,7 +225,9 @@ export default function DraftRoom() {
   const [sportFilter, setSportFilter] = useState<string>("all");
   const [queue, setQueue] = useState(userQueue);
   const [isPaused, setIsPaused] = useState(season.draftPaused || false);
-  const [isDraftComplete, setIsDraftComplete] = useState(season.status === "active");
+  const [isDraftComplete, setIsDraftComplete] = useState(
+    season.status === "active" || season.status === "completed"
+  );
 
   // Sidebar and tabs state
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
@@ -349,7 +353,6 @@ export default function DraftRoom() {
   // Listen for new picks from other users
   useEffect(() => {
     const handlePickMade = (data: any) => {
-      console.log("Pick made:", data);
       setPicks((prev: any) => [...prev, data.pick]);
       setCurrentPick(data.nextPickNumber);
 
@@ -399,7 +402,6 @@ export default function DraftRoom() {
     };
 
     const handleAutodraftUpdated = (data: { teamId: string; isEnabled: boolean; mode: "next_pick" | "while_on" }) => {
-      console.log("Autodraft updated:", data);
       setAutodraftStatus((prev) => ({
         ...prev,
         [data.teamId]: data.isEnabled,
@@ -415,12 +417,10 @@ export default function DraftRoom() {
     };
 
     const handleTeamConnected = (data: { teamId: string }) => {
-      console.log("Team connected:", data.teamId);
       setConnectedTeams((prev) => new Set(prev).add(data.teamId));
     };
 
     const handleTeamDisconnected = (data: { teamId: string }) => {
-      console.log("Team disconnected:", data.teamId);
       setConnectedTeams((prev) => {
         const newSet = new Set(prev);
         newSet.delete(data.teamId);
@@ -429,12 +429,10 @@ export default function DraftRoom() {
     };
 
     const handleConnectedTeamsList = (data: { teamIds: string[] }) => {
-      console.log("Received connected teams list:", data.teamIds);
       setConnectedTeams(new Set(data.teamIds));
     };
 
     const handleParticipantRemovedFromQueues = (data: { participantId: string }) => {
-      console.log("Participant removed from queues:", data.participantId);
       setQueue((prev: any) =>
         prev.filter((item: any) => item.participantId !== data.participantId)
       );
@@ -537,14 +535,21 @@ export default function DraftRoom() {
     formData.append("queueId", queueId);
     formData.append("teamId", userTeam.id);
 
-    const response = await fetch("/api/queue/remove", {
+    try {
-      method: "POST",
+      const response = await fetch("/api/queue/remove", {
-      body: formData,
+        method: "POST",
-    });
+        body: formData,
+      });
 
-    if (response.ok) {
+      if (response.ok) {
-      const data = await response.json();
+        const data = await response.json();
-      setQueue(data.queue);
+        setQueue(data.queue);
+      } else {
+        const error = await response.json();
+        toast.error(error.error || "Failed to remove from queue");
+      }
+    } catch {
+      toast.error("Network error - failed to remove from queue");
     }
   };
 
@@ -556,14 +561,21 @@ export default function DraftRoom() {
     formData.append("seasonId", season.id);
     formData.append("participantIds", JSON.stringify(participantIds));
 
-    const response = await fetch("/api/queue/reorder", {
+    try {
-      method: "POST",
+      const response = await fetch("/api/queue/reorder", {
-      body: formData,
+        method: "POST",
-    });
+        body: formData,
+      });
 
-    if (response.ok) {
+      if (response.ok) {
-      const data = await response.json();
+        const data = await response.json();
-      setQueue(data.queue);
+        setQueue(data.queue);
+      } else {
+        const error = await response.json();
+        toast.error(error.error || "Failed to reorder queue");
+      }
+    } catch {
+      toast.error("Network error - failed to reorder queue");
     }
   };
 
@@ -577,7 +589,10 @@ export default function DraftRoom() {
     });
 
     if (response.ok) {
-      window.location.reload(); // Reload to get updated season status
+      revalidate();
+    } else {
+      const error = await response.json();
+      toast.error(error.error || "Failed to start draft");
     }
   };
 
@@ -585,13 +600,20 @@ export default function DraftRoom() {
     const formData = new FormData();
     formData.append("seasonId", season.id);
 
-    const response = await fetch("/api/draft/pause", {
+    try {
-      method: "POST",
+      const response = await fetch("/api/draft/pause", {
-      body: formData,
+        method: "POST",
-    });
+        body: formData,
+      });
 
-    if (response.ok) {
+      if (response.ok) {
-      setIsPaused(true);
+        setIsPaused(true);
+      } else {
+        const error = await response.json();
+        toast.error(error.error || "Failed to pause draft");
+      }
+    } catch {
+      toast.error("Network error - failed to pause draft");
     }
   };
 
@@ -599,13 +621,20 @@ export default function DraftRoom() {
     const formData = new FormData();
     formData.append("seasonId", season.id);
 
-    const response = await fetch("/api/draft/resume", {
+    try {
-      method: "POST",
+      const response = await fetch("/api/draft/resume", {
-      body: formData,
+        method: "POST",
-    });
+        body: formData,
+      });
 
-    if (response.ok) {
+      if (response.ok) {
-      setIsPaused(false);
+        setIsPaused(false);
+      } else {
+        const error = await response.json();
+        toast.error(error.error || "Failed to resume draft");
+      }
+    } catch {
+      toast.error("Network error - failed to resume draft");
     }
   };
 
@@ -619,11 +648,9 @@ export default function DraftRoom() {
       body: formData,
     });
 
-    if (response.ok) {
+    if (!response.ok) {
-      // Pick will be broadcast via socket, no need to manually update
-    } else {
       const error = await response.json();
-      alert(error.error || "Failed to make pick");
+      toast.error(error.error || "Failed to make pick");
     }
   };
 
@@ -638,11 +665,9 @@ export default function DraftRoom() {
       body: formData,
     });
 
-    if (response.ok) {
+    if (!response.ok) {
-      // Pick will be broadcast via socket
-    } else {
       const error = await response.json();
-      alert(error.error || "Failed to force autopick");
+      toast.error(error.error || "Failed to force autopick");
     }
   };
 
@@ -665,7 +690,7 @@ export default function DraftRoom() {
       setSelectedPickSlot(null);
     } else {
       const error = await response.json();
-      alert(error.error || "Failed to force manual pick");
+      toast.error(error.error || "Failed to force manual pick");
     }
   };
 
@@ -677,7 +702,7 @@ export default function DraftRoom() {
   const isMyTurn = !!(
     userTeam && currentDraftSlot && currentDraftSlot.team.id === userTeam.id
   );
-  const canPick = isMyTurn && season.status === "draft"; // Only team owner on their turn
+  const canPick = isMyTurn && season.status === "draft" && !isPaused; // Only team owner on their turn when draft is active
 
   // Generate snake draft grid structure
   const draftGrid = useMemo(() => {
@@ -746,32 +771,34 @@ export default function DraftRoom() {
   );
 
   // Filter participants based on search, sport, drafted status, and eligibility
-  const filteredParticipants = availableParticipants.filter(
+  const filteredParticipants = useMemo(
-    (participant: any) => {
+    () =>
-      // Drafted filter - hide drafted participants by default
+      availableParticipants.filter((participant: any) => {
-      if (hideDrafted && draftedParticipantIds.has(participant.id)) {
+        // Drafted filter - hide drafted participants by default
-        return false;
+        if (hideDrafted && draftedParticipantIds.has(participant.id)) {
-      }
-      // Eligibility filter - hide ineligible participants by default (if user has a team)
-      if (hideIneligible && eligibility) {
-        const isEligible = eligibility.eligibleSportIds.has(participant.sport.id);
-        if (!isEligible) {
           return false;
         }
-      }
+        // Eligibility filter - hide ineligible participants by default (if user has a team)
-      // Search filter
+        if (hideIneligible && eligibility) {
-      if (
+          const isEligible = eligibility.eligibleSportIds.has(participant.sport.id);
-        searchQuery &&
+          if (!isEligible) {
-        !participant.name.toLowerCase().includes(searchQuery.toLowerCase())
+            return false;
-      ) {
+          }
-        return false;
+        }
-      }
+        // Search filter
-      // Sport filter
+        if (
-      if (sportFilter !== "all" && participant.sport.name !== sportFilter) {
+          searchQuery &&
-        return false;
+          !participant.name.toLowerCase().includes(searchQuery.toLowerCase())
-      }
+        ) {
-      return true;
+          return false;
-    }
+        }
+        // Sport filter
+        if (sportFilter !== "all" && participant.sport.name !== sportFilter) {
+          return false;
+        }
+        return true;
+      }),
+    [availableParticipants, hideDrafted, hideIneligible, eligibility, draftedParticipantIds, searchQuery, sportFilter]
   );
 
   return (
@@ -844,7 +871,7 @@ export default function DraftRoom() {
                 <Button onClick={handleStartDraft}>Start Draft</Button>
               )}
               
-              {isCommissioner && season.status === "draft" && (
+              {isCommissioner && season.status === "draft" && !isDraftComplete && (
                 <>
                   {isPaused ? (
                     <Button onClick={handleResumeDraft} variant="default">
@@ -865,7 +892,7 @@ export default function DraftRoom() {
                   }`}
                 />
                 <span className="text-sm font-medium">
-                  {isConnected ? "Live" : "Disconnected"}
+                  {isConnected ? "Connected" : "Disconnected"}
                 </span>
               </div>
               <Button variant="outline" asChild>
@@ -988,126 +1015,114 @@ export default function DraftRoom() {
       </div>
 
       {/* Force Manual Pick Dialog */}
-      {forcePickDialogOpen && selectedPickSlot && (
+      <Dialog
-        <div
+        open={forcePickDialogOpen && !!selectedPickSlot}
-          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+        onOpenChange={(open) => {
-          onClick={() => setForcePickDialogOpen(false)}
+          setForcePickDialogOpen(open);
-        >
+          if (!open) setSelectedPickSlot(null);
-          <Card
+        }}
-            className="w-full max-w-2xl max-h-[80vh] overflow-hidden"
+      >
-            onClick={(e) => e.stopPropagation()}
+        <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col gap-0 p-0">
-          >
+          <DialogHeader className="p-6 pb-4">
-            <div className="p-6">
+            <DialogTitle>Force Manual Pick</DialogTitle>
-              <h2 className="text-2xl font-bold mb-4">Force Manual Pick</h2>
+            <DialogDescription>
-              <p className="text-sm text-muted-foreground mb-4">
+              Select a participant to draft for Pick #{selectedPickSlot?.pickNumber}
-                Select a participant to draft for Pick #
+            </DialogDescription>
-                {selectedPickSlot.pickNumber}
+          </DialogHeader>
-              </p>
 
-              {/* Search and Filter */}
+          <div className="px-6 pb-4">
-              <div className="flex gap-2 mb-4">
+            {/* Search and Filter */}
-                <input
+            <div className="flex gap-2 mb-4">
-                  type="text"
+              <input
-                  placeholder="Search participants..."
+                type="text"
-                  className="flex-1 px-3 py-2 border rounded-md"
+                placeholder="Search participants..."
-                  value={dialogSearchQuery}
+                className="flex-1 px-3 py-2 border rounded-md bg-background"
-                  onChange={(e) => setDialogSearchQuery(e.target.value)}
+                value={dialogSearchQuery}
-                />
+                onChange={(e) => setDialogSearchQuery(e.target.value)}
-                <select
+              />
-                  className="px-3 py-2 border rounded-md"
+              <select
-                  value={dialogSportFilter}
+                className="px-3 py-2 border rounded-md bg-background"
-                  onChange={(e) => setDialogSportFilter(e.target.value)}
+                value={dialogSportFilter}
-                >
+                onChange={(e) => setDialogSportFilter(e.target.value)}
-                  <option value="all">All Sports</option>
+              >
-                  {uniqueSports.map((sport) => (
+                <option value="all">All Sports</option>
-                    <option key={sport} value={sport}>
+                {uniqueSports.map((sport) => (
-                      {sport}
+                  <option key={sport} value={sport}>
-                    </option>
+                    {sport}
-                  ))}
+                  </option>
-                </select>
+                ))}
-              </div>
+              </select>
+            </div>
 
-              {/* Participant List */}
+            {/* Participant List */}
-              <div className="max-h-96 overflow-y-auto border rounded-lg">
+            <div className="max-h-96 overflow-y-auto border rounded-lg">
-                <table className="w-full text-sm">
+              <table className="w-full text-sm">
-                  <thead className="bg-muted sticky top-0">
+                <thead className="bg-muted sticky top-0">
-                    <tr>
+                  <tr>
-                      <th className="text-left p-3 font-semibold">
+                    <th className="text-left p-3 font-semibold">Participant</th>
-                        Participant
+                    <th className="text-left p-3 font-semibold">Sport</th>
-                      </th>
+                    <th className="text-right p-3 font-semibold">Action</th>
-                      <th className="text-left p-3 font-semibold">Sport</th>
+                  </tr>
-                      <th className="text-right p-3 font-semibold">Action</th>
+                </thead>
-                    </tr>
+                <tbody>
-                  </thead>
+                  {dialogFilteredParticipants.map((participant: any) => {
-                  <tbody>
+                    const isEligible = forcePickEligibility
-                    {dialogFilteredParticipants
+                      ? forcePickEligibility.eligibleSportIds.has(participant.sport.id)
-                      .map((participant: any) => {
+                      : true;
-                        // Check eligibility for force pick team
+                    const ineligibleReason = forcePickEligibility?.ineligibleReasons[participant.sport.id];
-                        const isEligible = forcePickEligibility
-                          ? forcePickEligibility.eligibleSportIds.has(participant.sport.id)
-                          : true;
-                        const ineligibleReason = forcePickEligibility?.ineligibleReasons[participant.sport.id];
 
-                        return (
+                    return (
-                          <tr
+                      <tr
-                            key={participant.id}
+                        key={participant.id}
-                            className={`border-t ${
+                        className={`border-t ${
-                              isEligible
+                          isEligible ? "hover:bg-muted/50" : "bg-destructive/10 opacity-60"
-                                ? "hover:bg-muted/50"
+                        }`}
-                                : "bg-destructive/10 opacity-60"
+                        title={!isEligible ? ineligibleReason : undefined}
-                            }`}
+                      >
+                        <td className="p-3">
+                          <div className="flex items-center gap-2">
+                            <span className={`font-medium ${!isEligible ? "text-muted-foreground" : ""}`}>
+                              {participant.name}
+                            </span>
+                            {!isEligible && (
+                              <Badge
+                                variant="destructive"
+                                className="text-xs"
+                                title={ineligibleReason}
+                              >
+                                Ineligible
+                              </Badge>
+                            )}
+                          </div>
+                        </td>
+                        <td className="p-3 text-muted-foreground">
+                          {participant.sport.name}
+                        </td>
+                        <td className="p-3 text-right">
+                          <Button
+                            size="sm"
+                            onClick={() => handleForceManualPick(participant.id)}
+                            disabled={!isEligible}
                             title={!isEligible ? ineligibleReason : undefined}
                           >
-                            <td className="p-3">
+                            Draft
-                              <div className="flex items-center gap-2">
+                          </Button>
-                                <span className={`font-medium ${!isEligible ? "text-muted-foreground" : ""}`}>
+                        </td>
-                                  {participant.name}
+                      </tr>
-                                </span>
+                    );
-                                {!isEligible && (
+                  })}
-                                  <Badge
+                </tbody>
-                                    variant="destructive"
+              </table>
-                                    className="text-xs"
-                                    title={ineligibleReason}
-                                  >
-                                    Ineligible
-                                  </Badge>
-                                )}
-                              </div>
-                            </td>
-                            <td className="p-3 text-muted-foreground">
-                              {participant.sport.name}
-                            </td>
-                            <td className="p-3 text-right">
-                              <Button
-                                size="sm"
-                                onClick={() =>
-                                  handleForceManualPick(participant.id)
-                                }
-                                disabled={!isEligible}
-                                title={!isEligible ? ineligibleReason : undefined}
-                              >
-                                Draft
-                              </Button>
-                            </td>
-                          </tr>
-                        );
-                      })}
-                  </tbody>
-                </table>
-              </div>
-
-              <div className="mt-4 flex justify-end gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => setForcePickDialogOpen(false)}
-                >
-                  Cancel
-                </Button>
-              </div>
             </div>
-          </Card>
+          </div>
-        </div>
+
-      )}
+          <DialogFooter className="px-6 pb-6">
+            <Button variant="outline" onClick={() => setForcePickDialogOpen(false)}>
+              Cancel
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* Connection Overlay - blocks interaction until socket connects */}
       <ConnectionOverlay