Effects contain non-serializable data like functions and audio nodes that
cannot be stored in IndexedDB. Added proper serialization.
Changes:
- Added serializeEffects function to strip non-serializable data
- Uses JSON parse/stringify to deep clone parameters
- Preserves effect type, name, enabled state, and parameters
- Fixes DataCloneError when saving projects with effects
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Integrated complete project management system with auto-save:
**AudioEditor.tsx - Full Integration:**
- Added "Projects" button in header toolbar (FolderOpen icon)
- Project state management (currentProjectId, currentProjectName, projects list)
- Comprehensive project handlers:
- `handleOpenProjectsDialog` - Opens dialog and loads project list
- `handleSaveProject` - Saves current project to IndexedDB
- `handleNewProject` - Creates new project with confirmation
- `handleLoadProject` - Loads project and restores all tracks/settings
- `handleDeleteProject` - Deletes project with cleanup
- `handleDuplicateProject` - Creates project copy
- Auto-save effect: Saves project every 30 seconds when tracks exist
- ProjectsDialog component integrated with all handlers
- Toast notifications for all operations
**lib/storage/projects.ts:**
- Re-exported ProjectMetadata type for easier importing
- Fixed type exports
**Key Features:**
- **Auto-save**: Automatically saves every 30 seconds
- **Project persistence**: Full track state, audio buffers, effects, automation
- **Smart loading**: Restores zoom, track order, and all track properties
- **Safety confirmations**: Warns before creating new project with unsaved changes
- **User feedback**: Toast messages for all operations (save, load, delete, duplicate)
- **Seamless workflow**: Projects → Import → Export in logical toolbar order
**User Flow:**
1. Click "Projects" to open project manager
2. Create new project or load existing
3. Work on tracks (auto-saves every 30s)
4. Switch between projects anytime
5. Duplicate projects for experimentation
6. Delete old projects to clean up
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added complete project save/load system using IndexedDB:
**New Files:**
- `lib/storage/db.ts` - IndexedDB database schema and operations
- ProjectMetadata interface for project metadata
- SerializedAudioBuffer and SerializedTrack for storage
- Database initialization with projects object store
- Audio buffer serialization/deserialization functions
- CRUD operations for projects
- `lib/storage/projects.ts` - High-level project management service
- Save/load project state with tracks and settings
- List all projects sorted by last updated
- Delete and duplicate project operations
- Track serialization with proper type conversions
- Audio buffer and effect chain handling
- `components/dialogs/ProjectsDialog.tsx` - Project list UI
- Grid view of all projects with metadata
- Project actions: Open, Duplicate, Delete
- Create new project button
- Empty state with call-to-action
- Confirmation dialog for deletions
**Key Features:**
- IndexedDB stores complete project state (tracks, audio buffers, settings)
- Efficient serialization of AudioBuffer channel data
- Preserves all track properties (effects, automation, volume, pan)
- Sample rate and duration tracking
- Created/updated timestamps
- Type-safe with full TypeScript support
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
