feat: refactor to multi-track only editor with sidebar controls

Major refactor to simplify the editor and focus exclusively on multi-track editing:

**AudioEditor Changes:**
- Removed single-file waveform view and useAudioPlayer
- Removed all single-file editing operations (cut, copy, paste, trim)
- Simplified to multi-track only with track selection support
- Added selectedTrackId state for track-specific effect chain
- Reduced from ~1500 lines to ~290 lines

**SidePanel Changes:**
- Complete rewrite with 2 tabs: Tracks and Effect Chain
- Tracks tab shows all tracks with inline controls (volume, pan, solo, mute)
- Click tracks to select/deselect
- Effect Chain tab shows effects for selected track
- Removed old file/history/info/effects tabs
- Sidebar now wider (320px) to accommodate inline track controls

**TrackList/Track Changes:**
- Added track selection support (isSelected/onSelect props)
- Visual feedback with ring border when track is selected
- Click anywhere on track to select it

**Workflow:**
1. Import or add audio tracks
2. Select a track in the sidebar or main view
3. Apply effects to selected track via Effect Chain tab
4. Adjust track controls (volume, pan, solo, mute) in Tracks tab

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-17 22:17:09 +01:00
parent 4735b5fb00
commit de8a3ff187
4 changed files with 356 additions and 1946 deletions

View File

@@ -10,6 +10,8 @@ export interface TrackProps {
zoom: number;
currentTime: number;
duration: number;
isSelected?: boolean;
onSelect?: () => void;
onToggleMute: () => void;
onToggleSolo: () => void;
onToggleCollapse: () => void;
@@ -25,6 +27,8 @@ export function Track({
zoom,
currentTime,
duration,
isSelected,
onSelect,
onToggleMute,
onToggleSolo,
onToggleCollapse,
@@ -121,7 +125,13 @@ export function Track({
if (track.collapsed) {
return (
<div className="border-b border-border">
<div
className={cn(
'border-b border-border cursor-pointer',
isSelected && 'ring-2 ring-primary ring-inset'
)}
onClick={onSelect}
>
<TrackHeader
track={track}
onToggleMute={onToggleMute}
@@ -140,9 +150,10 @@ export function Track({
<div
ref={containerRef}
className={cn(
'border-b border-border',
track.selected && 'ring-2 ring-primary ring-inset'
'border-b border-border cursor-pointer',
isSelected && 'ring-2 ring-primary ring-inset'
)}
onClick={onSelect}
>
<TrackHeader
track={track}