From b0521bb7f3277bd2e27391c7293552b6ef44e647 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Tue, 24 Feb 2026 10:37:21 -0800
Subject: [PATCH] feat: show sport name in draft queue items (#36)

- Display sport name as muted subtitle under participant name to distinguish
  players across sports (e.g. Florida NCAAM vs Florida NCAAW)
- Remove unused eligibility prop from QueueSection
- Deduplicate double .find() per queue item into a single lookup

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/draft/QueueSection.tsx         | 43 ++++++++-----------
 .../leagues/$leagueId.draft.$seasonId.tsx     |  1 -
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/app/components/draft/QueueSection.tsx b/app/components/draft/QueueSection.tsx
index a548575..6a1fec3 100644
--- a/app/components/draft/QueueSection.tsx
+++ b/app/components/draft/QueueSection.tsx
@@ -27,17 +27,8 @@ interface QueueSectionProps {
   availableParticipants: Array<{
     id: string;
     name: string;
+    sport: { name: string };
   }>;
-  eligibility: {
-    flexPicksUsed: number;
-    flexPicksAvailable: number;
-    picksBySport: Record<string, number>;
-    sportAvailability: Record<
-      string,
-      { sportName: string; sportId: string }
-    >;
-    ineligibleReasons: Record<string, string>;
-  } | null;
   seasonId: string;
   teamId: string;
   isMyTurn: boolean;
@@ -55,11 +46,13 @@ function SortableQueueItem({
   item,
   index,
   participantName,
+  sportName,
   onRemove,
 }: {
   item: { id: string; participantId: string };
   index: number;
   participantName: string;
+  sportName?: string;
   onRemove: () => void;
 }) {
   const {
@@ -104,6 +97,7 @@ function SortableQueueItem({
         <Badge variant="default" className="text-xs">{index + 1}</Badge>
         <div>
           <p className="font-semibold text-sm">{participantName}</p>
+          {sportName && <p className="text-xs text-muted-foreground">{sportName}</p>}
         </div>
       </div>
       <Button
@@ -122,7 +116,6 @@ function SortableQueueItem({
 export function QueueSection({
   queue,
   availableParticipants,
-  eligibility,
   seasonId,
   teamId,
   isMyTurn,
@@ -169,19 +162,21 @@ export function QueueSection({
             strategy={verticalListSortingStrategy}
           >
             <div className="space-y-1.5 mb-4">
-              {queue.map((item, index) => (
-                <SortableQueueItem
-                  key={item.id}
-                  item={item}
-                  index={index}
-                  participantName={
-                    availableParticipants.find(
-                      (p) => p.id === item.participantId
-                    )?.name || "Unknown"
-                  }
-                  onRemove={() => onRemoveFromQueue(item.id)}
-                />
-              ))}
+              {queue.map((item, index) => {
+                const participant = availableParticipants.find(
+                  (p) => p.id === item.participantId
+                );
+                return (
+                  <SortableQueueItem
+                    key={item.id}
+                    item={item}
+                    index={index}
+                    participantName={participant?.name || "Unknown"}
+                    sportName={participant?.sport.name}
+                    onRemove={() => onRemoveFromQueue(item.id)}
+                  />
+                );
+              })}
             </div>
           </SortableContext>
         </DndContext>
diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
index 68ecf4a..17631dd 100644
--- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
@@ -1090,7 +1090,6 @@ export default function DraftRoom() {
     ? {
         queue,
         availableParticipants,
-        eligibility,
         seasonId: season.id,
         teamId: userTeam.id,
         isMyTurn,