feat: coaster filter toggle on homepage
All checks were successful
Build and Deploy / Build & Push (push) Successful in 1m14s

- 🎢 Coasters button in nav bar (URL-driven: ?coasters=1)
- When active, swaps ride counts for coaster counts per park
- Label switches between "X rides operating" / "X coasters operating"
- Arrow key navigation preserves coaster filter state
- Only shown when coaster data exists in park-meta

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-04 21:03:00 -04:00
parent f1fec2355c
commit 7456ead430
5 changed files with 78 additions and 16 deletions

View File

@@ -10,7 +10,8 @@ interface WeekCalendarProps {
weekDates: string[]; // 7 dates, YYYY-MM-DD, SunSat
data: Record<string, Record<string, DayData>>; // parkId → date → DayData
grouped?: Map<Region, Park[]>; // pre-grouped parks (if provided, renders region headers)
rideCounts?: Record<string, number>; // parkId → open ride count for today
rideCounts?: Record<string, number>; // parkId → open ride/coaster count for today
coastersOnly?: boolean;
}
const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -165,6 +166,7 @@ function ParkRow({
parsedDates,
parkData,
rideCounts,
coastersOnly,
}: {
park: Park;
parkIdx: number;
@@ -172,6 +174,7 @@ function ParkRow({
parsedDates: ReturnType<typeof parseDate>[];
parkData: Record<string, DayData>;
rideCounts?: Record<string, number>;
coastersOnly?: boolean;
}) {
const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
return (
@@ -221,7 +224,9 @@ function ParkRow({
</div>
{rideCounts?.[park.id] !== undefined && (
<div style={{ fontSize: "0.72rem", color: "var(--color-open-hours)", fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
{rideCounts[park.id]} {rideCounts[park.id] === 1 ? "ride" : "rides"} operating
{rideCounts[park.id]} {coastersOnly
? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
: (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
</div>
)}
</Link>
@@ -238,7 +243,7 @@ function ParkRow({
);
}
export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts }: WeekCalendarProps) {
export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts, coastersOnly }: WeekCalendarProps) {
const today = getTodayLocal();
const parsedDates = weekDates.map(parseDate);
@@ -353,6 +358,7 @@ export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts }: We
parsedDates={parsedDates}
parkData={data[park.id] ?? {}}
rideCounts={rideCounts}
coastersOnly={coastersOnly}
/>
))}
</Fragment>