From 4547446ced099d8a49ddecb6ad312c7d895ba742 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 07:51:51 +0100
Subject: [PATCH] fix: improve devices section UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove border separator above Devices section for cleaner look
- Add "+" button next to Devices header to add new effects
- Button placement matches Ableton/Bitwig pattern
- TODO: Implement effect browser dialog when + is clicked

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

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

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index f43ad4d..dc5153f 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -385,18 +385,32 @@ export function Track({
             </div>
 
             {/* Devices/Effects Section */}
-            <div className="pt-2 border-t border-border">
-              <button
-                onClick={() => setShowDevices(!showDevices)}
-                className="flex items-center justify-between w-full text-xs font-medium text-foreground hover:text-primary transition-colors mb-2"
-              >
-                <span>Devices ({track.effectChain.effects.length})</span>
-                {showDevices ? (
-                  <ChevronDown className="h-3.5 w-3.5" />
-                ) : (
-                  <ChevronRight className="h-3.5 w-3.5" />
-                )}
-              </button>
+            <div className="pt-2">
+              <div className="flex items-center justify-between mb-2">
+                <button
+                  onClick={() => setShowDevices(!showDevices)}
+                  className="flex items-center gap-1 text-xs font-medium text-foreground hover:text-primary transition-colors"
+                >
+                  <span>Devices ({track.effectChain.effects.length})</span>
+                  {showDevices ? (
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  ) : (
+                    <ChevronRight className="h-3.5 w-3.5" />
+                  )}
+                </button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => {
+                    // TODO: Open effect browser/selector dialog
+                    console.log('Add effect clicked for track:', track.id);
+                  }}
+                  title="Add effect"
+                  className="h-5 w-5"
+                >
+                  <Plus className="h-3 w-3" />
+                </Button>
+              </div>
 
               {showDevices && (
                 <div className="space-y-1">