Fix snake draft Discord pick numbering and small UX tweaks (#2)

## 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

app/components/draft/DraftPickCell.tsx

@@ -75,7 +75,7 @@ function DraftPickCell({
   if (seasonStatus === "pre_draft") {
     currentLabel = "Up Next";
   } else if (seasonStatus === "draft" && isOvernightPause) {
-    currentLabel = "🌙 Overnight Pause";
+    currentLabel = "🌙 Pause";
   } else if (seasonStatus === "draft" && draftPaused) {
     currentLabel = "Paused Draft";
   }

app/components/draft/QueueSection.tsx

@@ -77,7 +77,7 @@ const SortableQueueItem = memo(function SortableQueueItem({
       style={style}
       {...attributes}
       className={`p-2 rounded-lg ${
-        canPick ? "bg-electric/10 border border-electric/40" : "bg-muted"
+        canPick ? "bg-electric/10 border border-electric/40" : "bg-white/[0.06]"
       }`}
     >
       <div className="flex items-center gap-2">

app/components/draft/SidebarRecentPicks.tsx

@@ -33,9 +33,9 @@ export const SidebarRecentPicks = memo(function SidebarRecentPicks({ picks }: Si
             .map((pick) => (
               <div
                 key={pick.id}
-                className="flex items-center justify-between p-2 bg-muted rounded-lg text-sm"
+                className="flex items-center justify-between p-2 bg-white/[0.06] rounded-lg text-sm"
               >
-                <div className="flex items-center gap-2 min-w-0 flex-1">
+                <div className="flex items-start gap-2 min-w-0 flex-1">
                   <Badge variant="outline" className="text-xs flex-shrink-0">
                     #{pick.pickNumber}
                   </Badge>

app/components/league/LeagueRow.tsx

@@ -65,7 +65,7 @@ function DraftRow({ leagueId, leagueName, seasonId, picksUntilMyTurn }: LeagueRo
     <div className="flex items-start gap-3 rounded-lg border border-primary/40 bg-primary/10 px-3 py-3 sm:px-5 sm:py-4">
       <LeagueAvatar leagueId={leagueId} leagueName={leagueName} />
       <div className="flex-1 min-w-0">
-        <p className="font-semibold leading-tight truncate">{leagueName}</p>
+        <Link to={`/leagues/${leagueId}`} className="font-semibold leading-tight truncate hover:underline block">{leagueName}</Link>
         <div className="flex items-center gap-2 mt-0.5 flex-wrap">
           <div className="flex items-center gap-1.5">
             <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-electric" />

app/models/draft-utils.ts

@@ -330,7 +330,7 @@ export async function getTopAvailableParticipant(
 export function calculatePickInfo(
   pickNumber: number,
   teamCount: number
-): { round: number; pickInRound: number; teamIndex: number } {
+): { round: number; pickInRound: number; teamIndex: number; rawPickInRound: number } {
   const round = Math.ceil(pickNumber / teamCount);
   const rawPickInRound = ((pickNumber - 1) % teamCount) + 1;
 
@@ -339,7 +339,7 @@ export function calculatePickInfo(
   const teamIndex = isOddRound ? rawPickInRound - 1 : teamCount - rawPickInRound;
   const pickInRound = teamIndex + 1; // snake-adjusted, 1-based, matches draftOrder
 
-  return { round, pickInRound, teamIndex };
+  return { round, pickInRound, teamIndex, rawPickInRound };
 }
 
 /**
@@ -602,7 +602,7 @@ export async function executeAutoPick(params: {
       };
     }
 
-    const { round: currentRound, pickInRound } = calculatePickInfo(pickNumber, totalTeams);
+    const { round: currentRound, pickInRound, rawPickInRound } = calculatePickInfo(pickNumber, totalTeams);
 
     // Determine pickedByUserId based on trigger
     const pickedByUserId = triggeredBy === "commissioner"
@@ -854,7 +854,7 @@ export async function executeAutoPick(params: {
         sportName: participantToPick.sportsSeason.sport.name,
         pickNumber,
         round: currentRound,
-        pickInRound,
+        rawPickInRound,
         isDraftComplete,
         totalTeams,
         draftSlots: draftSlots.map((s) => ({ teamId: s.teamId, draftOrder: s.draftOrder })),

app/routes/api/draft.make-pick.ts

@@ -62,7 +62,7 @@ export async function action(args: ActionFunctionArgs) {
   });
 
   const totalTeams = draftSlots.length;
-  const { round: currentRound, pickInRound } = calculatePickInfo(currentPickNumber, totalTeams);
+  const { round: currentRound, pickInRound, rawPickInRound } = calculatePickInfo(currentPickNumber, totalTeams);
   const currentDraftSlot = draftSlots.find((slot) => slot.draftOrder === pickInRound);
   
   if (!currentDraftSlot) {
@@ -339,7 +339,7 @@ export async function action(args: ActionFunctionArgs) {
     sportName: participant.sportsSeason.sport.name,
     pickNumber: currentPickNumber,
     round: currentRound,
-    pickInRound,
+    rawPickInRound,
     isDraftComplete,
     totalTeams,
     draftSlots: draftSlots.map((s) => ({ teamId: s.teamId, draftOrder: s.draftOrder })),

app/services/__tests__/draft-discord.server.test.ts

@@ -41,7 +41,7 @@ const BASE_PARAMS = {
   sportName: "Soccer",
   pickNumber: 1,
   round: 1,
-  pickInRound: 1,
+  rawPickInRound: 1,
   isDraftComplete: false,
   totalTeams: 2,
   draftSlots: DRAFT_SLOTS,
@@ -95,6 +95,7 @@ function makeMockDb(overrides: {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  vi.mocked(sendPickAnnouncementNotification).mockResolvedValue(undefined);
   process.env.APP_URL = "https://test.brackt.com";
 });
 
@@ -230,4 +231,23 @@ describe("notifyPickMadeOnDiscord", () => {
       notifyPickMadeOnDiscord({ ...BASE_PARAMS, db: db as never })
     ).rejects.toThrow("webhook down");
   });
+
+  it("uses sequential (not snake-adjusted) pick number in Discord title for even rounds", async () => {
+    // 13-team draft, pick #22: round 2 (even/reversed), rawPickInRound=9, snake-adjusted slot=5
+    // Discord should say "Round 2, Pick 9" not "Round 2, Pick 5"
+    const db = makeMockDb({ season: makeSeason(23) });
+
+    await notifyPickMadeOnDiscord({
+      ...BASE_PARAMS,
+      pickNumber: 22,
+      round: 2,
+      rawPickInRound: 9,
+      totalTeams: 13,
+      db: db as never,
+    });
+
+    expect(sendPickAnnouncementNotification).toHaveBeenCalledWith(
+      expect.objectContaining({ pickNumber: 22, round: 2, pickInRound: 9 })
+    );
+  });
 });

app/services/draft-discord.server.ts

@@ -24,7 +24,7 @@ export async function notifyPickMadeOnDiscord(params: {
   sportName: string;
   pickNumber: number;
   round: number;
-  pickInRound: number;
+  rawPickInRound: number;
   isDraftComplete: boolean;
   totalTeams: number;
   draftSlots: DraftSlot[];
@@ -38,7 +38,7 @@ export async function notifyPickMadeOnDiscord(params: {
     sportName,
     pickNumber,
     round,
-    pickInRound,
+    rawPickInRound,
     isDraftComplete,
     totalTeams,
     draftSlots,
@@ -90,7 +90,7 @@ export async function notifyPickMadeOnDiscord(params: {
     draftUrl,
     pickNumber,
     round,
-    pickInRound,
+    pickInRound: rawPickInRound,
     pickedTeamName,
     participantName,
     sportName,