reorganization

src/components/EffectsBar.tsx

@@ -1,11 +1,12 @@
 import { Slider } from './Slider'
+import { Switch } from './Switch'
 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) => void
+  onChange: (parameterId: string, value: number | boolean) => void
 }
 
 export function EffectsBar({ values, onChange }: EffectsBarProps) {
@@ -18,23 +19,39 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
 
   return (
     <div className="bg-black border-t-2 border-white px-6 py-4">
-      <div className="grid grid-cols-4 gap-6">
-        {EFFECTS.flatMap(effect =>
-          effect.parameters.map(param => (
-            <Slider
-              key={param.id}
-              label={param.label}
-              value={values[param.id] ?? param.default}
-              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}
-            />
-          ))
-        )}
+      <div className="grid grid-cols-4 gap-4">
+        {EFFECTS.map(effect => (
+          <div key={effect.id} className="border-2 border-white p-3">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
+                {effect.name.toUpperCase()}
+              </h3>
+              {effect.bypassable && (
+                <Switch
+                  checked={!Boolean(values[`${effect.id}Bypass`])}
+                  onChange={(checked) => onChange(`${effect.id}Bypass`, !checked)}
+                  label={Boolean(values[`${effect.id}Bypass`]) ? 'OFF' : 'ON'}
+                />
+              )}
+            </div>
+            <div className="flex flex-col gap-3">
+              {effect.parameters.map(param => (
+                <Slider
+                  key={param.id}
+                  label={param.label}
+                  value={values[param.id] as number ?? param.default}
+                  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}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   )