feat: implement per-track and master effect chains (Option 3)

Architecture:
- Each track now has its own effect chain stored in track.effectChain
- Separate master effect chain for the final mix output
- SidePanel has 3 tabs: Tracks, Track FX, Master FX

Changes:
- types/track.ts: Add effectChain field to Track interface
- lib/audio/track-utils.ts: Initialize effect chain when creating tracks
- lib/hooks/useMultiTrack.ts: Exclude effectChain from localStorage, recreate on load
- components/editor/AudioEditor.tsx:
  - Add master effect chain state using useEffectChain hook
  - Add handlers for per-track effect chain manipulation
  - Pass both track and master effect chains to SidePanel
- components/layout/SidePanel.tsx:
  - Update to 3-tab interface (Tracks | Track FX | Master FX)
  - Track FX tab shows effects for currently selected track
  - Master FX tab shows master bus effects with preset management
  - Different icons for track vs master effects tabs

Note: Effect processing in Web Audio API not yet implemented.
This commit sets up the data structures and UI.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 07:30:46 +01:00
parent 2f8718626c
commit f640f2f9d4
5 changed files with 179 additions and 75 deletions

View File

@@ -4,6 +4,7 @@
import type { Track, TrackColor } from '@/types/track';
import { DEFAULT_TRACK_HEIGHT, TRACK_COLORS } from '@/types/track';
import { createEffectChain } from '@/lib/audio/effects/chain';
/**
* Generate a unique track ID
@@ -33,6 +34,7 @@ export function createTrack(name?: string, color?: TrackColor): Track {
mute: false,
solo: false,
recordEnabled: false,
effectChain: createEffectChain(`${trackName} Effects`),
collapsed: false,
selected: false,
};