chrisp
841760541d
## Summary
- **Discord snake draft fix**: pick notifications now show the sequential pick-in-round (e.g. "Round 2, Pick 9") rather than the snake-adjusted slot position ("Round 2, Pick 5"). Also removes the now-unused \`pickInRound\` param from \`notifyPickMadeOnDiscord\` and adds a regression test for the 13-team case.
- **League card**: league name in draft-in-progress cards is now a link to the league homepage (the Enter Draft button still goes to the draft room).
- **Overnight pause label**: shortened to "🌙 Pause" — the "Resumes 4:00 AM" line below already provides context, so "Overnight" was just causing wrapping.
- **Queue & Picks backgrounds**: items use \`bg-card\` instead of \`bg-muted\` for better visual separation from the panel background.
## Test plan
- [x] Discord: in a snake draft, verify pick #22 of 13 shows "Round 2, Pick 9" in Discord
- [x] League card: dashboard with a draft-in-progress league — click name → league homepage, click Enter Draft → draft room
- [x] Overnight pause: pause a draft overnight — cell shows "🌙 Pause" on one line, "Resumes X:XX" below
- [x] Queue/Picks: open draft room and confirm queue items and recent picks visually pop from the sidebar background
- [x] Unit tests: `npm run test:run` passes (13 discord tests)
Co-authored-by: Chris Parsons <chrisparsons1127@gmail.com>
Reviewed-on: #2
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { memo } from "react";
|
|
import { Badge } from "~/components/ui/badge";
|
|
|
|
interface SidebarRecentPicksProps {
|
|
picks: Array<{
|
|
id: string;
|
|
pickNumber: number;
|
|
round: number;
|
|
participant: {
|
|
name: string;
|
|
};
|
|
sport: {
|
|
name: string;
|
|
};
|
|
team: {
|
|
name: string;
|
|
};
|
|
}>;
|
|
}
|
|
|
|
export const SidebarRecentPicks = memo(function SidebarRecentPicks({ picks }: SidebarRecentPicksProps) {
|
|
return (
|
|
<div className="p-4">
|
|
{picks.length === 0 ? (
|
|
<p className="text-muted-foreground text-sm text-center py-8">
|
|
No picks yet...
|
|
</p>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{picks
|
|
.slice()
|
|
.toReversed()
|
|
.map((pick) => (
|
|
<div
|
|
key={pick.id}
|
|
className="flex items-center justify-between p-2 bg-white/[0.06] rounded-lg text-sm"
|
|
>
|
|
<div className="flex items-start gap-2 min-w-0 flex-1">
|
|
<Badge variant="outline" className="text-xs flex-shrink-0">
|
|
#{pick.pickNumber}
|
|
</Badge>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-semibold truncate">{pick.participant.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{pick.sport.name}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{pick.team.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|