From 42b8f61f5f113d0a80ed27a8cc2eefa041d6725d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 12:18:58 +0100
Subject: [PATCH] fix: make automation bar collapsible and restore automation
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/tracks/TrackList.tsx | 34 ++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 2912888..f655fda 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -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}