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

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

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>
               );

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>