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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user