From 439c14db879339c75affa6ec7c03f0fa0961acec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 08:23:20 +0100
Subject: [PATCH] feat: show effect chain in collapsed state and polish visual
 integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visual improvements:
- Effects section background now matches waveform (slate-900/50)
- More subtle border (border-border/50)
- Compact header (py-1.5 instead of py-2)
- Expanded area has darker background (slate-900/30) for depth

Collapsed state improvements:
- When collapsed, shows mini effect chips in the header
- Each chip shows effect name with visual state:
  - Enabled: primary color with border (blue/accent)
  - Disabled: muted with border
- Chips are scrollable horizontally if many effects
- Falls back to "Devices (count)" when no effects

Better integration:
- Background colors tie to waveform area
- Subtle hover effect on header (accent/30)
- Visual hierarchy: waveform -> effects blend together
- No more "abandoned" feeling - feels like part of the track

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

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

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 48c6548..17cc962 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -440,22 +440,41 @@ export function Track({
 
       {/* Bottom: Effects Section (Collapsible, Full Width) */}
       {!track.collapsed && (
-        <div className="bg-card border-b border-border">
-          {/* Effects Header */}
+        <div className="bg-slate-900/50 border-b border-border/50">
+          {/* Effects Header - clickable to toggle */}
           <div
-            className="flex items-center justify-between px-3 py-2 border-b border-border cursor-pointer hover:bg-accent/50 transition-colors"
+            className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
             onClick={() => setShowEffects(!showEffects)}
           >
-            <div className="flex items-center gap-2">
-              {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">
+            {showEffects ? (
+              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+            )}
+
+            {/* Show mini effect chain when collapsed */}
+            {!showEffects && track.effectChain.effects.length > 0 ? (
+              <div className="flex-1 flex items-center gap-1 overflow-x-auto custom-scrollbar">
+                {track.effectChain.effects.map((effect) => (
+                  <div
+                    key={effect.id}
+                    className={cn(
+                      'px-2 py-0.5 rounded text-[10px] font-medium flex-shrink-0',
+                      effect.enabled
+                        ? 'bg-primary/20 text-primary border border-primary/30'
+                        : 'bg-muted/30 text-muted-foreground border border-border'
+                    )}
+                  >
+                    {effect.name}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <span className="text-xs font-medium text-muted-foreground">
                 Devices ({track.effectChain.effects.length})
               </span>
-            </div>
+            )}
+
             <Button
               variant="ghost"
               size="icon-sm"
@@ -464,15 +483,15 @@ export function Track({
                 setEffectBrowserOpen(true);
               }}
               title="Add effect"
-              className="h-6 w-6"
+              className="h-5 w-5 flex-shrink-0"
             >
-              <Plus className="h-3.5 w-3.5" />
+              <Plus className="h-3 w-3" />
             </Button>
           </div>
 
-          {/* Horizontal scrolling device rack */}
+          {/* Horizontal scrolling device rack - expanded state */}
           {showEffects && (
-            <div className="overflow-x-auto custom-scrollbar p-3">
+            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-slate-900/30">
               <div className="flex gap-2">
                 {track.effectChain.effects.length === 0 ? (
                   <div className="text-xs text-muted-foreground text-center py-8 w-full">