feat: implement Ableton Live-style DAW layout
Major UX refactor to match professional DAW workflows (Ableton/Bitwig): **Layout Changes:** - Removed sidebar completely - Track actions moved to header toolbar (Add/Import/Clear All) - Each track now shows its own devices/effects in the track strip - Master section moved to bottom footer area - Full-width waveform display **Track Strip (left panel):** - Track name (editable inline) - Color indicator - Collapse/Solo/Mute/Delete buttons - Volume slider with percentage - Pan slider with L/C/R indicator - Collapsible "Devices" section showing track effects - Shows effect count in header - Each effect card shows: name, enable/disable toggle, remove button - Effects are colored based on enabled/disabled state - Click to expand/collapse devices section **Master Section (bottom):** - Transport controls (Play/Pause/Stop) with timeline - Master volume control - Master effects placeholder (to be implemented) **Benefits:** - True DAW experience like Ableton Live - Each track is self-contained with its own effect chain - No context switching between tabs - Effects are always visible for each track - More screen space for waveforms - Professional mixer-style layout Note: Effects are visible but not yet applied to audio - that's next! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -107,6 +107,22 @@ export function TrackList({
|
||||
onLoadAudio={(buffer) =>
|
||||
onUpdateTrack(track.id, { audioBuffer: buffer })
|
||||
}
|
||||
onToggleEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onRemoveEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user