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/Track.tsx

@@ -9,9 +9,8 @@ import { cn } from '@/lib/utils/cn';
 import { EffectBrowser } from '@/components/effects/EffectBrowser';
 import { EffectDevice } from '@/components/effects/EffectDevice';
 import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
-import { InputLevelMeter } from '@/components/recording/InputLevelMeter';
-import { RecordingSettings } from '@/components/recording/RecordingSettings';
-import type { RecordingSettings as RecordingSettingsType } from '@/lib/hooks/useRecording';
+import { VerticalFader } from '@/components/ui/VerticalFader';
+import { CircularKnob } from '@/components/ui/CircularKnob';
 
 export interface TrackProps {
   track: TrackType;
@@ -38,10 +37,6 @@ export interface TrackProps {
   isRecording?: boolean;
   recordingLevel?: number;
   playbackLevel?: number;
-  recordingSettings?: RecordingSettingsType;
-  onInputGainChange?: (gain: number) => void;
-  onRecordMonoChange?: (mono: boolean) => void;
-  onSampleRateChange?: (sampleRate: number) => void;
 }
 
 export function Track({
@@ -69,10 +64,6 @@ export function Track({
   isRecording = false,
   recordingLevel = 0,
   playbackLevel = 0,
-  recordingSettings,
-  onInputGainChange,
-  onRecordMonoChange,
-  onSampleRateChange,
 }: TrackProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -411,28 +402,29 @@ export function Track({
     >
       {/* Top: Track Row (Control Panel + Waveform) */}
       <div className="flex" style={{ height: trackHeight }}>
-        {/* Left: Track Control Panel (Fixed Width) */}
+        {/* Left: Track Control Panel (Fixed Width) - Ableton Style */}
         <div
-          className="w-72 flex-shrink-0 bg-card border-r border-border border-b border-border p-3 flex flex-col gap-2"
+          className="w-48 flex-shrink-0 bg-card border-r border-border border-b border-border p-2 flex flex-col gap-2"
           onClick={(e) => e.stopPropagation()}
         >
-        {/* Track Name & Collapse Toggle */}
-        <div className="flex items-center gap-2">
+        {/* Track Name (Full Width) */}
+        <div className="flex items-center gap-1">
           <Button
             variant="ghost"
             size="icon-sm"
             onClick={onToggleCollapse}
             title={track.collapsed ? 'Expand track' : 'Collapse track'}
+            className="flex-shrink-0 h-6 w-6"
           >
             {track.collapsed ? (
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="h-3 w-3" />
             ) : (
-              <ChevronDown className="h-4 w-4" />
+              <ChevronDown className="h-3 w-3" />
             )}
           </Button>
 
           <div
-            className="w-1 h-8 rounded-full flex-shrink-0"
+            className="w-1 h-6 rounded-full flex-shrink-0"
             style={{ backgroundColor: track.color }}
           />
 
@@ -445,19 +437,22 @@ export function Track({
                 onChange={(e) => setNameInput(e.target.value)}
                 onBlur={handleNameBlur}
                 onKeyDown={handleNameKeyDown}
-                className="w-full px-2 py-1 text-sm font-medium bg-background border border-border rounded"
+                className="w-full px-1 py-0.5 text-xs font-medium bg-background border border-border rounded"
               />
             ) : (
               <div
                 onClick={handleNameClick}
-                className="px-2 py-1 text-sm font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
+                className="px-1 py-0.5 text-xs font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
                 title={String(track.name || 'Untitled Track')}
               >
                 {String(track.name || 'Untitled Track')}
               </div>
             )}
           </div>
+        </div>
 
+        {/* Compact Button Row */}
+        <div className="flex items-center justify-center gap-1">
           {/* Record Enable Button */}
           {onToggleRecordEnable && (
             <Button
@@ -466,11 +461,17 @@ export function Track({
               onClick={onToggleRecordEnable}
               title="Arm track for recording"
               className={cn(
+                'h-6 w-6',
                 track.recordEnabled && 'bg-red-500/20 hover:bg-red-500/30',
                 isRecording && 'animate-pulse'
               )}
             >
-              <Mic className={cn('h-4 w-4', track.recordEnabled && 'text-red-500')} />
+              <div
+                className={cn(
+                  'h-3 w-3 rounded-full border-2',
+                  track.recordEnabled ? 'bg-red-500 border-red-500' : 'border-current'
+                )}
+              />
             </Button>
           )}
 
@@ -480,9 +481,12 @@ export function Track({
             size="icon-sm"
             onClick={onToggleSolo}
             title="Solo track"
-            className={cn(track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30')}
+            className={cn(
+              'h-6 w-6 text-[10px] font-bold',
+              track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-500'
+            )}
           >
-            <Headphones className={cn('h-4 w-4', track.solo && 'text-yellow-500')} />
+            S
           </Button>
 
           {/* Mute Button */}
@@ -491,13 +495,12 @@ export function Track({
             size="icon-sm"
             onClick={onToggleMute}
             title="Mute track"
-            className={cn(track.mute && 'bg-red-500/20 hover:bg-red-500/30')}
-          >
-            {track.mute ? (
-              <VolumeX className="h-4 w-4 text-red-500" />
-            ) : (
-              <Volume2 className="h-4 w-4" />
+            className={cn(
+              'h-6 w-6 text-[10px] font-bold',
+              track.mute && 'bg-red-500/20 hover:bg-red-500/30 text-red-500'
             )}
+          >
+            M
           </Button>
 
           {/* Remove Button */}
@@ -506,105 +509,37 @@ export function Track({
             size="icon-sm"
             onClick={onRemove}
             title="Remove track"
-            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            className="h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
           >
-            <Trash2 className="h-4 w-4" />
+            <Trash2 className="h-3 w-3" />
           </Button>
         </div>
 
         {/* Track Controls - Only show when not collapsed */}
         {!track.collapsed && (
-          <>
-            {/* Volume */}
-            <div className="flex items-center gap-2">
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                {track.volume === 0 ? (
-                  <VolumeX className="h-3.5 w-3.5" />
-                ) : (
-                  <Volume2 className="h-3.5 w-3.5" />
-                )}
-                Volume
-              </label>
-              <div className="flex-1">
-                <Slider
-                  value={track.volume}
-                  onChange={onVolumeChange}
-                  min={0}
-                  max={1}
-                  step={0.01}
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                {Math.round(track.volume * 100)}%
-              </span>
-            </div>
+          <div className="flex-1 flex flex-col items-center justify-center gap-2 py-2">
+            {/* Pan Knob */}
+            <CircularKnob
+              value={track.pan}
+              onChange={onPanChange}
+              min={-1}
+              max={1}
+              step={0.01}
+              size={40}
+              label="PAN"
+            />
 
-            {/* Pan */}
-            <div className="flex items-center gap-2">
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                <UnfoldHorizontal className="h-3.5 w-3.5" />
-                Pan
-              </label>
-              <div className="flex-1">
-                <Slider
-                  value={track.pan}
-                  onChange={onPanChange}
-                  min={-1}
-                  max={1}
-                  step={0.01}
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                {track.pan === 0
-                  ? 'C'
-                  : track.pan < 0
-                  ? `L${Math.abs(Math.round(track.pan * 100))}`
-                  : `R${Math.round(track.pan * 100)}`}
-              </span>
-            </div>
-
-            {/* Level Meter (shows input when recording, output level otherwise) */}
-            <div className="flex items-center gap-2">
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                {track.recordEnabled || isRecording ? (
-                  <>
-                    <Mic className="h-3.5 w-3.5" />
-                    Input
-                  </>
-                ) : (
-                  <>
-                    <Gauge className="h-3.5 w-3.5" />
-                    Level
-                  </>
-                )}
-              </label>
-              <div className="flex-1">
-                <InputLevelMeter
-                  level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
-                  orientation="horizontal"
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-12 text-right flex-shrink-0 font-mono">
-                {(() => {
-                  const level = track.recordEnabled || isRecording ? recordingLevel : playbackLevel;
-                  // Convert normalized (0-1) back to dB
-                  // normalized = (dB - (-60)) / 60, so dB = (normalized * 60) - 60
-                  const db = (level * 60) - 60;
-                  return level === 0 ? '-∞' : `${db.toFixed(0)}`;
-                })()}
-              </span>
-            </div>
-
-            {/* Recording Settings - Show when track is armed */}
-            {track.recordEnabled && recordingSettings && onInputGainChange && onRecordMonoChange && onSampleRateChange && (
-              <RecordingSettings
-                settings={recordingSettings}
-                onInputGainChange={onInputGainChange}
-                onRecordMonoChange={onRecordMonoChange}
-                onSampleRateChange={onSampleRateChange}
-              />
-            )}
-          </>
+            {/* Vertical Volume Fader with integrated meter */}
+            <VerticalFader
+              value={track.volume}
+              level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
+              onChange={onVolumeChange}
+              min={0}
+              max={1}
+              step={0.01}
+              showDb={true}
+            />
+          </div>
         )}
       </div>
 

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>