From 35a6ee35d01a18c577254d1438196354abdb4641 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 12:16:17 +0100
Subject: [PATCH] fix: remove A/E buttons, make automation always expanded, add
 bottom border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed all three issues:
1. Removed automation (A) and effects (E) toggle buttons from TrackControls
2. Made automation bar always expanded and non-collapsible
3. Added bottom border to effects bar (border-b)

Changes:
- TrackControls.tsx: Removed entire Row 2 (A/E buttons section)
- TrackList.tsx: Removed click handler and chevron from automation header
- TrackList.tsx: Automation lane always visible (no conditional rendering)
- TrackList.tsx: Added border-b to effects bar container
- TrackList.tsx: Added border-b to automation bar for visual consistency

Bars are now permanent, always-visible UI elements at the bottom of tracks.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackControls.tsx | 35 -----------------------------
 components/tracks/TrackList.tsx     | 34 ++++++----------------------
 2 files changed, 7 insertions(+), 62 deletions(-)

diff --git a/components/tracks/TrackControls.tsx b/components/tracks/TrackControls.tsx
index 906fb71..ec6fcfa 100644
--- a/components/tracks/TrackControls.tsx
+++ b/components/tracks/TrackControls.tsx
@@ -143,41 +143,6 @@ export function TrackControls({
             M
           </button>
         </div>
-
-        {/* Control Buttons Row 2: A/E */}
-        <div className="flex items-center gap-0.5 w-full justify-center">
-          {/* Automation Toggle */}
-          {onAutomationToggle && (
-            <button
-              onClick={onAutomationToggle}
-              className={cn(
-                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-                showAutomation
-                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-              )}
-              title="Toggle automation"
-            >
-              A
-            </button>
-          )}
-
-          {/* Effects Button */}
-          {onEffectsClick && (
-            <button
-              onClick={onEffectsClick}
-              className={cn(
-                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-                showEffects
-                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-              )}
-              title={showEffects ? 'Hide effects' : 'Show effects'}
-            >
-              E
-            </button>
-          )}
-        </div>
       </div>
     </div>
   );
diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 879fbe2..2912888 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -295,7 +295,7 @@ export function TrackList({
 
                   {/* Effects Bar - Always visible at bottom */}
                   {!track.collapsed && (
-                    <div className="absolute bottom-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-border">
+                    <div className="absolute bottom-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-b border-border">
                       {/* Effects Header - Collapsible */}
                       <div
                         className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
@@ -369,45 +369,25 @@ export function TrackList({
                     </div>
                   )}
 
-                  {/* Automation Bar - Always visible above effects bar at bottom */}
+                  {/* Automation Bar - Always visible and expanded 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-border"
+                      className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-b border-border"
                       style={{
                         bottom: track.effectsExpanded ? '232px' : '32px' // 32px effects header, or 232px if expanded
                       }}
                     >
-                      {/* Automation Header - Collapsible */}
-                      <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" />
-                        )}
+                      {/* Automation Header - Not clickable */}
+                      <div className="flex items-center gap-2 px-3 py-1.5">
                         <span className="text-xs font-medium">Automation</span>
                         <span className="text-xs text-muted-foreground">
                           {track.automation.selectedParameterId || 'Volume'}
                         </span>
                       </div>
 
-                      {/* Automation Lane Content - Collapsible */}
+                      {/* Automation Lane Content - Always visible */}
                       {track.automation.lanes
-                        .filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
+                        .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
                         .map((lane) => (
                           <div key={lane.id} className="h-32 border-t border-border">
                             <AutomationLane