feat: coaster filter toggle on homepage

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

components/MobileCardList.tsx

@@ -9,9 +9,10 @@ interface MobileCardListProps {
   data: Record<string, Record<string, DayData>>;
   today: string;
   rideCounts?: Record<string, number>;
+  coastersOnly?: boolean;
 }
 
-export function MobileCardList({ grouped, weekDates, data, today, rideCounts }: MobileCardListProps) {
+export function MobileCardList({ grouped, weekDates, data, today, rideCounts, coastersOnly }: MobileCardListProps) {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 14 }}>
       {Array.from(grouped.entries()).map(([region, parks]) => (
@@ -52,6 +53,7 @@ export function MobileCardList({ grouped, weekDates, data, today, rideCounts }:
                 parkData={data[park.id] ?? {}}
                 today={today}
                 openRideCount={rideCounts?.[park.id]}
+                coastersOnly={coastersOnly}
               />
             ))}
           </div>

components/ParkCard.tsx

@@ -8,11 +8,12 @@ interface ParkCardProps {
   parkData: Record<string, DayData>;
   today: string;
   openRideCount?: number;
+  coastersOnly?: boolean;
 }
 
 const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
-export function ParkCard({ park, weekDates, parkData, today, openRideCount }: ParkCardProps) {
+export function ParkCard({ park, weekDates, parkData, today, openRideCount, coastersOnly }: ParkCardProps) {
   const openDays = weekDates.filter((d) => parkData[d]?.isOpen && parkData[d]?.hoursLabel);
   const isOpenToday = openDays.includes(today);
 
@@ -90,7 +91,9 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount }: Pa
               fontWeight: 500,
               textAlign: "right",
             }}>
-              {openRideCount} {openRideCount === 1 ? "ride" : "rides"} operating
+              {openRideCount} {coastersOnly
+                ? (openRideCount === 1 ? "coaster" : "coasters")
+                : (openRideCount === 1 ? "ride" : "rides")} operating
             </div>
           )}
           </div>

components/WeekCalendar.tsx

@@ -10,7 +10,8 @@ interface WeekCalendarProps {
   weekDates: string[]; // 7 dates, YYYY-MM-DD, Sun–Sat
   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>

components/WeekNav.tsx

@@ -7,6 +7,8 @@ interface WeekNavProps {
   weekStart: string;   // YYYY-MM-DD (Sunday)
   weekDates: string[]; // 7 dates YYYY-MM-DD
   isCurrentWeek: boolean;
+  coastersOnly: boolean;
+  hasCoasterData: boolean;
 }
 
 const MONTHS = [
@@ -31,10 +33,16 @@ function shiftWeek(weekStart: string, delta: number): string {
   return d.toISOString().slice(0, 10);
 }
 
-export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
+export function WeekNav({ weekStart, weekDates, isCurrentWeek, coastersOnly, hasCoasterData }: WeekNavProps) {
   const router = useRouter();
-  const nav = (delta: number) =>
-    router.push(`/?week=${shiftWeek(weekStart, delta)}`);
+  const weekParam = `week=${weekStart}`;
+  const nav = (delta: number) => {
+    const base = `/?week=${shiftWeek(weekStart, delta)}`;
+    router.push(coastersOnly ? `${base}&coasters=1` : base);
+  };
+  const toggleCoasters = () => {
+    router.push(coastersOnly ? `/?${weekParam}` : `/?${weekParam}&coasters=1`);
+  };
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -91,6 +99,30 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
       >
         →
       </button>
+
+      {hasCoasterData && (
+        <button
+          onClick={toggleCoasters}
+          style={{
+            marginLeft: 8,
+            display: "flex",
+            alignItems: "center",
+            gap: 5,
+            padding: "4px 12px",
+            borderRadius: 20,
+            border: coastersOnly ? "1px solid var(--color-accent)" : "1px solid var(--color-border)",
+            background: coastersOnly ? "var(--color-accent-muted)" : "var(--color-surface)",
+            color: coastersOnly ? "var(--color-accent)" : "var(--color-text-muted)",
+            fontSize: "0.72rem",
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+            whiteSpace: "nowrap",
+          }}
+        >
+          🎢 Coasters
+        </button>
+      )}
     </div>
   );
 }