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>
2025-11-19 00:22:52 +01:00
parent 441920ee70
commit 8ec3505581
5 changed files with 178 additions and 150 deletions
--- a/components/editor/AudioEditor.tsx
+++ b/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>

--- a/components/editor/PlaybackControls.tsx
+++ b/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>
  );
--- a/components/tracks/Track.tsx
+++ b/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>
--- a/components/tracks/TrackControls.tsx
+++ b/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>
  );
 }
--- a/components/ui/CircularKnob.tsx
+++ b/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 */}