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/ui/CircularKnob.tsx

@@ -115,6 +115,28 @@ export function CircularKnob({
     ? `L${Math.abs(Math.round(value * 100))}`
     : `R${Math.round(value * 100)}`;
 
+  // Calculate arc parameters for center-based rendering
+  const isNearCenter = Math.abs(value) < 0.01;
+  const centerPercentage = 0.5; // Center position (50%)
+
+  // Arc goes from center to current value
+  let arcStartPercentage: number;
+  let arcLength: number;
+
+  if (value < -0.01) {
+    // Left side: arc from value to center
+    arcStartPercentage = percentage;
+    arcLength = centerPercentage - percentage;
+  } else if (value > 0.01) {
+    // Right side: arc from center to value
+    arcStartPercentage = centerPercentage;
+    arcLength = percentage - centerPercentage;
+  } else {
+    // Center: no arc
+    arcStartPercentage = centerPercentage;
+    arcLength = 0;
+  }
+
   return (
     <div className={cn('flex flex-col items-center gap-1', className)}>
       {label && (
@@ -147,19 +169,21 @@ export function CircularKnob({
             className="text-muted/30"
           />
 
-          {/* Value arc */}
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={size / 2 - 4}
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="3"
-            strokeLinecap="round"
-            className="text-primary"
-            strokeDasharray={`${(percentage * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
-            transform={`rotate(-225 ${size / 2} ${size / 2})`}
-          />
+          {/* Value arc - only show when not centered */}
+          {!isNearCenter && (
+            <circle
+              cx={size / 2}
+              cy={size / 2}
+              r={size / 2 - 4}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+              className="text-primary"
+              strokeDasharray={`${(arcLength * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
+              transform={`rotate(${-225 + arcStartPercentage * 270} ${size / 2} ${size / 2})`}
+            />
+          )}
         </svg>
 
         {/* Knob body */}