feat: redesign track controls to Ableton Live style

Major UI Redesign:
- Reduced track control width from 288px to 192px (33% narrower)
- Replaced horizontal sliders with vertical fader and circular knob
- More compact, professional appearance matching Ableton Live
- Global settings dialog replaces inline recording settings

New Components Created:
- VerticalFader.tsx: Vertical volume control with integrated level meter
  - Shows volume dB at top, level dB at bottom
  - Level meter displayed as background gradient
  - Draggable handle for precise control

- CircularKnob.tsx: Rotary pan control
  - SVG-based rotary knob with arc indicator
  - Vertical drag interaction (200px sensitivity)
  - Displays L/C/R values

- GlobalSettingsDialog.tsx: Centralized settings
  - Tabbed interface (Recording, Playback, Interface)
  - Recording settings moved from inline to dialog
  - Accessible via gear icon in header
  - Modal dialog with backdrop

Track Control Panel Changes:
- Track name: More compact (text-xs)
- Buttons: Smaller (h-6 w-6), text-based S/M buttons
- Record button: Circle indicator instead of icon
- Pan: Circular knob (40px) instead of horizontal slider
- Volume: Vertical fader with integrated meter
- Removed: Inline recording settings panel

Header Changes:
- Added Settings button (gear icon) before ThemeToggle
- Opens GlobalSettingsDialog on click
- Clean, accessible from anywhere

Props Cleanup:
- Removed recordingSettings props from Track/TrackList
- Removed onInputGainChange, onRecordMonoChange, onSampleRateChange props
- Settings now managed globally via dialog

Technical Details:
- VerticalFader uses mouse drag for smooth control
- CircularKnob rotates -135° to +135° (270° range)
- Global event listeners for drag interactions
- Proper cleanup on unmount

Benefits:
✅ 33% narrower tracks = more tracks visible
✅ Professional Ableton-style appearance
✅ Cleaner, less cluttered interface
✅ Global settings accessible anywhere
✅ Better use of vertical space
✅ Consistent with industry-standard DAWs

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

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

components/tracks/TrackList.tsx

@@ -7,7 +7,6 @@ import { Track } from './Track';
 import { ImportTrackDialog } from './ImportTrackDialog';
 import type { Track as TrackType } from '@/types/track';
 import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
-import type { RecordingSettings } from '@/lib/hooks/useRecording';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -26,10 +25,6 @@ export interface TrackListProps {
   recordingTrackId?: string | null;
   recordingLevel?: number;
   trackLevels?: Record<string, number>;
-  recordingSettings?: RecordingSettings;
-  onInputGainChange?: (gain: number) => void;
-  onRecordMonoChange?: (mono: boolean) => void;
-  onSampleRateChange?: (sampleRate: number) => void;
 }
 
 export function TrackList({
@@ -49,10 +44,6 @@ export function TrackList({
   recordingTrackId,
   recordingLevel = 0,
   trackLevels = {},
-  recordingSettings,
-  onInputGainChange,
-  onRecordMonoChange,
-  onSampleRateChange,
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
 
@@ -176,10 +167,6 @@ export function TrackList({
             isRecording={recordingTrackId === track.id}
             recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
             playbackLevel={trackLevels[track.id] || 0}
-            recordingSettings={recordingSettings}
-            onInputGainChange={onInputGainChange}
-            onRecordMonoChange={onRecordMonoChange}
-            onSampleRateChange={onSampleRateChange}
           />
         ))}
       </div>