feat: enhance track controls and improve master fader layout

- Integrated all R/S/A/E buttons into TrackControls component
- Removed duplicate button sections from Track component
- Updated CircularKnob pan visualization to show no arc at center position
- Arc now extends from center to value for directional indication
- Moved MasterControls to dedicated right sidebar
- Removed master controls from PlaybackControls footer
- Optimized TrackControls spacing (gap-1.5, smaller buttons)
- Cleaner separation between transport and master control sections

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

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

components/tracks/TrackControls.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX } from 'lucide-react';
+import { Circle, Headphones, Waveform, MoreHorizontal } from 'lucide-react';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { TrackFader } from './TrackFader';
 import { cn } from '@/lib/utils/cn';
@@ -12,9 +12,17 @@ export interface TrackControlsProps {
   peakLevel: number;
   rmsLevel: number;
   isMuted?: boolean;
+  isSolo?: boolean;
+  isRecordEnabled?: boolean;
+  showAutomation?: boolean;
+  isRecording?: boolean;
   onVolumeChange: (volume: number) => void;
   onPanChange: (pan: number) => void;
   onMuteToggle: () => void;
+  onSoloToggle?: () => void;
+  onRecordToggle?: () => void;
+  onAutomationToggle?: () => void;
+  onEffectsClick?: () => void;
   onVolumeTouchStart?: () => void;
   onVolumeTouchEnd?: () => void;
   onPanTouchStart?: () => void;
@@ -28,9 +36,17 @@ export function TrackControls({
   peakLevel,
   rmsLevel,
   isMuted = false,
+  isSolo = false,
+  isRecordEnabled = false,
+  showAutomation = false,
+  isRecording = false,
   onVolumeChange,
   onPanChange,
   onMuteToggle,
+  onSoloToggle,
+  onRecordToggle,
+  onAutomationToggle,
+  onEffectsClick,
   onVolumeTouchStart,
   onVolumeTouchEnd,
   onPanTouchStart,
@@ -38,7 +54,7 @@ export function TrackControls({
   className,
 }: TrackControlsProps) {
   return (
-    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
+    <div className={cn('flex flex-col items-center gap-1.5 py-1.5', className)}>
       {/* Pan Control */}
       <CircularKnob
         value={pan}
@@ -67,19 +83,85 @@ export function TrackControls({
         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'
+      {/* Control Buttons Row 1: R/S/M */}
+      <div className="flex items-center gap-0.5 w-full justify-center">
+        {/* Record Arm */}
+        {onRecordToggle && (
+          <button
+            onClick={onRecordToggle}
+            className={cn(
+              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              isRecordEnabled
+                ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
+              isRecording && 'animate-pulse'
+            )}
+            title="Arm track for recording"
+          >
+            <Circle className="h-2.5 w-2.5 fill-current" />
+          </button>
         )}
-        title={isMuted ? 'Unmute' : 'Mute'}
-      >
-        M
-      </button>
+
+        {/* Solo Button */}
+        {onSoloToggle && (
+          <button
+            onClick={onSoloToggle}
+            className={cn(
+              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              isSolo
+                ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title="Solo track"
+          >
+            <Headphones className="h-2.5 w-2.5" />
+          </button>
+        )}
+
+        {/* Mute Button */}
+        <button
+          onClick={onMuteToggle}
+          className={cn(
+            'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+            isMuted
+              ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+              : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+          )}
+          title="Mute track"
+        >
+          M
+        </button>
+      </div>
+
+      {/* Control Buttons Row 2: A/E */}
+      <div className="flex items-center gap-0.5 w-full justify-center">
+        {/* Automation Toggle */}
+        {onAutomationToggle && (
+          <button
+            onClick={onAutomationToggle}
+            className={cn(
+              'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
+              showAutomation
+                ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title="Toggle automation"
+          >
+            A
+          </button>
+        )}
+
+        {/* Effects Button */}
+        {onEffectsClick && (
+          <button
+            onClick={onEffectsClick}
+            className="h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold bg-card hover:bg-accent text-muted-foreground border border-border/50"
+            title="Show effects"
+          >
+            E
+          </button>
+        )}
+      </div>
     </div>
   );
 }