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>
This commit is contained in:
2025-11-19 00:22:52 +01:00
parent 441920ee70
commit 8ec3505581
5 changed files with 178 additions and 150 deletions

View File

@@ -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>