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,80 @@
+"use client";
+
+import type { useDashboardStore } from "@/hooks/useDashboardStore";
+import type { useI18n } from "@/hooks/useI18n";
+import type { getFutureModalView } from "@/lib/dashboard-utils";
+import {
+  FutureModelForecastPanel,
+  FutureProbabilityPanel,
+  FutureTemperaturePathChart,
+} from "./FutureForecastModalPanels";
+
+type DashboardDetail = NonNullable<
+  ReturnType<typeof useDashboardStore>["selectedDetail"]
+>;
+type FutureModalView = ReturnType<typeof getFutureModalView>;
+type TranslationFn = ReturnType<typeof useI18n>["t"];
+
+export function FutureForecastForwardView({
+  dateStr,
+  detail,
+  t,
+  view,
+}: {
+  dateStr: string;
+  detail: DashboardDetail;
+  t: TranslationFn;
+  view: FutureModalView;
+}) {
+  return (
+    <>
+      <div className="history-stats">
+        <div className="h-stat-card">
+          <span className="label">{t("future.targetForecast")}</span>
+          <span className="val">
+            {view.forecastEntry?.max_temp ?? "--"}
+            {detail.temp_symbol}
+          </span>
+        </div>
+        <div className="h-stat-card">
+          <span className="label">{t("future.deb")}</span>
+          <span className="val">
+            {view.deb ?? "--"}
+            {detail.temp_symbol}
+          </span>
+        </div>
+        <div className="h-stat-card">
+          <span className="label">{t("future.mu")}</span>
+          <span className="val">
+            {view.mu != null
+              ? `${view.mu.toFixed(1)}${detail.temp_symbol}`
+              : "--"}
+          </span>
+        </div>
+        <div className="h-stat-card">
+          <span className="label">{t("future.score")}</span>
+          <span className="val">
+            {view.front.score > 0 ? "+" : ""}
+            {view.front.score}
+          </span>
+        </div>
+      </div>
+
+      <section className="future-modal-section">
+        <h3>{t("future.targetTempTrend")}</h3>
+        <FutureTemperaturePathChart dateStr={dateStr} forceToday={false} />
+      </section>
+
+      <div className="future-modal-grid">
+        <section className="future-modal-section">
+          <h3>{t("future.probability")}</h3>
+          <FutureProbabilityPanel detail={detail} targetDate={dateStr} hideTitle />
+        </section>
+        <section className="future-modal-section">
+          <h3>{t("future.models")}</h3>
+          <FutureModelForecastPanel detail={detail} targetDate={dateStr} hideTitle />
+        </section>
+      </div>
+    </>
+  );
+}