refactor: folders/files to group dsp logic

src/App.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import './App.css';
-import { DSP, AppPage } from './types/types';
+import { DSP, AppPage } from './types';
 import TopBar from './components/Topbar/Topbar';
 import DSPPage from './pages/DspPage/DspPage';
 import AddDSPForm from './pages/AddDspPage/AddDspPage';

src/components/Notifications/Notifications.tsx

@@ -1,4 +1,4 @@
-import type { Notification } from '../../types/types';
+import type { Notification } from '../../types';
 import './Notifications.css';
 
 type Props = {

src/components/topbar/Topbar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { DSP, AppPage } from '../../types/types';
+import { DSP, AppPage } from '../../types';
 import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';

src/dsp/dspApi.ts

@@ -1,7 +1,7 @@
-import { DSP, DSPTypes, AppPage } from '../types/types';
+import { DSP, DSPTypes, AppPage } from '../types';
 import { SetDsps, NotifyFn } from './dspShared';
-import { forDSP408, create as createDSP408 } from './dsp408';
-import { DSP408Api } from './dsp408';
+import { forDSP408, create as createDSP408 } from '../features/dsp408/dsp408';
+import { DSP408Api } from '../features/dsp408/dsp408';
 // import { forDSP204 } from './dsp204';
 
 export type DSPInstance = { dsp: Extract<DSP, { type: 'DSP408' }>; api: DSP408Api };

src/dsp/dspShared.ts

@@ -1,4 +1,4 @@
-import { DSP, DSPTypes } from '../types/types';
+import { DSP, DSPTypes } from '../types';
 import { stopPollingFor } from './pollRegistry';
 
 export type SetDsps = React.Dispatch<React.SetStateAction<DSP[]>>;

src/dsp/pollRegistry.ts

@@ -1,4 +1,4 @@
-import { DSPTypes } from '../types/types';
+import { DSPTypes } from '../types';
 
 const stoppers = new Map<DSPTypes, (id: number) => void>();
 

src/features/dsp408/components/CompressorSection/CompressorSection.tsx

@@ -1,13 +1,13 @@
 // CompressorSection.tsx
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { OutputChannel, Ratio } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import Button from '../../Button/Button';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
-import MeterBar from '../../MeterBar/MeterBar';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { OutputChannel, Ratio } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
+import MeterBar from '../../../../components/MeterBar/MeterBar';
 import { useMemo, useState, useEffect } from 'react';
-import { TriangleUpIcon, TriangleDownIcon } from '../../../assets/icons/Triangle';
+import { TriangleUpIcon, TriangleDownIcon } from '../../../../assets/icons/Triangle';
 import './CompressorSection.css';
 
 // Enum order defines stepper order (1:1 -> Limit).

src/features/dsp408/components/ConnectionSection/ConnectionSection.tsx

@@ -1,7 +1,7 @@
-import { DSP } from '../../../types/types';
-import Button from '../../Button/Button';
-import Card from '../../Card/Card';
-import Led from '../../Led/Led';
+import { DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import Card from '../../../../components/Card/Card';
+import Led from '../../../../components/Led/Led';
 
 import './ConnectionSection.css';
 

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

@@ -1,20 +1,20 @@
 import { useState } from 'react';
-import { DSP } from '../../types/types';
-import Sidebar from '../../components/Sidebar/Sidebar';
-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';
-import GateSection from '../../components/dsp408/GateSection/GateSection';
-import LimiterSection from '../../components/dsp408/LimiterSection/LimiterSection';
-import DelaySection from '../../components/dsp408/DelaySection/DelaySection';
-import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
-import { InputChannel, OutputChannel } from '../../types/dsp408';
-import MatrixSection from '../../components/dsp408/Matrixsection/Matrixsection';
-import GeqSection from '../../components/dsp408/GeqSection/GeqSection';
-import InputSection from '../../components/dsp408/InputSection/InputSection';
-import { DSP408Api } from '../../dsp/dsp408';
-import '../DspPage/DspPage.css';
+import { DSP } from '../../../../types';
+import Sidebar from '../../../../components/Sidebar/Sidebar';
+import { InfoIcon, KnobGainIcon, TextIcon } from '../../../../assets/icons/AudioIcons';
+import ConnectionPanel from '../ConnectionSection/ConnectionSection';
+import GainSection from '../GainSection/GainSection';
+import CompressorSection from '../CompressorSection/CompressorSection';
+import GateSection from '../GateSection/GateSection';
+import LimiterSection from '../LimiterSection/LimiterSection';
+import DelaySection from '../DelaySection/DelaySection';
+import LoadingOverlay from '../../../../components/LoadingOverlay/LoadingOverlay';
+import { InputChannel, OutputChannel } from '../../types';
+import MatrixSection from '../Matrixsection/Matrixsection';
+import GeqSection from '../GeqSection/GeqSection';
+import InputSection from '../InputSection/InputSection';
+import { DSP408Api } from '../../dsp408';
+import './DSP408Panel.css';
 
 type DSP408 = Extract<DSP, { type: 'DSP408' }>;
 
@@ -132,15 +132,8 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) {
       case 'limiter':
         return <LimiterSection dsp={dsp} set_limiter={api.setLimiter} />;
 
-      //   case 'delay':
-      //     return (
-      //       <DelaySection
-      //         dsp={dsp}
-      //         setDelay={api.setDelay}
-      //         setDelayUnit={api.setDelayUnit}
-      //         setDSPState={api.setDSPState}
-      //       />
-      //     );
+      case 'delay':
+        return <DelaySection dsp={dsp} setDelay={api.setDelay} setDelayUnit={api.setDelayUnit} />;
 
       case 'ina':
         return (

src/features/dsp408/components/DelaySection/DelaySection.tsx

@@ -1,17 +1,12 @@
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { InputChannel, Channel, OutputChannel, DelayUnit } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import Button from '../../Button/Button';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { InputChannel, Channel, OutputChannel, DelayUnit } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
 import { useMemo, useState } from 'react';
 import './DelaySection.css';
-
-const DELAY_RANGES: Record<DelayUnit, [number, number]> = {
-  [DelayUnit.Millisecond]: [0, 680.0],
-  [DelayUnit.Meter]: [0, 233.58],
-  [DelayUnit.Feet]: [0, 766.329],
-};
+import { DELAY_RANGES } from '../../types';
 
 const UNIT_LABEL: Record<DelayUnit, string> = {
   [DelayUnit.Millisecond]: 'ms',
@@ -155,12 +150,10 @@ function DelaySection({
   dsp,
   setDelay,
   setDelayUnit,
-  setDSPState,
 }: {
   dsp: DSP;
   setDelay: SetDelayFn;
   setDelayUnit: (unit: DelayUnit) => Promise<boolean>;
-  setDSPState: (updater: (dsp: DSP) => DSP) => void;
 }) {
   const unit = dsp.state?.current_config.delay_unit ?? DelayUnit.Millisecond;
 
@@ -224,93 +217,10 @@ function DelaySection({
     return committedDelay(channel);
   };
 
-  function convertDelayUnit(value: number, from: DelayUnit, to: DelayUnit): number {
-    const [, fromMax] = DELAY_RANGES[from];
-    const [, toMax] = DELAY_RANGES[to];
-
-    if (fromMax === 0) return 0;
-
-    const ratio = value / fromMax;
-
-    return ratio * toMax;
-  }
-
   const handleUnitChange = async (newUnit: DelayUnit) => {
     if (newUnit === unit) return;
 
-    const success = await setDelayUnit(newUnit);
-
-    if (!success) return;
-
-    setDSPState((d) => {
-      if (!d.state) return d;
-
-      const currentConfig = d.state.current_config;
-
-      return {
-        ...d,
-        state: {
-          ...d.state,
-          current_config: {
-            ...currentConfig,
-            delay_unit: newUnit,
-
-            input_states: {
-              ...currentConfig.input_states,
-              [InputChannel.InA]: {
-                ...currentConfig.input_states[InputChannel.InA],
-                delay: convertDelayUnit(
-                  currentConfig.input_states[InputChannel.InA].delay,
-                  unit,
-                  newUnit
-                ),
-              },
-              [InputChannel.InB]: {
-                ...currentConfig.input_states[InputChannel.InB],
-                delay: convertDelayUnit(
-                  currentConfig.input_states[InputChannel.InB].delay,
-                  unit,
-                  newUnit
-                ),
-              },
-              [InputChannel.InC]: {
-                ...currentConfig.input_states[InputChannel.InC],
-                delay: convertDelayUnit(
-                  currentConfig.input_states[InputChannel.InC].delay,
-                  unit,
-                  newUnit
-                ),
-              },
-              [InputChannel.InD]: {
-                ...currentConfig.input_states[InputChannel.InD],
-                delay: convertDelayUnit(
-                  currentConfig.input_states[InputChannel.InD].delay,
-                  unit,
-                  newUnit
-                ),
-              },
-            },
-
-            output_states: {
-              ...currentConfig.output_states,
-              ...Object.fromEntries(
-                Object.values(OutputChannel).map((channel) => [
-                  channel,
-                  {
-                    ...currentConfig.output_states[channel],
-                    delay: convertDelayUnit(
-                      currentConfig.output_states[channel].delay,
-                      unit,
-                      newUnit
-                    ),
-                  },
-                ])
-              ),
-            },
-          },
-        },
-      };
-    });
+    await setDelayUnit(newUnit);
   };
 
   const inputRows = inputs.map((channel) => ({

src/features/dsp408/components/GainSection/GainSection.tsx

@@ -1,9 +1,9 @@
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import Button from '../../Button/Button';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { InputChannel, Channel, OutputChannel } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
 import './GainSection.css';
 
 function GainPanel({

src/features/dsp408/components/GateSection/GateSection.tsx

@@ -1,10 +1,10 @@
 // GateSection.tsx
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { InputChannel } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
-import MeterBar from '../../MeterBar/MeterBar';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { InputChannel } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
+import MeterBar from '../../../../components/MeterBar/MeterBar';
 import { useMemo, useState } from 'react';
 import './GateSection.css';
 

src/features/dsp408/components/GeqSection/GeqSection.tsx

@@ -1,9 +1,9 @@
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { InputChannel, DiscreteFrequency } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import Button from '../../Button/Button';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { InputChannel, DiscreteFrequency } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import Button from '../../../../components/Button/Button';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
 import { useMemo, useState } from 'react';
 import './GeqSection.css';
 

src/features/dsp408/components/InputSection/InputSection.tsx

@@ -1,17 +1,17 @@
 // InputSection.tsx
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
 // ASSUMPTION: an InputChannel enum exists alongside OutputChannel, mapping
 // input pages 1-8 similarly (In1 -> 0, In2 -> 1, ...). Adjust import/values
 // if the actual enum differs.
-import { InputChannel, Channel, PEQBand, PEQFilter, PEQ, Meter } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import { CrossoverFilter } from '../../../types/dsp408';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
+import { InputChannel, Channel, PEQBand, PEQFilter, PEQ, Meter } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import { CrossoverFilter } from '../../types';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
 import { useRef, useState } from 'react';
 import './InputSection.css';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import Button from '../../Button/Button';
-import MeterBar from '../../MeterBar/MeterBar';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import Button from '../../../../components/Button/Button';
+import MeterBar from '../../../../components/MeterBar/MeterBar';
 
 const FREQ_MIN = 20;
 const FREQ_MAX = 20000;

src/features/dsp408/components/LimiterSection/LimiterSection.tsx

@@ -1,10 +1,10 @@
 // LimiterSection.tsx
-import VerticalSlider from '../../VerticalSlider/VerticalSlider';
-import { OutputChannel } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
-import ChannelGroup from '../../ChannelGroup/ChannelGroup';
-import { LinearGraph } from '../../LinearGraph/LinearGraph';
-import MeterBar from '../../MeterBar/MeterBar';
+import VerticalSlider from '../../../../components/VerticalSlider/VerticalSlider';
+import { OutputChannel } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
+import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
+import { LinearGraph } from '../../../../components/LinearGraph/LinearGraph';
+import MeterBar from '../../../../components/MeterBar/MeterBar';
 import { useMemo, useState } from 'react';
 import './LimiterSection.css';
 

src/features/dsp408/components/Matrixsection/Matrixsection.tsx

@@ -1,7 +1,7 @@
 // MatrixSection.tsx
 import { Fragment, useRef, useState } from 'react';
-import { InputChannel, OutputChannel } from '../../../types/dsp408';
-import { DSP408 as DSP } from '../../../types/types';
+import { InputChannel, OutputChannel } from '../../types';
+import { DSP408 as DSP } from '../../../../types';
 import './MatrixSection.css';
 
 // ASSUMPTION: an InputChannel enum exists alongside OutputChannel in

src/features/dsp408/dsp408.ts

@@ -1,5 +1,5 @@
 import { invoke } from '@tauri-apps/api/core';
-import { DSP } from '../types/types';
+import { DSP } from '../../types';
 import {
   Channel,
   InputChannel,
@@ -11,10 +11,11 @@ import {
   PEQFilter,
   PEQBand,
   InputSource,
-} from '../types/dsp408';
-import { SetDsps, NotifyFn, updateDSP, setPollingPaused } from './dspShared';
-import { registerPollStopper } from './pollRegistry';
-import { defaultDSPState, defaultMeters } from '../types/dsp408';
+} from './types';
+import { SetDsps, NotifyFn, updateDSP, setPollingPaused } from '../../dsp/dspShared';
+import { registerPollStopper } from '../../dsp/pollRegistry';
+import { defaultDSPState, defaultMeters } from './types';
+import { DELAY_RANGES } from './types';
 
 type DSP408 = Extract<DSP, { type: 'DSP408' }>;
 
@@ -737,16 +738,42 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
     async setDelayUnit(unit: DelayUnit): Promise<boolean> {
       const updateDelayUnit = () => {
+        function convertDelayUnit(value: number, from: DelayUnit, to: DelayUnit): number {
+          if (from === to) return value;
+
+          const [, fromMax] = DELAY_RANGES[from];
+          const [, toMax] = DELAY_RANGES[to];
+
+          if (fromMax === 0) return 0;
+
+          const ratio = value / fromMax;
+
+          return ratio * toMax;
+        }
+
         updateDSP(setDsps, dsp.id, (d) => {
           if (!d.state) return d;
 
+          const currentConfig = d.state.current_config;
+          const oldUnit = currentConfig.delay_unit;
+
+          const convertAll = <T extends Record<string, { delay: number }>>(states: T): T =>
+            Object.fromEntries(
+              Object.entries(states).map(([channel, s]) => [
+                channel,
+                { ...s, delay: convertDelayUnit(s.delay, oldUnit, unit) },
+              ])
+            ) as T;
+
           return {
             ...d,
             state: {
               ...d.state,
               current_config: {
-                ...d.state.current_config,
+                ...currentConfig,
                 delay_unit: unit,
+                input_states: convertAll(currentConfig.input_states),
+                output_states: convertAll(currentConfig.output_states),
               },
             },
           };

src/features/dsp408/types.ts

@@ -420,3 +420,9 @@ const createDefaultMeter = (): Meter => ({
 export const defaultMeters: Meters = {
   channels: Array.from({ length: 12 }, createDefaultMeter),
 };
+
+export const DELAY_RANGES: Record<DelayUnit, [number, number]> = {
+  [DelayUnit.Millisecond]: [0, 680.0],
+  [DelayUnit.Meter]: [0, 233.58],
+  [DelayUnit.Feet]: [0, 766.329],
+};

src/hooks/useNotifications.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef } from 'react';
-import { NotificationType, Notification } from '../types/types';
+import { NotificationType, Notification } from '../types';
 
 export function useNotifications() {
   const [notifications, setNotifications] = useState<Notification[]>([]);

src/pages/AddDspPage/AddDspPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { DSP, DSP_DEFAULT_PARAMETERS, DSPTypes } from '../../types/types';
+import { DSP, DSP_DEFAULT_PARAMETERS, DSPTypes } from '../../types';
 import Button from '../../components/Button/Button';
 import Card from '../../components/Card/Card';
 

src/pages/DspPage/DspPage.tsx

@@ -1,5 +1,5 @@
 import { DSPInstance } from '../../dsp/dspApi';
-import DSP408Panel from '../DSP408Panel/DSP408Panel';
+import DSP408Panel from '../../features/dsp408/components/DSP408Panel/DSP408Panel';
 
 function DSPPage({ instance }: { instance: DSPInstance }) {
   if (instance.dsp.type === 'DSP408') {

src/types.ts

@@ -1,4 +1,4 @@
-import { DSPState as DSP408State, Meters as DSP408Meters } from './dsp408';
+import { DSPState as DSP408State, Meters as DSP408Meters } from './features/dsp408/types';
 
 export type DSPStatus = 'connected' | 'connecting' | 'disconnected';