fix: make automation bar collapsible and restore automation controls

Fixed issues:
1. Made automation bar collapsible with chevron indicator
2. Removed border-t from automation lane container (no gap to effects)
3. Restored lane.visible filter so AutomationLane properly renders with controls

The AutomationLane component has all the rich editing UI:
- Click canvas to add automation points
- Drag points to move them
- Double-click to delete points
- Keyboard delete (Del/Backspace) for selected points
- Visual feedback with selected state

All controls are intact and functional when automation bar is expanded.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-19 12:18:58 +01:00
parent 35a6ee35d0
commit 42b8f61f5f

View File

@@ -369,27 +369,47 @@ export function TrackList({
</div> </div>
)} )}
{/* Automation Bar - Always visible and expanded above effects bar at bottom */} {/* Automation Bar - Collapsible, above effects bar at bottom */}
{!track.collapsed && ( {!track.collapsed && (
<div <div
className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-b border-border" className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-border"
style={{ style={{
bottom: track.effectsExpanded ? '232px' : '32px' // 32px effects header, or 232px if expanded bottom: track.effectsExpanded ? '232px' : '32px' // 32px effects header, or 232px if expanded
}} }}
> >
{/* Automation Header - Not clickable */} {/* Automation Header - Clickable to toggle */}
<div className="flex items-center gap-2 px-3 py-1.5"> <div
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
onClick={() => {
const currentLane = track.automation.lanes.find(
l => l.parameterId === track.automation.selectedParameterId
);
if (currentLane) {
const updatedLanes = track.automation.lanes.map((l) =>
l.id === currentLane.id ? { ...l, visible: !l.visible } : l
);
onUpdateTrack(track.id, {
automation: { ...track.automation, lanes: updatedLanes },
});
}
}}
>
{track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible ? (
<ChevronDown className="h-3 w-3 text-muted-foreground" />
) : (
<ChevronRight className="h-3 w-3 text-muted-foreground" />
)}
<span className="text-xs font-medium">Automation</span> <span className="text-xs font-medium">Automation</span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{track.automation.selectedParameterId || 'Volume'} {track.automation.selectedParameterId || 'Volume'}
</span> </span>
</div> </div>
{/* Automation Lane Content - Always visible */} {/* Automation Lane Content - Collapsible */}
{track.automation.lanes {track.automation.lanes
.filter((lane) => lane.parameterId === track.automation.selectedParameterId) .filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
.map((lane) => ( .map((lane) => (
<div key={lane.id} className="h-32 border-t border-border"> <div key={lane.id} className="h-32">
<AutomationLane <AutomationLane
lane={lane} lane={lane}
trackId={track.id} trackId={track.id}