feat: connection panel reponsive

src/pages/DspPage/DspPage.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { DSP } from '../../types/types';
+import Sidebar from '../../components/Sidebar/Sidebar';
+import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
+import ConnectionPanel from '../../components/dsp408/ConnectionSection/ConnectionSection';
+import GainSection from '../../components/dsp408/GainSection/GainSection';
+import { NotificationType } from '../../types/types';
+import './DspPage.css'
+
+function DSPPage({
+  dsp,
+  onConnect,
+  onDisconnect,
+  notify,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+}) {
+  const [activeSidebar, setActiveSidebar] = useState('overview');
+  const [sidebarExpanded, setSidebarExpanded] = useState(false);
+
+  const sidebarItems = [
+    {
+      id: 'overview',
+      label: 'Overview',
+      icon: <InfoIcon />,
+    },
+    {
+      id: 'gain',
+      label: 'Gain',
+      icon: <SlidersIcon />,
+    },
+  ];
+
+  const renderTab = () => {
+    switch (activeSidebar) {
+      case 'overview':
+        return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
+
+      case 'gain':
+        return <GainSection dsp={dsp} notify={notify} />;
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={`app-root ${sidebarExpanded ? 'app-root--sidebar-expanded' : ''}`}>
+      <Sidebar
+        items={sidebarItems}
+        activeId={activeSidebar}
+        onSelect={setActiveSidebar}
+        appName={dsp.name}
+        expanded={sidebarExpanded}
+        onToggle={() => setSidebarExpanded((v) => !v)}
+      />
+
+      <div className="dsp-content">{renderTab()}</div>
+    </div>
+  );
+}
+
+export default DSPPage;