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>
This commit is contained in:
Chris Parsons 2026-02-24 10:37:21 -08:00 committed by GitHub
parent 3343e7a405
commit b0521bb7f3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 25 deletions

View file

@ -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>

View file

@ -1090,7 +1090,6 @@ export default function DraftRoom() {
? {
queue,
availableParticipants,
eligibility,
seasonId: season.id,
teamId: userTeam.id,
isMyTurn,