feat: implement user account management and dashboard components.

frontend/components/account/AccountCenter.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import type { User } from "@supabase/supabase-js";
 import {
@@ -40,7 +41,17 @@ import {
   getSupabaseBrowserClient,
   hasSupabasePublicEnv,
 } from "@/lib/supabase/client";
-import { UnlockProOverlay } from "@/components/subscription/UnlockProOverlay";
+
+const UnlockProOverlay = dynamic(
+  () =>
+    import("@/components/subscription/UnlockProOverlay").then(
+      (module) => module.UnlockProOverlay,
+    ),
+  {
+    ssr: false,
+    loading: () => null,
+  },
+);
 
 // --- Types ---
 
@@ -612,16 +623,20 @@ export function AccountCenter() {
       return;
     }
     try {
-      const authHeaders = await buildAuthedHeaders(false);
+      const authHeadersPromise = buildAuthedHeaders(false);
       const [configRes, walletsRes] = await Promise.all([
-        fetch("/api/payments/config", {
-          cache: "no-store",
-          headers: authHeaders,
-        }),
-        fetch("/api/payments/wallets", {
-          cache: "no-store",
-          headers: authHeaders,
-        }),
+        authHeadersPromise.then((headers) =>
+          fetch("/api/payments/config", {
+            cache: "no-store",
+            headers,
+          }),
+        ),
+        authHeadersPromise.then((headers) =>
+          fetch("/api/payments/wallets", {
+            cache: "no-store",
+            headers,
+          }),
+        ),
       ]);
       if (configRes.ok) {
         const configJson = (await configRes.json()) as PaymentConfig;
@@ -674,11 +689,13 @@ export function AccountCenter() {
       const userPromise = supabaseReady
         ? getSupabaseBrowserClient().auth.getUser()
         : Promise.resolve({ data: { user: null as User | null } });
-      const authHeaders = await buildAuthedHeaders(false);
-      const backendPromise = fetch("/api/auth/me", {
-        cache: "no-store",
-        headers: authHeaders,
-      });
+      const authHeadersPromise = buildAuthedHeaders(false);
+      const backendPromise = authHeadersPromise.then((headers) =>
+        fetch("/api/auth/me", {
+          cache: "no-store",
+          headers,
+        }),
+      );
       const [userResult, backendResult] = await Promise.all([
         userPromise,
         backendPromise,

frontend/components/dashboard/PolyWeatherDashboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import dynamic from "next/dynamic";
 import styles from "./Dashboard.module.css";
 import {
   DashboardStoreProvider,
@@ -9,11 +10,47 @@ import {
 import { I18nProvider, useI18n } from "@/hooks/useI18n";
 import { CitySidebar } from "@/components/dashboard/CitySidebar";
 import { DetailPanel } from "@/components/dashboard/DetailPanel";
-import { FutureForecastModal } from "@/components/dashboard/FutureForecastModal";
-import { GuideModal } from "@/components/dashboard/GuideModal";
 import { HeaderBar } from "@/components/dashboard/HeaderBar";
-import { HistoryModal } from "@/components/dashboard/HistoryModal";
-import { MapCanvas } from "@/components/dashboard/MapCanvas";
+
+const MapCanvas = dynamic(
+  () =>
+    import("@/components/dashboard/MapCanvas").then((module) => module.MapCanvas),
+  {
+    ssr: false,
+    loading: () => <div className="map" aria-hidden="true" />,
+  },
+);
+
+const GuideModal = dynamic(
+  () =>
+    import("@/components/dashboard/GuideModal").then((module) => module.GuideModal),
+  {
+    ssr: false,
+    loading: () => null,
+  },
+);
+
+const HistoryModal = dynamic(
+  () =>
+    import("@/components/dashboard/HistoryModal").then(
+      (module) => module.HistoryModal,
+    ),
+  {
+    ssr: false,
+    loading: () => null,
+  },
+);
+
+const FutureForecastModal = dynamic(
+  () =>
+    import("@/components/dashboard/FutureForecastModal").then(
+      (module) => module.FutureForecastModal,
+    ),
+  {
+    ssr: false,
+    loading: () => null,
+  },
+);
 
 function DashboardScreen() {
   const store = useDashboardStore();
@@ -57,9 +94,9 @@ function DashboardScreen() {
       <HeaderBar />
       <CitySidebar />
       <DetailPanel />
-      <GuideModal />
-      <HistoryModal />
-      <FutureForecastModal />
+      {store.isGuideOpen && <GuideModal />}
+      {store.historyState.isOpen && <HistoryModal />}
+      {store.futureModalDate && <FutureForecastModal />}
       {showLoading && (
         <div className="loading-overlay">
           <div className="loading-spinner" />