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

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { Music, Plus, Upload, Trash2, Settings, Download } from 'lucide-react';
 import { PlaybackControls } from './PlaybackControls';
+import { MasterControls } from '@/components/controls/MasterControls';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
 import { CommandPalette } from '@/components/ui/CommandPalette';
 import { GlobalSettingsDialog } from '@/components/settings/GlobalSettingsDialog';
@@ -1034,6 +1035,30 @@ export function AudioEditor() {
             />
           </div>
         </main>
+
+        {/* Right Sidebar - Master Controls */}
+        <aside className="flex-shrink-0 border-l border-border bg-card flex items-center justify-center p-4">
+          <MasterControls
+            volume={masterVolume}
+            pan={masterPan}
+            peakLevel={masterPeakLevel}
+            rmsLevel={masterRmsLevel}
+            isClipping={masterIsClipping}
+            isMuted={isMasterMuted}
+            onVolumeChange={setMasterVolume}
+            onPanChange={setMasterPan}
+            onMuteToggle={() => {
+              if (isMasterMuted) {
+                setMasterVolume(0.8);
+                setIsMasterMuted(false);
+              } else {
+                setMasterVolume(0);
+                setIsMasterMuted(true);
+              }
+            }}
+            onResetClip={resetClipIndicator}
+          />
+        </aside>
       </div>
 
       {/* Transport Controls */}
@@ -1044,22 +1069,11 @@ export function AudioEditor() {
           currentTime={currentTime}
           duration={duration}
           volume={masterVolume}
-          pan={masterPan}
           onPlay={play}
           onPause={pause}
           onStop={stop}
           onSeek={seek}
           onVolumeChange={setMasterVolume}
-          onPanChange={setMasterPan}
-          onMuteToggle={() => {
-            if (isMasterMuted) {
-              setMasterVolume(0.8);
-              setIsMasterMuted(false);
-            } else {
-              setMasterVolume(0);
-              setIsMasterMuted(true);
-            }
-          }}
           currentTimeFormatted={formatDuration(currentTime)}
           durationFormatted={formatDuration(duration)}
           isRecording={recordingState.isRecording}
@@ -1073,10 +1087,6 @@ export function AudioEditor() {
           onPunchOutTimeChange={setPunchOutTime}
           overdubEnabled={overdubEnabled}
           onOverdubEnabledChange={setOverdubEnabled}
-          masterPeakLevel={masterPeakLevel}
-          masterRmsLevel={masterRmsLevel}
-          masterIsClipping={masterIsClipping}
-          onResetClip={resetClipIndicator}
         />
       </div>
 

components/editor/PlaybackControls.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Play, Pause, Square, SkipBack, Circle, AlignVerticalJustifyStart, AlignVerticalJustifyEnd, Layers } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
-import { MasterControls } from '@/components/controls/MasterControls';
 import { cn } from '@/lib/utils/cn';
 
 export interface PlaybackControlsProps {
@@ -12,14 +11,11 @@ export interface PlaybackControlsProps {
   currentTime: number;
   duration: number;
   volume: number;
-  pan?: number;
   onPlay: () => void;
   onPause: () => void;
   onStop: () => void;
   onSeek: (time: number, autoPlay?: boolean) => void;
   onVolumeChange: (volume: number) => void;
-  onPanChange?: (pan: number) => void;
-  onMuteToggle?: () => void;
   disabled?: boolean;
   className?: string;
   currentTimeFormatted?: string;
@@ -35,10 +31,6 @@ export interface PlaybackControlsProps {
   onPunchOutTimeChange?: (time: number) => void;
   overdubEnabled?: boolean;
   onOverdubEnabledChange?: (enabled: boolean) => void;
-  masterPeakLevel?: number;
-  masterRmsLevel?: number;
-  masterIsClipping?: boolean;
-  onResetClip?: () => void;
 }
 
 export function PlaybackControls({
@@ -47,14 +39,11 @@ export function PlaybackControls({
   currentTime,
   duration,
   volume,
-  pan = 0,
   onPlay,
   onPause,
   onStop,
   onSeek,
   onVolumeChange,
-  onPanChange,
-  onMuteToggle,
   disabled = false,
   className,
   currentTimeFormatted,
@@ -70,10 +59,6 @@ export function PlaybackControls({
   onPunchOutTimeChange,
   overdubEnabled = false,
   onOverdubEnabledChange,
-  masterPeakLevel = 0,
-  masterRmsLevel = 0,
-  masterIsClipping = false,
-  onResetClip,
 }: PlaybackControlsProps) {
   const handlePlayPause = () => {
     if (isPlaying) {
@@ -265,22 +250,6 @@ export function PlaybackControls({
             </>
           )}
         </div>
-
-        {/* Master Controls */}
-        {onPanChange && onMuteToggle && (
-          <MasterControls
-            volume={volume}
-            pan={pan}
-            peakLevel={masterPeakLevel}
-            rmsLevel={masterRmsLevel}
-            isClipping={masterIsClipping}
-            isMuted={volume === 0}
-            onVolumeChange={onVolumeChange}
-            onPanChange={onPanChange}
-            onMuteToggle={onMuteToggle}
-            onResetClip={onResetClip}
-          />
-        )}
       </div>
     </div>
   );

components/tracks/Track.tsx

@@ -646,97 +646,40 @@ export function Track({
           {/* Track Controls - Only show when not collapsed */}
           {!track.collapsed && (
             <div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
-              {/* Integrated Track Controls (Pan + Fader + Mute) */}
+              {/* Integrated Track Controls (Pan + Fader + Buttons) */}
               <TrackControls
                 volume={track.volume}
                 pan={track.pan}
                 peakLevel={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
                 rmsLevel={track.recordEnabled || isRecording ? recordingLevel * 0.7 : playbackLevel * 0.7}
                 isMuted={track.mute}
+                isSolo={track.solo}
+                isRecordEnabled={track.recordEnabled}
+                showAutomation={track.automation?.showAutomation}
+                isRecording={isRecording}
                 onVolumeChange={onVolumeChange}
                 onPanChange={onPanChange}
                 onMuteToggle={onToggleMute}
+                onSoloToggle={onToggleSolo}
+                onRecordToggle={onToggleRecordEnable}
+                onAutomationToggle={() => {
+                  onUpdateTrack(track.id, {
+                    automation: {
+                      ...track.automation,
+                      showAutomation: !track.automation?.showAutomation,
+                    },
+                  });
+                }}
+                onEffectsClick={() => {
+                  onUpdateTrack(track.id, {
+                    showEffects: !track.showEffects,
+                  });
+                }}
                 onVolumeTouchStart={handleVolumeTouchStart}
                 onVolumeTouchEnd={handleVolumeTouchEnd}
                 onPanTouchStart={handlePanTouchStart}
                 onPanTouchEnd={handlePanTouchEnd}
               />
-
-              {/* Inline Button Row - Below controls */}
-              <div className="flex-shrink-0 w-full">
-                {/* R/S/A inline row with icons */}
-                <div className="flex items-center gap-1 justify-center">
-                  {/* Record Arm */}
-                  {onToggleRecordEnable && (
-                    <button
-                      onClick={onToggleRecordEnable}
-                      className={cn(
-                        'h-6 w-6 rounded flex items-center justify-center transition-all',
-                        track.recordEnabled
-                          ? '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-3 w-3 fill-current" />
-                    </button>
-                  )}
-
-                  {/* Solo Button */}
-                  <button
-                    onClick={onToggleSolo}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all',
-                      track.solo
-                        ? '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-3 w-3" />
-                  </button>
-
-                  {/* Automation Toggle */}
-                  <button
-                    onClick={() => {
-                      onUpdateTrack(track.id, {
-                        automation: {
-                          ...track.automation,
-                          showAutomation: !track.automation?.showAutomation,
-                        },
-                      });
-                    }}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all text-[10px] font-bold',
-                      track.automation?.showAutomation
-                        ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-                    )}
-                    title={track.automation?.showAutomation ? 'Hide automation' : 'Show automation'}
-                  >
-                    A
-                  </button>
-
-                  {/* Effects Toggle */}
-                  <button
-                    onClick={() => {
-                      onUpdateTrack(track.id, {
-                        showEffects: !track.showEffects,
-                      });
-                    }}
-                    className={cn(
-                      'h-6 w-6 rounded flex items-center justify-center transition-all',
-                      track.showEffects
-                        ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-                    )}
-                    title={track.showEffects ? 'Hide effects' : 'Show effects'}
-                  >
-                    <Sparkles className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
             </div>
           )}
         </div>

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 */}
+      {/* Control Buttons Row 1: R/S/M */}
-      <button
+      <div className="flex items-center gap-0.5 w-full justify-center">
-        onClick={onMuteToggle}
+        {/* Record Arm */}
-        className={cn(
+        {onRecordToggle && (
-          'w-8 h-6 rounded text-[10px] font-bold transition-colors border',
+          <button
-          isMuted
+            onClick={onRecordToggle}
-            ? 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50 text-red-500'
+            className={cn(
-            : 'bg-muted/20 hover:bg-muted/30 border-border/50 text-muted-foreground'
+              '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'}
+
-      >
+        {/* Solo Button */}
-        M
+        {onSoloToggle && (
-      </button>
+          <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>
   );
 }

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 */}
+          {/* Value arc - only show when not centered */}
-          <circle
+          {!isNearCenter && (
-            cx={size / 2}
+            <circle
-            cy={size / 2}
+              cx={size / 2}
-            r={size / 2 - 4}
+              cy={size / 2}
-            fill="none"
+              r={size / 2 - 4}
-            stroke="currentColor"
+              fill="none"
-            strokeWidth="3"
+              stroke="currentColor"
-            strokeLinecap="round"
+              strokeWidth="3"
-            className="text-primary"
+              strokeLinecap="round"
-            strokeDasharray={`${(percentage * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
+              className="text-primary"
-            transform={`rotate(-225 ${size / 2} ${size / 2})`}
+              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 */}