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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user