From 30ebd52b4cf9ecc3d3eee5e3ec2b746f841ffcec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 19:00:59 +0100
Subject: [PATCH] refactor: improve effects panel layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Effects panel improvements:
- Removed track name label header
- Moved "Add Effect" button to top left corner
- Button now uses self-start alignment for left positioning
- Cleaner, more minimal design

Layout changes:
- Button appears consistently in top left whether effects exist or not
- More space for effect devices
- Better visual hierarchy

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/Track.tsx | 77 ++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 8336e16..71ede00 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -915,44 +915,51 @@ export function Track({
       {/* Per-Track Effects Panel */}
       {!track.collapsed && track.showEffects && (
         <div className="bg-background/30 border-t border-border/50 p-3 h-[280px] flex flex-col">
-          <div className="flex items-center justify-between mb-2 flex-shrink-0">
-            <span className="text-xs font-medium text-foreground">
-              {track.name} - Effects
-            </span>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setEffectBrowserOpen(true)}
-              className="h-7 px-2 text-xs"
-            >
-              <Sparkles className="h-3 w-3 mr-1" />
-              Add Effect
-            </Button>
-          </div>
-
           {track.effectChain.effects.length === 0 ? (
-            <div className="text-center py-8 text-sm text-muted-foreground flex-1 flex items-center justify-center">
-              No effects on this track
+            <div className="flex flex-col flex-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setEffectBrowserOpen(true)}
+                className="h-7 px-2 text-xs self-start mb-2"
+              >
+                <Sparkles className="h-3 w-3 mr-1" />
+                Add Effect
+              </Button>
+              <div className="text-center text-sm text-muted-foreground flex-1 flex items-center justify-center">
+                No effects on this track
+              </div>
             </div>
           ) : (
-            <div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
-              {track.effectChain.effects.map((effect) => (
-                <EffectDevice
-                  key={effect.id}
-                  effect={effect}
-                  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 },
-                    });
-                  }}
-                />
-              ))}
+            <div className="flex flex-col flex-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setEffectBrowserOpen(true)}
+                className="h-7 px-2 text-xs self-start mb-2"
+              >
+                <Sparkles className="h-3 w-3 mr-1" />
+                Add Effect
+              </Button>
+              <div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
+                {track.effectChain.effects.map((effect) => (
+                  <EffectDevice
+                    key={effect.id}
+                    effect={effect}
+                    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 },
+                      });
+                    }}
+                  />
+                ))}
+              </div>
             </div>
           )}