From 3c411b3df0845ef0cccc552aaaf061b910a51e6f Mon Sep 17 00:00:00 2001
From: eafonyang <eafonyang@gmail.com>
Date: Tue, 9 Jun 2026 14:24:28 +0800
Subject: [PATCH] refactor(eq): Enhance EQPage and luxsinApi for improved
 loading states and debugging

- Introduced a loading indicator for raw curve data in the EQPage to enhance user experience during data fetching.
- Added console logging for debugging purposes in luxsinApi when syncing PEQ and posting changes.
- Updated related functions to manage loading states effectively, ensuring smoother interactions.
---
 client/src/lib/luxsinApi.ts | 11 +++++-
 client/src/pages/EQPage.tsx | 71 +++++++++++++++++++++++++++++--------
 2 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/client/src/lib/luxsinApi.ts b/client/src/lib/luxsinApi.ts
index 73126da..621694f 100644
--- a/client/src/lib/luxsinApi.ts
+++ b/client/src/lib/luxsinApi.ts
@@ -262,7 +262,11 @@ export class LuxsinAPI {
     const response = await fetch(`${this.baseUrl}/dev/info.cgi?action=syncPeq`);
     const text = await response.text();
     const decoded = decodeCustomBase64(text.trim());
-    return JSON.parse(decoded) as PeqState;
+    const parsed = JSON.parse(decoded) as PeqState;
+    if (import.meta.env.DEV) {
+      console.log("[syncPeq] decoded", parsed);
+    }
+    return parsed;
   }
 
   async setPeqFilters(filters: PeqFilter[]): Promise<void> {
@@ -281,6 +285,11 @@ export class LuxsinAPI {
 
   /** POST `json=<custom-base64>` — matches legacy axios `upgradePeq`. */
   private async postPeqJson(body: PeqChangePayload | PeqApplyPayload): Promise<void> {
+    if (import.meta.env.DEV) {
+      const action =
+        "peqChange" in body ? "peqChange" : "peqApply" in body ? "peqApply" : "peq";
+      console.log(`[dev/info.cgi] POST ${action}`, body);
+    }
     const encoded = encodeCustomBase64(JSON.stringify(body));
     const form = new URLSearchParams();
     form.set("json", encoded);
diff --git a/client/src/pages/EQPage.tsx b/client/src/pages/EQPage.tsx
index 69c7af3..3a68f58 100644
--- a/client/src/pages/EQPage.tsx
+++ b/client/src/pages/EQPage.tsx
@@ -84,10 +84,30 @@ import { CyanSlider } from "./eq/components/CyanSlider";
 
 
 
+function LegendCurveIndicator({
+  loading,
+  color,
+}: {
+  loading: boolean;
+  color: string;
+}) {
+  if (loading) {
+    return (
+      <span
+        className="inline-block w-3 h-3 rounded-full border-2 animate-spin flex-shrink-0"
+        style={{ borderColor: `${color}40`, borderTopColor: color }}
+        aria-hidden="true"
+      />
+    );
+  }
+  return <div className="w-3 h-[2px] rounded flex-shrink-0" style={{ background: color }} />;
+}
+
 /* ── Frequency Response Chart ── */
 function FreqChart({
   bands,
   rawCurve,
+  rawCurveLoading = false,
   selectedBand,
   abMode,
   onAbToggle,
@@ -100,6 +120,7 @@ function FreqChart({
 }: {
   bands: Array<{ freq: number; gain: number; q: number; type: string; enabled: boolean }>;
   rawCurve: number[] | null;
+  rawCurveLoading?: boolean;
   selectedBand: number;
   abMode: "A" | "B";
   onAbToggle: (m: "A" | "B") => void;
@@ -286,19 +307,29 @@ function FreqChart({
           type="button"
           className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={() => toggleCurveVisibility("raw")}
-          disabled={!hasRawCurve}
+          disabled={rawCurveLoading || !hasRawCurve}
         >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#ffffff" }} />
-          <span className="text-[10px]" style={{ color: "#ffffff", opacity: showRaw ? 1 : 0.35 }}>Raw</span>
+          <LegendCurveIndicator loading={rawCurveLoading} color="#ffffff" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#ffffff", opacity: rawCurveLoading || showRaw ? 1 : 0.35 }}
+          >
+            Raw
+          </span>
         </button>
         <button
           type="button"
           className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={() => toggleCurveVisibility("equalized")}
-          disabled={!hasEqualizedCurve}
+          disabled={rawCurveLoading || !hasEqualizedCurve}
         >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#23d2fe" }} />
-          <span className="text-[10px]" style={{ color: "#23d2fe", opacity: showEqualized ? 1 : 0.35 }}>Equalized</span>
+          <LegendCurveIndicator loading={rawCurveLoading} color="#23d2fe" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#23d2fe", opacity: rawCurveLoading || showEqualized ? 1 : 0.35 }}
+          >
+            Equalized
+          </span>
         </button>
       </div>
 
@@ -578,6 +609,7 @@ export default function EQPage() {
   const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
   const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);
   const [currentRawCurve, setCurrentRawCurve] = useState<number[] | null>(null);
+  const [rawCurveLoading, setRawCurveLoading] = useState(false);
   const allowPeqRemoteSyncRef = useRef(false);
   const lastPeqCatalogSyncKeyRef = useRef("");
   const syncingHeadphoneRef = useRef(false);
@@ -1023,9 +1055,13 @@ export default function EQPage() {
       return;
     }
 
+    const copyBrand = currentPeq?.brand?.trim() ?? "";
+    const copyModel = currentPeq?.model?.trim() ?? "";
     const copyPayload: PeqChangePayload = {
       peqChange: {
         name: nextName,
+        ...(copyBrand ? { brand: copyBrand } : {}),
+        ...(copyModel ? { model: copyModel } : {}),
         filters: bands.map(bandToPeqFilter),
         autoPre: currentPeq?.autoPre ?? 0,
         preamp: currentPeq?.preamp ?? 0,
@@ -1064,6 +1100,8 @@ export default function EQPage() {
           ...prev,
           {
             name: nextName,
+            ...(addPresetMode === "copy" && copyBrand ? { brand: copyBrand } : {}),
+            ...(addPresetMode === "copy" && copyModel ? { model: copyModel } : {}),
             filters: localFilters,
             autoPre: localAutoPre,
             preamp: localPreamp,
@@ -1177,15 +1215,8 @@ export default function EQPage() {
 
   const loadRawCurveForPeq = useCallback(
     async (peq: { brand?: string; model?: string; name?: string } | undefined): Promise<number[] | null> => {
-      let brand = peq?.brand?.trim() ?? "";
-      let model = peq?.model?.trim() ?? "";
-
-      // Some presets only have `name` (e.g. "Apple AirPods Pro") and miss explicit brand/model.
-      if ((!brand || !model) && peq?.name) {
-        const [first, ...rest] = peq.name.trim().split(/\s+/);
-        if (!brand && first) brand = first;
-        if (!model && rest.length > 0) model = rest.join(" ");
-      }
+      const brand = peq?.brand?.trim() ?? "";
+      const model = peq?.model?.trim() ?? "";
       if (!brand || !model) return null;
 
       const modelCurve = await getModelCurve(brand, model);
@@ -1326,11 +1357,20 @@ export default function EQPage() {
     syncingHeadphoneRef.current = true;
     setBandsForBothModes(nextBands);
     setSelectedBandByMode({ A: 0, B: 0 });
+    const shouldFetchModelCurve = !!(peq.brand?.trim() && peq.model?.trim());
+    if (shouldFetchModelCurve) {
+      setRawCurveLoading(true);
+      setCurrentRawCurve(null);
+    } else {
+      setRawCurveLoading(false);
+    }
+
     let cancelled = false;
     void (async () => {
       const raw = await loadRawCurveForPeq(peq as { brand?: string; model?: string });
       if (cancelled) return;
       setCurrentRawCurve(raw);
+      setRawCurveLoading(false);
       renderCharts(nextBands, raw, false);
     })();
     requestAnimationFrame(() => {
@@ -1890,6 +1930,7 @@ export default function EQPage() {
         <FreqChart
           bands={bands}
           rawCurve={currentRawCurve}
+          rawCurveLoading={rawCurveLoading}
           selectedBand={selectedBand}
           abMode={abMode}
           onAbToggle={handleAbToggle}