valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make automation bar collapsible and restore automation controls

Browse Source 
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:
Sebastian Krüger
2025-11-19 12:18:58 +01:00
parent 35a6ee35d0
commit 42b8f61f5f
1 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/tracks/TrackList.tsx
View File

@@ -369,27 +369,47 @@ export function TrackList({
</div>
)}
{/* Automation Bar - Always visible and expanded above effects bar at bottom */}
{/* Automation Bar - Collapsible, above effects bar at bottom */}
{!track.collapsed && (
<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={{
bottom: track.effectsExpanded ? '232px' : '32px' // 32px effects header, or 232px if expanded
}}
>
{/* Automation Header - Not clickable */}
<div className="flex items-center gap-2 px-3 py-1.5">
{/* Automation Header - Clickable to toggle */}
<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 text-muted-foreground">
{track.automation.selectedParameterId || 'Volume'}
</span>
</div>
{/* Automation Lane Content - Always visible */}
{/* Automation Lane Content - Collapsible */}
{track.automation.lanes
.filter((lane) => lane.parameterId === track.automation.selectedParameterId)
.filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
.map((lane) => (
<div key={lane.id} className="h-32 border-t border-border">
<div key={lane.id} className="h-32">
<AutomationLane
lane={lane}
trackId={track.id}