chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Enhance AvailableParticipantsSection with icon buttons for queue actions and simplify draft button visibility logic

Browse source
This commit is contained in:
Chris Parsons 2025-10-25 21:35:44 -07:00
parent 98b84095fd
commit 1825c0e271
1 changed files with 21 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
app/components/draft/AvailableParticipantsSection.tsx
View file

@ -1,5 +1,6 @@
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { ListPlus, ListX } from "lucide-react";
interface AvailableParticipantsSectionProps {
participants: Array<{
@ -180,21 +181,9 @@ export function AvailableParticipantsSection({
{hasTeam && (
<td className="p-3 text-right">
<div className="flex gap-2 justify-end items-center">
{/* Pick button - only show if it's your turn and participant not drafted */}
{canPick && !isDrafted && (
{!isDrafted && (
<>
<Button
variant="default"
size="sm"
onClick={() => onMakePick(participant.id)}
disabled={!isEligible}
title={
!isEligible ? ineligibleReason : undefined
}
>
Pick
</Button>
{/* Queue icon button next to Pick */}
{/* Queue icon button */}
{!isInQueue ? (
<Button
variant="ghost"
@ -207,7 +196,7 @@ export function AvailableParticipantsSection({
}
disabled={!isEligible}
>
<span className="text-lg">+</span>
<ListPlus className="h-4 w-4" />
</Button>
) : (
<Button
@ -224,40 +213,26 @@ export function AvailableParticipantsSection({
}}
title="Remove from queue"
>
<span className="text-lg">✓</span>
<ListX className="h-4 w-4" />
</Button>
)}
</>
)}
{/* Queue buttons - only show if not your turn */}
{!canPick && !isDrafted && !isInQueue && (
<Button
variant="outline"
size="sm"
onClick={() => onAddToQueue(participant.id)}
disabled={!isEligible}
title={!isEligible ? ineligibleReason : undefined}
>
Add to Queue
</Button>
)}
{!canPick && !isDrafted && isInQueue && (
<Button
variant="ghost"
size="sm"
onClick={() => {
const queueItem = queue.find(
(item) =>
item.participantId === participant.id
);
if (queueItem) {
onRemoveFromQueue(queueItem.id);
{/* Draft button - always visible, disabled when not your turn */}
<Button
variant="default"
size="sm"
onClick={() => onMakePick(participant.id)}
disabled={!canPick || !isEligible}
title={
!canPick
? "Not your turn"
: !isEligible
? ineligibleReason
: undefined
}
}}
>
Remove
</Button>
>
Draft
</Button>
</>
)}
</div>
</td>