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

@@ -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) => (
+              {queue.map((item, index) => {
-                <SortableQueueItem
+                const participant = availableParticipants.find(
-                  key={item.id}
+                  (p) => p.id === item.participantId
-                  item={item}
+                );
-                  index={index}
+                return (
-                  participantName={
+                  <SortableQueueItem
-                    availableParticipants.find(
+                    key={item.id}
-                      (p) => p.id === item.participantId
+                    item={item}
-                    )?.name || "Unknown"
+                    index={index}
-                  }
+                    participantName={participant?.name || "Unknown"}
-                  onRemove={() => onRemoveFromQueue(item.id)}
+                    sportName={participant?.sport.name}
-                />
+                    onRemove={() => onRemoveFromQueue(item.id)}
-              ))}
+                  />
+                );
+              })}
             </div>
           </SortableContext>
         </DndContext>

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,