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>
This commit is contained in:
2025-11-19 18:09:46 +01:00
parent 0bd892e3d1
commit 314fced79f

View File

@@ -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>
);
}