diff --git a/app/components/AutodraftSettings.tsx b/app/components/AutodraftSettings.tsx index 594edb7..2ab04c8 100644 --- a/app/components/AutodraftSettings.tsx +++ b/app/components/AutodraftSettings.tsx @@ -1,8 +1,9 @@ import { useState, useEffect, useRef } from "react"; -import { Check, Info } from "lucide-react"; +import { Check, Info, ChevronDown } from "lucide-react"; import { toast } from "sonner"; import { Label } from "~/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover"; +import { Button } from "~/components/ui/button"; type AutodraftMode = "next_pick" | "while_on"; @@ -90,6 +91,221 @@ export function getAutodraftLabel( return OPTIONS[toAutodraftState(isEnabled, mode, queueOnly)].label; } +interface CompactAutodraftBadgeProps { + isEnabled: boolean; + mode: AutodraftMode; + queueOnly: boolean; + isMyTurn: boolean; + showChevron?: boolean; +} + +export function CompactAutodraftBadge({ + isEnabled, + mode, + queueOnly, + isMyTurn, + showChevron = false, +}: CompactAutodraftBadgeProps) { + const state = toAutodraftState(isEnabled, mode, queueOnly); + const { label } = OPTIONS[state]; + const isOff = state === "off"; + + return ( +
+ Autodraft: + + {label} + {showChevron && } + + {isMyTurn && ( + Your turn! + )} +
+ ); +} + +interface AutodraftBadgeWithPopoverProps { + seasonId: string; + teamId: string; + isEnabled: boolean; + mode: AutodraftMode; + queueOnly: boolean; + isMyTurn: boolean; + onUpdate: (isEnabled: boolean, mode: AutodraftMode, queueOnly: boolean) => void; +} + +function AutodraftOptions({ + seasonId, + teamId, + isEnabled, + mode, + queueOnly, + isMyTurn, + onUpdate, +}: Omit & { + seasonId: string; + teamId: string; +}) { + const [localState, setLocalState] = useState( + toAutodraftState(isEnabled, mode, queueOnly) + ); + const abortRef = useRef(null); + + useEffect(() => { + setLocalState(toAutodraftState(isEnabled, mode, queueOnly)); + }, [isEnabled, mode, queueOnly]); + + const sendUpdate = async (newState: AutodraftState) => { + abortRef.current?.abort(); + abortRef.current = new AbortController(); + + const option = OPTIONS[newState]; + + try { + const formData = new FormData(); + formData.append("seasonId", seasonId); + formData.append("teamId", teamId); + formData.append("isEnabled", option.isEnabled.toString()); + formData.append("mode", option.mode); + formData.append("queueOnly", option.queueOnly.toString()); + + const response = await fetch("/api/autodraft/update", { + method: "POST", + body: formData, + signal: abortRef.current.signal, + }); + + if (response.ok) { + onUpdate(option.isEnabled, option.mode, option.queueOnly); + toast.success( + option.isEnabled ? `Autodraft set to "${option.label}"` : "Autodraft turned off" + ); + } else { + setLocalState(toAutodraftState(isEnabled, mode, queueOnly)); + toast.error("Failed to save autodraft settings"); + } + } catch (error) { + if (error instanceof Error && error.name === "AbortError") return; + setLocalState(toAutodraftState(isEnabled, mode, queueOnly)); + toast.error("Failed to save autodraft settings"); + } + }; + + const handleStateChange = (newState: AutodraftState) => { + if (newState === localState || isMyTurn) return; + setLocalState(newState); + sendUpdate(newState); + }; + + const isDisabled = isMyTurn; + + return ( +
+ {OPTION_ORDER.map((state) => { + const { label } = OPTIONS[state]; + const isActive = localState === state; + return ( + + ); + })} + {isMyTurn && ( +

+ You're on the clock! +

+ )} +
+ ); +} + +export function AutodraftBadgeWithPopover({ + seasonId, + teamId, + isEnabled, + mode, + queueOnly, + isMyTurn, + onUpdate, +}: AutodraftBadgeWithPopoverProps) { + const [open, setOpen] = useState(false); + + return ( +
+ + + + + + + + + + + + + + +

Autodraft Options

+
+ {OPTION_ORDER.map((state) => { + const { label, desc } = OPTIONS[state]; + return ( +
+

{label}

+

{desc}

+
+ ); + })} +
+ + +
+ ); +} + interface AutodraftSettingsProps { seasonId: string; teamId: string; diff --git a/app/components/DraftSidebar.tsx b/app/components/DraftSidebar.tsx index dd6f9ae..0bbd72d 100644 --- a/app/components/DraftSidebar.tsx +++ b/app/components/DraftSidebar.tsx @@ -64,7 +64,7 @@ export function DraftSidebar({
; - seasonId: string; - teamId: string; isMyTurn: boolean; canPick: boolean; - userAutodraft: { - isEnabled: boolean; - mode: "next_pick" | "while_on"; - queueOnly: boolean; - }; onRemoveFromQueue: (queueId: string) => void; - onAutodraftUpdate: (isEnabled: boolean, mode: "next_pick" | "while_on", queueOnly: boolean) => void; onReorder: (participantIds: string[]) => void; onMakePick?: (participantId: string) => void; } @@ -131,13 +122,9 @@ const SortableQueueItem = memo(function SortableQueueItem({ export const QueueSection = memo(function QueueSection({ queue, availableParticipants, - seasonId, - teamId, isMyTurn, canPick, - userAutodraft, onRemoveFromQueue, - onAutodraftUpdate, onReorder, onMakePick, }: QueueSectionProps) { @@ -187,7 +174,7 @@ export const QueueSection = memo(function QueueSection({ items={queueIds} strategy={verticalListSortingStrategy} > -
+
{queue.map((item, index) => { const participant = participantMap.get(item.participantId); return ( @@ -207,17 +194,6 @@ export const QueueSection = memo(function QueueSection({ )} - - {/* Autodraft Settings */} -
); }); diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx index 65971b7..c828a9a 100644 --- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx +++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx @@ -27,7 +27,7 @@ import { getTeamForPick } from "~/lib/draft-order"; import { useDraftNotifications } from "~/hooks/useDraftNotifications"; import { useMediaQuery } from "~/hooks/useMediaQuery"; import { NotificationSettings } from "~/components/NotificationSettings"; -import { AutodraftSettings, getAutodraftLabel } from "~/components/AutodraftSettings"; +import { AutodraftSettings, getAutodraftLabel, AutodraftBadgeWithPopover } from "~/components/AutodraftSettings"; import { toast } from "sonner"; import { formatClockTime, getTimerColorClass } from "~/lib/draft-timer"; import { Users, LayoutGrid, ListChecks, Settings, ListOrdered } from "lucide-react"; @@ -1581,13 +1581,9 @@ export default function DraftRoom() { ? { queue, availableParticipants, - seasonId: season.id, - teamId: userTeam.id, isMyTurn, canPick, - userAutodraft, onRemoveFromQueue: handleRemoveFromQueue, - onAutodraftUpdate: handleAutodraftUpdate, onReorder: handleReorderQueue, onMakePick: handleMakePick, } @@ -1723,6 +1719,38 @@ export default function DraftRoom() {
)} + {/* Desktop Tab Navigation Row */} +
+ + setActiveTab(value as "participants" | "board" | "rosters" | "summary") + } + > + + Available Participants + Draft Board + Rosters + Summary + + + {userTeam && ( + + )} +
+ {/* Main Content — single layout tree based on isMobile to avoid duplicate component instances */}
{isMobile ? ( @@ -1819,44 +1847,18 @@ export default function DraftRoom() { )}
- - setActiveTab(value as "participants" | "board" | "rosters" | "summary") - } - className="h-full flex flex-col" - > -
-
- - Available Participants - Draft Board - Rosters - Summary - -
-
- - - - - - - - - - - - - - - - - + {activeTab === "participants" && ( + + )} + {activeTab === "board" && ( + + )} + {activeTab === "rosters" && ( + + )} + {activeTab === "summary" && ( + + )}
)}