feat: Plus button now opens EffectBrowser dialog

- 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

@@ -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={() => {
+                          onClick={() => setEffectBrowserTrackId(track.id)}
-                            const newEffect = createEffect('lowpass', EFFECT_NAMES['lowpass']);
+                          title="Add effect"
-                            const updatedChain = {
-                              ...track.effectChain,
-                              effects: [...track.effectChain.effects, newEffect],
-                            };
-                            onUpdateTrack(track.id, { effectChain: updatedChain });
-                          }}
-                          title="Add effect (Low-pass filter)"
                           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>
   );
 }