Safer fold and crush section

src/components/EffectsBar.tsx

@@ -1,22 +1,15 @@
 import { Slider } from './Slider'
 import { Switch } from './Switch'
+import { Dropdown } from './Dropdown'
 import { EFFECTS } from '../config/effects'
-import { getClipModeLabel } from '../utils/formatters'
 import type { EffectValues } from '../types/effects'
 
 interface EffectsBarProps {
   values: EffectValues
-  onChange: (parameterId: string, value: number | boolean) => void
+  onChange: (parameterId: string, value: number | boolean | string) => void
 }
 
 export function EffectsBar({ values, onChange }: EffectsBarProps) {
-  const formatValue = (id: string, value: number): string => {
-    if (id === 'clipMode') {
-      return getClipModeLabel(value)
-    }
-    return value.toString()
-  }
-
   const renderFilterEffect = (effect: typeof EFFECTS[number]) => {
     const filterGroups = [
       { prefix: 'hp', label: 'HP' },
@@ -98,6 +91,18 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
               </div>
               <div className="flex flex-col gap-3">
                 {effect.parameters.map(param => {
+                  if (param.options) {
+                    return (
+                      <Dropdown
+                        key={param.id}
+                        label={param.label}
+                        value={values[param.id] as string ?? param.default as string}
+                        options={param.options}
+                        onChange={(value) => onChange(param.id, value)}
+                      />
+                    )
+                  }
+
                   const isSwitch = param.min === 0 && param.max === 1 && param.step === 1
 
                   if (isSwitch) {
@@ -121,13 +126,12 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
                     <Slider
                       key={param.id}
                       label={param.label}
-                      value={values[param.id] as number ?? param.default}
+                      value={values[param.id] as number ?? param.default as number}
                       min={param.min}
                       max={param.max}
                       step={param.step}
                       unit={param.unit}
                       onChange={(value) => onChange(param.id, value)}
-                      formatValue={param.id === 'clipMode' ? formatValue : undefined}
                       valueId={param.id}
                     />
                   )