merge

README.md

@@ -11,5 +11,7 @@ This template should help get you started developing with Tauri, React and Types
 - Check render to improve perfoormances
 - Dont draw geq/peq on gain if bypass
 - Diplay windows on reset geq, peq
+- Preset change dont reset
+- Disbale slider on peq when filter dont use it
 
 - Check end to end behavioour

src-tauri/Cargo.lock

@@ -3300,9 +3300,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.11.5"
+version = "2.11.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "667b20e2726d572dea2de7370da16e188eb06008faf9a92fab7cdc46791190b5"
+checksum = "6fa5bacdb9bbad5954af3d1bd6cf6ae9192cab1b2e270f4a07f904610b9e85f4"
 dependencies = [
  "anyhow",
  "bytes",
@@ -3429,9 +3429,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-opener"
-version = "2.5.4"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17e1bea14edce6b793a04e2417e3fd924b9bc4faae83cdee7d714156cceeed29"
+checksum = "60d60366174b745b4ef5824b8bbc1c457fd08f0ce101ff643c0a49181a9f4e91"
 dependencies = [
  "dunce",
  "glob",

src-tauri/Cargo.toml

@@ -18,8 +18,8 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2.11.6", features = [] }
-tauri-plugin-opener = "2"
+tauri-plugin-opener = "2.5.5"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 dsp_thomann = { path = "../../dsp-thomann", features = ["serialization"] }

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

src-tauri/icons/icon.svg

@@ -0,0 +1,87 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="200"
+  height="200"
+  viewBox="0 0 200 200"
+>
+  <defs>
+    <linearGradient
+      id="richGradient"
+      x1="0%"
+      y1="0%"
+      x2="100%"
+      y2="100%"
+    >
+      <stop offset="0%" stop-color="#1e3a8a" stop-opacity="1"/>
+      <stop offset="25%" stop-color="#2d3485"/>
+      <stop offset="45%" stop-color="#4c2e7f"/>
+      <stop offset="60%" stop-color="#6b2878"/>
+      <stop offset="80%" stop-color="#b9326e"/>
+      <stop offset="100%" stop-color="#ea437a" stop-opacity="1"/>
+    </linearGradient>
+
+    <radialGradient
+      id="darkenGradient"
+      cx="50%"
+      cy="50%"
+      r="50%"
+    >
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.3"/>
+      <stop offset="30%" stop-color="#ffffff" stop-opacity="0.1"/>
+      <stop offset="60%" stop-color="#000000" stop-opacity="0"/>
+      <stop offset="80%" stop-color="#000000" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0.5"/>
+    </radialGradient>
+
+    <linearGradient
+      id="shadowGradient"
+      x1="20%"
+      y1="20%"
+      x2="80%"
+      y2="80%"
+    >
+      <stop offset="0%" stop-color="#0f1d42"/>
+      <stop offset="25%" stop-color="#1f2a5d"/>
+      <stop offset="45%" stop-color="#332f78"/>
+      <stop offset="60%" stop-color="#5f3458"/>
+      <stop offset="80%" stop-color="#7a2250"/>
+      <stop offset="100%" stop-color="#a50d57"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Main donut -->
+  <path
+    d="
+      M100,20
+      A80,80 0 1,1 99.9,20
+      M100,60
+      A40,40 0 1,0 100.1,60
+    "
+    fill="url(#richGradient)"
+    fill-rule="evenodd"
+  />
+
+  <!-- Darkening / depth overlay -->
+  <path
+    d="
+      M100,20
+      A80,80 0 1,1 99.9,20
+      M100,60
+      A40,40 0 1,0 100.1,60
+    "
+    fill="url(#darkenGradient)"
+    fill-rule="evenodd"
+  />
+
+  <!-- Inner shadow -->
+  <path
+    d="
+      M100,60
+      A40,40 0 1,0 100.1,60
+      M100,75
+      A25,25 0 1,1 99.9,75
+    "
+    fill="url(#shadowGradient)"
+    fill-rule="evenodd"
+  />
+</svg>

src-tauri/tauri.conf.json

@@ -12,7 +12,7 @@
   "app": {
     "windows": [
       {
-        "title": "thomann-dsp-app",
+        "title": "Thomann DSP Controller",
         "width": 1600,
         "height": 950,
         "minWidth": 1200,
@@ -27,11 +27,11 @@
     "active": true,
     "targets": "all",
     "icon": [
-      "icons/32x32.png",
+      "./icons/32x32.png",
-      "icons/128x128.png",
+      "./icons/128x128.png",
-      "icons/128x128@2x.png",
+      "./icons/128x128@2x.png",
-      "icons/icon.icns",
+      "./icons/icon.icns",
-      "icons/icon.ico"
+      "./icons/icon.ico"
     ]
   }
 }

src/components/ChoiceSelect/ChoiceSelect.css

@@ -1,65 +1,125 @@
+/* ChoiceSelect.css */
 .choice-select {
   position: relative;
   display: flex;
-  align-items: stretch;
+
+  color: var(--accent-brand);
 }
 
 .choice-select[data-disabled] {
   opacity: 0.5;
 }
 
-.choice-select__input {
+.choice-select__trigger {
   flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
 
-  height: var(--card-control-height);
+  display: flex;
-  padding: 0 var(--space-6) 0 var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0;
+  padding-inline: 5%;
 
   background: transparent;
-  color: var(--text-primary);
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: var(--font-sm);
+  font-size: 90%;
   
-  appearance: none;
+  color: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
 
-  outline: none;
   cursor: pointer;
-
   transition: border-color var(--dur-base) var(--ease-standard);
 }
 
-.choice-select__input:focus {
+.choice-select__trigger:hover,
+.choice-select__trigger--open {
   border-color: var(--accent-brand);
 }
 
-.choice-select__input:disabled {
+.choice-select__trigger:disabled {
   cursor: not-allowed;
 }
 
+.choice-select__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .choice-select__chevron {
-  position: absolute;
+  flex-shrink: 0;
-  top: 0;
-  right: 2%;
-  bottom: 0;
-
-  width: 4cqh;
-  padding-top: 3%;
-  padding-bottom: 3%;
-
   display: flex;
   align-items: center;
   justify-content: center;
 
-  pointer-events: none;
+  width: 4cqh;
+  aspect-ratio: 1;
+
   color: var(--accent-brand);
+  transition: transform var(--dur-base) var(--ease-standard);
+}
+
+.choice-select__trigger--open .choice-select__chevron {
+  transform: rotate(180deg);
 }
 
 .choice-select__chevron svg {
-  width: 75%;
+  width: 50%;
   height: auto;
   display: block;
 }
+
+.choice-select__option {
+  padding: 1%;
+  border-radius: var(--radius-sm);
+  font-size: 100%;
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.choice-select__option--highlight {
+  background: var(--bg-raised);
+}
+
+.choice-select__option--selected {
+  color: var(--accent-brand);
+  font-weight: var(--font-weight-semibold);
+}
+
+.choice-select__listbox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 40;
+
+  top: calc(100% + var(--space-1));
+
+  margin: 0;
+  padding: var(--space-1);
+  list-style: none;
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.choice-select__listbox--up {
+  top: auto;
+  bottom: calc(100% + var(--space-1));
+}
+
+.choice-select__listbox--portal {
+  position: fixed;
+  z-index: 1000; /* clear of any local stacking contexts in the panel */
+}

src/components/ChoiceSelect/ChoiceSelect.tsx

@@ -1,4 +1,6 @@
 // ChoiceSelect.tsx
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { TriangleDownIcon } from '../../assets/icons/Triangle';
 import './ChoiceSelect.css';
 
@@ -13,6 +15,11 @@ type ChoiceSelectProps<T extends string> = {
   style?: React.CSSProperties;
 };
 
+const LISTBOX_MAX_HEIGHT = 240; // keep in sync with .choice-select__listbox max-height
+const LISTBOX_GAP = 4; // px, ~= var(--space-1)
+
+type Coords = { top: number; left: number; width: number; fontSize: number };
+
 function ChoiceSelect<T extends string>({
   value,
   options,
@@ -23,50 +30,201 @@ function ChoiceSelect<T extends string>({
   className = '',
   style,
 }: ChoiceSelectProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [highlight, setHighlight] = useState(0);
+  const [dropUp, setDropUp] = useState(false);
+  const [coords, setCoords] = useState<Coords | null>(null);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listboxRef = useRef<HTMLUListElement>(null);
+  const suppressNextClick = useRef(false);
+
+ useEffect(() => {
+  function handleMouseDown(e: MouseEvent) {
+    const target = e.target as Node;
+    const clickedOutside =
+      rootRef.current &&
+      !rootRef.current.contains(target) &&
+      !listboxRef.current?.contains(target);
+
+    if (clickedOutside && open) {
+      setOpen(false);
+      suppressNextClick.current = true;
+    }
+  }
+
+  function handleClickCapture(e: MouseEvent) {
+    if (suppressNextClick.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      suppressNextClick.current = false;
+    }
+  }
+
+  document.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('click', handleClickCapture, true); // capture phase
+  return () => {
+    document.removeEventListener('mousedown', handleMouseDown);
+    document.removeEventListener('click', handleClickCapture, true);
+  };
+}, [open]);
+
+  // Re-check placement/position on scroll/resize while open — the trigger's
+  // position can change (e.g. inside a scrollable panel), and since the
+  // listbox is portaled it won't move with it automatically.
+  useEffect(() => {
+    if (!open) return;
+    const recalc = () => updatePlacement();
+    window.addEventListener('scroll', recalc, true);
+    window.addEventListener('resize', recalc);
+    return () => {
+      window.removeEventListener('scroll', recalc, true);
+      window.removeEventListener('resize', recalc);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
   const step = (direction: 1 | -1) => {
     const currentIndex = options.indexOf(value);
-
     if (currentIndex === -1 || options.length === 0) return;
-
     const nextIndex = (currentIndex + direction + options.length) % options.length;
-
     onChange(options[nextIndex]);
   };
 
-  return (
+  function updatePlacement() {
-    <div className={`choice-select ${className}`} data-disabled={disabled || undefined}>
+  const el = triggerRef.current;
-      <select
+  if (!el) return;
-        id={id}
-        className="choice-select__input"
-        style={style}
-        value={value}
-        disabled={disabled}
-        onChange={(e) => {
-          onChange(e.target.value as T);
-          e.currentTarget.blur();
-        }}
-        onWheel={(e) => {
-          e.preventDefault();
 
+  const rect = el.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const spaceAbove = rect.top;
+  const needsFlip = spaceBelow < LISTBOX_MAX_HEIGHT && spaceAbove > spaceBelow;
+  setDropUp(needsFlip);
+
+  // Capture the trigger's resolved font-size (its cqh has already resolved
+  // correctly here, since it's still inside the real container tree) and
+  // carry it as a plain px value into the portal, where cqh would break.
+  const fontSize = parseFloat(getComputedStyle(el).fontSize);
+
+  setCoords({
+    top: needsFlip ? rect.top - LISTBOX_GAP : rect.bottom + LISTBOX_GAP,
+    left: rect.left,
+    width: rect.width,
+    fontSize,
+  });
+}
+
+  function openList() {
+    if (disabled) return;
+    updatePlacement();
+    setOpen(true);
+    const idx = options.indexOf(value);
+    setHighlight(idx >= 0 ? idx : 0);
+  }
+
+  function pick(opt: T) {
+    if (opt !== value) onChange(opt);
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
     if (disabled) return;
 
-          if (e.deltaY < 0) {
+    if (!open) {
-            step(1);
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-          } else if (e.deltaY > 0) {
+        e.preventDefault();
-            step(-1);
+        openList();
+      }
+      return;
     }
-        }}
-      >
-        {options.map((option) => (
-          <option key={option} value={option}>
-            {formatLabel(option)}
-          </option>
-        ))}
-      </select>
 
+    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+      e.preventDefault();
+      setHighlight((h) => Math.min(h + 1, options.length - 1));
+    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+      e.preventDefault();
+      setHighlight((h) => Math.max(h - 1, 0));
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      pick(options[highlight]);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    }
+  }
+
+  return (
+    <div
+      className={`choice-select ${className}`}
+      data-disabled={disabled || undefined}
+      ref={rootRef}
+      style={style}
+    >
+      <button
+        id={id}
+        type="button"
+        ref={triggerRef}
+        className={'choice-select__trigger' + (open ? ' choice-select__trigger--open' : '')}
+        onClick={() => (open ? setOpen(false) : openList())}
+        onKeyDown={handleKeyDown}
+        onWheel={(e) => {
+          e.preventDefault();
+          if (disabled) return;
+          if (e.deltaY < 0) step(-1);
+          else if (e.deltaY > 0) step(1);
+        }}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <span className="choice-select__label">{formatLabel(value)}</span>
         <span className="choice-select__chevron" aria-hidden="true">
           <TriangleDownIcon />
         </span>
+      </button>
+
+      {open &&
+        coords &&
+        createPortal(
+          <ul
+            ref={listboxRef}
+            className={
+              'choice-select__listbox choice-select__listbox--portal' +
+              (dropUp ? ' choice-select__listbox--up' : '')
+            }
+            role="listbox"
+            style={{
+              fontSize: coords.fontSize,
+              left: coords.left,
+              width: coords.width,
+              // dropUp needs top: auto + bottom instead, see CSS note below
+              ...(dropUp
+                ? { top: 'auto', bottom: window.innerHeight - coords.top }
+                : { top: coords.top }),
+            }}
+          >
+            {options.map((option, i) => (
+              <li
+                key={option}
+                role="option"
+                aria-selected={option === value}
+                className={
+                  'choice-select__option' +
+                  (option === value ? ' choice-select__option--selected' : '') +
+                  (i === highlight ? ' choice-select__option--highlight' : '')
+                }
+                onMouseEnter={() => setHighlight(i)}
+                onClick={() => pick(option)}
+              >
+                {formatLabel(option)}
+              </li>
+            ))}
+          </ul>,
+          document.body
+        )}
     </div>
   );
 }

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

@@ -11,7 +11,7 @@ import LoadingOverlay from '../../../../components/LoadingOverlay/LoadingOverlay
 import { InputChannel, OutputChannel } from '../../types';
 import MatrixSection from '../Matrixsection/Matrixsection';
 import GeqSection from '../GeqSection/GeqSection';
-import ChannelSection from '../InputSection/ChannelSection';
+import ChannelSection from '../ChannelSection/ChannelSection';
 import { DSP408Api } from '../../dsp408';
 import { DSP408 } from '../../../../types';
 import { SidebarId } from '../../constants';

src/features/dsp408/components/MiscellaneousSection/MiscellaneousSection.tsx

@@ -112,6 +112,7 @@ function MiscellaneousPanel({
                 value={inputSource.type}
                 options={INPUT_TYPES}
                 onChange={handleInputTypeChange}
+                style={{color: 'var(--font-primary)'}}
               />
             </div>
 
@@ -131,6 +132,7 @@ function MiscellaneousPanel({
                     return `${frequency.slice(1)} Hz`;
                   }}
                   onChange={handleFrequencyChange}
+                  style={{color: 'var(--font-primary)'}}
                 />
               </div>
             )}

src/features/dsp408/dsp408.ts

@@ -720,6 +720,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify(`Preset stored in ${dsp.state.presets.names[presetIndex]}`, 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Store configuration failed: ${String(err)}`, 'error', dsp.name);
@@ -746,6 +748,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Factory reset completed', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Factory reset failed: ${String(err)}`, 'error', dsp.name);
@@ -769,6 +773,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Channels copied successfully', 'success', dsp.name)
+
           return true;
         } catch (err) {
           notify(`Channel copy failed: ${String(err)}`, 'error', dsp.name);
@@ -791,6 +797,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Input source updated', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Input source update failed: ${String(err)}`, 'error', dsp.name);
@@ -814,6 +822,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Channels linked successfully', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Channel linking failed: ${String(err)}`, 'error', dsp.name);
@@ -837,6 +847,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Channel name updated', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Channel name update failed: ${String(err)}`, 'error', dsp.name);
@@ -859,6 +871,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Device unlocked', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Unlock failed: ${String(err)}`, 'error', dsp.name);
@@ -881,6 +895,8 @@ export function forDSP408(dsp: DSP408, setDsps: SetDsps, notify: NotifyFn) {
 
           await updateDSPState();
 
+          notify('Device locked', 'success', dsp.name);
+
           return true;
         } catch (err) {
           notify(`Lock failed: ${String(err)}`, 'error', dsp.name);

src/pages/AddDspPage/AddDspPage.css

@@ -155,6 +155,11 @@
   height: var(--card-control-height);
 }
 
+.add-dsp-form__selector {
+  color: var(--text-primary);
+  height: 100%;
+}
+
 .add-dsp-form__field .choice-stepper__input {
   border: none;
   background: transparent;

src/pages/AddDspPage/AddDspPage.tsx

@@ -107,7 +107,7 @@ function AddDSPForm({
         <div className="add-dsp-form__field">
           <label htmlFor="f-type">Model</label>
           <ChoiceSelect
-            className=""
+            className="add-dsp-form__selector"
             id="f-type"
             value={form.type}
             options={DSP_TYPES}