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:
@@ -105,6 +105,14 @@ export function TrackExtensions({
|
|||||||
onToggleEnabled={() => onToggleEffect?.(effect.id)}
|
onToggleEnabled={() => onToggleEffect?.(effect.id)}
|
||||||
onRemove={() => onRemoveEffect?.(effect.id)}
|
onRemove={() => onRemoveEffect?.(effect.id)}
|
||||||
onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
|
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 },
|
||||||
|
});
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -192,16 +192,6 @@ export function TrackList({
|
|||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
renderControlsOnly={true}
|
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>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user