From b9ffbf28eff570ea53bfd4579185566a2c706e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 08:14:13 +0100
Subject: [PATCH] feat: move effects section to collapsible area below track
 waveform
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Major UX improvement inspired by Ableton Live's device view:

- Effects section now appears below the waveform in the track lane
- Toggle button in control panel shows/hides the effects area
- Gives much more horizontal space for device rack
- Effects section spans full width of track (control panel + waveform)
- Clean separation between track controls and effects
- Header with device count, add button, and close button

Layout changes:
- Track structure changed from horizontal to vertical flex
- Top row contains control panel + waveform (fixed height)
- Bottom section contains collapsible effects area (when shown)
- Effects hidden by default, toggled via "Devices" button
- When collapsed, track doesn't show effects section

This provides a cleaner workflow where users can focus on mixing
when effects are hidden, then expand to full device view when needed.

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

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

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 65f3469..e49c009 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -57,6 +57,7 @@ export function Track({
   const [isEditingName, setIsEditingName] = React.useState(false);
   const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
   const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
+  const [showEffects, setShowEffects] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const handleNameClick = () => {
@@ -252,16 +253,17 @@ export function Track({
     <div
       ref={containerRef}
       className={cn(
-        'flex',
+        'flex flex-col',
         isSelected && 'ring-2 ring-primary ring-inset'
       )}
-      style={{ height: trackHeight }}
     >
-      {/* Left: Track Control Panel (Fixed Width) */}
-      <div
-        className="w-72 flex-shrink-0 bg-card border-r border-border border-b border-border p-3 flex flex-col gap-2"
-        onClick={(e) => e.stopPropagation()}
-      >
+      {/* Top: Track Row (Control Panel + Waveform) */}
+      <div className="flex" style={{ height: trackHeight }}>
+        {/* Left: Track Control Panel (Fixed Width) */}
+        <div
+          className="w-72 flex-shrink-0 bg-card border-r border-border border-b border-border p-3 flex flex-col gap-2"
+          onClick={(e) => e.stopPropagation()}
+        >
         {/* Track Name & Collapse Toggle */}
         <div className="flex items-center gap-2">
           <Button
@@ -389,43 +391,26 @@ export function Track({
               </span>
             </div>
 
-            {/* Devices/Effects Section */}
-            <div className="pt-2">
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-xs font-medium text-muted-foreground uppercase">
-                  Devices ({track.effectChain.effects.length})
-                </span>
+            {/* Devices Toggle Button */}
+            {!track.collapsed && (
+              <div className="pt-2">
                 <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  onClick={() => setEffectBrowserOpen(true)}
-                  title="Add effect"
-                  className="h-5 w-5"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowEffects(!showEffects)}
+                  className="w-full"
                 >
-                  <Plus className="h-3 w-3" />
+                  <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>
-
-              {/* Horizontal scrolling device rack */}
-              <div className="overflow-x-auto custom-scrollbar -mx-3 px-3">
-                <div className="flex gap-2 pb-2">
-                  {track.effectChain.effects.length === 0 ? (
-                    <div className="text-xs text-muted-foreground text-center py-4 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>
@@ -472,6 +457,59 @@ export function Track({
           )
         )}
       </div>
+      </div>
+
+      {/* Bottom: Effects Section (Collapsible, Full Width) */}
+      {showEffects && !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 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>
+            </div>
+          </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)}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      )}
 
       {/* Effect Browser Dialog */}
       <EffectBrowser