From 5db574263fb5b5675f7c41ee60f0036dabd3c1ac Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 17 Jun 2026 01:40:00 +0000
Subject: [PATCH] Fix group stage default view and localize match times

Default to Groups tab instead of Bracket when no teams have been
assigned to the knockout bracket yet (group stage still in progress).

Fix match kick-off times showing in UTC server timezone by adding
suppressHydrationWarning so React uses the client's local timezone
during hydration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Bo6Rsmg8FosYcDJsg14tX
---
 app/components/sport-season/GroupStageStandings.tsx           | 4 ++--
 .../leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx      | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/sport-season/GroupStageStandings.tsx b/app/components/sport-season/GroupStageStandings.tsx
index 4931914..360b0c0 100644
--- a/app/components/sport-season/GroupStageStandings.tsx
+++ b/app/components/sport-season/GroupStageStandings.tsx
@@ -70,7 +70,7 @@ function MatchResult({ match }: { match: GroupMatch }) {
         <span className="truncate max-w-[80px]">{p2}</span>
       </div>
       {kickoff && (
-        <span className="text-[10px] text-muted-foreground/50">
+        <span className="text-[10px] text-muted-foreground/50" suppressHydrationWarning>
           {kickoff.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}
         </span>
       )}
@@ -181,7 +181,7 @@ export function GroupStageStandings({
                 <div className="px-4 pb-3 space-y-0.5 border-t pt-2">
                   {[...byDay.entries()].map(([day, matches]) => (
                     <div key={day} className="space-y-0.5">
-                      <p className="text-[10px] text-muted-foreground/70 uppercase tracking-wide pt-1">
+                      <p className="text-[10px] text-muted-foreground/70 uppercase tracking-wide pt-1" suppressHydrationWarning>
                         {day}
                       </p>
                       {matches.map((m) => (
diff --git a/app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx b/app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx
index 6093b88..d69355e 100644
--- a/app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx
+++ b/app/routes/leagues/$leagueId.sports-seasons.$sportsSeasonId.tsx
@@ -45,6 +45,7 @@ export default function SportSeasonDetail({
   } = loaderData;
 
   const hasBracket = playoffMatches && playoffMatches.length > 0;
+  const bracketHasTeams = hasBracket && playoffMatches.some((m) => m.participant1 !== null || m.participant2 !== null);
   const hasStandings = regularSeasonStandings && regularSeasonStandings.length > 0;
   const showOtLosses = hasStandings && regularSeasonStandings.some((s) => s.otLosses !== null);
 
@@ -75,7 +76,8 @@ export default function SportSeasonDetail({
 
   const [view, setView] = useState<BracketView>(() => {
     if (showGroupStageToggle) {
-      return sportsSeason.status === "completed" ? "finished" : "playoffs";
+      if (sportsSeason.status === "completed") return "finished";
+      return bracketHasTeams ? "playoffs" : "groups";
     }
     if (!hasBracket) return "standings";
     if (sportsSeason.status === "completed") return "finished";