feat: redesign track and master controls with integrated fader+meters+pan

Unified design language across all tracks and master section:
- Created TrackFader component: vertical fader with horizontal meter bars
- Created TrackControls: integrated pan + fader + mute in compact layout
- Created MasterFader: similar design but larger for master output
- Created MasterControls: master version with pan + fader + mute
- Updated Track component to use new TrackControls
- Updated PlaybackControls to use new MasterControls
- Removed old VerticalFader and separate meter components

New features:
- Horizontal peak/RMS meter bars behind fader (top=peak, bottom=RMS)
- Color-coded meters (green/yellow/red based on dB levels)
- dB scale labels and numeric readouts
- Integrated mute button in controls
- Consistent circular pan knobs
- Professional DAW-style channel strip appearance
- Master section includes clip indicator

Visual improvements:
- Unified design across all tracks and master
- Compact vertical layout saves space
- Real-time level monitoring integrated with volume control
- Smooth animations and transitions

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

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

components/tracks/TrackControls.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import { Volume2, VolumeX } from 'lucide-react';
+import { CircularKnob } from '@/components/ui/CircularKnob';
+import { TrackFader } from './TrackFader';
+import { cn } from '@/lib/utils/cn';
+
+export interface TrackControlsProps {
+  volume: number;
+  pan: number;
+  peakLevel: number;
+  rmsLevel: number;
+  isMuted?: boolean;
+  onVolumeChange: (volume: number) => void;
+  onPanChange: (pan: number) => void;
+  onMuteToggle: () => void;
+  onVolumeTouchStart?: () => void;
+  onVolumeTouchEnd?: () => void;
+  onPanTouchStart?: () => void;
+  onPanTouchEnd?: () => void;
+  className?: string;
+}
+
+export function TrackControls({
+  volume,
+  pan,
+  peakLevel,
+  rmsLevel,
+  isMuted = false,
+  onVolumeChange,
+  onPanChange,
+  onMuteToggle,
+  onVolumeTouchStart,
+  onVolumeTouchEnd,
+  onPanTouchStart,
+  onPanTouchEnd,
+  className,
+}: TrackControlsProps) {
+  return (
+    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
+      {/* Pan Control */}
+      <CircularKnob
+        value={pan}
+        onChange={onPanChange}
+        onTouchStart={onPanTouchStart}
+        onTouchEnd={onPanTouchEnd}
+        min={-1}
+        max={1}
+        step={0.01}
+        label="PAN"
+        size={40}
+        formatter={(value) => {
+          if (Math.abs(value) < 0.01) return 'C';
+          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
+          return `${(value * 100).toFixed(0)}R`;
+        }}
+      />
+
+      {/* Track Fader with Integrated Meters */}
+      <TrackFader
+        value={volume}
+        peakLevel={peakLevel}
+        rmsLevel={rmsLevel}
+        onChange={onVolumeChange}
+        onTouchStart={onVolumeTouchStart}
+        onTouchEnd={onVolumeTouchEnd}
+      />
+
+      {/* Mute Button */}
+      <button
+        onClick={onMuteToggle}
+        className={cn(
+          'w-8 h-6 rounded text-[10px] font-bold transition-colors border',
+          isMuted
+            ? 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50 text-red-500'
+            : 'bg-muted/20 hover:bg-muted/30 border-border/50 text-muted-foreground'
+        )}
+        title={isMuted ? 'Unmute' : 'Mute'}
+      >
+        M
+      </button>
+    </div>
+  );
+}