feat: implement Phase 7.1-7.2 multi-track infrastructure

Added core multi-track support with track management and controls:

**Track Types & Utilities:**
- Track interface with audio buffer, controls (volume/pan/solo/mute)
- Track utility functions for creation, mixing, and gain calculation
- Track color system with 9 preset colors
- Configurable track heights (60-300px)

**Components:**
- TrackHeader: Collapsible track controls with inline name editing
  - Solo/Mute buttons with visual feedback
  - Volume slider (0-100%) and Pan control (L-C-R)
  - Track color indicator and remove button
- Track: Waveform display component with canvas rendering
  - Click-to-seek on waveform
  - Playhead visualization
  - Support for collapsed state
- TrackList: Container managing multiple tracks
  - Scrollable track list with custom scrollbar
  - Add track button
  - Empty state UI

**State Management:**
- useMultiTrack hook with localStorage persistence
- Add/remove/update/reorder track operations
- Track buffer management

Features implemented:
- ✅ Track creation and removal
- ✅ Track naming (editable)
- ✅ Track colors
- ✅ Solo/Mute per track
- ✅ Volume fader per track (0-100%)
- ✅ Pan control per track (L-C-R)
- ✅ Track collapse/expand
- ✅ Track height configuration
- ✅ Waveform visualization per track
- ✅ Multi-track audio mixing utilities

Next: Integrate into AudioEditor and implement multi-track playback

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

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

components/tracks/TrackList.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Track } from './Track';
+import type { Track as TrackType } from '@/types/track';
+
+export interface TrackListProps {
+  tracks: TrackType[];
+  zoom: number;
+  currentTime: number;
+  duration: number;
+  onAddTrack: () => void;
+  onRemoveTrack: (trackId: string) => void;
+  onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
+  onSeek?: (time: number) => void;
+}
+
+export function TrackList({
+  tracks,
+  zoom,
+  currentTime,
+  duration,
+  onAddTrack,
+  onRemoveTrack,
+  onUpdateTrack,
+  onSeek,
+}: TrackListProps) {
+  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>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Track List */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar">
+        {tracks.map((track) => (
+          <Track
+            key={track.id}
+            track={track}
+            zoom={zoom}
+            currentTime={currentTime}
+            duration={duration}
+            onToggleMute={() =>
+              onUpdateTrack(track.id, { mute: !track.mute })
+            }
+            onToggleSolo={() =>
+              onUpdateTrack(track.id, { solo: !track.solo })
+            }
+            onToggleCollapse={() =>
+              onUpdateTrack(track.id, { collapsed: !track.collapsed })
+            }
+            onVolumeChange={(volume) =>
+              onUpdateTrack(track.id, { volume })
+            }
+            onPanChange={(pan) =>
+              onUpdateTrack(track.id, { pan })
+            }
+            onRemove={() => onRemoveTrack(track.id)}
+            onNameChange={(name) =>
+              onUpdateTrack(track.id, { name })
+            }
+            onSeek={onSeek}
+          />
+        ))}
+      </div>
+
+      {/* Add Track Button */}
+      <div className="p-2 border-t border-border bg-card">
+        <Button onClick={onAddTrack} variant="outline" size="sm" className="w-full">
+          <Plus className="h-4 w-4 mr-2" />
+          Add Track
+        </Button>
+      </div>
+    </div>
+  );
+}