feat: remember panel per dsp

src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState, type SetStateAction } from 'react';
 import { Sidebar, SidebarItem } from '../../../../components/Sidebar/Sidebar';
 import {
   BoltIcon,
@@ -30,10 +30,11 @@ import './DSP408Panel.css';
 import MiscellaneousPanel from '../MiscellaneousSection/MiscellaneousSection';
 import { PasswordDialog } from '../PasswordDialog/PasswordDialog';
 
+const activeSidebarByDsp = new Map<number, SidebarId>();
+
 function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
-  const [activeSidebar, setActiveSidebar] = useState<SidebarId>('overview');
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [selectedPreset, setSelectedPreset] = useState(dsp.state?.presets.current_index ?? 0);
+  const [selectedPreset, setSelectedPreset] = useState(dsp.state.presets.current_index);
   const [presetLoading, setPresetLoading] = useState(false);
 
   const inputStates = dsp.state.current_config.input_states;
@@ -63,21 +64,36 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
     { id: 'miscellaneous', label: 'Miscellaneous', icon: <BoltIcon /> },
   ];
 
-  const presets = dsp.state.presets.names
+  const presets = [
-    ? [
+    { id: 'f00', name: 'Factory Preset' },
-        { id: 'f00', name: 'Factory Preset' },
+    ...(dsp.state.presets.names.map((name, index) => ({
-        ...dsp.state.presets.names.map((name, index) => ({
+      id: `u${String(index + 1).padStart(2, '0')}`,
-          id: `u${String(index + 1).padStart(2, '0')}`,
+      name,
-          name,
+    })) ??
-        })),
+      Array.from({ length: 20 }, (_, index) => ({
-      ]
+        id: `u${String(index + 1).padStart(2, '0')}`,
-    : [
+        name: 'Default Preset',
-        { id: 'f00', name: 'Factory Preset' },
+      }))),
-        ...Array.from({ length: 20 }, (_, index) => ({
+  ];
-          id: `u${String(index + 1).padStart(2, '0')}`,
+
-          name: 'Default Preset',
+  const [activeSidebar, setActiveSidebarState] = useState<SidebarId>(
-        })),
+    () => activeSidebarByDsp.get(dsp.id) ?? 'overview'
-      ];
+  );
+
+  useEffect(() => {
+    const saved = activeSidebarByDsp.get(dsp.id) ?? 'overview';
+    setActiveSidebarState(saved);
+  }, [dsp.id]);
+
+  const setActiveSidebar = (value: SetStateAction<SidebarId>) => {
+    setActiveSidebarState(prev => {
+      const next = typeof value === 'function' ? value(prev) : value;
+
+      activeSidebarByDsp.set(dsp.id, next);
+
+      return next;
+    });
+  };
 
   const onAppChange = async (id: string) => {
     const presetIndex = presets.findIndex((preset) => preset.id === id);