From ba2e138ab92f124557340dc960e9d728d838865d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 13:19:05 +0100
Subject: [PATCH] feat: add effect name labels to effects header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display effect names as small chips/badges in effects header
- Shows all effect names at a glance without expanding
- Styled with primary color background and border
- Horizontal scrollable if many effects
- Visible whether effects rack is expanded or collapsed

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackList.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 127487e..dc10001 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -438,8 +438,20 @@ export function TrackList({
                   {!track.collapsed && (
                     <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                       {/* Effects Header - Collapsible */}
-                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-b border-border/30">
-                        <span className="text-xs font-medium">Effects</span>
+                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-b border-border/30 overflow-x-auto">
+                        <span className="text-xs font-medium flex-shrink-0">Effects</span>
+
+                        {/* Effect name labels */}
+                        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                          {track.effectChain.effects.map((effect) => (
+                            <span
+                              key={effect.id}
+                              className="text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20 whitespace-nowrap flex-shrink-0"
+                            >
+                              {effect.name}
+                            </span>
+                          ))}
+                        </div>
 
                         {/* Show/hide toggle - Positioned absolutely on the right */}
                         <Button