From 55828e9f42d9343d71980cfcfd930deeadb817fd Mon Sep 17 00:00:00 2001 From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com> Date: Fri, 15 May 2026 16:04:07 -0700 Subject: [PATCH] Simplify sports season display and add local timezone hints (#434) * 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 * Address code review: shared tz hook, short abbrev, sort fix, dead type cleanup, test update - Extract timezone detection into useLocalTimezone hook to avoid duplication across DraftSetupSection and Step3DraftSettings - Use Intl short timezone abbreviation (e.g. "EST") instead of raw IANA name, matching DraftInfoCard's existing pattern - Sort review step sport list by season name instead of sport.name so the visible order matches the displayed text - Remove unused scoringType and year fields from SportsSection's local type - Update SportsSection tests to use realistic season names and the new display format https://claude.ai/code/session_01GtJowGruAc1A4jURkSDVjX --------- Co-authored-by: Claude --- .../league/settings/DraftSetupSection.tsx | 4 ++++ app/components/league/settings/SportsSection.tsx | 5 +---- .../settings/__tests__/SportsSection.test.tsx | 16 +++++----------- app/hooks/useLocalTimezone.ts | 10 ++++++++++ app/routes/leagues/new.tsx | 12 ++++++++---- 5 files changed, 28 insertions(+), 19 deletions(-) create mode 100644 app/hooks/useLocalTimezone.ts diff --git a/app/components/league/settings/DraftSetupSection.tsx b/app/components/league/settings/DraftSetupSection.tsx index eeaec80..5f44905 100644 --- a/app/components/league/settings/DraftSetupSection.tsx +++ b/app/components/league/settings/DraftSetupSection.tsx @@ -1,4 +1,5 @@ import { Swords, CalendarIcon } from "lucide-react"; +import { useLocalTimezone } from "~/hooks/useLocalTimezone"; import { format } from "date-fns"; import { Label } from "~/components/ui/label"; import { Input } from "~/components/ui/input"; @@ -64,6 +65,8 @@ export function DraftSetupSection({ onOvernightTimezoneChange: (v: string) => void; commishTimezone: string | null; }) { + const localTz = useLocalTimezone(); + return (

Set this before starting the draft room. + {localTz && <> Times are in your local timezone ({localTz}).}

diff --git a/app/components/league/settings/SportsSection.tsx b/app/components/league/settings/SportsSection.tsx index 5c8de02..6c30e67 100644 --- a/app/components/league/settings/SportsSection.tsx +++ b/app/components/league/settings/SportsSection.tsx @@ -8,8 +8,6 @@ import { SettingsSection, SettingsStatusPill } from "./SettingsSection"; type SportsSeason = { id: string; name: string; - year: number; - scoringType: string; sport: { id: string; name: string; slug: string; type: string; iconUrl: string | null }; }; @@ -75,9 +73,8 @@ export function SportsSection({ - {ss.sport.slug === BRACKT_SLUG ? "Brackt" : `${ss.sport.name} - ${ss.name} (${ss.year})`} + {ss.sport.slug === BRACKT_SLUG ? "Brackt" : ss.name} - {ss.scoringType.replace("_", " ")} ); diff --git a/app/components/league/settings/__tests__/SportsSection.test.tsx b/app/components/league/settings/__tests__/SportsSection.test.tsx index 6a8c98b..763c74f 100644 --- a/app/components/league/settings/__tests__/SportsSection.test.tsx +++ b/app/components/league/settings/__tests__/SportsSection.test.tsx @@ -7,24 +7,18 @@ import { SportsSection } from "../SportsSection"; type SportsSeason = { id: string; name: string; - year: number; - scoringType: string; sport: { id: string; name: string; slug: string; type: string; iconUrl: string | null }; }; const displaySportsSeasons: SportsSeason[] = [ { id: "nba-2025", - name: "2025 Season", - year: 2025, - scoringType: "standings", + name: "2025 NBA Season", sport: { id: "sport-1", name: "NBA", slug: "nba", type: "team", iconUrl: "/sports-icons/nba.svg" }, }, { id: "mlb-2025", - name: "2025 Season", - year: 2025, - scoringType: "playoffs", + name: "2025 MLB Season", sport: { id: "sport-2", name: "MLB", slug: "mlb", type: "team", iconUrl: "/sports-icons/mlb.svg" }, }, ]; @@ -82,10 +76,10 @@ describe("SportsSection", () => { const user = userEvent.setup(); render(); - const mlbCheckbox = screen.getByRole("checkbox", { name: /mlb - 2025 season \(2025\)/i }); + const mlbCheckbox = screen.getByRole("checkbox", { name: /2025 mlb season/i }); expect(mlbCheckbox).not.toBeChecked(); - await user.click(screen.getByText("MLB - 2025 Season (2025)")); + await user.click(screen.getByText("2025 MLB Season")); expect(mlbCheckbox).toBeChecked(); }); @@ -95,7 +89,7 @@ describe("SportsSection", () => { const handleSubmit = vi.fn(); render(); - await user.click(screen.getByText("MLB - 2025 Season (2025)")); + await user.click(screen.getByText("2025 MLB Season")); await user.click(screen.getByRole("button", { name: "Save" })); expect(handleSubmit).toHaveBeenCalledWith(["nba-2025", "mlb-2025"]); diff --git a/app/hooks/useLocalTimezone.ts b/app/hooks/useLocalTimezone.ts new file mode 100644 index 0000000..ef1ae10 --- /dev/null +++ b/app/hooks/useLocalTimezone.ts @@ -0,0 +1,10 @@ +import { useState, useEffect } from "react"; + +export function useLocalTimezone() { + const [tz, setTz] = useState(""); + useEffect(() => { + const parts = Intl.DateTimeFormat(undefined, { timeZoneName: "short" }).formatToParts(new Date()); + setTz(parts.find((p) => p.type === "timeZoneName")?.value ?? ""); + }, []); + return tz; +} diff --git a/app/routes/leagues/new.tsx b/app/routes/leagues/new.tsx index 801427e..43f7ede 100644 --- a/app/routes/leagues/new.tsx +++ b/app/routes/leagues/new.tsx @@ -25,6 +25,7 @@ import { Checkbox } from "~/components/ui/checkbox"; import { cn } from "~/lib/utils"; import { parseDraftSpeed, formatTime12h } from "~/lib/draft-timer"; import { TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect"; +import { useLocalTimezone } from "~/hooks/useLocalTimezone"; import { saveWizardState, buildFormDataFromSnapshot } from "~/lib/wizard-state"; import { type ScoringRules, DEFAULT_SCORING_RULES } from "~/lib/scoring-types"; import { SportIcon } from "~/components/league/SportIcon"; @@ -533,7 +534,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" > - {s.sport.name} {s.year} + {s.name}