fix: effects expansion, automation lanes, and layout alignment

Fixed multiple issues with the track layout system:

1. Effect cards now expandable/collapsible
   - Added onToggleExpanded callback to EffectDevice
   - Effect expansion state is properly toggled and persisted

2. Removed left column spacers causing misalignment
   - Removed automation lane spacer (h-32)
   - Removed effects section spacer (h-64/h-8)
   - Automation lanes and effects now only in waveform column
   - This eliminates the height mismatch between columns

3. Layout now cleaner
   - Left column stays fixed with only track controls
   - Right column contains waveforms, automation, and effects
   - No artificial spacers needed for alignment

The automation lanes and effects sections now appear properly in the
waveform area without creating alignment issues in the controls column.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-19 11:45:38 +01:00
parent cd310ce7e4
commit d2ed7d6e78
2 changed files with 8 additions and 10 deletions

View File

@@ -105,6 +105,14 @@ export function TrackExtensions({
onToggleEnabled={() => onToggleEffect?.(effect.id)}
onRemove={() => onRemoveEffect?.(effect.id)}
onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
onToggleExpanded={() => {
const updatedEffects = track.effectChain.effects.map((e) =>
e.id === effect.id ? { ...e, expanded: !e.expanded } : e
);
onUpdateTrack(track.id, {
effectChain: { ...track.effectChain, effects: updatedEffects },
});
}}
/>
))
)}

View File

@@ -192,16 +192,6 @@ export function TrackList({
isPlaying={isPlaying}
renderControlsOnly={true}
/>
{/* Spacer for Automation Lane */}
{!track.collapsed && track.automation?.showAutomation && (
<div className="h-32 bg-muted/30 border-b border-border" />
)}
{/* Spacer for Effects Section */}
{!track.collapsed && (
<div className={track.showEffects ? "h-64 bg-muted/50 border-b border-border/50" : "h-8 bg-muted/50 border-b border-border/50"} />
)}
</React.Fragment>
))}
</div>