Multiple local project management

[britle20]

Feature Spec

Related feature document: docs/features/22-multi-project-management.md

Goal

Allow users to manage more than one browser-local project instead of being limited to a single hard-coded active project.

Context

The current IndexedDB persistence stores one active project using a fixed ACTIVE_PROJECT_ID. The transport bar displays Project 1 directly, and there is no UI for creating, switching, renaming, or deleting projects. Users need a lightweight local project menu so they can keep separate songs/sketches in the browser.

Scope

Included:

• Store multiple serializable project documents in IndexedDB.
• Store and restore the current active project ID separately from project documents.
• Add a transport bar project menu showing the active project name.
• Support creating a new blank project.
• Support switching between existing projects.
• Support renaming the active project.
• Support deleting a project with confirmation.
• Keep imported sample blobs scoped so projects cannot accidentally collide on sample IDs.
• Migrate the existing single active project into the multi-project store shape where practical.

Excluded:

• Cloud sync or user accounts.
• Cross-device collaboration.
• File-system project export/import.
• Project templates beyond the current default blank project.
• Project duplication unless it is trivial after the base workflow exists.
• A full dashboard page.

Constraints

• Project data must remain serializable.
• Runtime objects such as AudioBuffer, AudioContext, File, object URLs, and audio nodes must not be stored in project JSON.
• Switching projects must stop live playback/preview before replacing app state.
• Autosave should not write edits to the wrong project after switching.
• Persistence code should stay separate from React rendering and audio scheduling.
• Use CSS Modules and semantic design tokens for any UI.

Done when

• Users can create, select, rename, and delete local projects from the transport bar.
• Refreshing the browser restores the last active project.
• Each project restores its own clips, arrangement, mixer state, sample metadata, and imported sample blobs.
• Deleting a project removes or disconnects its imported sample blobs according to the documented storage strategy.
• The old single active project is preserved as an initial project after migration when possible.
• Tests cover project store transformations/migration and active project selection behavior where practical.

Verification

• npm run typecheck --if-present
• npm run lint --if-present
• npm run test --if-present
• npm run build --if-present

Notes

Planning created from the agentic workflow discuss-feature process. Initial UI should live in the transport bar rather than a separate dashboard.

[britle20]

Implemented by #61 and merged into develop. Closing manually because GitHub only auto-closes issues from default-branch merges.