feat: custom input formatting + custom step

src/pages/DspPage/DspPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { DSP } from '../../types/types';
 import Sidebar from '../../components/Sidebar/Sidebar';
-import { InfoIcon, KnobGainIcon } from '../../assets/icons/AudioIcons';
+import { InfoIcon, KnobGainIcon, TextIcon } from '../../assets/icons/AudioIcons';
 import ConnectionPanel from '../../components/dsp408/ConnectionSection/ConnectionSection';
 import GainSection from '../../components/dsp408/GainSection/GainSection';
 import CompressorSection from '../../components/dsp408/CompressorSection/CompressorSection';
@@ -14,6 +14,7 @@ import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import { InputChannel, OutputChannel } from '../../types/dsp408State';
 import MatrixSection from '../../components/dsp408/Matrixsection/Matrixsection';
 import GeqSection from '../../components/dsp408/GeqSection/GeqSection';
+import InputSection from '../../components/dsp408/InputSection/InputSection';
 
 function DSPPage({ dsp, dsp408 }: { dsp: DSP; dsp408: DSP408Device }) {
   const [activeSidebar, setActiveSidebar] = useState('overview');
@@ -65,69 +66,69 @@ function DSPPage({ dsp, dsp408 }: { dsp: DSP; dsp408: DSP408Device }) {
     },
     {
       id: 'ina',
-      label: `In A (${inputStates?.[InputChannel.InA]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${inputStates?.[InputChannel.InA]?.name}`,
+      icon: <TextIcon>In A</TextIcon>,
     },
     {
       id: 'inb',
-      label: `In B (${inputStates?.[InputChannel.InB]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${inputStates?.[InputChannel.InB]?.name}`,
+      icon: <TextIcon>In B</TextIcon>,
     },
     {
       id: 'inc',
-      label: `In C (${inputStates?.[InputChannel.InC]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${inputStates?.[InputChannel.InC]?.name}`,
+      icon: <TextIcon>In C</TextIcon>,
     },
     {
       id: 'ind',
-      label: `In D (${inputStates?.[InputChannel.InD]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${inputStates?.[InputChannel.InD]?.name}`,
+      icon: <TextIcon>In D</TextIcon>,
     },
 
     {
       id: 'out1',
-      label: `Out 1 (${outputStates?.[OutputChannel.Out1]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out1]?.name}`,
+      icon: <TextIcon>Out 1</TextIcon>,
     },
     {
       id: 'out2',
-      label: `Out 2 (${outputStates?.[OutputChannel.Out2]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out2]?.name}`,
+      icon: <TextIcon>Out 2</TextIcon>,
     },
     {
       id: 'out3',
-      label: `Out 3 (${outputStates?.[OutputChannel.Out3]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out3]?.name}`,
+      icon: <TextIcon>Out 3</TextIcon>,
     },
     {
       id: 'out4',
-      label: `Out 4 (${outputStates?.[OutputChannel.Out4]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out4]?.name}`,
+      icon: <TextIcon>Out 4</TextIcon>,
     },
     {
       id: 'out5',
-      label: `Out 5 (${outputStates?.[OutputChannel.Out5]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out5]?.name}`,
+      icon: <TextIcon>Out 5</TextIcon>,
     },
     {
       id: 'out6',
-      label: `Out 6 (${outputStates?.[OutputChannel.Out6]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out6]?.name}`,
+      icon: <TextIcon>Out 6</TextIcon>,
     },
     {
       id: 'out7',
-      label: `Out 7 (${outputStates?.[OutputChannel.Out7]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out7]?.name}`,
+      icon: <TextIcon>Out 7</TextIcon>,
     },
     {
       id: 'out8',
-      label: `Out 8 (${outputStates?.[OutputChannel.Out8]?.name})`,
-      icon: <KnobGainIcon />,
+      label: `${outputStates?.[OutputChannel.Out8]?.name}`,
+      icon: <TextIcon>Out 8</TextIcon>,
     },
     {
       id: 'miscellaneous',
       label: 'Miscellaneous',
-      icon: <KnobGainIcon />,
+      icon: <TextIcon>Out 1</TextIcon>,
     },
   ];
   const presets = dsp.state?.presets.names
@@ -200,6 +201,17 @@ function DSPPage({ dsp, dsp408 }: { dsp: DSP; dsp408: DSP408Device }) {
           />
         );
 
+      case 'ina':
+        return (
+          <InputSection
+            dsp={dsp}
+            channel={InputChannel.InA}
+            set_low_pass={dsp408.setLowPass}
+            set_high_pass={dsp408.setHighPass}
+            setPeq={dsp408.setPeqBand}
+          />
+        );
+
       case 'matrix':
         return (
           <MatrixSection