feat: sidebar allows recall, rename and display custom names

src/App.tsx

@@ -1,8 +1,6 @@
-import { invoke } from '@tauri-apps/api/core';
-
 import { useState } from 'react';
 import './App.css';
-import { DSP, DSPStatus, AppPage } from './types/types';
+import { DSP, AppPage } from './types/types';
 import TopBar from './components/Topbar/Topbar';
 import DSPPage from './pages/DspPage/DspPage';
 import AddDSPForm from './pages/AddDspPage/AddDspPage';
@@ -10,8 +8,7 @@ import { useNotifications } from './hooks/useNotifications';
 import Notifications from './components/Notifications/Notifications';
 import CreditsPage from './pages/CreditsPage/CreditsPage';
 import HomePage from './pages/HomePage/HomePage';
-import { getDSP408State, connectDSP408, disconnectDSP408 } from './api/dsp408';
-import { useDSPPolling } from './hooks/useDSPPolling';
+import { useDSP408 } from './hooks/useDSP408';
 
 function App() {
   const [dsps, setDsps] = useState<DSP[]>([]);
@@ -21,92 +18,14 @@ function App() {
   const activeDsp = dsps.find((d) => d.id === selected) ?? null;
   const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
 
-  useDSPPolling(dsps, selected, setDsps);
-
-  function setStatus(id: number, status: DSPStatus) {
-    setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
-  }
-
-  async function addDSP(dsp: Omit<DSP, 'id' | 'status' | 'state' | 'meters'>) {
-    try {
-      const id = await invoke<number>('create_dsp408', {
-        ip: dsp.ip,
-        port: dsp.port,
-        deviceId: Number(dsp.deviceId),
-      });
-
-      const newDsp: DSP = {
-        id,
-        ...dsp,
-        status: 'disconnected',
-        state: null,
-        meters: null,
-      };
-
-      setDsps((prev) => [...prev, newDsp]);
-      setSelected(id);
-      setPage('view-dsp');
-
-      notify('Added successfully', 'success', dsp.name);
-    } catch (err) {
-      notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
-    }
-  }
-
-  async function removeDSP(dsp: DSP) {
-    try {
-      let id = dsp.id;
-      await invoke('remove_dsp408', {
-        id,
-      });
-
-      setDsps((prev) => {
-        const next = prev.filter((d) => d.id !== id);
-
-        if (selected === id) {
-          setSelected(next.length ? next[0].id : null);
-        }
-
-        return next;
-      });
-
-      notify('Removed successfully', 'success', dsp?.name);
-    } catch (err) {
-      notify(`Remove failed: ${String(err)}`, 'error', dsp?.name);
-    }
-  }
-
-  async function connectDSP(dsp: DSP) {
-    setStatus(dsp.id, 'connecting');
-
-    try {
-      await connectDSP408(dsp.id);
-
-      setStatus(dsp.id, 'connected');
-
-      const state = await getDSP408State(dsp.id);
-
-      setDsps((prev) => prev.map((d) => (d.id === dsp.id ? { ...d, state } : d)));
-
-      notify('Connected', 'success', dsp.name);
-    } catch (err) {
-      notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
-
-      setStatus(dsp.id, 'disconnected');
-    }
-  }
-
-  async function disconnectDSP(dsp: DSP) {
-    try {
-      await disconnectDSP408(dsp.id);
-
-      setStatus(dsp.id, 'disconnected');
-
-      notify('Disconnected', 'success', dsp.name);
-    } catch (err) {
-      notify(`Disconnect failed: ${String(err)}`, 'error', dsp.name);
-    }
-  }
+  const dsp408 = useDSP408(
+    dsps,
+    setDsps,
+    selected,
+    setSelected,
+    setPage,
+    notify
+  );
 
   return (
     <div className="app">
@@ -128,7 +47,7 @@ function App() {
           setPage('view-dsp');
         }}
 
-        onRemove={removeDSP}
+        onRemove={dsp408.removeDSP}
 
         onAddClick={() => {
           setPage('add-dsp');
@@ -139,13 +58,11 @@ function App() {
         {page === 'credits' ? (
           <CreditsPage />
         ) : page === 'add-dsp' ? (
-          <AddDSPForm onCancel={() => setPage('home')} onAdd={addDSP} />
+          <AddDSPForm onCancel={() => setPage('home')} onAdd={dsp408.addDSP} />
         ) : activeDsp ? (
           <DSPPage
             dsp={activeDsp}
-            onConnect={() => connectDSP(activeDsp)}
-            onDisconnect={() => disconnectDSP(activeDsp)}
-            notify={notify}
+            dsp408={dsp408.forDSP(activeDsp)}
           />
         ) : (
           <HomePage