feat: sidebar allows recall, rename and display custom names

src/pages/DspPage/DspPage.tsx

@@ -4,27 +4,25 @@ import Sidebar from '../../components/Sidebar/Sidebar';
 import { InfoIcon, KnobGainIcon } from '../../assets/icons/AudioIcons';
 import ConnectionPanel from '../../components/dsp408/ConnectionSection/ConnectionSection';
 import GainSection from '../../components/dsp408/GainSection/GainSection';
-import { NotificationType } from '../../types/types';
+import { DSP408Device } from '../../hooks/useDSP408';
 import './DspPage.css';
 import GateSection from '../../components/dsp408/GateSection/GateSection';
-import { invoke } from '@tauri-apps/api/core';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
+import { InputChannel, OutputChannel } from '../../types/dsp408State';
 
 function DSPPage({
   dsp,
-  onConnect,
-  onDisconnect,
-  notify,
+  dsp408,
 }: {
   dsp: DSP;
-  onConnect: () => void;
-  onDisconnect: () => void;
-  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+  dsp408: DSP408Device;
 }) {
   const [activeSidebar, setActiveSidebar] = useState('overview');
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
   const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0);
   const [presetLoading, setPresetLoading] = useState(false);
+  const inputStates = dsp.state?.current_config.input_states;
+  const outputStates = dsp.state?.current_config.output_states;
   const sidebarItems = [
     {
       id: 'overview',
@@ -68,62 +66,63 @@ function DSPPage({
     },
     {
       id: 'ina',
-      label: 'In A',
+      label: `In A (${inputStates?.[InputChannel.InA]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'inb',
-      label: 'In B',
+      label: `In B (${inputStates?.[InputChannel.InB]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'inc',
-      label: 'In C',
+      label: `In C (${inputStates?.[InputChannel.InC]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'ind',
-      label: 'In D (TESTTEST)',
+      label: `In D (${inputStates?.[InputChannel.InD]?.name})`,
       icon: <KnobGainIcon />,
     },
+
     {
       id: 'out1',
-      label: 'Out 1',
+      label: `Out 1 (${outputStates?.[OutputChannel.Out1]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out2',
-      label: 'Out 2',
+      label: `Out 2 (${outputStates?.[OutputChannel.Out2]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out3',
-      label: 'Out 3',
+      label: `Out 3 (${outputStates?.[OutputChannel.Out3]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out4',
-      label: 'Out 4',
+      label: `Out 4 (${outputStates?.[OutputChannel.Out4]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out5',
-      label: 'Out 5',
+      label: `Out 5 (${outputStates?.[OutputChannel.Out5]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out6',
-      label: 'Out 6',
+      label: `Out 6 (${outputStates?.[OutputChannel.Out6]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out7',
-      label: 'Out 7',
+      label: `Out 7 (${outputStates?.[OutputChannel.Out7]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
       id: 'out8',
-      label: 'Out 8',
+      label: `Out 8 (${outputStates?.[OutputChannel.Out8]?.name})`,
       icon: <KnobGainIcon />,
     },
     {
@@ -154,52 +153,14 @@ function DSPPage({
         })),
       ];
 
-  const recallPreset = async (presetIndex: number) => {
-    try {
-      const success = await invoke<boolean>('recall_preset', {
-        id: dsp.id,
-        presetIndex,
-      });
-
-      if (success) {
-        notify(`Preset ${presetIndex} recalled`, 'success', dsp.name);
-      } else {
-        notify('Failed to recall preset', 'error', dsp.name);
-      }
-
-      return success;
-    } catch (err) {
-      notify(`Preset recall failed: ${String(err)}`, 'error', dsp.name);
-      return false;
-    }
-  };
-
-  const setCurrentPresetName = async (name: string) => {
-    try {
-      const success = await invoke<boolean>('set_current_preset_name', {
-        id: dsp.id,
-        name,
-      });
-
-      if (success) {
-        notify(`Preset renamed`, 'success', dsp.name);
-      } else {
-        notify('Failed to rename preset', 'error', dsp.name);
-      }
-
-      return success;
-    } catch (err) {
-      notify(`Preset rename failed: ${String(err)}`, 'error', dsp.name);
-      return false;
-    }
-  };
+  // const { recallPreset, setCurrentPresetName } = useDSPPresets(dsp, setDsps, notify);
 
   const onAppChange = async (id: string) => {
     const presetIndex = presets.findIndex((preset) => preset.id === id);
     if (presetIndex === -1) return;
 
     setPresetLoading(true);
-    const success = await recallPreset(presetIndex);
+    const success = await dsp408.recallPreset(presetIndex);
     if (success) {
       setSelectedPreset(presetIndex);
     }
@@ -209,13 +170,13 @@ function DSPPage({
   const renderTab = () => {
     switch (activeSidebar) {
       case 'overview':
-        return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
+        return <ConnectionPanel dsp={dsp} onConnect={dsp408.connect} onDisconnect={dsp408.disconnect} />;
 
-      case 'gain':
-        return <GainSection dsp={dsp} notify={notify} />;
+      // case 'gain':
+      //   return <GainSection dsp={dsp} notify={notify} />;
 
-      case 'gate':
-        return <GateSection dsp={dsp} notify={notify} />;
+      // case 'gate':
+      //   return <GateSection dsp={dsp} notify={notify} />;
 
       default:
         return null;
@@ -232,7 +193,7 @@ function DSPPage({
         appOptions={presets}
         selectedAppId={presets[selectedPreset]?.id}
         onAppChange={onAppChange}
-        onAppRename={setCurrentPresetName}
+        onAppRename={dsp408.setCurrentPresetName}
         expanded={sidebarExpanded}
         onToggle={() => setSidebarExpanded((v) => !v)}
       />