From 314fced79f79a69f2995fa48fd5816b7e2bd6f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 18:09:46 +0100
Subject: [PATCH] feat: Plus button now opens EffectBrowser dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added EffectBrowser import and state management
- Plus button opens dialog to select from all available effects
- Effect is added to track when selected from browser
- Removed hardcoded low-pass filter addition
- Better UX for adding effects to tracks

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

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

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index e2f68bb..4034fa9 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -15,6 +15,7 @@ import { AutomationHeader } from '@/components/automation/AutomationHeader';
 import type { AutomationPoint as AutomationPointType } from '@/types/automation';
 import { createAutomationPoint } from '@/lib/audio/automation/utils';
 import { EffectDevice } from '@/components/effects/EffectDevice';
+import { EffectBrowser } from '@/components/effects/EffectBrowser';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -58,6 +59,7 @@ export function TrackList({
   isPlaying = false,
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
+  const [effectBrowserTrackId, setEffectBrowserTrackId] = React.useState<string | null>(null);
   const waveformScrollRef = React.useRef<HTMLDivElement>(null);
   const controlsScrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -662,15 +664,8 @@ export function TrackList({
                         <Button
                           variant="ghost"
                           size="icon-sm"
-                          onClick={() => {
-                            const newEffect = createEffect('lowpass', EFFECT_NAMES['lowpass']);
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: [...track.effectChain.effects, newEffect],
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                          title="Add effect (Low-pass filter)"
+                          onClick={() => setEffectBrowserTrackId(track.id)}
+                          title="Add effect"
                           className="h-5 w-5 flex-shrink-0"
                         >
                           <Plus className="h-3 w-3" />
@@ -763,6 +758,25 @@ export function TrackList({
           onImportTrack={handleImportTrack}
         />
       )}
+
+      {/* Effect Browser Dialog */}
+      <EffectBrowser
+        open={effectBrowserTrackId !== null}
+        onClose={() => setEffectBrowserTrackId(null)}
+        onSelectEffect={(effectType) => {
+          if (effectBrowserTrackId) {
+            const track = tracks.find((t) => t.id === effectBrowserTrackId);
+            if (track) {
+              const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
+              const updatedChain = {
+                ...track.effectChain,
+                effects: [...track.effectChain.effects, newEffect],
+              };
+              onUpdateTrack(effectBrowserTrackId, { effectChain: updatedChain });
+            }
+          }
+        }}
+      />
     </div>
   );
 }