From f3f5b65e1eac5ae28c8c43306c585a07a3514261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 07:46:27 +0100
Subject: [PATCH] feat: implement Ableton Live-style DAW layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/editor/AudioEditor.tsx | 106 ++++++++++++++++--------------
 components/tracks/Track.tsx       |  60 +++++++++++++++++
 components/tracks/TrackList.tsx   |  16 +++++
 3 files changed, 134 insertions(+), 48 deletions(-)

diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index bf5c273..0fd3048 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -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}
diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 81ee352..f43ad4d 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -23,6 +23,8 @@ export interface TrackProps {
   onNameChange: (name: string) => void;
   onSeek?: (time: number) => void;
   onLoadAudio?: (buffer: AudioBuffer) => void;
+  onToggleEffect?: (effectId: string) => void;
+  onRemoveEffect?: (effectId: string) => void;
 }
 
 export function Track({
@@ -41,12 +43,15 @@ export function Track({
   onNameChange,
   onSeek,
   onLoadAudio,
+  onToggleEffect,
+  onRemoveEffect,
 }: TrackProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const [isEditingName, setIsEditingName] = React.useState(false);
   const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
+  const [showDevices, setShowDevices] = React.useState(true);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const handleNameClick = () => {
@@ -378,6 +383,61 @@ export function Track({
                   : `R${Math.round(track.pan * 100)}`}
               </span>
             </div>
+
+            {/* Devices/Effects Section */}
+            <div className="pt-2 border-t border-border">
+              <button
+                onClick={() => setShowDevices(!showDevices)}
+                className="flex items-center justify-between w-full text-xs font-medium text-foreground hover:text-primary transition-colors mb-2"
+              >
+                <span>Devices ({track.effectChain.effects.length})</span>
+                {showDevices ? (
+                  <ChevronDown className="h-3.5 w-3.5" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5" />
+                )}
+              </button>
+
+              {showDevices && (
+                <div className="space-y-1">
+                  {track.effectChain.effects.length === 0 ? (
+                    <div className="text-xs text-muted-foreground text-center py-2">
+                      No devices
+                    </div>
+                  ) : (
+                    track.effectChain.effects.map((effect) => (
+                      <div
+                        key={effect.id}
+                        className={cn(
+                          'flex items-center justify-between px-2 py-1.5 rounded text-xs',
+                          effect.enabled
+                            ? 'bg-accent/50 text-foreground'
+                            : 'bg-muted/50 text-muted-foreground'
+                        )}
+                      >
+                        <span className="truncate">{effect.name}</span>
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => onToggleEffect?.(effect.id)}
+                            className="hover:text-primary"
+                            title={effect.enabled ? 'Disable' : 'Enable'}
+                          >
+                            {effect.enabled ? '●' : '○'}
+                          </button>
+                          <button
+                            onClick={() => onRemoveEffect?.(effect.id)}
+                            className="hover:text-destructive"
+                            title="Remove"
+                          >
+                            ×
+                          </button>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
           </>
         )}
       </div>
diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index d879629..d99930d 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -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>