From d2ed7d6e782cc551ab8493ac2305babe82ed3b43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 11:45:38 +0100
Subject: [PATCH] fix: effects expansion, automation lanes, and layout
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed multiple issues with the track layout system:

1. Effect cards now expandable/collapsible
   - Added onToggleExpanded callback to EffectDevice
   - Effect expansion state is properly toggled and persisted

2. Removed left column spacers causing misalignment
   - Removed automation lane spacer (h-32)
   - Removed effects section spacer (h-64/h-8)
   - Automation lanes and effects now only in waveform column
   - This eliminates the height mismatch between columns

3. Layout now cleaner
   - Left column stays fixed with only track controls
   - Right column contains waveforms, automation, and effects
   - No artificial spacers needed for alignment

The automation lanes and effects sections now appear properly in the
waveform area without creating alignment issues in the controls column.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackExtensions.tsx |  8 ++++++++
 components/tracks/TrackList.tsx       | 10 ----------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/tracks/TrackExtensions.tsx b/components/tracks/TrackExtensions.tsx
index 0c43bdf..0491fa3 100644
--- a/components/tracks/TrackExtensions.tsx
+++ b/components/tracks/TrackExtensions.tsx
@@ -105,6 +105,14 @@ export function TrackExtensions({
                     onToggleEnabled={() => onToggleEffect?.(effect.id)}
                     onRemove={() => onRemoveEffect?.(effect.id)}
                     onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
+                    onToggleExpanded={() => {
+                      const updatedEffects = track.effectChain.effects.map((e) =>
+                        e.id === effect.id ? { ...e, expanded: !e.expanded } : e
+                      );
+                      onUpdateTrack(track.id, {
+                        effectChain: { ...track.effectChain, effects: updatedEffects },
+                      });
+                    }}
                   />
                 ))
               )}
diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 77ef944..cff9452 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -192,16 +192,6 @@ export function TrackList({
                 isPlaying={isPlaying}
                 renderControlsOnly={true}
               />
-
-              {/* Spacer for Automation Lane */}
-              {!track.collapsed && track.automation?.showAutomation && (
-                <div className="h-32 bg-muted/30 border-b border-border" />
-              )}
-
-              {/* Spacer for Effects Section */}
-              {!track.collapsed && (
-                <div className={track.showEffects ? "h-64 bg-muted/50 border-b border-border/50" : "h-8 bg-muted/50 border-b border-border/50"} />
-              )}
             </React.Fragment>
           ))}
         </div>