feat: add Phase 6.6 Effect Chain Management system

Effect Chain System:
- Create comprehensive effect chain types and state management
- Implement EffectRack component with drag-and-drop reordering
- Add enable/disable toggle for individual effects
- Build PresetManager for save/load/import/export functionality
- Create useEffectChain hook with localStorage persistence

UI Integration:
- Add Chain tab to SidePanel with effect rack
- Integrate preset manager dialog
- Add chain management controls (clear, presets)
- Update SidePanel with chain props and handlers

Features:
- Drag-and-drop effect reordering with visual feedback
- Effect bypass/enable toggle with power icons
- Save effect chains as presets with descriptions
- Import/export presets as JSON files
- localStorage persistence for chains and presets
- Visual status indicators for enabled/disabled effects
- Preset timestamp and effect count display

Components Created:
- /lib/audio/effects/chain.ts - Effect chain types and utilities
- /components/effects/EffectRack.tsx - Visual effect chain component
- /components/effects/PresetManager.tsx - Preset management dialog
- /lib/hooks/useEffectChain.ts - Effect chain state hook

Updated PLAN.md:
- Mark Phase 6.6 as complete
- Update current status to Phase 6.6 Complete
- Add effect chain features to working features list
- Update Next Steps to show Phase 6 complete

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-17 20:27:08 +01:00
parent bc4e75167f
commit 0986896756
7 changed files with 903 additions and 11 deletions

View File

@@ -10,6 +10,7 @@ import { CommandPalette } from '@/components/ui/CommandPalette';
import type { CommandAction } from '@/components/ui/CommandPalette';
import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
import { useHistory } from '@/lib/hooks/useHistory';
import { useEffectChain } from '@/lib/hooks/useEffectChain';
import { useToast } from '@/components/ui/Toast';
import { Slider } from '@/components/ui/Slider';
import { cn } from '@/lib/utils/cn';
@@ -127,6 +128,17 @@ export function AudioEditor() {
} = useAudioPlayer();
const { execute, undo, redo, clear: clearHistory, state: historyState } = useHistory(50);
const {
chain: effectChain,
presets: effectPresets,
toggleEffectEnabled,
removeEffect,
reorder: reorderEffects,
clearChain,
savePreset,
loadPresetToChain,
deletePreset,
} = useEffectChain();
const { addToast } = useToast();
const handleFileSelect = async (file: File) => {
@@ -1281,6 +1293,15 @@ export function AudioEditor() {
onClear={handleClear}
selection={selection}
historyState={historyState}
effectChain={effectChain}
effectPresets={effectPresets}
onToggleEffect={toggleEffectEnabled}
onRemoveEffect={removeEffect}
onReorderEffects={reorderEffects}
onSavePreset={savePreset}
onLoadPreset={loadPresetToChain}
onDeletePreset={deletePreset}
onClearChain={clearChain}
onNormalize={handleNormalize}
onFadeIn={handleFadeIn}
onFadeOut={handleFadeOut}