feat: add multi-track audio import functionality

Implemented comprehensive multi-file audio import system:
- Created ImportTrackDialog component with drag-and-drop and file browser support
- Updated TrackList to integrate import functionality with dedicated buttons
- Added multi-track-demo page to test and demonstrate import features
- Sequential file processing with automatic track naming from filenames
- Error handling for non-audio files

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

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

components/tracks/TrackList.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { Plus } from 'lucide-react';
+import { Plus, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
+import { ImportTrackDialog } from './ImportTrackDialog';
 import type { Track as TrackType } from '@/types/track';
 
 export interface TrackListProps {
@@ -12,6 +13,7 @@ export interface TrackListProps {
   currentTime: number;
   duration: number;
   onAddTrack: () => void;
+  onImportTrack?: (buffer: AudioBuffer, name: string) => void;
   onRemoveTrack: (trackId: string) => void;
   onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
   onSeek?: (time: number) => void;
@@ -23,19 +25,45 @@ export function TrackList({
   currentTime,
   duration,
   onAddTrack,
+  onImportTrack,
   onRemoveTrack,
   onUpdateTrack,
   onSeek,
 }: TrackListProps) {
+  const [importDialogOpen, setImportDialogOpen] = React.useState(false);
+
+  const handleImportTrack = (buffer: AudioBuffer, name: string) => {
+    if (onImportTrack) {
+      onImportTrack(buffer, name);
+    }
+  };
+
   if (tracks.length === 0) {
     return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
-        <p className="text-sm">No tracks yet. Add a track to get started.</p>
-        <Button onClick={onAddTrack} variant="secondary">
-          <Plus className="h-4 w-4 mr-2" />
-          Add Track
-        </Button>
-      </div>
+      <>
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
+          <p className="text-sm">No tracks yet. Add a track to get started.</p>
+          <div className="flex gap-2">
+            <Button onClick={onAddTrack} variant="secondary">
+              <Plus className="h-4 w-4 mr-2" />
+              Add Empty Track
+            </Button>
+            {onImportTrack && (
+              <Button onClick={() => setImportDialogOpen(true)} variant="secondary">
+                <Upload className="h-4 w-4 mr-2" />
+                Import Audio Files
+              </Button>
+            )}
+          </div>
+        </div>
+        {onImportTrack && (
+          <ImportTrackDialog
+            open={importDialogOpen}
+            onClose={() => setImportDialogOpen(false)}
+            onImportTrack={handleImportTrack}
+          />
+        )}
+      </>
     );
   }
 
@@ -74,13 +102,33 @@ export function TrackList({
         ))}
       </div>
 
-      {/* Add Track Button */}
-      <div className="p-2 border-t border-border bg-card">
+      {/* Add Track Buttons */}
+      <div className="p-2 border-t border-border bg-card space-y-2">
         <Button onClick={onAddTrack} variant="outline" size="sm" className="w-full">
           <Plus className="h-4 w-4 mr-2" />
-          Add Track
+          Add Empty Track
         </Button>
+        {onImportTrack && (
+          <Button
+            onClick={() => setImportDialogOpen(true)}
+            variant="outline"
+            size="sm"
+            className="w-full"
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            Import Audio Files
+          </Button>
+        )}
       </div>
+
+      {/* Import Dialog */}
+      {onImportTrack && (
+        <ImportTrackDialog
+          open={importDialogOpen}
+          onClose={() => setImportDialogOpen(false)}
+          onImportTrack={handleImportTrack}
+        />
+      )}
     </div>
   );
 }