77e408cad8
- Add bottom nav bar (Lobby/Board/Roster/Controls) with 56px touch targets - Add mobile card list view in AvailableParticipantsSection with 44px Draft/Queue buttons - Add round labels and sticky header row to DraftGridSection grid - Add mobile Sheet for commissioner actions in DraftGridSection (replaces right-click context menu) - Use useMediaQuery to render a single layout tree, eliminating duplicate component instances (previously both desktop and mobile layouts were always in the DOM) - Add compact header on mobile (text-lg vs text-3xl); hide commissioner buttons and Exit link in header on mobile — surfaced in Controls tab instead - Add "On Clock" bar on mobile showing current team and timer during active draft - Add "your turn" indicator dot on Lobby bottom nav tab - Default mobile tab to "board" for commissioner-only viewers - Fix sticky corner cell z-index in TeamsDraftedGrid (z-10 → z-20) - Fix round column spacer in DraftGridSection header not being sticky-left - Extract shared prop objects to eliminate copy-paste between layouts - Extract getParticipantState() helper to deduplicate participant render logic - Move MobileSheetData type and MOBILE_TABS array to module scope - Remove unnecessary non-null assertions in DraftGridSection Sheet handlers Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
379 lines
14 KiB
TypeScript
379 lines
14 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { ListPlus, ListX } from "lucide-react";
|
|
|
|
function getParticipantState(
|
|
participant: { id: string; sport: { id: string } },
|
|
draftedParticipantIds: Set<string>,
|
|
queue: Array<{ participantId: string }>,
|
|
eligibility: {
|
|
eligibleSportIds: Set<string>;
|
|
ineligibleReasons: Record<string, string>;
|
|
} | null
|
|
) {
|
|
const isDrafted = draftedParticipantIds.has(participant.id);
|
|
const isInQueue = queue.some((item) => item.participantId === participant.id);
|
|
const isEligible = eligibility
|
|
? eligibility.eligibleSportIds.has(participant.sport.id)
|
|
: true;
|
|
const ineligibleReason = eligibility?.ineligibleReasons[participant.sport.id];
|
|
return { isDrafted, isInQueue, isEligible, ineligibleReason };
|
|
}
|
|
|
|
interface AvailableParticipantsSectionProps {
|
|
participants: Array<{
|
|
id: string;
|
|
name: string;
|
|
sport: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
}>;
|
|
searchQuery: string;
|
|
sportFilter: string;
|
|
hideDrafted: boolean;
|
|
hideIneligible: boolean;
|
|
uniqueSports: string[];
|
|
draftedParticipantIds: Set<string>;
|
|
queue: Array<{ id: string; participantId: string }>;
|
|
eligibility: {
|
|
eligibleSportIds: Set<string>;
|
|
ineligibleReasons: Record<string, string>;
|
|
} | null;
|
|
canPick: boolean;
|
|
hasTeam: boolean;
|
|
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;
|
|
}
|
|
|
|
export function AvailableParticipantsSection({
|
|
participants,
|
|
searchQuery,
|
|
sportFilter,
|
|
hideDrafted,
|
|
hideIneligible,
|
|
uniqueSports,
|
|
draftedParticipantIds,
|
|
queue,
|
|
eligibility,
|
|
canPick,
|
|
hasTeam,
|
|
onSearchChange,
|
|
onSportFilterChange,
|
|
onHideDraftedChange,
|
|
onHideIneligibleChange,
|
|
onMakePick,
|
|
onAddToQueue,
|
|
onRemoveFromQueue,
|
|
}: AvailableParticipantsSectionProps) {
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="px-4 pt-4 pb-2 flex-shrink-0">
|
|
<div className="space-y-2">
|
|
{/* Search Input */}
|
|
<input
|
|
type="text"
|
|
placeholder="Search participants..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-md text-sm bg-background text-foreground"
|
|
/>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{/* Sport Filter Dropdown */}
|
|
<select
|
|
value={sportFilter}
|
|
onChange={(e) => onSportFilterChange(e.target.value)}
|
|
className="flex-1 min-w-[120px] px-3 py-2 border rounded-md text-sm bg-background text-foreground"
|
|
>
|
|
<option value="all">All Sports</option>
|
|
{uniqueSports.map((sport) => (
|
|
<option key={sport} value={sport}>
|
|
{sport}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* Show/Hide Drafted Toggle */}
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
|
|
<input
|
|
type="checkbox"
|
|
checked={!hideDrafted}
|
|
onChange={(e) => onHideDraftedChange(!e.target.checked)}
|
|
className="rounded"
|
|
/>
|
|
<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>
|
|
|
|
{/* Mobile Card List - visible on mobile only */}
|
|
<div className="flex md:hidden flex-1 overflow-y-auto flex-col gap-2 px-4 py-2">
|
|
{participants.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground text-sm">
|
|
No participants found
|
|
</div>
|
|
) : (
|
|
participants.map((participant) => {
|
|
const { isDrafted, isInQueue, isEligible, ineligibleReason } =
|
|
getParticipantState(participant, draftedParticipantIds, queue, eligibility);
|
|
|
|
return (
|
|
<div
|
|
key={participant.id}
|
|
className={`bg-card border rounded-lg p-3 flex items-start justify-between gap-3 transition-colors ${
|
|
isDrafted
|
|
? "bg-muted/50 opacity-60"
|
|
: !isEligible
|
|
? "bg-destructive/10 opacity-75"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="flex flex-col gap-1 min-w-0">
|
|
<span
|
|
className={`font-semibold text-sm truncate ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
|
>
|
|
{participant.name}
|
|
</span>
|
|
<div className="flex flex-wrap gap-1 items-center">
|
|
<Badge variant="outline" className="text-xs">
|
|
{participant.sport.name}
|
|
</Badge>
|
|
{isDrafted && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
Drafted
|
|
</Badge>
|
|
)}
|
|
{!isDrafted && !isEligible && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="text-xs"
|
|
title={ineligibleReason}
|
|
>
|
|
Ineligible
|
|
</Badge>
|
|
)}
|
|
{isInQueue && !isDrafted && isEligible && (
|
|
<Badge variant="default" className="text-xs">
|
|
Queued
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{hasTeam && !isDrafted && (
|
|
<div className="flex gap-2 flex-shrink-0">
|
|
{!isInQueue ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-h-[44px] min-w-[44px]"
|
|
onClick={() => onAddToQueue(participant.id)}
|
|
title={!isEligible ? ineligibleReason : "Add to queue"}
|
|
disabled={!isEligible}
|
|
>
|
|
<ListPlus className="h-4 w-4" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-h-[44px] min-w-[44px]"
|
|
onClick={() => {
|
|
const queueItem = queue.find(
|
|
(item) => item.participantId === participant.id
|
|
);
|
|
if (queueItem) {
|
|
onRemoveFromQueue(queueItem.id);
|
|
}
|
|
}}
|
|
title="Remove from queue"
|
|
>
|
|
<ListX className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="min-h-[44px]"
|
|
onClick={() => onMakePick(participant.id)}
|
|
disabled={!canPick || !isEligible}
|
|
title={
|
|
!canPick
|
|
? "Not your turn"
|
|
: !isEligible
|
|
? ineligibleReason
|
|
: undefined
|
|
}
|
|
>
|
|
Draft
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop Table - hidden on mobile */}
|
|
<div className="hidden md:flex flex-1 overflow-hidden">
|
|
<div className="h-full w-full overflow-y-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted sticky top-0">
|
|
<tr>
|
|
<th className="text-left p-3 font-semibold">Participant</th>
|
|
<th className="text-left p-3 font-semibold">Sport</th>
|
|
{hasTeam && (
|
|
<th className="text-right p-3 font-semibold">Queue</th>
|
|
)}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{participants.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={hasTeam ? 3 : 2}
|
|
className="text-center py-8 text-muted-foreground"
|
|
>
|
|
No participants found
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
participants.map((participant) => {
|
|
const { isDrafted, isInQueue, isEligible, ineligibleReason } =
|
|
getParticipantState(participant, draftedParticipantIds, queue, eligibility);
|
|
|
|
return (
|
|
<tr
|
|
key={participant.id}
|
|
className={`border-t transition-colors ${
|
|
isDrafted
|
|
? "bg-muted/50 opacity-60"
|
|
: !isEligible
|
|
? "bg-destructive/10 opacity-75"
|
|
: "hover:bg-muted/50"
|
|
}`}
|
|
title={
|
|
!isEligible && !isDrafted ? ineligibleReason : undefined
|
|
}
|
|
>
|
|
<td className="p-3">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`font-medium ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
|
|
>
|
|
{participant.name}
|
|
</span>
|
|
{isDrafted && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
Drafted
|
|
</Badge>
|
|
)}
|
|
{!isDrafted && !isEligible && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="text-xs"
|
|
title={ineligibleReason}
|
|
>
|
|
Ineligible
|
|
</Badge>
|
|
)}
|
|
{isInQueue && !isDrafted && isEligible && (
|
|
<Badge variant="default" className="text-xs">
|
|
Queued
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="p-3 text-muted-foreground">
|
|
{participant.sport.name}
|
|
</td>
|
|
{hasTeam && (
|
|
<td className="p-3 text-right">
|
|
<div className="flex gap-2 justify-end items-center">
|
|
{!isDrafted && (
|
|
<>
|
|
{/* Queue icon button */}
|
|
{!isInQueue ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onAddToQueue(participant.id)}
|
|
title={
|
|
!isEligible
|
|
? ineligibleReason
|
|
: "Add to queue"
|
|
}
|
|
disabled={!isEligible}
|
|
>
|
|
<ListPlus className="h-4 w-4" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
const queueItem = queue.find(
|
|
(item) =>
|
|
item.participantId === participant.id
|
|
);
|
|
if (queueItem) {
|
|
onRemoveFromQueue(queueItem.id);
|
|
}
|
|
}}
|
|
title="Remove from queue"
|
|
>
|
|
<ListX className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{/* 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
|
|
}
|
|
>
|
|
Draft
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|