Add pre-draft queue builder so users can rank players before draft order is set (#435)

* Add pre-draft queue builder so users can rank players before draft order is set

Creates a new /leagues/:leagueId/draft-queue/:seasonId page that lets team
owners browse participants by VORP and build their autopick queue during the
pre_draft phase. The queue uses the existing draftQueue table so it carries
seamlessly into the live draft room.

Adds a "Build Your Queue" button to DraftInfoCard that shows only when draft
order has not been set yet (replaced by "Enter Draft Room" once it is).

https://claude.ai/code/session_01Gu2DkTWL3nv74EMuGPpxhG

* Improve pre-draft rankings UX: mobile tabs, add/remove toggle, rename

On mobile, show tabs ("All Players" / "My Rankings") instead of a stacked
layout that buries the queue below a long participant list. On the All Players
list, the button now toggles between Add and Remove so users never need to
switch tabs just to drop someone. Desktop keeps the side-by-side panel layout.

Also renames the feature throughout from "queue builder" to "pre-draft rankings"
and the DraftInfoCard button to "Set Pre-Draft Rankings".

https://claude.ai/code/session_01Gu2DkTWL3nv74EMuGPpxhG

* Fix all code review issues in pre-draft rankings feature

- Replace useFetcher with direct fetch() for add/remove/reorder so rapid
  clicks no longer cancel in-flight requests
- Add toast.error() on all failure paths (matching live draft room pattern)
  and revert optimistic state when operations fail
- Add useRef to give handleReorder a stable reference without a localQueue
  closure dependency, preventing unnecessary QueueSection re-renders
- Convert allPlayersPanel and rankingsPanel to useMemo
- Remove leagueId from loader return; read from useParams() instead
- Extract queueBuilderHref to a variable in the league home component
- Add emptyMessage prop to QueueSection with a correct message for the
  pre-draft context ("Add players from All Players...")
- Add draft-queue-access.test.ts covering all loader access control paths:
  401/403 errors, status-based redirects, and redirect URL correctness

https://claude.ai/code/session_01Gu2DkTWL3nv74EMuGPpxhG

* Fix lint: use !== null check instead of != null

oxlint enforces eqeqeq; replace != null with !== null && !== undefined.

https://claude.ai/code/session_01Gu2DkTWL3nv74EMuGPpxhG

---------

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

app/components/draft/QueueSection.tsx

@@ -34,6 +34,7 @@ interface QueueSectionProps {
   onRemoveFromQueue: (queueId: string) => void;
   onReorder: (participantIds: string[]) => void;
   onMakePick?: (participantId: string) => void;
+  emptyMessage?: string;
 }
 
 // Sortable queue item component
@@ -125,6 +126,7 @@ export const QueueSection = memo(function QueueSection({
   onRemoveFromQueue,
   onReorder,
   onMakePick,
+  emptyMessage = "Click participants in Available to add to your queue",
 }: QueueSectionProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -160,7 +162,7 @@ export const QueueSection = memo(function QueueSection({
       {/* Queue List */}
       {queue.length === 0 ? (
         <p className="text-muted-foreground text-sm text-center py-8">
-          Click participants in Available to add to your queue
+          {emptyMessage}
         </p>
       ) : (
         <DndContext

app/components/league/DraftInfoCard.tsx

@@ -21,6 +21,8 @@ export interface DraftInfoCardProps {
   draftDateTime?: string | Date | null;
   draftBoardHref: string;
   draftRoomHref: string;
+  /** Link to the pre-draft queue builder; shown only when draft order is not yet set and user has a team */
+  queueBuilderHref?: string;
   /** 1-based draft position for the current user; omit or undefined to hide the panel */
   userDraftPosition?: number;
   /** IANA timezone used to display the draft date and time. */
@@ -57,6 +59,7 @@ function DraftInfoCardVariant({
   draftDateTime,
   draftTimezone,
   draftRoomHref,
+  queueBuilderHref,
   userDraftPosition,
   overnightPauseMode,
   overnightPauseStart,
@@ -112,11 +115,15 @@ function DraftInfoCardVariant({
             <GradientIcon icon={LayoutGrid} className="h-5 w-5 shrink-0" />
             <h2 className="text-xl font-bold leading-none tracking-tight">Draft Info</h2>
           </div>
-          {isDraftOrderSet && (
+          {isDraftOrderSet ? (
             <Button asChild>
               <Link to={draftRoomHref}>Enter Draft Room</Link>
             </Button>
-          )}
+          ) : queueBuilderHref ? (
+            <Button asChild variant="outline">
+              <Link to={queueBuilderHref}>Set Pre-Draft Rankings</Link>
+            </Button>
+          ) : null}
         </div>
       </CardHeader>
 

app/routes.ts

@@ -20,6 +20,10 @@ export default [
     "leagues/:leagueId/draft/:seasonId",
     "routes/leagues/$leagueId.draft.$seasonId.tsx"
   ),
+  route(
+    "leagues/:leagueId/draft-queue/:seasonId",
+    "routes/leagues/$leagueId.draft-queue.$seasonId.tsx"
+  ),
   route(
     "leagues/:leagueId/draft-board/:seasonId",
     "routes/leagues/$leagueId.draft-board.$seasonId.tsx"

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

@@ -0,0 +1,327 @@
+import { redirect, useLoaderData, useRevalidator, Link, useParams } from "react-router";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowLeft, ListOrdered, Users } from "lucide-react";
+import { toast } from "sonner";
+import { auth } from "~/lib/auth.server";
+import { findSeasonWithTeamsAndLeague } from "~/models/season";
+import { getDraftParticipants } from "~/models/season-participant";
+import { getTeamQueue } from "~/models/draft-queue";
+import { QueueSection } from "~/components/draft/QueueSection";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import type { Route } from "./+types/$leagueId.draft-queue.$seasonId";
+
+export function meta({ data }: Route.MetaArgs): Route.MetaDescriptors {
+  return [{ title: `Pre-Draft Rankings — ${data?.season?.league?.name ?? "League"} - Brackt` }];
+}
+
+export async function loader(args: Route.LoaderArgs) {
+  const { params } = args;
+  const { seasonId, leagueId } = params;
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  const userId = session?.user.id ?? null;
+
+  if (!seasonId) {
+    throw new Response("Season ID is required", { status: 400 });
+  }
+
+  const season = await findSeasonWithTeamsAndLeague(seasonId);
+
+  if (!season) {
+    throw new Response("Season not found", { status: 404 });
+  }
+
+  // Redirect if draft has started — send them to the appropriate page
+  if (season.status === "draft") {
+    return redirect(`/leagues/${leagueId}/draft/${seasonId}`);
+  }
+  if (season.status === "active" || season.status === "completed") {
+    return redirect(`/leagues/${leagueId}/draft-board/${seasonId}`);
+  }
+
+  if (!userId) {
+    throw new Response("You must be logged in to set pre-draft rankings", { status: 401 });
+  }
+
+  const userTeam = season.teams.find((t) => t.ownerId === userId);
+  if (!userTeam) {
+    throw new Response("You do not have a team in this season", { status: 403 });
+  }
+
+  const [availableParticipants, userQueue] = await Promise.all([
+    getDraftParticipants(seasonId),
+    getTeamQueue(userTeam.id),
+  ]);
+
+  return {
+    season,
+    userTeam,
+    availableParticipants,
+    userQueue,
+  };
+}
+
+type QueueItem = { id: string; participantId: string };
+
+export default function PreDraftRankings() {
+  const { season, userTeam, availableParticipants, userQueue } =
+    useLoaderData<typeof loader>();
+  const { leagueId } = useParams<{ leagueId: string }>();
+  const { revalidate } = useRevalidator();
+
+  const [localQueue, setLocalQueue] = useState<QueueItem[]>(userQueue);
+
+  // Sync local state when server data refreshes
+  useEffect(() => {
+    setLocalQueue(userQueue);
+  }, [userQueue]);
+
+  // Always-current ref so reorder callback stays stable (no localQueue dependency)
+  const queueRef = useRef(localQueue);
+  useEffect(() => {
+    queueRef.current = localQueue;
+  }, [localQueue]);
+
+  const queuedParticipantIds = useMemo(
+    () => new Set(localQueue.map((q) => q.participantId)),
+    [localQueue]
+  );
+
+  const handleAdd = useCallback(
+    async (participantId: string) => {
+      if (queuedParticipantIds.has(participantId)) return;
+      const tempId = `temp-${Date.now()}-${participantId}`;
+      setLocalQueue((prev) => [...prev, { id: tempId, participantId }]);
+
+      const formData = new FormData();
+      formData.append("seasonId", season.id);
+      formData.append("teamId", userTeam.id);
+      formData.append("participantId", participantId);
+
+      try {
+        const res = await fetch("/api/queue/add", { method: "POST", body: formData });
+        const data = await res.json();
+        if (data.error) {
+          setLocalQueue((prev) => prev.filter((item) => item.id !== tempId));
+          toast.error(data.error || "Failed to add to rankings");
+          return;
+        }
+        revalidate(); // swap temp ID for the real server-assigned ID
+      } catch {
+        setLocalQueue((prev) => prev.filter((item) => item.id !== tempId));
+        toast.error("Network error — failed to add to rankings");
+      }
+    },
+    [queuedParticipantIds, season.id, userTeam.id, revalidate]
+  );
+
+  const handleRemove = useCallback(
+    async (queueId: string) => {
+      setLocalQueue((prev) => prev.filter((item) => item.id !== queueId));
+
+      const formData = new FormData();
+      formData.append("queueId", queueId);
+      formData.append("teamId", userTeam.id);
+
+      try {
+        const res = await fetch("/api/queue/remove", { method: "POST", body: formData });
+        const data = await res.json();
+        if (data.error) {
+          toast.error(data.error || "Failed to remove from rankings");
+          revalidate();
+        }
+      } catch {
+        toast.error("Network error — failed to remove from rankings");
+        revalidate();
+      }
+    },
+    [userTeam.id, revalidate]
+  );
+
+  // Remove by participantId — used from the All Players list
+  const handleRemoveByParticipantId = useCallback(
+    (participantId: string) => {
+      const item = queueRef.current.find((q) => q.participantId === participantId);
+      if (item) handleRemove(item.id);
+    },
+    [handleRemove]
+  );
+
+  const handleReorder = useCallback(
+    async (participantIds: string[]) => {
+      const previousQueue = queueRef.current;
+      setLocalQueue((prev) => {
+        const byParticipantId = new Map(prev.map((item) => [item.participantId, item]));
+        return participantIds
+          .map((pid) => byParticipantId.get(pid))
+          .filter((item): item is QueueItem => item !== undefined);
+      });
+
+      const formData = new FormData();
+      formData.append("teamId", userTeam.id);
+      formData.append("seasonId", season.id);
+      formData.append("participantIds", JSON.stringify(participantIds));
+
+      try {
+        const res = await fetch("/api/queue/reorder", { method: "POST", body: formData });
+        const data = await res.json();
+        if (data.error) {
+          setLocalQueue(previousQueue);
+          toast.error(data.error || "Failed to reorder rankings");
+        }
+      } catch {
+        setLocalQueue(previousQueue);
+        toast.error("Network error — failed to reorder rankings");
+      }
+    },
+    [userTeam.id, season.id]
+  );
+
+  // ── Shared panel content ────────────────────────────────────────────────────
+
+  const allPlayersPanel = useMemo(
+    () => (
+      <div className="space-y-1">
+        {availableParticipants.map((p) => {
+          const inQueue = queuedParticipantIds.has(p.id);
+          return (
+            <div
+              key={p.id}
+              className="flex items-center gap-3 rounded-lg bg-muted/50 px-3 py-2"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="font-medium text-sm truncate">{p.name}</p>
+                <p className="text-xs text-muted-foreground">{p.sport.name}</p>
+              </div>
+              {p.vorpValue !== null && p.vorpValue !== undefined && (
+                <span className="text-xs text-muted-foreground tabular-nums shrink-0">
+                  {Number(p.vorpValue).toFixed(1)}
+                </span>
+              )}
+              {inQueue ? (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => handleRemoveByParticipantId(p.id)}
+                  className="h-7 text-xs shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                >
+                  Remove
+                </Button>
+              ) : (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleAdd(p.id)}
+                  className="h-7 text-xs shrink-0"
+                >
+                  + Add
+                </Button>
+              )}
+            </div>
+          );
+        })}
+        {availableParticipants.length === 0 && (
+          <p className="text-sm text-muted-foreground text-center py-12">
+            No participants have been added to this season yet.
+          </p>
+        )}
+      </div>
+    ),
+    [availableParticipants, queuedParticipantIds, handleAdd, handleRemoveByParticipantId]
+  );
+
+  const rankingsPanel = useMemo(
+    () => (
+      <>
+        <div className="rounded-lg border bg-card">
+          <QueueSection
+            queue={localQueue}
+            availableParticipants={availableParticipants}
+            canPick={false}
+            onRemoveFromQueue={handleRemove}
+            onReorder={handleReorder}
+            emptyMessage="Add players from All Players to set your ranking order."
+          />
+        </div>
+        {localQueue.length > 0 && (
+          <p className="text-xs text-muted-foreground mt-2 text-center">
+            Drag to reorder · Autopick follows this order
+          </p>
+        )}
+      </>
+    ),
+    [localQueue, availableParticipants, handleRemove, handleReorder]
+  );
+
+  // ── Render ──────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="container mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="mb-6">
+        <Link
+          to={`/leagues/${leagueId}`}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-3"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to {season.league.name}
+        </Link>
+        <div className="flex items-center gap-2 mb-1">
+          <ListOrdered className="h-6 w-6" />
+          <h1 className="text-2xl font-bold">Pre-Draft Rankings</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Rank the players you want. Your rankings carry into the live draft as your autopick
+          priority order.
+        </p>
+      </div>
+
+      {/* Mobile: tabs */}
+      <div className="lg:hidden">
+        <Tabs defaultValue="players">
+          <TabsList className="grid w-full grid-cols-2 mb-4">
+            <TabsTrigger value="players" className="flex items-center gap-1.5 text-xs">
+              <Users className="h-4 w-4" />
+              All Players
+            </TabsTrigger>
+            <TabsTrigger value="rankings" className="flex items-center gap-1.5 text-xs">
+              <ListOrdered className="h-4 w-4" />
+              My Rankings
+              {localQueue.length > 0 && (
+                <Badge variant="secondary" className="ml-1 h-4 px-1 text-[10px]">
+                  {localQueue.length}
+                </Badge>
+              )}
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="players">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-xs text-muted-foreground">Sorted by VORP</span>
+            </div>
+            {allPlayersPanel}
+          </TabsContent>
+          <TabsContent value="rankings">{rankingsPanel}</TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Desktop: side-by-side */}
+      <div className="hidden lg:grid gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="font-semibold">All Players</h2>
+            <span className="text-xs text-muted-foreground">Sorted by VORP</span>
+          </div>
+          {allPlayersPanel}
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="font-semibold">My Rankings</h2>
+            <Badge variant="secondary">{localQueue.length}</Badge>
+          </div>
+          {rankingsPanel}
+        </div>
+      </div>
+    </div>
+  );
+}

app/routes/leagues/$leagueId.tsx

@@ -210,6 +210,11 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
               draftTimezone={currentUserTimezone ?? season.overnightPauseTimezone}
               draftBoardHref={`/leagues/${league.id}/draft-board/${season.id}`}
               draftRoomHref={`/leagues/${league.id}/draft/${season.id}`}
+              queueBuilderHref={
+                myTeam && season.status === "pre_draft"
+                  ? `/leagues/${league.id}/draft-queue/${season.id}`
+                  : undefined
+              }
               userDraftPosition={userDraftPosition}
               overnightPauseMode={season.overnightPauseMode}
               overnightPauseStart={season.overnightPauseStart}

app/routes/leagues/__tests__/draft-queue-access.test.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect } from 'vitest';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const createMockSeason = (overrides: Partial<{
+  id: string;
+  leagueId: string;
+  status: 'pre_draft' | 'draft' | 'active' | 'completed';
+}> = {}) => ({
+  id: 'season-1',
+  leagueId: 'league-1',
+  year: 2025,
+  status: 'pre_draft' as const,
+  templateId: null,
+  draftRounds: 20,
+  flexSpots: 0,
+  draftDateTime: null,
+  draftInitialTime: 120,
+  draftIncrementTime: 15,
+  currentPickNumber: null,
+  draftStartedAt: null,
+  draftPaused: false,
+  inviteCode: 'TEST123',
+  pointsFor1st: 100,
+  pointsFor2nd: 70,
+  pointsFor3rd: 50,
+  pointsFor4th: 40,
+  pointsFor5th: 25,
+  pointsFor6th: 25,
+  pointsFor7th: 15,
+  pointsFor8th: 15,
+  createdAt: new Date('2025-01-01'),
+  updatedAt: new Date('2025-01-01'),
+  ...overrides,
+});
+
+type MockSeason = ReturnType<typeof createMockSeason>;
+
+// Mirrors the access-control and redirect logic from the pre-draft rankings loader.
+// Returns null for a successful load, a redirect URL, or an error object.
+function checkPreDraftRankingsAccess(opts: {
+  leagueId: string;
+  season: MockSeason;
+  userId: string | null;
+  hasTeam: boolean;
+}): { redirect: string } | { status: number; message: string } | null {
+  const { leagueId, season, userId, hasTeam } = opts;
+  const { id: seasonId } = season;
+
+  if (season.status === 'draft') {
+    return { redirect: `/leagues/${leagueId}/draft/${seasonId}` };
+  }
+  if (season.status === 'active' || season.status === 'completed') {
+    return { redirect: `/leagues/${leagueId}/draft-board/${seasonId}` };
+  }
+
+  if (!userId) {
+    return { status: 401, message: 'You must be logged in to set pre-draft rankings' };
+  }
+
+  if (!hasTeam) {
+    return { status: 403, message: 'You do not have a team in this season' };
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Redirect behaviour based on season status
+// ---------------------------------------------------------------------------
+
+describe('Pre-Draft Rankings Access - Season Status Redirects', () => {
+  it('redirects to the draft room when status is draft', () => {
+    const season = createMockSeason({ status: 'draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toEqual({ redirect: '/leagues/league-1/draft/season-1' });
+  });
+
+  it('redirects to the draft board when status is active', () => {
+    const season = createMockSeason({ status: 'active' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toEqual({ redirect: '/leagues/league-1/draft-board/season-1' });
+  });
+
+  it('redirects to the draft board when status is completed', () => {
+    const season = createMockSeason({ status: 'completed' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toEqual({ redirect: '/leagues/league-1/draft-board/season-1' });
+  });
+
+  it('does not redirect when status is pre_draft', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Authentication
+// ---------------------------------------------------------------------------
+
+describe('Pre-Draft Rankings Access - Authentication', () => {
+  it('returns 401 when no user is logged in', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: null,
+      hasTeam: false,
+    });
+    expect(result).toMatchObject({ status: 401 });
+  });
+
+  it('uses a descriptive 401 message', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: null,
+      hasTeam: false,
+    });
+    expect(result).toMatchObject({ message: 'You must be logged in to set pre-draft rankings' });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Team membership
+// ---------------------------------------------------------------------------
+
+describe('Pre-Draft Rankings Access - Team Membership', () => {
+  it('returns 403 for a logged-in user with no team in the season', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'outsider',
+      hasTeam: false,
+    });
+    expect(result).toMatchObject({ status: 403 });
+  });
+
+  it('uses a descriptive 403 message', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'outsider',
+      hasTeam: false,
+    });
+    expect(result).toMatchObject({ message: 'You do not have a team in this season' });
+  });
+
+  it('grants access to a logged-in user who owns a team', () => {
+    const season = createMockSeason({ status: 'pre_draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'owner-user',
+      hasTeam: true,
+    });
+    expect(result).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Redirect targets use the correct leagueId and seasonId
+// ---------------------------------------------------------------------------
+
+describe('Pre-Draft Rankings Access - Redirect URL Correctness', () => {
+  it('uses the leagueId from params in the redirect URL', () => {
+    const season = createMockSeason({ id: 'season-99', status: 'draft' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-42',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toEqual({ redirect: '/leagues/league-42/draft/season-99' });
+  });
+
+  it('uses the seasonId in the redirect URL', () => {
+    const season = createMockSeason({ id: 'season-77', status: 'active' });
+    const result = checkPreDraftRankingsAccess({
+      leagueId: 'league-1',
+      season,
+      userId: 'user-1',
+      hasTeam: true,
+    });
+    expect(result).toEqual({ redirect: '/leagues/league-1/draft-board/season-77' });
+  });
+});