Implement community forum integration in CommunityPage; update BottomNav to conditionally display community tab based on screen size. Add new audio processing function for combined PEQ magnitude calculation in peqAudio.

client/src/pages/CommunityPage.tsx

@@ -1,31 +1,22 @@
 import BottomNav from "@/components/BottomNav";
-import { MessageSquare } from "lucide-react";
+
+const FORUM_URL = "https://forum.zidoo.tv";
 
 export default function CommunityPage() {
   return (
     <div
       className="h-[100dvh] flex flex-col pb-[calc(env(safe-area-inset-bottom,0px)+56px)]"
       style={{
-        background:
-          "radial-gradient(120% 80% at 50% 0%, rgba(12, 24, 30, 0.45) 0%, rgba(6, 9, 16, 0.92) 38%, #04060d 100%)",
+        background: "#04060d",
       }}
     >
-      <main className="relative flex-1 flex items-center justify-center px-6">
-        <div className="flex flex-col items-center text-center -translate-y-8">
-          <div
-            className="w-[96px] h-[96px] rounded-full flex items-center justify-center mb-7"
-            style={{
-              background: "radial-gradient(circle at 35% 30%, rgba(0,255,246,0.18), rgba(0,255,246,0.07))",
-              boxShadow: "0 0 34px rgba(0,255,246,0.18), inset 0 0 24px rgba(0,255,246,0.08)",
-            }}
-          >
-            <MessageSquare size={38} className="text-[#00FFF6]" strokeWidth={2.2} />
-          </div>
-          <p className="text-white/85 text-[42px] leading-none font-semibold tracking-wide mb-3">Coming Soon</p>
-          <p className="text-white/40 text-[22px] leading-none">Community features are under development</p>
-        </div>
-
-      </main>
+      <iframe
+        className="flex-1 w-full min-h-0 border-0 bg-white"
+        src={FORUM_URL}
+        title="Zidoo forum"
+        allow="fullscreen; clipboard-read; clipboard-write"
+        referrerPolicy="strict-origin-when-cross-origin"
+      />
       <BottomNav />
     </div>
   );

client/src/pages/EQPage.tsx

@@ -38,6 +38,7 @@ import {
   getFilterType,
   getFilterShortName,
   buildPeqSvgCurveData,
+  sampleCombinedPeqMagnitudeDb,
 } from "@/lib/peqAudio";
 import localeZh from "@/locales/data-zh.json";
 import localeZhHK from "@/locales/data-zh-HK.json";
@@ -128,7 +129,8 @@ function FreqChart({
   onBandSelect: (idx: number) => void;
   eqUi: PeqEqUi;
 }) {
-  const H = 140;
+  /** 频响图 SVG 高度（viewBox 与 CSS 一致） */
+  const H = 400;
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const svgRef = useRef<SVGSVGElement | null>(null);
   const draggingBandRef = useRef<number | null>(null);
@@ -217,11 +219,17 @@ function FreqChart({
         maxFreq: 20000,
         paddingY: 10,
       }),
-    [bands, W],
+    [bands, W, H],
   );
   const pathD = curveData.pathD;
   const fillD = curveData.fillD;
 
+  /** 各带中心频率处级联响应 dB，与黄线同源 — 手柄纵坐标须用此值才能落在曲线上 */
+  const combinedMagDbAtHandles = useMemo(
+    () => bands.map((b) => sampleCombinedPeqMagnitudeDb(bands, b.freq, 48000)),
+    [bands],
+  );
+
   const [curveVisibilityByMode, setCurveVisibilityByMode] = useState<
     Record<"A" | "B", { eq: boolean; raw: boolean; equalized: boolean }>
   >({
@@ -361,7 +369,7 @@ function FreqChart({
           ref={svgRef}
           viewBox={`0 0 ${W} ${H}`}
           className="w-full"
-          style={{ height: 140, touchAction: "none" }}
+          style={{ height: H, touchAction: "none" }}
           onPointerMove={handleSvgPointerMove}
           onPointerUp={stopDragging}
           onPointerCancel={stopDragging}
@@ -437,17 +445,18 @@ function FreqChart({
                 const fillColor = isSelected ? "#FFED00" : "rgba(0,0,0,0.5)";
                 const strokeColor = isSelected ? "#FFED00" : "#FFED00";
                 const textColor = isSelected ? "#000000" : "#FFED00";
+                const handleY = gainToY(combinedMagDbAtHandles[i] ?? 0);
                 return (
                   <>
                     <circle
                       cx={freqToX(band.freq)}
-                      cy={gainToY(band.gain)}
+                      cy={handleY}
                       r="14"
                       fill="transparent"
                     />
                     <circle
                       cx={freqToX(band.freq)}
-                      cy={gainToY(band.gain)}
+                      cy={handleY}
                       r={outerR}
                       fill={fillColor}
                       stroke={strokeColor}
@@ -455,7 +464,7 @@ function FreqChart({
                     />
                     <text
                       x={freqToX(band.freq)}
-                      y={gainToY(band.gain) + 3.5}
+                      y={handleY + 3.5}
                       textAnchor="middle"
                       fontSize="7"
                       fill={textColor}