feat: Add hide ineligible participants functionality in AvailableParticipantsSection

app/components/draft/AvailableParticipantsSection.tsx

@@ -15,6 +15,7 @@ interface AvailableParticipantsSectionProps {
   searchQuery: string;
   sportFilter: string;
   hideDrafted: boolean;
+  hideIneligible: boolean;
   uniqueSports: string[];
   draftedParticipantIds: Set<string>;
   queue: Array<{ id: string; participantId: string }>;
@@ -27,6 +28,7 @@ interface AvailableParticipantsSectionProps {
   onSearchChange: (query: string) => void;
   onSportFilterChange: (sport: string) => void;
   onHideDraftedChange: (hide: boolean) => void;
+  onHideIneligibleChange: (hide: boolean) => void;
   onMakePick: (participantId: string) => void;
   onAddToQueue: (participantId: string) => void;
   onRemoveFromQueue: (queueId: string) => void;
@@ -37,6 +39,7 @@ export function AvailableParticipantsSection({
   searchQuery,
   sportFilter,
   hideDrafted,
+  hideIneligible,
   uniqueSports,
   draftedParticipantIds,
   queue,
@@ -46,6 +49,7 @@ export function AvailableParticipantsSection({
   onSearchChange,
   onSportFilterChange,
   onHideDraftedChange,
+  onHideIneligibleChange,
   onMakePick,
   onAddToQueue,
   onRemoveFromQueue,
@@ -88,6 +92,19 @@ export function AvailableParticipantsSection({
               />
               <span>Show Drafted</span>
             </label>
+
+            {/* Show/Hide Ineligible Toggle - only show if user has a team */}
+            {hasTeam && eligibility && (
+              <label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
+                <input
+                  type="checkbox"
+                  checked={!hideIneligible}
+                  onChange={(e) => onHideIneligibleChange(!e.target.checked)}
+                  className="rounded"
+                />
+                <span>Show Ineligible</span>
+              </label>
+            )}
           </div>
         </div>
       </div>

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -17,7 +17,7 @@ import { AvailableParticipantsSection } from "~/components/draft/AvailablePartic
 import { SidebarRecentPicks } from "~/components/draft/SidebarRecentPicks";
 import { DraftGridSection } from "~/components/draft/DraftGridSection";
 import { ConnectionOverlay } from "~/components/draft/ConnectionOverlay";
-import { calculateDraftEligibility, getEligibilitySummary } from "~/lib/draft-eligibility";
+import { calculateDraftEligibility } from "~/lib/draft-eligibility";
 import { toast } from "sonner";
 
 export async function loader(args: any) {
@@ -202,6 +202,7 @@ export default function DraftRoom() {
   const [currentPick, setCurrentPick] = useState(season.currentPickNumber || 1);
   const [searchQuery, setSearchQuery] = useState("");
   const [hideDrafted, setHideDrafted] = useState(true);
+  const [hideIneligible, setHideIneligible] = useState(true);
   const [sportFilter, setSportFilter] = useState<string>("all");
   const [queue, setQueue] = useState(userQueue);
   const [isPaused, setIsPaused] = useState(season.draftPaused || false);
@@ -671,29 +672,6 @@ export default function DraftRoom() {
   );
   const canPick = isMyTurn && season.status === "draft"; // Only team owner on their turn
 
-  // Format timer display
-  const formatTime = (seconds: number | null) => {
-    if (seconds === null) return "--:--";
-
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-
-    if (hours > 0) {
-      return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
-    }
-    return `${minutes}:${String(secs).padStart(2, "0")}`;
-  };
-
-  // Get timer color based on time remaining
-  const getTimerColor = (seconds: number | null) => {
-    if (seconds === null) return "text-muted-foreground";
-    if (seconds > 60) return "text-green-600 dark:text-green-400";
-    if (seconds > 30) return "text-yellow-600 dark:text-yellow-400";
-    if (seconds > 10) return "text-red-600 dark:text-red-400";
-    return "text-red-600 dark:text-red-400 animate-pulse";
-  };
-
   // Generate snake draft grid structure
   const generateDraftGrid = () => {
     const teamCount = draftSlots.length;
@@ -747,13 +725,20 @@ export default function DraftRoom() {
     new Set(availableParticipants.map((p: any) => p.sport.name))
   ).sort();
 
-  // Filter participants based on search, sport, and drafted status
+  // Filter participants based on search, sport, drafted status, and eligibility
   const filteredParticipants = availableParticipants.filter(
     (participant: any) => {
       // Drafted filter - hide drafted participants by default
       if (hideDrafted && draftedParticipantIds.has(participant.id)) {
         return false;
       }
+      // Eligibility filter - hide ineligible participants by default (if user has a team)
+      if (hideIneligible && eligibility) {
+        const isEligible = eligibility.eligibleSportIds.has(participant.sport.id);
+        if (!isEligible) {
+          return false;
+        }
+      }
       // Search filter
       if (
         searchQuery &&
@@ -922,6 +907,7 @@ export default function DraftRoom() {
                   searchQuery={searchQuery}
                   sportFilter={sportFilter}
                   hideDrafted={hideDrafted}
+                  hideIneligible={hideIneligible}
                   uniqueSports={uniqueSports}
                   draftedParticipantIds={draftedParticipantIds}
                   queue={queue}
@@ -931,6 +917,7 @@ export default function DraftRoom() {
                   onSearchChange={setSearchQuery}
                   onSportFilterChange={setSportFilter}
                   onHideDraftedChange={setHideDrafted}
+                  onHideIneligibleChange={setHideIneligible}
                   onMakePick={handleMakePick}
                   onAddToQueue={handleAddToQueue}
                   onRemoveFromQueue={handleRemoveFromQueue}