feat: add matrix section

src/features/dsp408/components/CompressorSection/CompressorSection.tsx

@@ -2,12 +2,11 @@
 import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
 import { OutputChannel, Ratio } from '../../types';
 import { DSP408 as DSP } from '../../../../types';
-import Button from '../../../../components/Button/Button';
 import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
 import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
 import MeterBar from '../../../../components/MeterBar/MeterBar';
-import { useMemo, useState, useEffect } from 'react';
-import { TriangleUpIcon, TriangleDownIcon } from '../../../../assets/icons/Triangle';
+import { useMemo, useState } from 'react';
+import ChoiceStepper from '../../../../components/ChoiceStepper/ChoiceStepper';
 import './CompressorSection.css';
 
 // Enum order defines stepper order (1:1 -> Limit).
@@ -109,85 +108,6 @@ type SetCompressorFn = (
   threshold: number
 ) => Promise<boolean>;
 
-function ChoiceStepper<T>({
-  value,
-  values,
-  formatLabel,
-  onChange,
-}: {
-  value: T;
-  values: readonly T[];
-  formatLabel: (value: T) => string;
-  onChange: (value: T) => void;
-}) {
-  const index = values.indexOf(value);
-  const canUp = index === -1 || index < values.length - 1;
-  const canDown = index > 0;
-
-  const [text, setText] = useState(formatLabel(value));
-
-  useEffect(() => {
-    setText(formatLabel(value));
-  }, [value, formatLabel]);
-
-  const step = (dir: 1 | -1) => {
-    const currentIndex = index === -1 ? 0 : index;
-    const nextIndex = Math.min(values.length - 1, Math.max(0, currentIndex + dir));
-    if (nextIndex !== currentIndex) onChange(values[nextIndex]);
-  };
-
-  const commitText = () => {
-    const match = values.find(
-      (v) => formatLabel(v).trim().toLowerCase() === text.trim().toLowerCase()
-    );
-    if (match !== undefined) {
-      onChange(match);
-    } else {
-      setText(formatLabel(value));
-    }
-  };
-
-  return (
-    <div className="choice-stepper">
-      <input
-        className="choice-stepper__input"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onBlur={commitText}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.currentTarget.blur();
-          } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            step(1);
-          } else if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            step(-1);
-          }
-        }}
-      />
-      <div className="choice-stepper__arrows">
-        <Button
-          variant="toggle"
-          className="choice-stepper__arrow-btn"
-          onClick={() => step(1)}
-          disabled={!canUp}
-        >
-          <TriangleUpIcon />
-        </Button>
-        <Button
-          variant="toggle"
-          className="choice-stepper__arrow-btn"
-          onClick={() => step(-1)}
-          disabled={!canDown}
-        >
-          <TriangleDownIcon />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
 function CompressorPanel({
   channel,
   dsp,