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>
   );