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/EffectDevice.tsx

@@ -12,6 +12,7 @@ export interface EffectDeviceProps {
   onToggleEnabled?: () => void;
   onRemove?: () => void;
   onUpdateParameters?: (parameters: any) => void;
+  onToggleExpanded?: () => void;
 }
 
 export function EffectDevice({
@@ -19,16 +20,17 @@ export function EffectDevice({
   onToggleEnabled,
   onRemove,
   onUpdateParameters,
+  onToggleExpanded,
 }: EffectDeviceProps) {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const isExpanded = effect.expanded || false;
 
   return (
     <div
       className={cn(
-        'flex-shrink-0 flex flex-col h-full transition-all duration-200 rounded-md overflow-hidden',
+        'flex-shrink-0 flex flex-col h-full transition-all duration-200 overflow-hidden rounded-md',
         effect.enabled
-          ? 'bg-card border border-border/50 shadow-md'
-          : 'bg-card/40 border border-border/30 shadow-sm opacity-60',
+          ? 'bg-card border-l border-r border-b border-border'
+          : 'bg-card/40 border-l border-r border-b border-border/50 opacity-60 hover:opacity-80',
         isExpanded ? 'min-w-96' : 'w-10'
       )}
     >
@@ -39,7 +41,7 @@ export function EffectDevice({
           <div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
 
           <button
-            onClick={() => setIsExpanded(true)}
+            onClick={onToggleExpanded}
             className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
             title={`Expand ${effect.name}`}
           >
@@ -72,7 +74,7 @@ export function EffectDevice({
             <Button
               variant="ghost"
               size="icon-sm"
-              onClick={() => setIsExpanded(false)}
+              onClick={onToggleExpanded}
               title="Collapse device"
               className="h-5 w-5 flex-shrink-0"
             >