From 9f2eb57e7ab9c97ff186e2f44801b45aa28d3915 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 15 May 2026 22:00:30 +0000
Subject: [PATCH] Show season name instead of year/bracket format; add local
 timezone hint to draft time

Replace the raw year number and scoringType string in the league creation
sport picker, review step, and league settings sports section with the
human-readable season name (e.g. "2025 NBA Season"), matching how the
league homepage sports list already displays seasons.

Add a client-side local timezone label below the draft date & time fields
on both the league creation wizard and the league settings page, so users
know that draft times are in their local timezone.

https://claude.ai/code/session_01GtJowGruAc1A4jURkSDVjX
---
 app/components/league/settings/DraftSetupSection.tsx |  7 +++++++
 app/components/league/settings/SportsSection.tsx     |  3 +--
 app/routes/leagues/new.tsx                           | 12 +++++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/components/league/settings/DraftSetupSection.tsx b/app/components/league/settings/DraftSetupSection.tsx
index eeaec80..1eb2c0b 100644
--- a/app/components/league/settings/DraftSetupSection.tsx
+++ b/app/components/league/settings/DraftSetupSection.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { Swords, CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
 import { Label } from "~/components/ui/label";
@@ -64,6 +65,11 @@ export function DraftSetupSection({
   onOvernightTimezoneChange: (v: string) => void;
   commishTimezone: string | null;
 }) {
+  const [localTz, setLocalTz] = useState("");
+  useEffect(() => {
+    setLocalTz(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+
   return (
     <SettingsSection
       id="draft-setup"
@@ -145,6 +151,7 @@ export function DraftSetupSection({
             </div>
             <p className="mt-4 text-sm text-muted-foreground">
               Set this before starting the draft room.
+              {localTz && <> Times are in your local timezone ({localTz}).</>}
             </p>
           </div>
 
diff --git a/app/components/league/settings/SportsSection.tsx b/app/components/league/settings/SportsSection.tsx
index 5c8de02..983d35a 100644
--- a/app/components/league/settings/SportsSection.tsx
+++ b/app/components/league/settings/SportsSection.tsx
@@ -75,9 +75,8 @@ export function SportsSection({
                   <SportIcon sport={ss.sport} />
                   <span className="min-w-0 flex-1 overflow-hidden">
                     <span className="block truncate font-medium">
-                      {ss.sport.slug === BRACKT_SLUG ? "Brackt" : `${ss.sport.name} - ${ss.name} (${ss.year})`}
+                      {ss.sport.slug === BRACKT_SLUG ? "Brackt" : ss.name}
                     </span>
-                    <span className="text-xs text-muted-foreground">{ss.scoringType.replace("_", " ")}</span>
                   </span>
                 </label>
               );
diff --git a/app/routes/leagues/new.tsx b/app/routes/leagues/new.tsx
index 801427e..ed64ea3 100644
--- a/app/routes/leagues/new.tsx
+++ b/app/routes/leagues/new.tsx
@@ -533,7 +533,7 @@ function Step2Sports({
                       className="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-md bg-primary/10 border border-primary text-primary text-sm font-medium"
                     >
                       <SportIcon sport={s.sport} />
-                      {s.sport.name} <span className="text-xs opacity-70">{s.year}</span>
+                      {s.name}
                       <button
                         type="button"
                         onClick={() => toggleSport(s.id)}
@@ -568,7 +568,7 @@ function Step2Sports({
                   >
                     <span className="flex items-center gap-2">
                       <SportIcon sport={s.sport} />
-                      {s.sport.name} <span className="text-xs opacity-70">{s.year}</span>
+                      {s.name}
                       {isBracktSport(s.sport) && <BracktInfoIcon />}
                     </span>
                     <span className="text-xs font-semibold">{selected ? "Remove" : "Add"}</span>
@@ -659,6 +659,11 @@ function Step3DraftSettings({
   const { draftInitialTime, draftIncrementTime } = parseDraftSpeed(draftSpeed, timerMode);
   const showOvernightPause = draftInitialTime >= 3600 || draftIncrementTime >= 600;
 
+  const [localTz, setLocalTz] = useState("");
+  useEffect(() => {
+    setLocalTz(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+
   useEffect(() => {
     if (!showOvernightPause) setOvernightMode("none");
   }, [showOvernightPause]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -708,6 +713,7 @@ function Step3DraftSettings({
         </div>
         <p className="text-sm text-muted-foreground">
           This can be changed before the draft starts.
+          {localTz && <> Times are in your local timezone ({localTz}).</>}
         </p>
       </div>
 
@@ -914,7 +920,7 @@ function StepReview({
           {selectedSeasons.toSorted((a, b) => a.sport.name.localeCompare(b.sport.name)).map((s) => (
             <li key={s.id} className="flex items-center gap-2 text-sm text-foreground">
               <SportIcon sport={s.sport} />
-              {s.sport.name} {s.year}
+              {s.name}
             </li>
           ))}
         </ul>