From 1825c0e2710c0d830c82959dcc40acc11775974a Mon Sep 17 00:00:00 2001
From: Chris Parsons <chrisparsons1127@gmail.com>
Date: Sat, 25 Oct 2025 21:35:44 -0700
Subject: [PATCH] feat: Enhance AvailableParticipantsSection with icon buttons
 for queue actions and simplify draft button visibility logic

---
 .../draft/AvailableParticipantsSection.tsx    | 67 ++++++-------------
 1 file changed, 21 insertions(+), 46 deletions(-)

diff --git a/app/components/draft/AvailableParticipantsSection.tsx b/app/components/draft/AvailableParticipantsSection.tsx
index 064f607..c601882 100644
--- a/app/components/draft/AvailableParticipantsSection.tsx
+++ b/app/components/draft/AvailableParticipantsSection.tsx
@@ -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>