From 0bd892e3d14fa33c78eb6db10d3d30e1c2b07234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 18:07:06 +0100
Subject: [PATCH] fix: streamline effects header controls and add Plus button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed absolute positioning from eye icon button
- Added Plus button to add effects (currently adds low-pass filter)
- All controls now properly inline in normal flex flow
- Eye button correctly positioned at end without overlap

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackList.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index bc263dc..e2f68bb 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -638,11 +638,11 @@ export function TrackList({
                   {!track.collapsed && (
                     <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                       {/* Effects Header - Collapsible */}
-                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30 overflow-x-auto">
+                      <div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
                         <span className="text-xs font-medium flex-shrink-0">Effects</span>
 
                         {/* Effect name labels */}
-                        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
                           {track.effectChain.effects.map((effect) => (
                             <span
                               key={effect.id}
@@ -658,7 +658,25 @@ export function TrackList({
                           ))}
                         </div>
 
-                        {/* Show/hide toggle - Positioned absolutely on the right */}
+                        {/* Add effect button */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => {
+                            const newEffect = createEffect('lowpass', EFFECT_NAMES['lowpass']);
+                            const updatedChain = {
+                              ...track.effectChain,
+                              effects: [...track.effectChain.effects, newEffect],
+                            };
+                            onUpdateTrack(track.id, { effectChain: updatedChain });
+                          }}
+                          title="Add effect (Low-pass filter)"
+                          className="h-5 w-5 flex-shrink-0"
+                        >
+                          <Plus className="h-3 w-3" />
+                        </Button>
+
+                        {/* Show/hide toggle */}
                         <Button
                           variant="ghost"
                           size="icon-sm"
@@ -666,7 +684,7 @@ export function TrackList({
                             onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
                           }}
                           title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
-                          className="absolute right-2 h-5 w-5 flex-shrink-0"
+                          className="h-5 w-5 flex-shrink-0"
                         >
                           {track.effectsExpanded ? (
                             <Eye className="h-3 w-3" />