From 25be7027f34808db5e318bc93de8afa1c94f2138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 08:16:41 +0100
Subject: [PATCH] refactor: make effects section always visible with inline
 collapse toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed "Devices" button from control panel
- Effects section now always present below each track
- Collapsible via chevron in the effects header itself
- Click header to expand/collapse the device rack
- "+" button in header to add effects (with stopPropagation)
- Each track has independent collapse state
- Hover effect on header for better UX

This matches the typical DAW layout where each track has its own
device section that can be individually collapsed/expanded.

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

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

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index e49c009..48c6548 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -390,27 +390,6 @@ export function Track({
                   : `R${Math.round(track.pan * 100)}`}
               </span>
             </div>
-
-            {/* Devices Toggle Button */}
-            {!track.collapsed && (
-              <div className="pt-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowEffects(!showEffects)}
-                  className="w-full"
-                >
-                  <span className="flex-1 text-left">
-                    Devices ({track.effectChain.effects.length})
-                  </span>
-                  {showEffects ? (
-                    <ChevronDown className="h-3.5 w-3.5" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              </div>
-            )}
           </>
         )}
       </div>
@@ -460,54 +439,58 @@ export function Track({
       </div>
 
       {/* Bottom: Effects Section (Collapsible, Full Width) */}
-      {showEffects && !track.collapsed && (
+      {!track.collapsed && (
         <div className="bg-card border-b border-border">
           {/* Effects Header */}
-          <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-            <span className="text-xs font-medium text-muted-foreground uppercase">
-              Devices ({track.effectChain.effects.length})
-            </span>
+          <div
+            className="flex items-center justify-between px-3 py-2 border-b border-border cursor-pointer hover:bg-accent/50 transition-colors"
+            onClick={() => setShowEffects(!showEffects)}
+          >
             <div className="flex items-center gap-2">
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => setEffectBrowserOpen(true)}
-                title="Add effect"
-                className="h-6 w-6"
-              >
-                <Plus className="h-3.5 w-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => setShowEffects(false)}
-                title="Close devices"
-                className="h-6 w-6"
-              >
-                <ChevronDown className="h-3.5 w-3.5" />
-              </Button>
+              {showEffects ? (
+                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+              )}
+              <span className="text-xs font-medium text-foreground">
+                Devices ({track.effectChain.effects.length})
+              </span>
             </div>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                setEffectBrowserOpen(true);
+              }}
+              title="Add effect"
+              className="h-6 w-6"
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </Button>
           </div>
 
           {/* Horizontal scrolling device rack */}
-          <div className="overflow-x-auto custom-scrollbar p-3">
-            <div className="flex gap-2">
-              {track.effectChain.effects.length === 0 ? (
-                <div className="text-xs text-muted-foreground text-center py-8 w-full">
-                  No devices. Click + to add an effect.
-                </div>
-              ) : (
-                track.effectChain.effects.map((effect) => (
-                  <EffectDevice
-                    key={effect.id}
-                    effect={effect}
-                    onToggleEnabled={() => onToggleEffect?.(effect.id)}
-                    onRemove={() => onRemoveEffect?.(effect.id)}
-                  />
-                ))
-              )}
+          {showEffects && (
+            <div className="overflow-x-auto custom-scrollbar p-3">
+              <div className="flex gap-2">
+                {track.effectChain.effects.length === 0 ? (
+                  <div className="text-xs text-muted-foreground text-center py-8 w-full">
+                    No devices. Click + to add an effect.
+                  </div>
+                ) : (
+                  track.effectChain.effects.map((effect) => (
+                    <EffectDevice
+                      key={effect.id}
+                      effect={effect}
+                      onToggleEnabled={() => onToggleEffect?.(effect.id)}
+                      onRemove={() => onRemoveEffect?.(effect.id)}
+                    />
+                  ))
+                )}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}