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