From 64864cfd34309b8a9b5cc1692d006a5b3f921ac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 13:16:02 +0100
Subject: [PATCH] feat: use eye icon for effects bar folding like automation
 bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace ChevronDown/ChevronRight with Eye/EyeOff icons
- Position eye icon absolutely on the right side
- Match AutomationHeader styling with bg-muted/50 and border
- Eye icon shows when expanded, EyeOff when collapsed
- Consistent UX between automation and effects bars

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

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

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index da1bfd6..3038bea 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Plus, Upload, ChevronDown, ChevronRight, X } from 'lucide-react';
+import { Plus, Upload, ChevronDown, ChevronRight, X, Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
 import { TrackExtensions } from './TrackExtensions';
@@ -438,21 +438,28 @@ 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="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
-                        onClick={() => {
-                          onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
-                        }}
-                      >
-                        {track.effectsExpanded ? (
-                          <ChevronDown className="h-3 w-3 text-muted-foreground" />
-                        ) : (
-                          <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                        )}
+                      <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>
                         <span className="text-xs text-muted-foreground">
                           ({track.effectChain.effects.length})
                         </span>
+
+                        {/* Show/hide toggle - Positioned absolutely on the right */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => {
+                            onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
+                          }}
+                          title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
+                          className="absolute right-2 h-5 w-5 flex-shrink-0"
+                        >
+                          {track.effectsExpanded ? (
+                            <Eye className="h-3 w-3" />
+                          ) : (
+                            <EyeOff className="h-3 w-3 text-muted-foreground" />
+                          )}
+                        </Button>
                       </div>
 
                       {/* Effects Content - Collapsible, no inner container */}