refactor(equalizer): split Equalizer.tsx 508 → 166 LOC across 6 files (#680)

Extract the canvas frequency-response math, the custom vertical fader, the
AutoEQ parser, and the AutoEQ search panel out of Equalizer.tsx:

- utils/eqCurve.ts          biquadPeakResponse + drawCurve
- utils/autoEqParse.ts      AutoEq types + parseFixedBandEqString
- components/equalizer/VerticalFader.tsx
- hooks/useAutoEq.ts        AutoEQ search/apply state
- components/equalizer/AutoEqSection.tsx

Pure code-move, no behaviour change. Both call sites (AudioTab, PlayerBar)
default-import Equalizer unchanged.

src/components/equalizer/AutoEqSection.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { Search, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { useAutoEq } from '../../hooks/useAutoEq';
+
+/** Collapsible AutoEQ search panel inside the Equalizer. Owns its own search
+ * state via {@link useAutoEq}. */
+export default function AutoEqSection() {
+  const { t } = useTranslation();
+  const {
+    autoEqOpen, autoEqQuery, autoEqResults, autoEqLoading, autoEqError, autoEqApplied,
+    entriesLoading, setAutoEqQuery, setAutoEqError, setAutoEqResults,
+    applyAutoEqResult, toggleOpen,
+  } = useAutoEq();
+
+  return (
+    <div className="eq-autoeq-section">
+      <button className="eq-autoeq-toggle" onClick={toggleOpen}>
+        <Search size={13} />
+        <span>{t('settings.eqAutoEqTitle')}</span>
+        {autoEqOpen ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+      </button>
+
+      {autoEqOpen && (
+        <div className="eq-autoeq-body">
+          <div className="eq-autoeq-search-row">
+            <input
+              className="input"
+              placeholder={t('settings.eqAutoEqPlaceholder')}
+              value={autoEqQuery}
+              onChange={e => { setAutoEqQuery(e.target.value); setAutoEqError(null); }}
+              autoFocus
+              style={{ flex: 1, padding: '6px 12px', fontSize: 13 }}
+            />
+            {autoEqQuery && (
+              <button className="eq-ctrl-btn" onClick={() => { setAutoEqQuery(''); setAutoEqResults([]); }}>
+                <X size={13} />
+              </button>
+            )}
+          </div>
+
+          {(entriesLoading || autoEqLoading) && (
+            <div className="eq-autoeq-status">{t('settings.eqAutoEqSearching')}</div>
+          )}
+          {autoEqError && (
+            <div className="eq-autoeq-status eq-autoeq-error">{autoEqError}</div>
+          )}
+          {autoEqApplied && (
+            <div className="eq-autoeq-status eq-autoeq-applied">✓ {autoEqApplied}</div>
+          )}
+
+          {autoEqResults.length > 0 && (
+            <div className="eq-autoeq-results">
+              {autoEqResults.map((r, i) => (
+                <button
+                  key={`${r.name}|${r.source}|${i}`}
+                  className="eq-autoeq-result-btn"
+                  onClick={() => applyAutoEqResult(r)}
+                >
+                  <span>{r.name}</span>
+                  <span className="eq-autoeq-result-source">{r.source}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {!entriesLoading && !autoEqLoading && !autoEqError && autoEqQuery.length >= 2 && autoEqResults.length === 0 && (
+            <div className="eq-autoeq-status">{t('settings.eqAutoEqNoResults')}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/equalizer/VerticalFader.tsx

@@ -0,0 +1,58 @@
+import { useRef, useCallback } from 'react';
+
+// ─── Custom vertical fader (no native range input) ────────────────────────────
+
+const GAIN_MIN = -12, GAIN_MAX = 12;
+
+interface FaderProps {
+  value: number;
+  disabled: boolean;
+  onChange: (v: number) => void;
+}
+
+export default function VerticalFader({ value, disabled, onChange }: FaderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const gainToPct = (g: number) => (GAIN_MAX - g) / (GAIN_MAX - GAIN_MIN); // 0=top, 1=bottom
+  const pctToGain = (p: number) => GAIN_MAX - p * (GAIN_MAX - GAIN_MIN);
+
+  const updateFromY = useCallback((clientY: number) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+    const gain = parseFloat((Math.round(pctToGain(pct) / 0.1) * 0.1).toFixed(1)); // snap to 0.1 dB
+    onChange(Math.max(GAIN_MIN, Math.min(GAIN_MAX, gain)));
+  }, [onChange]);
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (disabled) return;
+    dragging.current = true;
+    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
+    updateFromY(e.clientY);
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current || disabled) return;
+    updateFromY(e.clientY);
+  };
+
+  const onPointerUp = () => { dragging.current = false; };
+
+  const thumbPct = gainToPct(value) * 100;
+
+  return (
+    <div
+      ref={trackRef}
+      className="eq-fader-custom"
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      style={{ cursor: disabled ? 'default' : 'pointer' }}
+    >
+      <div className="eq-track-line" />
+      <div className="eq-thumb" style={{ top: `${thumbPct}%`, opacity: disabled ? 0.3 : 1 }} />
+    </div>
+  );
+}