feat: add gain responsive

package.json

@@ -8,8 +8,8 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\""
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css}\""
   },
   "dependencies": {
     "@tauri-apps/api": "^2",

src-tauri/src/commands.rs

@@ -172,3 +172,35 @@ pub async fn set_channel_gain(
         Ok(r)
     })
 }
+
+#[tauri::command]
+pub async fn set_mute(
+    state: State<'_, AppState>,
+    id: u64,
+    channel: dsp_thomann::dsp408::types::Channel,
+    muted: bool,
+) -> Result<bool, String> {
+    state.with_device_mut(id, |device| {
+        let r = device.dsp
+            .set_mute(channel, muted)
+            .map_err(|e| e.to_string())?;
+
+        Ok(r)
+    })
+}
+
+#[tauri::command]
+pub async fn set_channel_inverse_gain(
+    state: State<'_, AppState>,
+    id: u64,
+    channel: dsp_thomann::dsp408::types::Channel,
+    inverted: bool,
+) -> Result<bool, String> {
+    state.with_device_mut(id, |device| {
+        let r = device.dsp
+            .set_channel_inverse_gain(channel, inverted)
+            .map_err(|e| e.to_string())?;
+
+        Ok(r)
+    })
+}

src-tauri/src/lib.rs

@@ -15,6 +15,8 @@ pub fn run() {
                 commands::disconnect_dsp408,
                 commands::get_dsp_state,
                 commands::set_channel_gain,
+                commands::set_mute,
+                commands::set_channel_inverse_gain
             ]
         )
         .run(tauri::generate_context!())

src/App.tsx

@@ -1,16 +1,16 @@
 import { invoke } from '@tauri-apps/api/core';
 
 import { useState } from 'react';
