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:
2025-11-18 07:46:27 +01:00
parent a8f2391400
commit f3f5b65e1e
3 changed files with 134 additions and 48 deletions

View File

@@ -1,11 +1,11 @@
'use client';
import * as React from 'react';
import { Music } from 'lucide-react';
import { Music, Plus, Upload, Trash2 } from 'lucide-react';
import { PlaybackControls } from './PlaybackControls';
import { SidePanel } from '@/components/layout/SidePanel';
import { ThemeToggle } from '@/components/layout/ThemeToggle';
import { CommandPalette } from '@/components/ui/CommandPalette';
import { Button } from '@/components/ui/Button';
import type { CommandAction } from '@/components/ui/CommandPalette';
import { useMultiTrack } from '@/lib/hooks/useMultiTrack';
import { useMultiTrackPlayer } from '@/lib/hooks/useMultiTrackPlayer';
@@ -272,9 +272,29 @@ export function AudioEditor() {
{/* Compact Header */}
<header className="flex items-center justify-between px-4 py-2 border-b border-border bg-card flex-shrink-0 gap-4">
{/* Left: Logo */}
<div className="flex items-center gap-2 flex-shrink-0">
<Music className="h-5 w-5 text-primary" />
<h1 className="text-lg font-bold text-foreground">Audio UI</h1>
<div className="flex items-center gap-4 flex-shrink-0">
<div className="flex items-center gap-2">
<Music className="h-5 w-5 text-primary" />
<h1 className="text-lg font-bold text-foreground">Audio UI</h1>
</div>
{/* Track Actions */}
<div className="flex items-center gap-2 border-l border-border pl-4">
<Button variant="outline" size="sm" onClick={addTrack}>
<Plus className="h-4 w-4 mr-1.5" />
Add Track
</Button>
<Button variant="outline" size="sm" onClick={handleImportTracks}>
<Upload className="h-4 w-4 mr-1.5" />
Import
</Button>
{tracks.length > 0 && (
<Button variant="outline" size="sm" onClick={handleClearTracks}>
<Trash2 className="h-4 w-4 mr-1.5 text-destructive" />
Clear All
</Button>
)}
</div>
</div>
{/* Right: Command Palette + Theme Toggle */}
@@ -286,32 +306,6 @@ export function AudioEditor() {
{/* Main content area */}
<div className="flex flex-1 overflow-hidden">
{/* Side Panel */}
<SidePanel
tracks={tracks}
selectedTrackId={selectedTrackId}
onSelectTrack={setSelectedTrackId}
onAddTrack={addTrack}
onImportTracks={handleImportTracks}
onUpdateTrack={updateTrack}
onRemoveTrack={handleRemoveTrack}
onClearTracks={handleClearTracks}
trackEffectChain={selectedTrack?.effectChain ?? null}
onToggleTrackEffect={handleToggleTrackEffect}
onRemoveTrackEffect={handleRemoveTrackEffect}
onReorderTrackEffects={handleReorderTrackEffects}
onClearTrackChain={handleClearTrackChain}
masterEffectChain={masterEffectChain}
masterEffectPresets={masterEffectPresets}
onToggleMasterEffect={toggleMasterEffect}
onRemoveMasterEffect={removeMasterEffect}
onReorderMasterEffects={reorderMasterEffects}
onSaveMasterPreset={saveMasterPreset}
onLoadMasterPreset={loadMasterPreset}
onDeleteMasterPreset={deleteMasterPreset}
onClearMasterChain={clearMasterChain}
/>
{/* Main canvas area */}
<main className="flex-1 flex flex-col overflow-hidden bg-background">
{/* Multi-Track View */}
@@ -331,26 +325,42 @@ export function AudioEditor() {
/>
</div>
{/* Multi-Track Playback Controls */}
<div className="border-t border-border bg-card p-3 flex justify-center">
<PlaybackControls
isPlaying={isPlaying}
isPaused={!isPlaying}
currentTime={currentTime}
duration={duration}
volume={masterVolume}
onPlay={play}
onPause={pause}
onStop={stop}
onSeek={seek}
onVolumeChange={setMasterVolume}
currentTimeFormatted={formatDuration(currentTime)}
durationFormatted={formatDuration(duration)}
/>
</div>
</main>
</div>
{/* Transport Controls + Master Channel */}
<div className="border-t border-border bg-card">
{/* Transport Controls */}
<div className="p-3 flex justify-center border-b border-border">
<PlaybackControls
isPlaying={isPlaying}
isPaused={!isPlaying}
currentTime={currentTime}
duration={duration}
volume={masterVolume}
onPlay={play}
onPause={pause}
onStop={stop}
onSeek={seek}
onVolumeChange={setMasterVolume}
currentTimeFormatted={formatDuration(currentTime)}
durationFormatted={formatDuration(duration)}
/>
</div>
{/* Master Track Strip */}
<div className="p-3">
<div className="flex items-center gap-2 mb-2">
<h3 className="text-sm font-semibold text-foreground">Master</h3>
<span className="text-xs text-muted-foreground">Final mix output</span>
</div>
{/* Master effects will go here */}
<div className="text-xs text-muted-foreground">
Master effects: {masterEffectChain.effects.length}
</div>
</div>
</div>
{/* Import Track Dialog */}
<ImportTrackDialog
open={importDialogOpen}