From 9dc7e860cb86cf745877bf0336186135a17abdd2 Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Fri, 27 Feb 2026 23:00:42 -0800
Subject: [PATCH] feat: show live draft alert banner on league page (#42)

Adds a pulsing yellow alert banner between the league header and content
sections when the season status is "draft", with a link to the draft room.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/routes/leagues/$leagueId.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/routes/leagues/$leagueId.tsx b/app/routes/leagues/$leagueId.tsx
index 0de83b9..a90d8f7 100644
--- a/app/routes/leagues/$leagueId.tsx
+++ b/app/routes/leagues/$leagueId.tsx
@@ -98,6 +98,26 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
         )}
       </div>
 
+      {season?.status === "draft" && (
+        <div className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-yellow-500/50 bg-yellow-500/10 px-4 py-3 text-yellow-700 dark:text-yellow-400">
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5 shrink-0">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-yellow-500 opacity-75" />
+              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-yellow-500" />
+            </span>
+            <span className="font-medium">Draft is live!</span>
+            <span className="hidden text-sm sm:inline">
+              Your league draft is currently in progress.
+            </span>
+          </div>
+          <Button asChild size="sm" variant="outline" className="shrink-0 border-yellow-500/60 text-yellow-700 hover:bg-yellow-500/20 dark:text-yellow-400">
+            <Link to={`/leagues/${league.id}/draft/${season.id}`}>
+              Enter Draft Room
+            </Link>
+          </Button>
+        </div>
+      )}
+
       <div className="grid gap-6 md:grid-cols-3">
         {/* Left Column - 2/3 width on desktop */}
         <div className="md:col-span-2 space-y-6">