feat: persistent Coaster Mode toggle in header top-right

- Moves the coaster toggle out of WeekNav and into the homepage header
  top-right as "🎢 Coaster Mode", alongside the parks open badge
- State is stored in localStorage ("coasterMode") so the preference
  persists across sessions and page refreshes
- Dropped the ?coasters=1 URL param entirely; the server always fetches
  both rideCounts and coasterCounts, and HomePageClient picks which to
  display client-side — no flash or server round-trip on toggle
- Individual park pages: LiveRidePanel reads localStorage on mount and
  pre-selects the Coasters Only filter when Coaster Mode is active
- Extracted HomePageClient (client component) to own the full homepage
  UI; page.tsx is now pure data-fetching

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/page.tsx

@@ -1,9 +1,5 @@
-import { WeekCalendar } from "@/components/WeekCalendar";
-import { MobileCardList } from "@/components/MobileCardList";
-import { WeekNav } from "@/components/WeekNav";
-import { Legend } from "@/components/Legend";
-import { EmptyState } from "@/components/EmptyState";
-import { PARKS, groupByRegion } from "@/lib/parks";
+import { HomePageClient } from "@/components/HomePageClient";
+import { PARKS } from "@/lib/parks";
 import { openDb, getDateRange } from "@/lib/db";
 import { getTodayLocal, isWithinOperatingWindow } from "@/lib/env";
 import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
@@ -11,7 +7,7 @@ import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
 import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
 
 interface PageProps {
-  searchParams: Promise<{ week?: string; coasters?: string }>;
+  searchParams: Promise<{ week?: string }>;
 }
 
 function getWeekStart(param: string | undefined): string {
@@ -46,7 +42,6 @@ function getCurrentWeekStart(): string {
 export default async function HomePage({ searchParams }: PageProps) {
   const params = await searchParams;
   const weekStart = getWeekStart(params.week);
-  const coastersOnly = params.coasters === "1";
   const weekDates = getWeekDates(weekStart);
   const endDate = weekDates[6];
   const today = getTodayLocal();
@@ -61,8 +56,7 @@ export default async function HomePage({ searchParams }: PageProps) {
     0
   );
 
-  // Fetch live ride counts for parks open today (cached 5 min via Queue-Times).
-  // Only shown when the current time is within 1h before open to 1h after close.
+  // Always fetch both ride and coaster counts — the client decides which to display.
   const parkMeta = readParkMeta();
   const hasCoasterData = PARKS.some((p) => (parkMeta[p.id]?.coasters.length ?? 0) > 0);
 
@@ -91,108 +85,17 @@ export default async function HomePage({ searchParams }: PageProps) {
     );
   }
 
-  const activeCounts = coastersOnly ? coasterCounts : rideCounts;
-
-  const visibleParks = PARKS.filter((park) =>
-    weekDates.some((date) => data[park.id]?.[date]?.isOpen)
-  );
-
-  const grouped = groupByRegion(visibleParks);
-
   return (
-    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
-      {/* ── Header ─────────────────────────────────────────────────────────── */}
-      <header style={{
-        position: "sticky",
-        top: 0,
-        zIndex: 20,
-        background: "var(--color-bg)",
-        borderBottom: "1px solid var(--color-border)",
-      }}>
-        {/* Row 1: Title + park count */}
-        <div style={{
-          padding: "12px 16px 10px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12,
-        }}>
-          <span style={{
-            fontSize: "1.1rem",
-            fontWeight: 700,
-            color: "var(--color-text)",
-            letterSpacing: "-0.02em",
-          }}>
-            Thoosie Calendar
-          </span>
-
-          <span style={{
-            background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
-            border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
-            borderRadius: 20,
-            padding: "4px 14px",
-            fontSize: "0.78rem",
-            color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
-            fontWeight: 600,
-          }}>
-            {visibleParks.length} of {PARKS.length} parks open this week
-          </span>
-        </div>
-
-        {/* Row 2: Week nav + legend (legend hidden on mobile) */}
-        <div style={{
-          padding: "8px 16px 10px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 16,
-          borderTop: "1px solid var(--color-border-subtle)",
-        }}>
-          <WeekNav
-            weekStart={weekStart}
-            weekDates={weekDates}
-            isCurrentWeek={isCurrentWeek}
-            coastersOnly={coastersOnly}
-            hasCoasterData={hasCoasterData}
-          />
-          <div className="hidden sm:flex">
-            <Legend />
-          </div>
-        </div>
-      </header>
-
-      {/* ── Main content ───────────────────────────────────────────────────── */}
-      <main className="px-4 sm:px-6 pb-12">
-        {scrapedCount === 0 ? (
-          <EmptyState />
-        ) : (
-          <>
-            {/* Mobile: card list (hidden on lg+) */}
-            <div className="lg:hidden">
-              <MobileCardList
-                grouped={grouped}
-                weekDates={weekDates}
-                data={data}
-                today={today}
-                rideCounts={activeCounts}
-                coastersOnly={coastersOnly}
-              />
-            </div>
-
-            {/* Desktop: week table (hidden below lg) */}
-            <div className="hidden lg:block">
-              <WeekCalendar
-                parks={visibleParks}
-                weekDates={weekDates}
-                data={data}
-                grouped={grouped}
-                rideCounts={activeCounts}
-                coastersOnly={coastersOnly}
-              />
-            </div>
-          </>
-        )}
-      </main>
-    </div>
+    <HomePageClient
+      weekStart={weekStart}
+      weekDates={weekDates}
+      today={today}
+      isCurrentWeek={isCurrentWeek}
+      data={data}
+      rideCounts={rideCounts}
+      coasterCounts={coasterCounts}
+      hasCoasterData={hasCoasterData}
+      scrapedCount={scrapedCount}
+    />
   );
 }