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/tracks/ImportTrackDialog.tsx

@@ -24,28 +24,42 @@ export function ImportTrackDialog({
   const handleFiles = async (files: FileList) => {
     setIsLoading(true);
 
+    // Convert FileList to Array to prevent any weird behavior
+    const fileArray = Array.from(files);
+    console.log(`[ImportTrackDialog] Processing ${fileArray.length} files`, fileArray);
+
     try {
       // Process files sequentially
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
+      for (let i = 0; i < fileArray.length; i++) {
+        console.log(`[ImportTrackDialog] Loop iteration ${i}, fileArray.length: ${fileArray.length}`);
+        const file = fileArray[i];
+        console.log(`[ImportTrackDialog] Processing file ${i + 1}/${fileArray.length}: ${file.name}, type: ${file.type}`);
 
         if (!file.type.startsWith('audio/')) {
-          console.warn(`Skipping non-audio file: ${file.name}`);
+          console.warn(`Skipping non-audio file: ${file.name} (type: ${file.type})`);
           continue;
         }
 
         try {
+          console.log(`[ImportTrackDialog] Decoding file ${i + 1}/${files.length}: ${file.name}`);
           const buffer = await decodeAudioFile(file);
           const trackName = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
+          console.log(`[ImportTrackDialog] Importing track: ${trackName}`);
           onImportTrack(buffer, trackName);
+          console.log(`[ImportTrackDialog] Track imported: ${trackName}`);
         } catch (error) {
           console.error(`Failed to import ${file.name}:`, error);
         }
+        console.log(`[ImportTrackDialog] Finished processing file ${i + 1}`);
       }
 
-      onClose();
+      console.log('[ImportTrackDialog] Loop completed, all files processed');
+    } catch (error) {
+      console.error('[ImportTrackDialog] Error in handleFiles:', error);
     } finally {
       setIsLoading(false);
+      console.log('[ImportTrackDialog] Closing dialog');
+      onClose();
     }
   };