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/editor/AudioEditor.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { Music, Plus, Upload, Trash2 } from 'lucide-react';
+import { Music, Plus, Upload, Trash2, Settings } from 'lucide-react';
 import { PlaybackControls } from './PlaybackControls';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
 import { CommandPalette } from '@/components/ui/CommandPalette';
+import { GlobalSettingsDialog } from '@/components/settings/GlobalSettingsDialog';
 import { Button } from '@/components/ui/Button';
 import type { CommandAction } from '@/components/ui/CommandPalette';
 import { useMultiTrack } from '@/lib/hooks/useMultiTrack';
@@ -36,6 +37,7 @@ export function AudioEditor() {
   const [punchInTime, setPunchInTime] = React.useState(0);
   const [punchOutTime, setPunchOutTime] = React.useState(0);
   const [overdubEnabled, setOverdubEnabled] = React.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
 
   const { addToast } = useToast();
 
@@ -663,9 +665,17 @@ export function AudioEditor() {
           </div>
         </div>
 
-        {/* Right: Command Palette + Theme Toggle */}
+        {/* Right: Command Palette + Settings + Theme Toggle */}
         <div className="flex items-center gap-2 flex-shrink-0">
           <CommandPalette actions={commandActions} />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setSettingsDialogOpen(true)}
+            title="Settings"
+          >
+            <Settings className="h-5 w-5" />
+          </Button>
           <ThemeToggle />
         </div>
       </header>
@@ -693,10 +703,6 @@ export function AudioEditor() {
               recordingTrackId={recordingTrackId}
               recordingLevel={recordingState.inputLevel}
               trackLevels={trackLevels}
-              recordingSettings={recordingSettings}
-              onInputGainChange={setInputGain}
-              onRecordMonoChange={setRecordMono}
-              onSampleRateChange={setSampleRate}
             />
           </div>
 
@@ -738,6 +744,16 @@ export function AudioEditor() {
         onClose={() => setImportDialogOpen(false)}
         onImportTrack={handleImportTrack}
       />
+
+      {/* Global Settings Dialog */}
+      <GlobalSettingsDialog
+        open={settingsDialogOpen}
+        onClose={() => setSettingsDialogOpen(false)}
+        recordingSettings={recordingSettings}
+        onInputGainChange={setInputGain}
+        onRecordMonoChange={setRecordMono}
+        onSampleRateChange={setSampleRate}
+      />
     </>
   );
 }