Improve dashboard maintainability before the next release

The dashboard had several oversized orchestration, component, and CSS files that made product-copy changes and mobile/performance work risky. This refactor preserves behavior while splitting scan terminal CSS, opportunity helpers, future forecast panels, history/detail charts, and probability/model sections into smaller ownership boundaries. Constraint: No user-visible version bump because this batch is architecture and performance cleanup, not a release announcement. Rejected: Rewrite dashboard state management in the same batch | too broad for a safe upload after CSS and component splitting. Confidence: high Scope-risk: moderate Reversibility: clean Directive: Keep new component/CSS boundaries instead of moving product copy back into the large dashboard files. Tested: npm run build; npm run test:business; git diff --check Not-tested: Browser visual smoke test after push
2026-04-28 20:19:17 +08:00
parent 20516000a2
commit 2b1d7c0b65
56 changed files with 15303 additions and 15063 deletions
@@ -0,0 +1,87 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { useDashboardStore } from "@/hooks/useDashboardStore";
+import type { MarketScan } from "@/lib/dashboard-types";
+
+const DailyTemperatureChart = dynamic(
+  () =>
+    import("./FutureForecastModalChart").then(
+      (module) => module.DailyTemperatureChart,
+    ),
+  {
+    loading: () => <div className="history-chart-wrapper future-chart-wrapper" />,
+    ssr: false,
+  },
+);
+
+const ProbabilityDistribution = dynamic(
+  () =>
+    import("@/components/dashboard/PanelSections").then(
+      (module) => module.ProbabilityDistribution,
+    ),
+  {
+    loading: () => <div className="future-v2-panel-loading" />,
+    ssr: false,
+  },
+);
+
+const ModelForecast = dynamic(
+  () =>
+    import("@/components/dashboard/PanelSections").then(
+      (module) => module.ModelForecast,
+    ),
+  {
+    loading: () => <div className="future-v2-panel-loading" />,
+    ssr: false,
+  },
+);
+
+type DashboardDetail = NonNullable<
+  ReturnType<typeof useDashboardStore>["selectedDetail"]
+>;
+
+export function FutureTemperaturePathChart({
+  dateStr,
+  forceToday,
+}: {
+  dateStr: string;
+  forceToday: boolean;
+}) {
+  return <DailyTemperatureChart dateStr={dateStr} forceToday={forceToday} />;
+}
+
+export function FutureProbabilityPanel({
+  detail,
+  targetDate,
+  marketScan,
+  hideTitle = true,
+}: {
+  detail: DashboardDetail;
+  targetDate: string;
+  marketScan?: MarketScan | null;
+  hideTitle?: boolean;
+}) {
+  return (
+    <ProbabilityDistribution
+      detail={detail}
+      targetDate={targetDate}
+      marketScan={marketScan}
+      hideTitle={hideTitle}
+    />
+  );
+}
+
+export function FutureModelForecastPanel({
+  detail,
+  targetDate,
+  hideTitle = true,
+}: {
+  detail: DashboardDetail;
+  targetDate: string;
+  hideTitle?: boolean;
+}) {
+  return (
+    <ModelForecast detail={detail} targetDate={targetDate} hideTitle={hideTitle} />
+  );
+}