feat: refine UI with effects panel improvements and visual polish

Major improvements:
- Fixed multi-file import (FileList to Array conversion)
- Auto-select first track when adding to empty project
- Global effects panel folding state (independent of track selection)
- Effects panel collapsed/disabled when no track selected
- Effect device expansion state persisted per-device
- Effect browser with searchable descriptions

Visual refinements:
- Removed center dot from pan knob for cleaner look
- Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle
- Level meter capped at fader position (realistic mixer behavior)
- Solid background instead of gradient for fader track
- Subtle volume overlay up to fader handle
- Fixed track control width flickering (consistent 4px border)
- Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius
- Added border between track control and waveform area

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/effects/EffectBrowser.tsx

@@ -21,6 +21,28 @@ const EFFECT_CATEGORIES = {
   'Pitch & Time': ['pitch', 'timestretch'] as EffectType[],
 };
 
+const EFFECT_DESCRIPTIONS: Record<EffectType, string> = {
+  'compressor': 'Reduce dynamic range and control peaks',
+  'limiter': 'Prevent audio from exceeding a maximum level',
+  'gate': 'Reduce noise by cutting low-level signals',
+  'lowpass': 'Allow frequencies below cutoff to pass',
+  'highpass': 'Allow frequencies above cutoff to pass',
+  'bandpass': 'Allow frequencies within a range to pass',
+  'notch': 'Remove a specific frequency range',
+  'lowshelf': 'Boost or cut low frequencies',
+  'highshelf': 'Boost or cut high frequencies',
+  'peaking': 'Boost or cut a specific frequency band',
+  'delay': 'Create echoes and rhythmic repeats',
+  'reverb': 'Simulate acoustic space and ambience',
+  'chorus': 'Thicken sound with subtle pitch variations',
+  'flanger': 'Create sweeping comb filter effects',
+  'phaser': 'Create phase-shifted modulation effects',
+  'distortion': 'Add harmonic saturation and grit',
+  'bitcrusher': 'Reduce bit depth for lo-fi effects',
+  'pitch': 'Shift pitch without changing tempo',
+  'timestretch': 'Change tempo without affecting pitch',
+};
+
 export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserProps) {
   const [search, setSearch] = React.useState('');
   const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
@@ -40,7 +62,8 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
 
     Object.entries(EFFECT_CATEGORIES).forEach(([category, effects]) => {
       const matchingEffects = effects.filter((effect) =>
-        EFFECT_NAMES[effect].toLowerCase().includes(searchLower)
+        EFFECT_NAMES[effect].toLowerCase().includes(searchLower) ||
+        EFFECT_DESCRIPTIONS[effect].toLowerCase().includes(searchLower)
       );
       if (matchingEffects.length > 0) {
         filtered[category] = matchingEffects;
@@ -101,7 +124,7 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
                       )}
                     >
                       <div className="font-medium text-sm">{EFFECT_NAMES[effect]}</div>
-                      <div className="text-xs text-muted-foreground capitalize">{effect}</div>
+                      <div className="text-xs text-muted-foreground">{EFFECT_DESCRIPTIONS[effect]}</div>
                     </button>
                   ))}
                 </div>