-import '../../styles/App.css';
+import './styles/App.css';
-import { DSP, DSPStatus, AppPage } from '../../types/types';
+import { DSP, DSPStatus, AppPage } from './types/types';
-import TopBar from '../topbar/Topbar';
+import TopBar from './components/topbar/Topbar';
-import DSPPage from '../dsp408/DspPage';
+import DSPPage from './pages/DspPage';
-import AddDSPForm from './AddDspPage';
+import AddDSPForm from './pages/AddDspPage';
-import { useNotifications } from '../../hooks/useNotifications';
+import { useNotifications } from './hooks/useNotifications';
-import Notifications from '../Notifications';
+import Notifications from './components/Notifications/Notifications';
-import { DSPState } from '../../types/dsp408State';
+import { DSPState } from './types/dsp408State';
-import CreditsPage from './CreditsPage';
+import CreditsPage from './pages/CreditsPage';
-import HomePage from './HomePage';
+import HomePage from './pages/HomePage';
 
 function App() {
   const [dsps, setDsps] = useState<DSP[]>([]);
@@ -126,7 +126,11 @@ function App() {
 
   return (
     <div className="app">
-      <Notifications notifications={notifications} onRemove={removeNotification} onHover={hoverNotification}/>
+      <Notifications
+        notifications={notifications}
+        onRemove={removeNotification}
+        onHover={hoverNotification}
+      />
 
       <TopBar
         dsps={dsps}

src/components/Button/Button.css

@@ -0,0 +1,80 @@
+.btn {
+  width: auto;
+  height: 36px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--dur-base) var(--ease-standard),
+    border-color var(--dur-base) var(--ease-standard),
+    opacity var(--dur-base) var(--ease-standard);
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Primary */
+.btn-primary {
+  background: var(--accent-brand);
+  color: #0d0f12;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #6f9bf2;
+}
+
+/* Ghost */
+.btn-ghost {
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-ghost:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+/* Toggle */
+.btn-toggle {
+  width: 90%;
+  height: 40px;
+  margin: 8px auto;
+  padding: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--radius-sm);
+
+  /* same as ghost */
+  background: transparent;
+  border-color: var(--border-hairline);
+  color: var(--text-muted);
+}
+
+.btn-toggle:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+  background: transparent;
+}
+
+/* Active states only */
+.btn-toggle.active-warning {
+  background: var(--accent-connecting);
+  border-color: var(--accent-connecting);
+  color: var(--bg-void);
+}
+
+.btn-toggle.active-danger {
+  background: var(--accent-down);
+  border-color: var(--accent-down);
+  color: var(--text-primary);
+}

src/components/Button/Button.tsx

@@ -0,0 +1,32 @@
+import './Button.css';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'ghost' | 'toggle' | 'outline';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Button({
+  variant = 'primary',
+  children,
+  className = '',
+  disabled,
+  onClick,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`btn btn-${variant} ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/Notifications/Notifications.css

@@ -0,0 +1,103 @@
+.notifications {
+  position: fixed;
+  right: var(--space-5);
+  bottom: var(--space-5);
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  width: 320px;
+  pointer-events: none;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+
+  padding: 10px var(--space-3);
+  border-radius: var(--radius-md);
+
+  font-size: 14px;
+
+  box-shadow: var(--shadow-md);
+
+  animation: notification-in var(--dur-slow) var(--ease-out) forwards;
+
+  pointer-events: auto;
+}
+
+.notification-out {
+  animation: notification-out var(--dur-slow) var(--ease-in) forwards;
+}
+
+.notification-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.notification-close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.notification.error {
+  background: #b42318;
+  color: white;
+}
+
+.notification.success {
+  background: #15803d;
+  color: white;
+}
+
+.notification.warning {
+  background: #ca8a04;
+  color: white;
+}
+
+.notification-message {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes notification-in {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes notification-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+}

src/components/Notifications/Notifications.tsx

@@ -1,4 +1,5 @@
-import type { Notification } from '../types/types';
+import type { Notification } from '../../types/types';
+import './Notifications.css';
 
 type Props = {
   notifications: Notification[];
@@ -6,11 +7,7 @@ type Props = {
   onHover: (id: number, hovering: boolean) => void;
 };
 
-export default function Notifications({
+export default function Notifications({ notifications, onRemove, onHover }: Props) {
-  notifications,
-  onRemove,
-  onHover,
-}: Props) {
   return (
     <div className="notifications">
       {notifications.map((n) => (

src/components/Sidebar/Sidebar.css

@@ -17,7 +17,6 @@
   max-width: 200px;
 }
 
-
 /* ---------- Icon ---------- */
 
 .sidebar-icon {
@@ -43,7 +42,6 @@
   fill: none;
 }
 
-
 /* ---------- Item ---------- */
 
 .sidebar-item {
@@ -71,7 +69,6 @@
     border-color var(--dur-base) var(--ease-standard);
 }
 
-
 .sidebar-rail--expanded .sidebar-item {
   width: calc(100% - var(--space-4));
   gap: var(--sidebar-item-gap);
@@ -81,7 +78,6 @@
   padding-left: var(--sidebar-item-padding);
 }
 
-
 /* ---------- Item States ---------- */
 
 .sidebar-item:hover {
@@ -89,13 +85,11 @@
   color: var(--text-primary);
 }
 
-
 .sidebar-item--active {
   border-color: var(--accent-brand);
   color: var(--text-primary);
 }
 
-
 /* ---------- Sidebar ---------- */
 
 .sidebar-rail {
@@ -118,16 +112,13 @@
 
   overflow: visible;
 
-  transition:
+  transition: width var(--dur-base) var(--ease-standard);
-    width var(--dur-base) var(--ease-standard);
 }
 
-
 .sidebar-rail--expanded {
   width: var(--sidebar-width-expanded);
 }
 
-
 /* ---------- App name ---------- */
 
 .sidebar-app-name {
@@ -162,7 +153,6 @@
   transition-delay: var(--dur-fast);
 }
 
-
 /* ---------- Scroll ---------- */
 
 .sidebar-scroll {
@@ -179,12 +169,10 @@
   overflow-y: auto;
 }
 
-
 .sidebar-rail--expanded .sidebar-scroll {
   align-items: stretch;
 }
 
-
 /* ---------- Toggle ---------- */
 
 .sidebar-toggle {
@@ -220,12 +208,10 @@
   z-index: 32;
 }
 
-
 .sidebar-rail--expanded .sidebar-toggle {
   left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
 }
 
-
 .sidebar-toggle:hover {
   background: var(--bg-raised);
 
@@ -234,35 +220,32 @@
   border-color: var(--accent-brand);
 }
 
-
 .sidebar-toggle:active {
-  transform: scale(.92);
+  transform: scale(0.92);
 }
 
 .sidebar-rail--expanded .sidebar-toggle:active {
-  transform: scale(.92);
+  transform: scale(0.92);
 }
 
-
 .sidebar-toggle-icon {
   width: 14px;
   height: 14px;
-  
-  transition:
-    transform var(--dur-base) var(--ease-standard);
-}
 
+  transition: transform var(--dur-base) var(--ease-standard);
+}
 
 .sidebar-rail--expanded .sidebar-toggle-icon {
   transform: rotate(180deg);
 }
 
-
 /* ---------- Content ---------- */
 
 .stage--with-sidebar {
   margin-left: var(--sidebar-width-collapsed);
+  transition: margin-left var(--dur-base) var(--ease-standard);
+}
 
-  transition:
+.app-root--sidebar-expanded .stage--with-sidebar {
-    margin-left var(--dur-base) var(--ease-standard);
+  margin-left: var(--sidebar-width-expanded);
 }

src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import './Sidebar.css';
-import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
+import { ChevronLeftIcon } from '../../assets/icons/ChevronLeftIcon';
 
 export type SidebarItem = {
   id: string;
@@ -13,21 +13,23 @@ export default function Sidebar({
   activeId,
   onSelect,
   appName,
+  expanded,
+  onToggle,
 }: {
   items: SidebarItem[];
   activeId: string | null;
   onSelect: (id: string) => void;
   appName: string;
+  expanded: boolean;
+  onToggle: () => void;
 }) {
-  const [expanded, setExpanded] = useState(false);
-
   return (
     <nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
       <span className="sidebar-app-name">{appName}</span>
 
       <button
         className="sidebar-toggle"
-        onClick={() => setExpanded((prev) => !prev)}
+        onClick={onToggle}
         aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
         aria-expanded={expanded}
       >

src/components/Slider/VerticalSlider.css

@@ -0,0 +1,186 @@
+.gauge-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gauge-container {
+  width: 70px;
+  height: 260px;
+
+  padding-top: 20px;
+  padding-bottom: 10px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  transform-origin: top center;
+
+  box-sizing: border-box;
+}
+
+.gauge-track {
+  position: relative;
+
+  width: 70px;
+  height: 210px;
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  margin-bottom: 8px;
+}
+
+.slider {
+  position: relative;
+
+  width: 24px;
+  height: 100%;
+
+  cursor: pointer;
+
+  touch-action: none;
+  user-select: none;
+}
+
+.track {
+  position: absolute;
+
+  left: 50%;
+  top: 0;
+
+  transform: translateX(-50%);
+
+  width: 2px;
+
+  height: 100%;
+
+  background: var(--border-hairline);
+
+  border-radius: var(--radius-sm);
+}
+
+.thumb {
+  position: absolute;
+
+  left: 50%;
+
+  width: 18px;
+
+  aspect-ratio: 1;
+
+  transform: translate(-50%, 50%);
+
+  border-radius: 50%;
+
+  background: var(--bg-panel);
+
+  border: var(--border-width-active) solid var(--accent-brand);
+
+  box-shadow: var(--shadow-sm);
+}
+
+.ticks {
+  position: absolute;
+
+  top: 0;
+
+  height: 100%;
+
+  display: flex;
+
+  flex-direction: column;
+
+  justify-content: space-between;
+
+  pointer-events: none;
+}
+
+.ticks span {
+  width: 10px;
+
+  height: 2px;
+
+  background: var(--border-hairline);
+
+  border-radius: var(--radius-sm);
+}
+
+.left {
+  left: 8px;
+}
+
+.right {
+  right: 8px;
+}
+
+.value {
+  width: 100%;
+
+  margin-top: 4px;
+
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 4px;
+  padding-left: 4px;
+
+  box-sizing: border-box;
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  gap: 0.25em;
+
+  white-space: nowrap;
+
+  color: var(--accent-brand);
+
+  font-size: 16px;
+
+  font-family: var(--font-ui);
+
+  box-shadow: var(--shadow-sm);
+
+  border-radius: var(--radius-md);
+
+  overflow: hidden;
+}
+
+.value input {
+  width: auto;
+  min-width: 0;
+
+  height: 1.4em;
+
+  text-align: center;
+
+  background: transparent;
+
+  border: 1px solid var(--border-hairline);
+
+  border-radius: var(--radius-sm);
+
+  appearance: none;
+}
+
+.value input,
+.value-unit {
+  font-size: inherit;
+
+  line-height: 1;
+
+  font-family: inherit;
+
+  color: inherit;
+}

src/components/Slider/VerticalSlider.tsx

@@ -0,0 +1,267 @@
+import { useMemo, useRef, useState, useEffect } from 'react';
+
+import './VerticalSlider.css';
+
+type VerticalSliderProps = {
+  min: number;
+  max: number;
+  step: number;
+
+  switchStepValue?: number;
+  switchStep?: number;
+
+  value?: number;
+  onChange?: (value: number) => void;
+
+  unit?: string;
+
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const DESIGN_WIDTH = 70;
+const DESIGN_HEIGHT = 260;
+
+function getDecimals(n: number) {
+  const s = n.toString();
+  const i = s.indexOf('.');
+  return i === -1 ? 0 : s.length - i - 1;
+}
+
+export default function VerticalSlider({
+  min,
+  max,
+  step,
+  switchStepValue,
+  switchStep,
+  value: controlledValue,
+  onChange,
+  unit = '',
+  className,
+  style,
+}: VerticalSliderProps) {
+  const [internalValue, setInternalValue] = useState(min);
+  const value = controlledValue ?? internalValue;
+
+  const [editingText, setEditingText] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const lastValue = useRef(value);
+  const keyboardValue = useRef<number | null>(null);
+  const [displayValue, setDisplayValue] = useState(value);
+  const dragValue = useRef(value);
+  const rafRef = useRef<number | null>(null);
+  const dragging = useRef(false);
+  const thumbRef = useRef<HTMLDivElement>(null);
+
+  // --- NEW: auto-fit scale ---
+  const outerRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+
+    const ro = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      if (width === 0 || height === 0) return;
+
+      const s = Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT);
+      setScale(s > 0 ? s : 1);
+    });
+
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  // ---------------------------
+
+  useEffect(() => {
+    setDisplayValue(value);
+    dragValue.current = value;
+  }, [value]);
+
+  const currentStep =
+    switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
+      ? switchStep
+      : step;
+
+  const decimals = useMemo(
+    () => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
+    [step, switchStep]
+  );
+
+  const maxChars = useMemo(() => {
+    const minStr = min.toFixed(decimals);
+    const maxStr = max.toFixed(decimals);
+    return Math.max(minStr.length, maxStr.length) + unit.length;
+  }, [min, max, decimals, unit]);
+
+  const valueFontSize = useMemo(() => {
+    const availableWidth = DESIGN_WIDTH - 8;
+    const AVG_CHAR_WIDTH_RATIO = 0.6;
+    const sizeByWidth = availableWidth / (maxChars * AVG_CHAR_WIDTH_RATIO);
+    return Math.min(16, Math.max(8, sizeByWidth));
+  }, [maxChars]);
+
+  function normalizeValue(input: number) {
+    const clamped = Math.min(max, Math.max(min, input));
+    const snapped = Math.round(clamped / currentStep) * currentStep;
+    return Number(snapped.toFixed(6));
+  }
+
+  function updateValue(v: number) {
+    const next = normalizeValue(v);
+    dragValue.current = next;
+    lastValue.current = next;
+
+    if (thumbRef.current) {
+      const percent = (next - min) / (max - min);
+      thumbRef.current.style.bottom = `${percent * 100}%`;
+    }
+
+    if (rafRef.current === null) {
+      rafRef.current = requestAnimationFrame(() => {
+        setDisplayValue(dragValue.current);
+        rafRef.current = null;
+      });
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+    e.preventDefault();
+
+    let next = value;
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next += currentStep;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next -= currentStep;
+
+    updateValue(next);
+    keyboardValue.current = normalizeValue(next);
+  }
+
+  function handleKeyUp() {
+    if (keyboardValue.current !== null) {
+      onChange?.(keyboardValue.current);
+      keyboardValue.current = null;
+    }
+  }
+
+  function valueFromPointer(clientY: number) {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = 1 - (clientY - rect.top) / rect.height;
+    const raw = min + percent * (max - min);
+    updateValue(raw);
+  }
+
+  function startDrag(e: React.PointerEvent<HTMLDivElement>) {
+    const target = e.currentTarget;
+    dragging.current = true;
+    target.setPointerCapture(e.pointerId);
+    valueFromPointer(e.clientY);
+  }
+
+  function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (!dragging.current) return;
+    valueFromPointer(e.clientY);
+  }
+
+  function endDrag(e: React.PointerEvent<HTMLDivElement>) {
+    dragging.current = false;
+    const finalValue = dragValue.current;
+
+    if (controlledValue === undefined) setInternalValue(finalValue);
+    setDisplayValue(finalValue);
+    onChange?.(finalValue);
+
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }
+
+  function commitEditing() {
+    if (editingText !== null && editingText !== '' && editingText !== '-') {
+      const parsed = Number(editingText);
+      if (!Number.isNaN(parsed)) updateValue(parsed);
+    }
+    setEditingText(null);
+  }
+
+  const percent = (value - min) / (max - min);
+
+  return (
+  <div
+    ref={outerRef}
+    className="gauge-wrapper"
+    style={{ width: '100%', height: '100%', ...style }}
+  >
+    <div
+      className="gauge-scale-box"
+      style={{
+        position: 'relative',
+        width: DESIGN_WIDTH * scale,
+        height: DESIGN_HEIGHT * scale,
+      }}
+    >
+      <div
+        className={['gauge-container', className].filter(Boolean).join(' ')}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: DESIGN_WIDTH,
+          height: DESIGN_HEIGHT,
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+        }}
+      >
+        <div className="gauge-track">
+          <div className="ticks left">
+            {Array.from({ length: 15 }).map((_, i) => <span key={i} />)}
+          </div>
+
+          <div
+            className="slider"
+            ref={sliderRef}
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+            onKeyUp={handleKeyUp}
+            onPointerDown={startDrag}
+            onPointerMove={handlePointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+          >
+            <div className="track" />
+            <div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
+          </div>
+
+          <div className="ticks right">
+            {Array.from({ length: 15 }).map((_, i) => <span key={i} />)}
+          </div>
+        </div>
+
+        <div className="value" style={{ fontSize: `${valueFontSize}px` }}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="decimal"
+            value={editingText ?? displayValue.toFixed(decimals)}
+            style={{ width: '100%' }}
+            onFocus={() => setEditingText(value.toFixed(decimals))}
+            onChange={(e) => setEditingText(e.target.value)}
+            onBlur={commitEditing}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') inputRef.current?.blur();
+              if (e.key === 'Escape') {
+                setEditingText(null);
+                inputRef.current?.blur();
+              }
+            }}
+          />
+          <span className="value-unit">{unit}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+}

src/components/VerticalStack/VerticalStack.css

@@ -0,0 +1,82 @@
+.vertical-stack {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid var(--border-hairline);
+
+  border-radius: var(--radius-md);
+}
+
+/* header */
+
+.vertical-stack__title {
+  flex: 0 0 auto;
+
+  padding: var(--space-1);
+
+  text-align: center;
+
+  font-family: var(--font-ui);
+
+  font-weight: 600;
+
+  color: var(--text-primary);
+
+  border-bottom: 1px solid var(--border-hairline);
+
+  line-height: 1.2;
+}
+
+/* area containing components */
+
+.vertical-stack__content {
+  flex: 1;
+
+  min-height: 0;
+
+  display: flex;
+
+  flex-direction: column;
+}
+
+/* each component slot */
+
+.vertical-stack__item {
+  flex: 1;
+
+  min-height: 0;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+
+  overflow: hidden;
+
+  width: 100%;
+}
+
+/*
+  The child keeps its natural dimensions.
+  Only horizontal scaling happens.
+*/
+
+.vertical-stack__scale {
+  width: 100%;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+
+  transform-origin: center;
+}

src/components/VerticalStack/VerticalStack.tsx

@@ -0,0 +1,27 @@
+// VerticalStack.tsx
+import React from 'react';
+import './VerticalStack.css';
+
+type VerticalStackProps = {
+  title: string;
+  titleFontSize?: number;
+  children: React.ReactNode;
+};
+
+export default function VerticalStack({ title, children }: VerticalStackProps) {
+  return (
+    <div className="vertical-stack">
+      <div className="vertical-stack__title">
+        {title}
+      </div>
+
+      <div className="vertical-stack__content">
+        {React.Children.map(children, (child, index) => (
+          <div className="vertical-stack__item" key={index}>
+            {child}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/dsp408/GainPanel.tsx

@@ -1,56 +0,0 @@
-import VerticalStack from './VerticalStack/VerticalStack';
-import VerticalSlider from './Slider.tsx/VerticalSlider';
-import { invoke } from '@tauri-apps/api/core';
-import { InputChannel, Channel } from '../../types/dsp408State';
-import { DSP } from '../../types/types';
-import { NotificationType } from '../../types/types';
-
-function GainPanel({
-  dsp,
-  notify,
-}: {
-  dsp: DSP;
-  notify: (message: string, type?: NotificationType, dspName?: string) => void;
-}) {
-  const setGain = async (value: number) => {
-    const channel: Channel = {
-      Input: InputChannel.InA,
-    };
-
-    try {
-      const success = await invoke<boolean>('set_channel_gain', {
-        id: dsp.id,
-        channel,
-        db: value,
-      });
-
-      if (success) {
-        notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
-      } else {
-        notify('Failed to set input gain', 'error', dsp.name);
-      }
-    } catch (err) {
-      notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
-    }
-  };
-
-  return (
-    <VerticalStack title="In A" titleFontSize={18}>
-      <VerticalSlider
-        min={-60}
-        max={12}
-        step={1}
-        switchStepValue={-10}
-        switchStep={0.1}
-        unit=" dB"
-        onChange={setGain}
-      />
-
-      <button className="btn btn-ghost">Reset</button>
-
-      <button className="btn btn-primary">Apply</button>
-    </VerticalStack>
-  );
-}
-
-export default GainPanel;

src/components/dsp408/GainSection/GainSection.css

@@ -0,0 +1,67 @@
+:root {
+  --gain-section-height: 40vh; /* your fixed % of screen height */
+}
+
+.gain-section {
+  position: fixed;
+  left: var(--sidebar-width-collapsed);
+  right: 0;
+  bottom: 0;
+
+  height: var(--gain-section-height);
+  min-height: 0;
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: 0 var(--space-4);
+
+  background: var(--bg-void);
+
+  transition: left var(--dur-base) var(--ease-standard);
+
+  z-index: 20;
+}
+
+/* keep it clear of the sidebar when expanded, without lifting React state */
+.app-root:has(.sidebar-rail--expanded) .gain-section {
+  left: var(--sidebar-width-expanded);
+}
+.gain-panels {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: safe center;
+  gap: var(--space-4);
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-hairline) transparent;
+
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.gain-panels > * {
+  height: 100%;
+  aspect-ratio: 90 / 340;  /* your panel's design ratio (title+slider+buttons) — tune */
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.gain-panels::-webkit-scrollbar {
+  height: 6px;
+}
+.gain-panels::-webkit-scrollbar-thumb {
+  background: var(--border-hairline);
+  border-radius: var(--radius-pill);
+}
+.gain-panels::-webkit-scrollbar-track {
+  background: transparent;
+}

src/components/dsp408/GainSection/GainSection.tsx

@@ -0,0 +1,155 @@
+import VerticalStack from '../../VerticalStack/VerticalStack';
+import VerticalSlider from '../../Slider/VerticalSlider';
+import { invoke } from '@tauri-apps/api/core';
+import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
+import { DSP } from '../../../types/types';
+import { NotificationType } from '../../../types/types';
+import { useState } from 'react';
+import Button from '../../Button/Button';
+import './GainSection.css';
+
+function GainPanel({
+  dsp,
+  notify,
+  channel,
+  title,
+}: {
+  dsp: DSP;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+  channel: Channel;
+  title: string;
+}) {
+  const setGain = async (value: number) => {
+    try {
+      const success = await invoke<boolean>('set_channel_gain', {
+        id: dsp.id,
+        channel,
+        db: value,
+      });
+
+      if (success) {
+        notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
+      } else {
+        notify('Failed to set input gain', 'error', dsp.name);
+      }
+    } catch (err) {
+      notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
+    }
+  };
+
+  const setMute = async (muted: boolean) => {
+    try {
+      const success = await invoke<boolean>('set_mute', {
+        id: dsp.id,
+        channel,
+        muted,
+      });
+
+      if (success) {
+        notify(`Input A ${muted ? 'muted' : 'unmuted'}`, 'success', dsp.name);
+      } else {
+        notify('Failed to change mute state', 'error', dsp.name);
+      }
+    } catch (err) {
+      notify(`Mute update failed: ${String(err)}`, 'error', dsp.name);
+    }
+  };
+
+  const setInverse = async (inverted: boolean) => {
+    try {
+      const success = await invoke<boolean>('set_channel_inverse_gain', {
+        id: dsp.id,
+        channel,
+        inverted,
+      });
+
+      if (success) {
+        notify(`Input A phase ${inverted ? 'inverted' : 'normal'}`, 'success', dsp.name);
+      } else {
+        notify('Failed to change phase', 'error', dsp.name);
+      }
+    } catch (err) {
+      notify(`Phase update failed: ${String(err)}`, 'error', dsp.name);
+    }
+  };
+
+  const [muted, setMuted] = useState(false);
+  const [inverted, setInverted] = useState(false);
+
+  const toggleMute = async () => {
+    const next = !muted;
+    setMuted(next);
+    await setMute(next);
+  };
+
+  const toggleInverse = async () => {
+    const next = !inverted;
+    setInverted(next);
+    await setInverse(next);
+  };
+
+  return (
+    <VerticalStack title={title}>
+      <VerticalSlider
+        min={-60}
+        max={12}
+        step={0.5}
+        switchStepValue={-10}
+        switchStep={0.1}
+        unit=" dB"
+        onChange={setGain}
+      />
+      {/* <Button
+        variant="toggle"
+        className={muted ? "active-danger" : ""}
+        onClick={toggleMute}  
+      >
+        {muted ? "Muted" : "Mute"}
+      </Button>
+
+      <Button
+        variant="toggle"
+        className={inverted ? "active-warning" : ""}
+        onClick={toggleInverse}
+      >
+        {inverted ? "Inverted" : "Invert"}
+      </Button> */}
+    </VerticalStack>
+  );
+}
+
+function GainSection({
+  dsp,
+  notify,
+}: {
+  dsp: DSP;
+  notify: (message: string, type?: NotificationType, dspName?: string) => void;
+}) {
+  const channels: { channel: Channel; title: string }[] = [
+    { channel: { Input: InputChannel.InA }, title: 'In A' },
+    { channel: { Input: InputChannel.InB }, title: 'In B' },
+    { channel: { Input: InputChannel.InC }, title: 'In C' },
+    { channel: { Input: InputChannel.InD }, title: 'In D' },
+
+    { channel: { Output: OutputChannel.Out1 }, title: "Out 1" },
+    { channel: { Output: OutputChannel.Out2 }, title: "Out 2" },
+    { channel: { Output: OutputChannel.Out3 }, title: "Out 3" },
+    { channel: { Output: OutputChannel.Out4 }, title: "Out 4" },
+    { channel: { Output: OutputChannel.Out5 }, title: "Out 5" },
+    { channel: { Output: OutputChannel.Out6 }, title: "Out 6" },
+    { channel: { Output: OutputChannel.Out7 }, title: "Out 7" },
+    { channel: { Output: OutputChannel.Out8 }, title: "Out 8" },
+  ];
+
+  return (
+    <div className="gain-section">
+      <div className="gain-panels">
+        {channels.map(({ channel, title }) => (
+          <GainPanel key={title} dsp={dsp} notify={notify} channel={channel} title={title} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default GainSection;

src/components/dsp408/Slider.tsx/VerticalSlider.css

@@ -1,164 +0,0 @@
-.gauge-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    width: 4.375rem;
-
-    padding-top: var(--space-3);
-    margin: var(--space-3);
-
-    box-sizing: border-box;
-
-    container-type: inline-size;
-}
-
-.gauge-track {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-    height: 13.125rem;
-}
-
-.slider {
-    position: relative;
-
-    width: 34.3%;
-    height: 100%;
-
-    cursor: pointer;
-    touch-action: none;
-}
-
-.track {
-    position: absolute;
-
-    left: 50%;
-    top: 0;
-
-    transform: translateX(-50%);
-
-    width: 2.86cqw;
-    height: 100%;
-
-    background: var(--border-hairline);
-    border-radius: var(--radius-sm);
-}
-
-.thumb {
-    position: absolute;
-
-    left: 50%;
-
-    width: 75%;
-    aspect-ratio: 1;
-
-    transform: translate(-50%, 50%);
-
-    border-radius: 50%;
-
-    background: var(--bg-panel);
-
-    border: var(--border-width-active) solid var(--accent-brand);
-
-    box-sizing: border-box;
-
-    box-shadow: var(--shadow-sm);
-
-    transition:
-        transform var(--transition-fast) var(--ease-standard),
-        box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-.ticks {
-    position: absolute;
-
-    top: 0;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    pointer-events: none;
-}
-
-.ticks span {
-    width: 14.3cqw;
-    height: 2.86cqw;
-
-    background: var(--border-hairline);
-
-    border-radius: var(--radius-sm);
-}
-
-.left {
-    left: 11.4%;
-}
-
-.right {
-    right: 11.4%;
-}
-
-.value {
-    margin-top: var(--space-2);
-
-    width: 100%;
-
-    box-sizing: border-box;
-
-    padding: var(--space-2);
-
-    border-radius: var(--radius-md);
-
-    color: var(--accent-brand);
-
-    font-size: var(--value-font-size, 16px);
-
-    font-family: var(--font-ui);
-
-    box-shadow: var(--shadow-sm);
-
-    display: flex;
-
-    justify-content: center;
-    align-items: center;
-
-    gap: 0.25em;
-
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-
-.value input,
-.value-unit {
-    font-size: inherit;
-    line-height: 1;
-
-    font-family: inherit;
-    color: inherit;
-}
-
-
-.value input {
-    height: 1.4em;
-
-    box-sizing: border-box;
-
-    text-align: center;
-
-    flex: 0 1 auto;
-
-    background: transparent;
-
-    border: 1px solid var(--border-hairline);
-
-    border-radius: var(--radius-sm);
-
-    appearance: none;
-}

src/components/dsp408/Slider.tsx/VerticalSlider.tsx

@@ -1,264 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import './VerticalSlider.css';
-
-type VerticalSliderProps = {
-  min: number;
-  max: number;
-  step: number;
-
-  switchStepValue?: number;
-  switchStep?: number;
-
-  value?: number;
-  onChange?: (value: number) => void;
-
-  unit?: string;
-
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-function getDecimals(n: number) {
-  const s = n.toString();
-  const i = s.indexOf('.');
-  return i === -1 ? 0 : s.length - i - 1;
-}
-
-// Measures whatever box the consumer actually rendered — no more
-// assuming the gauge is always 70px wide.
-function useElementSize<T extends HTMLElement>() {
-  const ref = useRef<T>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const observer = new ResizeObserver((entries) => {
-      const { width, height } = entries[0].contentRect;
-      setSize({ width, height });
-    });
-
-    observer.observe(el);
-
-    const rect = el.getBoundingClientRect();
-    setSize({ width: rect.width, height: rect.height });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return [ref, size] as const;
-}
-
-export default function VerticalSlider({
-  min,
-  max,
-  step,
-  switchStepValue,
-  switchStep,
-  value: controlledValue,
-  onChange,
-  unit = '',
-  className,
-  style,
-}: VerticalSliderProps) {
-  const [internalValue, setInternalValue] = useState(min);
-  const value = controlledValue ?? internalValue;
-
-  const [editingText, setEditingText] = useState<string | null>(null);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const isDragging = useRef(false);
-  const lastValue = useRef(value);
-  const keyboardValue = useRef<number | null>(null);
-
-  const currentStep =
-    switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
-      ? switchStep
-      : step;
-
-  const decimals = useMemo(
-    () => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
-    [step, switchStep]
-  );
-
-  const charWidth = useMemo(
-    () => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
-    [min, max, decimals]
-  );
-
-  // Same formula as before, just driven by a real measurement
-  // instead of a hardcoded container width.
-  const fontSize = useMemo(() => {
-    if (!containerSize.width) return 18;
-
-    const chars = charWidth + unit.length + 1;
-
-    const available = containerSize.width * 0.9;
-
-    return Math.max(12, Math.min(22, available / chars));
-  }, [containerSize.width, charWidth, unit.length]);
-
-  function normalizeValue(input: number) {
-    const clamped = Math.min(max, Math.max(min, input));
-    const snapped = Math.round(clamped / currentStep) * currentStep;
-    return Number(snapped.toFixed(6));
-  }
-
-  function updateValue(v: number) {
-    const next = normalizeValue(v);
-
-    if (controlledValue === undefined) {
-      setInternalValue(next);
-    }
-
-    lastValue.current = next;
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (
-      e.key !== 'ArrowUp' &&
-      e.key !== 'ArrowDown' &&
-      e.key !== 'ArrowLeft' &&
-      e.key !== 'ArrowRight'
-    ) {
-      return;
-    }
-
-    e.preventDefault();
-
-    let next = value;
-
-    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
-      next += currentStep;
-    }
-
-    if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
-      next -= currentStep;
-    }
-
-    updateValue(next);
-
-    keyboardValue.current = normalizeValue(next);
-  }
-
-  function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
-    if (keyboardValue.current !== null) {
-      onChange?.(keyboardValue.current);
-      keyboardValue.current = null;
-    }
-  }
-
-  function valueFromPointer(clientY: number) {
-    if (!sliderRef.current) return;
-
-    const rect = sliderRef.current.getBoundingClientRect();
-    const trackHeight = rect.height; // measured, not a constant
-
-    let offset = clientY - rect.top;
-    offset = Math.max(0, Math.min(trackHeight, offset));
-
-    const percent = 1 - offset / trackHeight;
-    const raw = min + percent * (max - min);
-
-    updateValue(raw);
-  }
-
-  function startDrag(e: React.PointerEvent<HTMLDivElement>) {
-    isDragging.current = true;
-
-    valueFromPointer(e.clientY);
-
-    const move = (ev: PointerEvent) => {
-      valueFromPointer(ev.clientY);
-    };
-
-    const up = () => {
-      isDragging.current = false;
-
-      onChange?.(lastValue.current);
-
-      window.removeEventListener('pointermove', move);
-      window.removeEventListener('pointerup', up);
-    };
-
-    window.addEventListener('pointermove', move);
-    window.addEventListener('pointerup', up);
-  }
-
-  function commitEditing() {
-    if (editingText !== null && editingText !== '' && editingText !== '-') {
-      const parsed = Number(editingText);
-      if (!Number.isNaN(parsed)) updateValue(parsed);
-    }
-    setEditingText(null);
-  }
-
-  const percent = (value - min) / (max - min);
-
-  return (
-    <div
-      className={['gauge-container', className].filter(Boolean).join(' ')}
-      style={style}
-      ref={containerRef}
-    >
-      <div className="gauge-track">
-        <div className="ticks left">
-          {Array.from({ length: 15 }).map((_, i) => (
-            <span key={i} />
-          ))}
-        </div>
-
-        <div
-          className="slider"
-          ref={sliderRef}
-          tabIndex={0}
-          onKeyDown={handleKeyDown}
-          onKeyUp={handleKeyUp}
-          onPointerDown={startDrag}
-        >
-          <div className="track" />
-          <div className="thumb" style={{ bottom: `${percent * 100}%` }} />
-        </div>
-
-        <div className="ticks right">
-          {Array.from({ length: 15 }).map((_, i) => (
-            <span key={i} />
-          ))}
-        </div>
-      </div>
-
-      <div
-        className="value"
-        style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
-      >
-        <input
-          ref={inputRef}
-          type="text"
-          inputMode="decimal"
-          value={editingText ?? value.toFixed(decimals)}
-          style={{
-            width: `${charWidth}ch`,
-          }}
-          onFocus={() => setEditingText(value.toFixed(decimals))}
-          onChange={(e) => setEditingText(e.target.value)}
-          onBlur={commitEditing}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              inputRef.current?.blur();
-            }
-
-            if (e.key === 'Escape') {
-              setEditingText(null);
-              inputRef.current?.blur();
-            }
-          }}
-        />
-        <span className="value-unit">{unit}</span>
-      </div>
-    </div>
-  );
-}

src/components/dsp408/VerticalStack/VerticalStack.css

@@ -1,91 +0,0 @@
-.vertical-stack {
-
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-
-    border: 1px solid var(--border-hairline);
-
-    border-radius: var(--radius-md);
-
-    box-sizing: border-box;
-
-    overflow: hidden;
-}
-
-
-/* header */
-
-.vertical-stack__title {
-
-    flex: 0 0 auto;
-
-    padding: var(--space-2);
-
-    text-align: center;
-
-    font-family: var(--font-ui);
-
-    font-weight: 600;
-
-    color: var(--text-primary);
-
-    border-bottom: 1px solid var(--border-hairline);
-
-    line-height: 1.2;
-}
-
-
-
-/* area containing components */
-
-.vertical-stack__content {
-
-    flex: 1;
-
-    min-height: 0;
-
-    display: flex;
-
-    flex-direction: column;
-
-}
-
-
-
-/* each component slot */
-
-.vertical-stack__item {
-
-    flex: 1;
-
-    min-height: 0;
-
-    display: flex;
-
-    justify-content: center;
-
-    align-items: center;
-
-    overflow: hidden;
-}
-
-
-
-/*
-  The child keeps its natural dimensions.
-  Only horizontal scaling happens.
-*/
-
-.vertical-stack__scale {
-
-    display: flex;
-
-    justify-content: center;
-
-    align-items: center;
-
-    transform-origin: center;
-}

src/components/dsp408/VerticalStack/VerticalStack.tsx

@@ -1,85 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-
-import './VerticalStack.css';
-
-type VerticalStackProps = {
-  title: string;
-  titleFontSize?: number;
-  children: React.ReactNode;
-};
-
-export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<HTMLDivElement[]>([]);
-
-  const [scales, setScales] = useState<number[]>([]);
-
-  useLayoutEffect(() => {
-    function updateScale() {
-      if (!containerRef.current) {
-        return;
-      }
-
-      const availableWidth = containerRef.current.clientWidth;
-
-      const newScales = itemRefs.current.map((item) => {
-        const child = item.firstElementChild as HTMLElement;
-
-        if (!child) {
-          return 1;
-        }
-
-        const width = child.scrollWidth;
-
-        return Math.min(1, availableWidth / width);
-      });
-
-      setScales(newScales);
-    }
-
-    updateScale();
-
-    const observer = new ResizeObserver(updateScale);
-
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [children]);
-
-  return (
-    <div className="vertical-stack" ref={containerRef}>
-      <div
-        className="vertical-stack__title"
-        style={{
-          fontSize: titleFontSize,
-        }}
-      >
-        {title}
-      </div>
-
-      <div className="vertical-stack__content">
-        {React.Children.map(children, (child, index) => (
-          <div
-            className="vertical-stack__item"
-            ref={(el) => {
-              if (el) {
-                itemRefs.current[index] = el;
-              }
-            }}
-          >
-            <div
-              className="vertical-stack__scale"
-              style={{
-                transform: `scaleX(${scales[index] ?? 1})`,
-              }}
-            >
-              {child}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

src/hooks/useNotifications.tsx

@@ -35,9 +35,7 @@ export function useNotifications() {
   );
 
   const removeNotification = useCallback((id: number) => {
-    setNotifications((prev) =>
+    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
-      prev.map((n) => (n.id === id ? { ...n, removing: true } : n))
-    );
 
     setTimeout(() => {
       setNotifications((prev) => prev.filter((n) => n.id !== id));

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './components/app/App';
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

src/pages/AddDspPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { DSP, DSP_TYPES } from '../../types/types';
+import { DSP, DSP_TYPES } from '../types/types';
+import Button from '../components/Button/Button';
 
 function AddDSPForm({
   onCancel,
@@ -107,12 +108,13 @@ function AddDSPForm({
       </div>
 
       <div className="form-actions">
-        <button className="btn btn-ghost" onClick={onCancel}>
+        <Button variant="ghost" onClick={onCancel}>
           Cancel
-        </button>
+        </Button>
-        <button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
+
+        <Button variant="primary" onClick={submit} disabled={!canSubmit}>
           Add DSP
-        </button>
+        </Button>
       </div>
     </div>
   );

src/pages/DspPage.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { DSP } from '../../types/types';
+import { DSP } from '../types/types';
-import Sidebar from './Sidebar/Sidebar';
+import Sidebar from '../components/Sidebar/Sidebar';
-import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
+import { InfoIcon, SlidersIcon } from '../assets/icons/AudioIcons';
-import ConnectionPanel from './ConnectionPanel';
+import ConnectionPanel from '../components/dsp408/ConnectionPanel';
-import GainPanel from './GainPanel';
+import GainSection from '../components/dsp408/GainSection/GainSection';
-import { NotificationType } from '../../types/types';
+import { NotificationType } from '../types/types';
 
 function DSPPage({
   dsp,
@@ -18,6 +18,7 @@ function DSPPage({
   notify: (message: string, type?: NotificationType, dspName?: string) => void;
 }) {
   const [activeSidebar, setActiveSidebar] = useState('overview');
+  const [sidebarExpanded, setSidebarExpanded] = useState(false);
 
   const sidebarItems = [
     {
@@ -38,7 +39,7 @@ function DSPPage({
         return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
 
       case 'gain':
-        return <GainPanel dsp={dsp} notify={notify} />;
+        return <GainSection dsp={dsp} notify={notify} />;
 
       default:
         return null;
@@ -46,12 +47,18 @@ function DSPPage({
   };
 
   return (
-    <div className="dsp-layout">
+    <div
+      className={`dsp-layout 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>

src/pages/HomePage.tsx

@@ -1,3 +1,5 @@
+import Button from '../components/Button/Button';
+
 function HomePage({
   dspCount,
   connectedCount,
@@ -26,9 +28,9 @@ function HomePage({
       </dl>
 
       <div className="panel-actions">
-        <button className="btn btn-primary" onClick={onAddDSP}>
+        <Button variant="primary" onClick={onAddDSP}>
           Add a DSP
-        </button>
+        </Button>
       </div>
     </div>
   );

src/styles/App.css

@@ -1,4 +1,4 @@
-@import "./variables.css";
+@import './variables.css';
 
 * {
   box-sizing: border-box;
@@ -8,7 +8,7 @@
 input,
 select,
 textarea,
-[contenteditable="true"] {
+[contenteditable='true'] {
   user-select: text;
 }
 
@@ -135,7 +135,8 @@ button:focus-visible,
   font-family: var(--font-ui);
   font-size: 13px;
   cursor: pointer;
-  transition: background var(--dur-base) var(--ease-standard),
+  transition:
+    background var(--dur-base) var(--ease-standard),
     border-color var(--dur-base) var(--ease-standard),
     color var(--dur-base) var(--ease-standard);
   width: 160px;
@@ -189,7 +190,8 @@ button:focus-visible,
   line-height: 1;
   color: var(--text-muted);
   border-radius: 4px;
-  transition: background var(--dur-fast) var(--ease-standard),
+  transition:
+    background var(--dur-fast) var(--ease-standard),
     color var(--dur-fast) var(--ease-standard);
 }
 
@@ -212,7 +214,8 @@ button:focus-visible,
   color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
-  transition: background var(--dur-base) var(--ease-standard),
+  transition:
+    background var(--dur-base) var(--ease-standard),
     color var(--dur-base) var(--ease-standard);
 }
 
@@ -251,7 +254,8 @@ button:focus-visible,
   font-weight: 500;
   cursor: pointer;
   flex-shrink: 0;
-  transition: background var(--dur-base) var(--ease-standard),
+  transition:
+    background var(--dur-base) var(--ease-standard),
     border-color var(--dur-base) var(--ease-standard),
     color var(--dur-base) var(--ease-standard);
 }
@@ -302,8 +306,13 @@ button:focus-visible,
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
+  0%,
-  50% { opacity: 0.4; }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 
 /* ---------- Stage / main area ---------- */
@@ -383,9 +392,15 @@ button:focus-visible,
   transition: color var(--dur-base) var(--ease-standard);
 }
 
-.status-label--connected { color: var(--accent-live); }
+.status-label--connected {
-.status-label--connecting { color: var(--accent-connecting); }
+  color: var(--accent-live);
-.status-label--disconnected { color: var(--text-muted); }
+}
+.status-label--connecting {
+  color: var(--accent-connecting);
+}
+.status-label--disconnected {
+  color: var(--text-muted);
+}
 
 .specs {
   display: flex;
@@ -487,163 +502,6 @@ button:focus-visible,
   margin-top: var(--space-2);
 }
 
-/* ---------- Buttons ---------- */
-
-.btn {
-  height: 36px;
-  padding: 0 var(--space-4);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-ui);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: background var(--dur-base) var(--ease-standard),
-    border-color var(--dur-base) var(--ease-standard),
-    opacity var(--dur-base) var(--ease-standard);
-}
-
-.btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--accent-brand);
-  color: #0d0f12;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #6f9bf2;
-}
-
-.btn-outline {
-  background: transparent;
-  border-color: var(--accent-down);
-  color: var(--accent-down);
-}
-
-.btn-outline:hover {
-  background: rgba(255, 92, 92, 0.1);
-}
-
-.btn-ghost {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
-}
-
-.btn-ghost:hover {
-  color: var(--text-primary);
-  border-color: var(--text-muted);
-}
-
-/* ---------- Notifications ---------- */
-
-.notifications {
-  position: fixed;
-  right: var(--space-5);
-  bottom: var(--space-5);
-  z-index: 9999;
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-
-  width: 320px;
-  pointer-events: none;
-}
-
-.notification {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-
-  padding: 10px var(--space-3);
-  border-radius: var(--radius-md);
-
-  font-size: 14px;
-
-  box-shadow: var(--shadow-md);
-
-  animation: notification-in var(--dur-slow) var(--ease-out) forwards;
-
-  pointer-events: auto;
-}
-
-.notification-out {
-  animation: notification-out var(--dur-slow) var(--ease-in) forwards;
-}
-
-.notification-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  font-size: 15px;
-  line-height: 1;
-  color: inherit;
-  cursor: pointer;
-  transition: background var(--dur-fast) var(--ease-standard);
-}
-
-.notification-close:hover {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.notification.error {
-  background: #b42318;
-  color: white;
-}
-
-.notification.success {
-  background: #15803d;
-  color: white;
-}
-
-.notification.warning {
-  background: #ca8a04;
-  color: white;
-}
-
-.notification-message {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@keyframes notification-in {
-  from {
-    transform: translateX(50px);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes notification-out {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(50px);
-    opacity: 0;
-  }
-}
-
 /* ---------- DSP detail: side rail + content ---------- */
 
 .dsp-detail {
@@ -679,7 +537,8 @@ button:focus-visible,
   font-size: 13px;
   text-align: left;
   cursor: pointer;
-  transition: background var(--dur-base) var(--ease-standard),
+  transition:
+    background var(--dur-base) var(--ease-standard),
     color var(--dur-base) var(--ease-standard),
     border-color var(--dur-base) var(--ease-standard);
 }
@@ -708,12 +567,6 @@ button:focus-visible,
   width: 100%;
 }
 
-/* ---------- Add to your :root ---------- */
-:root {
-  --header-height: 48px; /* matches .topbar's existing height */
-  --sidebar-width: 48px; /* matches the old icon rail's w-12 */
-}
-
 /* ---------- Layout wrapper below the topbar ---------- */
 /* .app is already: display:flex; flex-direction:column; height:100vh;
    this row just needs to fill the remaining space */
@@ -722,4 +575,3 @@ button:focus-visible,
   display: flex;
   min-height: 0; /* lets .stage's own overflow-y:auto do the scrolling */
 }
-

src/styles/variables.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :root {
   --header-height: 48px; /* matches .topbar's existing height */
@@ -18,8 +18,8 @@
   --accent-connecting: #f5a623;
 
   /* ---------- Type ---------- */
-  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
+  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
 
   /* ---------- Motion ---------- */
   --dur-fast: 100ms;
@@ -61,4 +61,4 @@
   --sidebar-item-padding: 8px;
 
   --sidebar-toggle-size: 24px;
-}
+}