feat: add active state to automation and effects toggle buttons

- Added showEffects prop to TrackControls interface
- Effects button (E) now shows active state with primary color when toggled
- Automation button (A) already had active state functionality
- Both buttons now provide clear visual feedback when active
- Updated Track component to pass showEffects state to TrackControls

🤖 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:25:33 +01:00
parent 8ec3505581
commit 935ab85c08
2 changed files with 10 additions and 2 deletions

View File

@@ -656,6 +656,7 @@ export function Track({
isSolo={track.solo}
isRecordEnabled={track.recordEnabled}
showAutomation={track.automation?.showAutomation}
showEffects={track.showEffects}
isRecording={isRecording}
onVolumeChange={onVolumeChange}
onPanChange={onPanChange}

View File

@@ -15,6 +15,7 @@ export interface TrackControlsProps {
isSolo?: boolean;
isRecordEnabled?: boolean;
showAutomation?: boolean;
showEffects?: boolean;
isRecording?: boolean;
onVolumeChange: (volume: number) => void;
onPanChange: (pan: number) => void;
@@ -39,6 +40,7 @@ export function TrackControls({
isSolo = false,
isRecordEnabled = false,
showAutomation = false,
showEffects = false,
isRecording = false,
onVolumeChange,
onPanChange,
@@ -155,8 +157,13 @@ export function TrackControls({
{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"
className={cn(
'h-5 w-5 rounded flex items-center justify-center transition-all text-[9px] font-bold',
showEffects
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title={showEffects ? 'Hide effects' : 'Show effects'}
>
E
</button>