feat: custom item list in selector

README.md

@@ -12,5 +12,6 @@ This template should help get you started developing with Tauri, React and Types
 - 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/components/ChoiceSelect/ChoiceSelect.css

@@ -1,65 +1,120 @@
+/* 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));
+}

src/components/ChoiceSelect/ChoiceSelect.tsx

@@ -1,4 +1,5 @@
 // ChoiceSelect.tsx
+import { useEffect, useRef, useState } from 'react';
 import { TriangleDownIcon } from '../../assets/icons/Triangle';
 import './ChoiceSelect.css';
 
@@ -13,6 +14,8 @@ type ChoiceSelectProps<T extends string> = {
   style?: React.CSSProperties;
 };
 
+const LISTBOX_MAX_HEIGHT = 240; // keep in sync with .choice-select__listbox max-height
+
 function ChoiceSelect<T extends string>({
   value,
   options,
@@ -23,50 +26,152 @@ 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 rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  // Re-check placement on scroll/resize while open, not just at open-time —
+  // the trigger's position can change (e.g. inside a scrollable panel).
+  useEffect(() => {
+    if (!open) return;
+    const recalc = () => computeDropDirection();
+    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]);
   };
 
+  function computeDropDirection() {
+    const el = triggerRef.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    // Prefer opening down. Only flip up if there's not enough room below
+    // AND there's more room above — otherwise stay down and let it scroll/clip.
+    const needsFlip = spaceBelow < LISTBOX_MAX_HEIGHT && spaceAbove > spaceBelow;
+    setDropUp(needsFlip);
+  }
+
+  function openList() {
+    if (disabled) return;
+    computeDropDirection();
+    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 (!open) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        openList();
+      }
+      return;
+    }
+
+    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}>
+    <div
-      <select
+      className={`choice-select ${className}`}
+      data-disabled={disabled || undefined}
+      ref={rootRef}
+      style={style}
+    >
+      <button
         id={id}
-        className="choice-select__input"
+        type="button"
-        style={style}
+        ref={triggerRef}
-        value={value}
+        className={'choice-select__trigger' + (open ? ' choice-select__trigger--open' : '')}
-        disabled={disabled}
+        onClick={() => (open ? setOpen(false) : openList())}
-        onChange={(e) => {
+        onKeyDown={handleKeyDown}
-          onChange(e.target.value as T);
-          e.currentTarget.blur();
-        }}
         onWheel={(e) => {
           e.preventDefault();
-
           if (disabled) return;
-
+          if (e.deltaY < 0) step(-1);
-          if (e.deltaY < 0) {
+          else if (e.deltaY > 0) step(1);
-            step(1);
-          } else if (e.deltaY > 0) {
-            step(-1);
-          }
         }}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
       >
-        {options.map((option) => (
+        <span className="choice-select__label">{formatLabel(value)}</span>
-          <option key={option} value={option}>
+        <span className="choice-select__chevron" aria-hidden="true">
-            {formatLabel(option)}
+          <TriangleDownIcon />
-          </option>
+        </span>
-        ))}
+      </button>
-      </select>
 
-      <span className="choice-select__chevron" aria-hidden="true">
+      {open && (
-        <TriangleDownIcon />
+        <ul
-      </span>
+          className={'choice-select__listbox' + (dropUp ? ' choice-select__listbox--up' : '')}
+          role="listbox"
+        >
+          {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>
+      )}
     </div>
   );
 }

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/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}