From cf90bf52ecc6a86d29d9e5f939e3543671268bd5 Mon Sep 17 00:00:00 2001
From: Chris Parsons <chrisparsons1127@gmail.com>
Date: Mon, 20 Oct 2025 15:53:38 -0700
Subject: [PATCH] feat: add draft board link visibility for all season statuses

---
 app/routes/leagues/$leagueId.tsx | 134 ++++++++++++++++++-------------
 1 file changed, 78 insertions(+), 56 deletions(-)

diff --git a/app/routes/leagues/$leagueId.tsx b/app/routes/leagues/$leagueId.tsx
index 624b2e6..8c77f1c 100644
--- a/app/routes/leagues/$leagueId.tsx
+++ b/app/routes/leagues/$leagueId.tsx
@@ -38,7 +38,9 @@ export async function loader(args: Route.LoaderArgs) {
 
   // Fetch current season with sports
   const season = await findCurrentSeason(leagueId);
-  const seasonWithSports = season ? await findSeasonWithSportsSeasons(season.id) : null;
+  const seasonWithSports = season
+    ? await findSeasonWithSportsSeasons(season.id)
+    : null;
 
   // Fetch commissioners
   const commissioners = await findCommissionersByLeagueId(leagueId);
@@ -71,9 +73,10 @@ export async function loader(args: Route.LoaderArgs) {
   const teams = season ? await findTeamsBySeasonId(season.id) : [];
 
   // Fetch draft slots if season is in pre_draft or draft status
-  const draftSlots = season && (season.status === "pre_draft" || season.status === "draft")
-    ? await findDraftSlotsBySeasonId(season.id)
-    : [];
+  const draftSlots =
+    season && (season.status === "pre_draft" || season.status === "draft")
+      ? await findDraftSlotsBySeasonId(season.id)
+      : [];
 
   // Fetch user data for team owners
   const ownerIds = teams
@@ -297,45 +300,58 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
         {/* Right Column - 1/3 width on desktop */}
         <div className="space-y-6">
           {/* Draft Order Display - Only show during pre_draft and draft */}
-          {season && (season.status === "pre_draft" || season.status === "draft") && draftSlots.length > 0 && (
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <CardTitle>Draft Order</CardTitle>
-                    <CardDescription>
-                      {season.status === "pre_draft" ? "Upcoming draft order" : "Current draft order"}
-                    </CardDescription>
+          {season &&
+            (season.status === "pre_draft" || season.status === "draft") &&
+            draftSlots.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>Draft Order</CardTitle>
+                      <CardDescription>
+                        {season.status === "pre_draft"
+                          ? "Upcoming draft order"
+                          : "Current draft order"}
+                      </CardDescription>
+                    </div>
+                    <Button asChild size="sm">
+                      <Link to={`/leagues/${league.id}/draft/${season.id}`}>
+                        Enter Draft Room
+                      </Link>
+                    </Button>
                   </div>
-                  <Button asChild size="sm">
-                    <Link to={`/leagues/${league.id}/draft/${season.id}`}>
-                      Enter Draft Room
-                    </Link>
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-2">
-                  {draftSlots.map((slot: any, index: number) => {
-                    const ownerName = slot.team.ownerId ? ownerMap[slot.team.ownerId] : null;
-                    return (
-                      <div key={slot.id} className="flex items-center gap-3 py-2 border-b last:border-0">
-                        <div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
-                          {index + 1}
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {draftSlots.map((slot: any, index: number) => {
+                      const ownerName = slot.team.ownerId
+                        ? ownerMap[slot.team.ownerId]
+                        : null;
+                      return (
+                        <div
+                          key={slot.id}
+                          className="flex items-center gap-3 py-2 border-b last:border-0"
+                        >
+                          <div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
+                            {index + 1}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="font-medium text-sm truncate">
+                              {slot.team.name}
+                            </p>
+                            {ownerName && (
+                              <p className="text-xs text-muted-foreground truncate">
+                                {ownerName}
+                              </p>
+                            )}
+                          </div>
                         </div>
-                        <div className="flex-1 min-w-0">
-                          <p className="font-medium text-sm truncate">{slot.team.name}</p>
-                          {ownerName && (
-                            <p className="text-xs text-muted-foreground truncate">{ownerName}</p>
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </CardContent>
-            </Card>
-          )}
+                      );
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
 
           <Card>
             <CardHeader>
@@ -351,30 +367,34 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
               {season && (
                 <>
                   <div>
-                    <p className="text-sm text-muted-foreground">Season Status</p>
+                    <p className="text-sm text-muted-foreground">
+                      Season Status
+                    </p>
                     <p className="font-medium capitalize">
                       {season.status.replace("_", " ")}
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">Draft Rounds</p>
+                    <p className="text-sm text-muted-foreground">
+                      Draft Rounds
+                    </p>
                     <p className="font-medium">{season.draftRounds}</p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">Sports Selected</p>
+                    <p className="text-sm text-muted-foreground">
+                      Sports Selected
+                    </p>
                     <p className="font-medium">{sportsCount}</p>
                   </div>
-                  {(season.status === "active" || season.status === "completed") && (
-                    <div>
-                      <p className="text-sm text-muted-foreground">Draft Board</p>
-                      <Link
-                        to={`/leagues/${league.id}/draft-board/${season.id}`}
-                        className="text-blue-600 hover:underline font-medium"
-                      >
-                        View Draft Board
-                      </Link>
-                    </div>
-                  )}
+                  <div>
+                    <p className="text-sm text-muted-foreground">Draft Board</p>
+                    <Link
+                      to={`/leagues/${league.id}/draft-board/${season.id}`}
+                      className="text-blue-600 hover:underline font-medium"
+                    >
+                      View Draft Board
+                    </Link>
+                  </div>
                   <div>
                     <p className="text-sm text-muted-foreground">Flex Spots</p>
                     <p className="font-medium text-primary">
@@ -383,7 +403,9 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
                   </div>
                   {season.draftDateTime && (
                     <div>
-                      <p className="text-sm text-muted-foreground">Draft Date</p>
+                      <p className="text-sm text-muted-foreground">
+                        Draft Date
+                      </p>
                       <p className="font-medium">
                         {format(new Date(season.draftDateTime), "PPP 'at' p")}
                       </p>