From 5d9e02fe9582665cc1e571c7da64ccf251f9345e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 16:32:49 +0100
Subject: [PATCH] feat: streamline track and master controls layout consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Streamlined track controls and master controls to same width (240px)
- Fixed track controls container to use full width of parent column
- Matched TrackControls card structure with MasterControls (gap-3, no w-full/h-full)
- Updated outer container padding from p-2 to p-4 with gap-4
- Adjusted track controls wrapper to center content instead of stretching
- Added max-width constraint to PlaybackControls to prevent width changes
- Centered transport control buttons in footer

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/automation/AutomationHeader.tsx |   5 +-
 components/automation/AutomationLane.tsx   |  12 +-
 components/editor/AudioEditor.tsx          |   4 +-
 components/editor/PlaybackControls.tsx     |   4 +-
 components/tracks/Track.tsx                | 152 +++--------
 components/tracks/TrackControls.tsx        | 124 +++++++--
 components/tracks/TrackFader.tsx           |  62 ++++-
 components/tracks/TrackList.tsx            | 303 +++++++++++++++++----
 types/track.ts                             |   5 +-
 9 files changed, 457 insertions(+), 214 deletions(-)

diff --git a/components/automation/AutomationHeader.tsx b/components/automation/AutomationHeader.tsx
index 000113b..8d20f03 100644
--- a/components/automation/AutomationHeader.tsx
+++ b/components/automation/AutomationHeader.tsx
@@ -69,10 +69,13 @@ export function AutomationHeader({
   return (
     <div
       className={cn(
-        'relative flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border/30 flex-shrink-0',
+        'flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30 flex-shrink-0',
         className
       )}
     >
+      {/* Automation label - always visible */}
+      <span className="text-xs font-medium flex-shrink-0">Automation</span>
+
       {/* Color indicator */}
       {color && (
         <div
diff --git a/components/automation/AutomationLane.tsx b/components/automation/AutomationLane.tsx
index 20417b7..bd61871 100644
--- a/components/automation/AutomationLane.tsx
+++ b/components/automation/AutomationLane.tsx
@@ -38,9 +38,9 @@ export function AutomationLane({
     (time: number): number => {
       if (!containerRef.current) return 0;
       const width = containerRef.current.clientWidth;
-      return (time / duration) * width * zoom;
+      return (time / duration) * width;
     },
-    [duration, zoom]
+    [duration]
   );
 
   // Convert value (0-1) to Y pixel position (inverted: 0 at bottom, 1 at top)
@@ -58,9 +58,9 @@ export function AutomationLane({
     (x: number): number => {
       if (!containerRef.current) return 0;
       const width = containerRef.current.clientWidth;
-      return (x / (width * zoom)) * duration;
+      return (x / width) * duration;
     },
-    [duration, zoom]
+    [duration]
   );
 
   // Convert Y pixel position to value (0-1)
@@ -209,7 +209,7 @@ export function AutomationLane({
       const width = rect.width;
 
       // Calculate new time and value
-      const timePerPixel = duration / (width * zoom);
+      const timePerPixel = duration / width;
       const valuePerPixel = 1 / lane.height;
 
       const newTime = Math.max(0, Math.min(duration, point.time + deltaX * timePerPixel));
@@ -217,7 +217,7 @@ export function AutomationLane({
 
       onUpdatePoint(pointId, { time: newTime, value: newValue });
     },
-    [lane.points, lane.height, duration, zoom, onUpdatePoint]
+    [lane.points, lane.height, duration, onUpdatePoint]
   );
 
   const handlePointDragEnd = React.useCallback(() => {
diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index ec98a52..1b7d871 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -1569,7 +1569,7 @@ export function AudioEditor() {
         </main>
 
         {/* Right Sidebar - Master Controls & Analyzers */}
-        <aside className="flex-shrink-0 border-l border-border bg-card flex flex-col p-4 gap-4 w-[280px]">
+        <aside className="flex-shrink-0 border-l border-border bg-card flex flex-col pt-5 px-4 pb-4 gap-4 w-60">
           {/* Master Controls */}
           <div className="flex items-center justify-center">
             <MasterControls
@@ -1655,7 +1655,7 @@ export function AudioEditor() {
 
           {/* Analyzer Display */}
           <div className="flex-1 min-h-[360px] flex items-start justify-center">
-            <div className="w-[192px]">
+            <div className="w-[178px]">
               {analyzerView === 'frequency' && <FrequencyAnalyzer analyserNode={masterAnalyser} />}
               {analyzerView === 'spectrogram' && <Spectrogram analyserNode={masterAnalyser} />}
               {analyzerView === 'phase' && <PhaseCorrelationMeter analyserNode={masterAnalyser} />}
diff --git a/components/editor/PlaybackControls.tsx b/components/editor/PlaybackControls.tsx
index 167f744..8e2743f 100644
--- a/components/editor/PlaybackControls.tsx
+++ b/components/editor/PlaybackControls.tsx
@@ -71,7 +71,7 @@ export function PlaybackControls({
   const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
 
   return (
-    <div className={cn('space-y-4', className)}>
+    <div className={cn('space-y-4 w-full max-w-2xl', className)}>
       {/* Timeline Slider */}
       <div className="space-y-2">
         <input
@@ -161,7 +161,7 @@ export function PlaybackControls({
       )}
 
       {/* Transport Controls */}
-      <div className="flex items-center justify-between gap-4">
+      <div className="flex items-center justify-center gap-4">
         <div className="flex items-center gap-2">
           <Button
             variant="outline"
diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index f12a060..21f049d 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -111,12 +111,7 @@ export function Track({
   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 [themeKey, setThemeKey] = React.useState(0);
-  const inputRef = React.useRef<HTMLInputElement>(null);
   const [isResizing, setIsResizing] = React.useState(false);
   const resizeStartRef = React.useRef({ y: 0, height: 0 });
   const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
@@ -286,36 +281,6 @@ export function Track({
     onUpdateTrack,
   ]);
 
-  const handleNameClick = () => {
-    setIsEditingName(true);
-    setNameInput(String(track.name || "Untitled Track"));
-  };
-
-  const handleNameBlur = () => {
-    setIsEditingName(false);
-    if (nameInput.trim()) {
-      onNameChange(nameInput.trim());
-    } else {
-      setNameInput(String(track.name || "Untitled Track"));
-    }
-  };
-
-  const handleNameKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      inputRef.current?.blur();
-    } else if (e.key === "Escape") {
-      setNameInput(String(track.name || "Untitled Track"));
-      setIsEditingName(false);
-    }
-  };
-
-  React.useEffect(() => {
-    if (isEditingName && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditingName]);
-
   // Listen for theme changes
   React.useEffect(() => {
     const observer = new MutationObserver(() => {
@@ -686,7 +651,7 @@ export function Track({
       <>
         <div
           className={cn(
-            "w-48 flex-shrink-0 border-b border-r-4 p-2 flex flex-col gap-2 min-h-0 transition-all duration-200 cursor-pointer border-border",
+            "w-full flex-shrink-0 border-b border-r-4 p-4 flex flex-col gap-4 min-h-0 transition-all duration-200 cursor-pointer border-border",
             isSelected
               ? "bg-primary/10 border-r-primary"
               : "bg-card border-r-transparent hover:bg-accent/30",
@@ -697,76 +662,38 @@ export function Track({
             if (onSelect) onSelect();
           }}
         >
-          {/* Track Name Row - Integrated collapse (DAW style) */}
-          <div
-            className={cn(
-              "group flex items-center gap-1.5 px-1 py-0.5 rounded cursor-pointer transition-colors",
-              isSelected ? "bg-primary/10" : "hover:bg-accent/50",
-            )}
-            onClick={(e) => {
-              if (!isEditingName) {
+          {/* Collapsed Header */}
+          {track.collapsed && (
+            <div
+              className={cn(
+                "group flex items-center gap-1.5 px-2 py-1 h-full w-full cursor-pointer transition-colors",
+                isSelected ? "bg-primary/10" : "hover:bg-accent/50",
+              )}
+              onClick={(e) => {
                 e.stopPropagation();
                 onToggleCollapse();
-              }
-            }}
-            title={track.collapsed ? "Expand track" : "Collapse track"}
-          >
-            {/* Small triangle indicator */}
-            <div
-              className={cn(
-                "flex-shrink-0 transition-colors",
-                isSelected
-                  ? "text-primary"
-                  : "text-muted-foreground group-hover:text-foreground",
-              )}
+              }}
+              title="Expand track"
             >
-              {track.collapsed ? (
-                <ChevronRight className="h-3 w-3" />
-              ) : (
-                <ChevronDown className="h-3 w-3" />
-              )}
+              <ChevronRight className="h-3 w-3 text-muted-foreground flex-shrink-0" />
+              <div
+                className="h-4 w-0.5 rounded-full flex-shrink-0"
+                style={{ backgroundColor: track.color }}
+              />
+              <span className="text-xs font-semibold text-foreground truncate flex-1">
+                {String(track.name || "Untitled Track")}
+              </span>
             </div>
-
-            {/* Color stripe (thicker when selected) */}
-            <div
-              className={cn(
-                "h-5 rounded-full flex-shrink-0 transition-all",
-                isSelected ? "w-1" : "w-0.5",
-              )}
-              style={{ backgroundColor: track.color }}
-            ></div>
-            <div className="flex-1 min-w-0">
-              {isEditingName ? (
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={nameInput}
-                  onChange={(e) => setNameInput(e.target.value)}
-                  onBlur={handleNameBlur}
-                  onKeyDown={handleNameKeyDown}
-                  onClick={(e) => e.stopPropagation()}
-                  className="w-full px-1 py-0.5 text-xs font-semibold bg-background border border-border rounded"
-                />
-              ) : (
-                <div
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleNameClick();
-                  }}
-                  className="px-1 py-0.5 text-xs font-semibold text-foreground truncate"
-                  title={String(track.name || "Untitled Track")}
-                >
-                  {String(track.name || "Untitled Track")}
-                </div>
-              )}
-            </div>
-          </div>
+          )}
 
           {/* Track Controls - Only show when not collapsed */}
           {!track.collapsed && (
-            <div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
+            <div className="flex-1 flex flex-col items-center justify-center min-h-0 overflow-hidden">
               {/* Integrated Track Controls (Pan + Fader + Buttons) */}
               <TrackControls
+                trackName={track.name}
+                trackColor={track.color}
+                collapsed={track.collapsed}
                 volume={track.volume}
                 pan={track.pan}
                 peakLevel={
@@ -785,6 +712,8 @@ export function Track({
                 showAutomation={track.automation?.showAutomation}
                 showEffects={track.showEffects}
                 isRecording={isRecording}
+                onNameChange={onNameChange}
+                onToggleCollapse={onToggleCollapse}
                 onVolumeChange={onVolumeChange}
                 onPanChange={onPanChange}
                 onMuteToggle={onToggleMute}
@@ -844,14 +773,14 @@ export function Track({
                 : "100%",
           }}
         >
-          {/* Delete Button - Top Right Overlay */}
+          {/* Delete Button - Top Right Overlay - Stays fixed when scrolling */}
           <button
             onClick={(e) => {
               e.stopPropagation();
               onRemove();
             }}
             className={cn(
-              "absolute top-2 right-2 z-20 h-6 w-6 rounded flex items-center justify-center transition-all",
+              "sticky top-2 right-2 float-right z-20 h-6 w-6 rounded flex items-center justify-center transition-all",
               "bg-card/80 hover:bg-destructive/90 text-muted-foreground hover:text-white",
               "border border-border/50 hover:border-destructive",
               "backdrop-blur-sm shadow-sm hover:shadow-md",
@@ -875,11 +804,12 @@ export function Track({
           ) : (
             !track.collapsed && (
               <>
+                {/* Empty state - clickable area for upload with drag & drop */}
                 <div
                   className={cn(
-                    "absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer group",
+                    "absolute inset-0 w-full h-full transition-colors cursor-pointer",
                     isDragging
-                      ? "bg-primary/20 text-primary border-2 border-primary border-dashed"
+                      ? "bg-primary/20 border-2 border-primary border-dashed"
                       : "hover:bg-accent/50",
                   )}
                   onClick={(e) => {
@@ -889,15 +819,7 @@ export function Track({
                   onDragOver={handleDragOver}
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
-                >
-                  <Upload className="h-6 w-6 mb-2 opacity-50 group-hover:opacity-100" />
-                  <p>
-                    {isDragging
-                      ? "Drop audio file here"
-                      : "Click to load audio file"}
-                  </p>
-                  <p className="text-xs opacity-75 mt-1">or drag & drop</p>
-                </div>
+                />
                 <input
                   ref={fileInputRef}
                   type="file"
@@ -909,6 +831,16 @@ export function Track({
             )
           )}
         </div>
+
+        {/* Import Dialog - Also needed in waveform-only mode */}
+        <ImportDialog
+          open={showImportDialog}
+          onClose={handleImportCancel}
+          onImport={handleImport}
+          fileName={pendingFile?.name}
+          sampleRate={fileMetadata.sampleRate}
+          channels={fileMetadata.channels}
+        />
       </div>
     );
   }
diff --git a/components/tracks/TrackControls.tsx b/components/tracks/TrackControls.tsx
index ec6fcfa..b532539 100644
--- a/components/tracks/TrackControls.tsx
+++ b/components/tracks/TrackControls.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { Circle, Headphones, MoreHorizontal } from 'lucide-react';
+import { Circle, Headphones, MoreHorizontal, ChevronRight, ChevronDown } from 'lucide-react';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { TrackFader } from './TrackFader';
 import { cn } from '@/lib/utils/cn';
 
 export interface TrackControlsProps {
+  trackName: string;
+  trackColor: string;
+  collapsed: boolean;
   volume: number;
   pan: number;
   peakLevel: number;
@@ -17,6 +20,8 @@ export interface TrackControlsProps {
   showAutomation?: boolean;
   showEffects?: boolean;
   isRecording?: boolean;
+  onNameChange: (name: string) => void;
+  onToggleCollapse: () => void;
   onVolumeChange: (volume: number) => void;
   onPanChange: (pan: number) => void;
   onMuteToggle: () => void;
@@ -32,6 +37,9 @@ export interface TrackControlsProps {
 }
 
 export function TrackControls({
+  trackName,
+  trackColor,
+  collapsed,
   volume,
   pan,
   peakLevel,
@@ -42,6 +50,8 @@ export function TrackControls({
   showAutomation = false,
   showEffects = false,
   isRecording = false,
+  onNameChange,
+  onToggleCollapse,
   onVolumeChange,
   onPanChange,
   onMuteToggle,
@@ -55,11 +65,77 @@ export function TrackControls({
   onPanTouchEnd,
   className,
 }: TrackControlsProps) {
+  const [isEditingName, setIsEditingName] = React.useState(false);
+  const [editName, setEditName] = React.useState(trackName);
+
+  const handleNameClick = () => {
+    setIsEditingName(true);
+    setEditName(trackName);
+  };
+
+  const handleNameBlur = () => {
+    setIsEditingName(false);
+    if (editName.trim() && editName !== trackName) {
+      onNameChange(editName.trim());
+    } else {
+      setEditName(trackName);
+    }
+  };
+
+  const handleNameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleNameBlur();
+    } else if (e.key === 'Escape') {
+      setIsEditingName(false);
+      setEditName(trackName);
+    }
+  };
+
   return (
     <div className={cn(
-      'flex flex-col items-center justify-between h-full px-3 pt-2 pb-4 bg-card/50 border-2 border-accent/50 rounded-lg',
+      'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
       className
     )}>
+      {/* Track Name Header with Collapse Chevron */}
+      <div className="flex items-center gap-1 w-full">
+        <button
+          onClick={onToggleCollapse}
+          className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
+          title={collapsed ? 'Expand track' : 'Collapse track'}
+        >
+          {collapsed ? (
+            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+          ) : (
+            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+          )}
+        </button>
+        <div className="flex-1 flex items-center justify-center min-w-0">
+          {isEditingName ? (
+            <input
+              type="text"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={handleNameBlur}
+              onKeyDown={handleNameKeyDown}
+              autoFocus
+              className="w-24 text-[10px] font-bold uppercase tracking-wider text-center bg-transparent border-b focus:outline-none px-1"
+              style={{ color: trackColor, borderColor: trackColor }}
+            />
+          ) : (
+            <div
+              onClick={handleNameClick}
+              className="w-24 text-[10px] font-bold uppercase tracking-wider text-center cursor-text hover:bg-accent/10 px-1 rounded transition-colors truncate"
+              style={{ color: trackColor }}
+              title="Click to edit track name"
+            >
+              {trackName}
+            </div>
+          )}
+        </div>
+        {/* Spacer to balance the chevron and center the label */}
+        <div className="p-0.5 flex-shrink-0 w-4" />
+      </div>
+
       {/* Pan Control - Top */}
       <div className="flex justify-center w-full">
         <CircularKnob
@@ -71,7 +147,7 @@ export function TrackControls({
           max={1}
           step={0.01}
           label="PAN"
-          size={40}
+          size={48}
           formatValue={(value: number) => {
             if (Math.abs(value) < 0.01) return 'C';
             if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
@@ -94,14 +170,14 @@ export function TrackControls({
 
       {/* Control Buttons - Bottom */}
       <div className="flex flex-col gap-1 w-full">
-        {/* Control Buttons Row 1: R/S/M */}
-        <div className="flex items-center gap-0.5 w-full justify-center">
+        {/* Control Buttons Row 1: R/M/S */}
+        <div className="flex items-center gap-1 w-full justify-center">
           {/* Record Arm */}
           {onRecordToggle && (
             <button
               onClick={onRecordToggle}
               className={cn(
-                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+                'h-8 w-8 rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
                 isRecordEnabled
                   ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
                   : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
@@ -109,23 +185,7 @@ export function TrackControls({
               )}
               title="Arm track for recording"
             >
-              <Circle className="h-2.5 w-2.5 fill-current" />
-            </button>
-          )}
-
-          {/* Solo Button */}
-          {onSoloToggle && (
-            <button
-              onClick={onSoloToggle}
-              className={cn(
-                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-                isSolo
-                  ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
-                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-              )}
-              title="Solo track"
-            >
-              <Headphones className="h-2.5 w-2.5" />
+              <Circle className="h-3 w-3 fill-current" />
             </button>
           )}
 
@@ -133,7 +193,7 @@ export function TrackControls({
           <button
             onClick={onMuteToggle}
             className={cn(
-              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+              'h-8 w-8 rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
               isMuted
                 ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
                 : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
@@ -142,6 +202,22 @@ export function TrackControls({
           >
             M
           </button>
+
+          {/* Solo Button */}
+          {onSoloToggle && (
+            <button
+              onClick={onSoloToggle}
+              className={cn(
+                'h-8 w-8 rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
+                isSolo
+                  ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title="Solo track"
+            >
+              <Headphones className="h-3 w-3" />
+            </button>
+          )}
         </div>
       </div>
     </div>
diff --git a/components/tracks/TrackFader.tsx b/components/tracks/TrackFader.tsx
index c2af1aa..a5d5d07 100644
--- a/components/tracks/TrackFader.tsx
+++ b/components/tracks/TrackFader.tsx
@@ -108,9 +108,9 @@ export function TrackFader({
   }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
   return (
-    <div className={cn('flex gap-2', className)} style={{ marginLeft: '16px' }}>
+    <div className={cn('flex gap-3', className)} style={{ marginLeft: '16px' }}>
       {/* dB Labels (Left) */}
-      <div className="flex flex-col justify-between text-[9px] font-mono text-muted-foreground py-1">
+      <div className="flex flex-col justify-between text-[10px] font-mono text-muted-foreground py-1">
         <span>0</span>
         <span>-12</span>
         <span>-24</span>
@@ -120,12 +120,12 @@ export function TrackFader({
       {/* Fader Container */}
       <div
         ref={containerRef}
-        className="relative w-10 h-32 bg-background/50 rounded-md border border-border/50 cursor-pointer"
+        className="relative w-12 h-40 bg-background/50 rounded-md border border-border/50 cursor-pointer"
         onMouseDown={handleMouseDown}
         onTouchStart={handleTouchStart}
       >
         {/* Peak Meter (Horizontal Bar - Top) */}
-        <div className="absolute inset-x-1.5 top-1.5 h-2.5 bg-background/80 rounded-sm overflow-hidden border border-border/30">
+        <div className="absolute inset-x-2 top-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">
           <div
             className="absolute left-0 top-0 bottom-0 transition-all duration-75 ease-out"
             style={{ width: `${Math.max(0, Math.min(100, peakWidth))}%` }}
@@ -140,7 +140,7 @@ export function TrackFader({
         </div>
 
         {/* RMS Meter (Horizontal Bar - Bottom) */}
-        <div className="absolute inset-x-1.5 bottom-1.5 h-2.5 bg-background/80 rounded-sm overflow-hidden border border-border/30">
+        <div className="absolute inset-x-2 bottom-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">
           <div
             className="absolute left-0 top-0 bottom-0 transition-all duration-150 ease-out"
             style={{ width: `${Math.max(0, Math.min(100, rmsWidth))}%` }}
@@ -155,26 +155,26 @@ export function TrackFader({
         </div>
 
         {/* Fader Track */}
-        <div className="absolute top-6 bottom-6 left-1/2 -translate-x-1/2 w-1 bg-muted/50 rounded-full" />
+        <div className="absolute top-8 bottom-8 left-1/2 -translate-x-1/2 w-1.5 bg-muted/50 rounded-full" />
 
         {/* Fader Handle */}
         <div
-          className="absolute left-1/2 -translate-x-1/2 w-9 h-3.5 bg-primary/80 border-2 border-primary rounded-md shadow-lg cursor-grab active:cursor-grabbing pointer-events-none transition-all"
+          className="absolute left-1/2 -translate-x-1/2 w-10 h-4 bg-primary/80 border-2 border-primary rounded-md shadow-lg cursor-grab active:cursor-grabbing pointer-events-none transition-all"
           style={{
             // Inverted: value 1 = top, value 0 = bottom
-            top: `calc(${(1 - value) * 100}% - 0.4375rem)`,
+            top: `calc(${(1 - value) * 100}% - 0.5rem)`,
           }}
         >
           {/* Handle grip lines */}
           <div className="absolute inset-0 flex items-center justify-center gap-0.5">
-            <div className="h-1.5 w-px bg-primary-foreground/30" />
-            <div className="h-1.5 w-px bg-primary-foreground/30" />
-            <div className="h-1.5 w-px bg-primary-foreground/30" />
+            <div className="h-2 w-px bg-primary-foreground/30" />
+            <div className="h-2 w-px bg-primary-foreground/30" />
+            <div className="h-2 w-px bg-primary-foreground/30" />
           </div>
         </div>
 
         {/* dB Scale Markers */}
-        <div className="absolute inset-0 px-1.5 py-6 pointer-events-none">
+        <div className="absolute inset-0 px-2 py-8 pointer-events-none">
           <div className="relative h-full">
             {/* -12 dB */}
             <div className="absolute left-0 right-0 h-px bg-border/20" style={{ top: '50%' }} />
@@ -186,17 +186,49 @@ export function TrackFader({
         </div>
       </div>
 
-      {/* Value Display (Right) */}
-      <div className="flex flex-col justify-center items-start text-[9px] font-mono">
+      {/* Value and Level Display (Right) */}
+      <div className="flex flex-col justify-between items-start text-[9px] font-mono py-1 w-[36px]">
         {/* Current dB Value */}
         <div className={cn(
-          'font-bold text-[10px] w-[32px]',
+          'font-bold text-[11px]',
           valueDb > -3 ? 'text-red-500' :
           valueDb > -6 ? 'text-yellow-500' :
           'text-green-500'
         )}>
           {valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'}
         </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Peak Level */}
+        <div className="flex flex-col items-start">
+          <span className="text-muted-foreground/60">PK</span>
+          <span className={cn(
+            'font-mono text-[10px]',
+            peakDb > -3 ? 'text-red-500' :
+            peakDb > -6 ? 'text-yellow-500' :
+            'text-green-500'
+          )}>
+            {peakDb > -60 ? `${peakDb.toFixed(1)}` : '-∞'}
+          </span>
+        </div>
+
+        {/* RMS Level */}
+        <div className="flex flex-col items-start">
+          <span className="text-muted-foreground/60">RM</span>
+          <span className={cn(
+            'font-mono text-[10px]',
+            rmsDb > -3 ? 'text-red-500' :
+            rmsDb > -6 ? 'text-yellow-500' :
+            'text-green-500'
+          )}>
+            {rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'}
+          </span>
+        </div>
+
+        {/* dB Label */}
+        <span className="text-muted-foreground/60 text-[8px]">dB</span>
       </div>
     </div>
   );
diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 08f31f9..7d64329 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Plus, Upload, ChevronDown, ChevronRight, X, Eye, EyeOff } from 'lucide-react';
+import { Plus, Upload, ChevronDown, ChevronRight, ChevronUp, X, Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { cn } from '@/lib/utils/cn';
 import { Track } from './Track';
@@ -61,6 +61,11 @@ export function TrackList({
   const waveformScrollRef = React.useRef<HTMLDivElement>(null);
   const controlsScrollRef = React.useRef<HTMLDivElement>(null);
 
+  // Refs for horizontal scroll synchronization (per track)
+  const waveformHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
+  const automationHScrollRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
+  const [syncingScroll, setSyncingScroll] = React.useState(false);
+
   // Synchronize vertical scroll between controls and waveforms
   const handleWaveformScroll = React.useCallback(() => {
     if (waveformScrollRef.current && controlsScrollRef.current) {
@@ -68,6 +73,61 @@ export function TrackList({
     }
   }, []);
 
+  // Synchronize horizontal scroll across all tracks (waveforms and automation lanes)
+  const handleWaveformHScroll = React.useCallback((trackId: string) => {
+    if (syncingScroll) return;
+    setSyncingScroll(true);
+
+    const sourceEl = waveformHScrollRefs.current.get(trackId);
+    if (!sourceEl) {
+      setSyncingScroll(false);
+      return;
+    }
+
+    const scrollLeft = sourceEl.scrollLeft;
+
+    // Sync all waveforms
+    waveformHScrollRefs.current.forEach((el, id) => {
+      if (id !== trackId) {
+        el.scrollLeft = scrollLeft;
+      }
+    });
+
+    // Sync all automation lanes
+    automationHScrollRefs.current.forEach((el) => {
+      el.scrollLeft = scrollLeft;
+    });
+
+    setSyncingScroll(false);
+  }, [syncingScroll]);
+
+  const handleAutomationHScroll = React.useCallback((trackId: string) => {
+    if (syncingScroll) return;
+    setSyncingScroll(true);
+
+    const sourceEl = automationHScrollRefs.current.get(trackId);
+    if (!sourceEl) {
+      setSyncingScroll(false);
+      return;
+    }
+
+    const scrollLeft = sourceEl.scrollLeft;
+
+    // Sync all waveforms
+    waveformHScrollRefs.current.forEach((el) => {
+      el.scrollLeft = scrollLeft;
+    });
+
+    // Sync all automation lanes
+    automationHScrollRefs.current.forEach((el, id) => {
+      if (id !== trackId) {
+        el.scrollLeft = scrollLeft;
+      }
+    });
+
+    setSyncingScroll(false);
+  }, [syncingScroll]);
+
   const handleImportTrack = (buffer: AudioBuffer, name: string) => {
     if (onImportTrack) {
       onImportTrack(buffer, name);
@@ -108,7 +168,7 @@ export function TrackList({
       {/* Track List - Two Column Layout */}
       <div className="flex-1 flex overflow-hidden">
         {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
-        <div ref={controlsScrollRef} className="w-48 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
+        <div ref={controlsScrollRef} className="w-60 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
           {tracks.map((track) => (
             <React.Fragment key={track.id}>
               {/* Track Controls */}
@@ -200,11 +260,11 @@ export function TrackList({
           ))}
         </div>
 
-        {/* Right Column: Waveforms (Flexible Width, Shared Horizontal & Vertical Scroll) */}
+        {/* Right Column: Waveforms (Flexible Width, Vertical Scroll Only) */}
         <div
           ref={waveformScrollRef}
           onScroll={handleWaveformScroll}
-          className="flex-1 overflow-auto custom-scrollbar"
+          className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar"
         >
           <div className="flex flex-col">
             {tracks.map((track) => (
@@ -216,8 +276,29 @@ export function TrackList({
                     height: track.collapsed ? `${COLLAPSED_TRACK_HEIGHT}px` : `${Math.max(track.height || DEFAULT_TRACK_HEIGHT, MIN_TRACK_HEIGHT)}px`
                   }}
                 >
-                  {/* Waveform - Takes remaining space */}
+                  {/* Waveform - Takes remaining space, horizontally scrollable */}
                   <div className="flex-1 min-h-0 relative">
+                    {/* Upload hint for empty tracks - stays fixed as overlay */}
+                    {!track.audioBuffer && !track.collapsed && (
+                      <div className="absolute inset-0 flex flex-col items-center justify-center text-sm text-muted-foreground pointer-events-none z-10">
+                        <Upload className="h-6 w-6 mb-2 opacity-50" />
+                        <p>Click waveform area to load audio</p>
+                        <p className="text-xs opacity-75 mt-1">or drag & drop</p>
+                      </div>
+                    )}
+                    <div
+                      ref={(el) => {
+                        if (el) waveformHScrollRefs.current.set(track.id, el);
+                      }}
+                      onScroll={() => handleWaveformHScroll(track.id)}
+                      className="w-full h-full overflow-x-auto custom-scrollbar"
+                    >
+                      <div
+                        className="h-full"
+                        style={{
+                          minWidth: duration && zoom > 1 ? `${duration * zoom * 100}px` : '100%',
+                        }}
+                      >
                     <Track
                     track={track}
                     zoom={zoom}
@@ -302,6 +383,8 @@ export function TrackList({
                     isPlaying={isPlaying}
                     renderWaveformOnly={true}
                   />
+                      </div>
+                    </div>
                   </div>
 
                   {/* Automation Bar - Collapsible - Fixed height when expanded */}
@@ -328,54 +411,167 @@ export function TrackList({
                       }
                     });
 
+                    // Get parameters that have automation lanes with points
+                    const automatedParams = track.automation.lanes
+                      .filter(lane => lane.points.length > 0)
+                      .map(lane => {
+                        const param = availableParameters.find(p => p.id === lane.parameterId);
+                        return param ? param.name : lane.parameterName;
+                      });
+
+                    const modes = ['read', 'write', 'touch', 'latch'] as const;
+                    const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
+                    const MODE_COLORS = {
+                      read: 'text-muted-foreground',
+                      write: 'text-red-500',
+                      touch: 'text-yellow-500',
+                      latch: 'text-orange-500',
+                    };
+                    const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');
+
                     return (
                     <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
-                      <AutomationHeader
-                        parameterName={currentLane?.parameterName || 'Volume'}
-                        visible={currentLane?.visible ?? true}
-                        mode={currentLane?.mode || 'read'}
-                        color={currentLane?.color}
-                        availableParameters={availableParameters}
-                        selectedParameterId={selectedParam}
-                        onParameterChange={(parameterId) => {
-                          onUpdateTrack(track.id, {
-                            automation: { ...track.automation, selectedParameterId: parameterId },
-                          });
-                        }}
-                        onToggleVisible={() => {
-                          if (currentLane) {
-                            const updatedLanes = track.automation.lanes.map((l) =>
-                              l.id === currentLane.id ? { ...l, visible: !l.visible } : l
-                            );
-                            onUpdateTrack(track.id, {
-                              automation: { ...track.automation, lanes: updatedLanes },
-                            });
-                          }
-                        }}
-                        onModeChange={(mode) => {
-                          if (currentLane) {
-                            const updatedLanes = track.automation.lanes.map((l) =>
-                              l.id === currentLane.id ? { ...l, mode } : l
-                            );
-                            onUpdateTrack(track.id, {
-                              automation: { ...track.automation, lanes: updatedLanes },
-                            });
-                          }
-                        }}
-                        onHeightChange={(delta) => {
-                          if (currentLane) {
-                            const newHeight = Math.max(60, Math.min(200, currentLane.height + delta));
-                            const updatedLanes = track.automation.lanes.map((l) =>
-                              l.id === currentLane.id ? { ...l, height: newHeight } : l
-                            );
-                            onUpdateTrack(track.id, {
-                              automation: { ...track.automation, lanes: updatedLanes },
-                            });
-                          }
-                        }}
-                      />
+                      {/* Automation Header - Single Bar */}
+                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
+                        <span className="text-xs font-medium flex-shrink-0">Automation</span>
 
-                      {/* Automation Lane Content - Collapsible */}
+                        {/* Color indicator */}
+                        {currentLane?.color && (
+                          <div
+                            className="w-1 h-4 rounded-full flex-shrink-0"
+                            style={{ backgroundColor: currentLane.color }}
+                          />
+                        )}
+
+                        {/* Parameter labels - always visible */}
+                        <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
+                          {automatedParams.map((paramName, index) => (
+                            <span
+                              key={index}
+                              className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
+                            >
+                              {paramName}
+                            </span>
+                          ))}
+                        </div>
+
+                        {/* Controls - only visible when expanded */}
+                        {track.automationExpanded && (
+                          <>
+                            {/* Parameter selector */}
+                            {availableParameters && availableParameters.length > 1 && (
+                              <select
+                                value={selectedParam}
+                                onChange={(e) => onUpdateTrack(track.id, {
+                                  automation: { ...track.automation, selectedParameterId: e.target.value },
+                                })}
+                                className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
+                              >
+                                {availableParameters.map((param) => (
+                                  <option key={param.id} value={param.id}>
+                                    {param.name}
+                                  </option>
+                                ))}
+                              </select>
+                            )}
+
+                            {/* Automation mode button */}
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => {
+                                if (currentLane) {
+                                  const nextIndex = (currentModeIndex + 1) % modes.length;
+                                  const updatedLanes = track.automation.lanes.map((l) =>
+                                    l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
+                                  );
+                                  onUpdateTrack(track.id, {
+                                    automation: { ...track.automation, lanes: updatedLanes },
+                                  });
+                                }
+                              }}
+                              title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
+                              className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
+                            >
+                              {MODE_LABELS[currentLane?.mode || 'read']}
+                            </Button>
+
+                            {/* Height controls */}
+                            <div className="flex flex-col gap-0 flex-shrink-0">
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                onClick={() => {
+                                  if (currentLane) {
+                                    const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
+                                    const updatedLanes = track.automation.lanes.map((l) =>
+                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
+                                    );
+                                    onUpdateTrack(track.id, {
+                                      automation: { ...track.automation, lanes: updatedLanes },
+                                    });
+                                  }
+                                }}
+                                title="Increase lane height"
+                                className="h-3 w-4 p-0"
+                              >
+                                <ChevronUp className="h-2.5 w-2.5" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                onClick={() => {
+                                  if (currentLane) {
+                                    const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
+                                    const updatedLanes = track.automation.lanes.map((l) =>
+                                      l.id === currentLane.id ? { ...l, height: newHeight } : l
+                                    );
+                                    onUpdateTrack(track.id, {
+                                      automation: { ...track.automation, lanes: updatedLanes },
+                                    });
+                                  }
+                                }}
+                                title="Decrease lane height"
+                                className="h-3 w-4 p-0"
+                              >
+                                <ChevronDown className="h-2.5 w-2.5" />
+                              </Button>
+                            </div>
+                          </>
+                        )}
+
+                        {/* Show/hide toggle - Positioned absolutely on the right */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={() => {
+                            onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
+                          }}
+                          title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
+                          className="absolute right-2 h-5 w-5 flex-shrink-0"
+                        >
+                          {track.automationExpanded ? (
+                            <Eye className="h-3 w-3" />
+                          ) : (
+                            <EyeOff className="h-3 w-3 text-muted-foreground" />
+                          )}
+                        </Button>
+                      </div>
+
+                      {/* Automation Lane Content - Shown when expanded */}
+                      {track.automationExpanded && (
+                        <div
+                          ref={(el) => {
+                            if (el) automationHScrollRefs.current.set(track.id, el);
+                          }}
+                          onScroll={() => handleAutomationHScroll(track.id)}
+                          className="overflow-x-auto custom-scrollbar"
+                        >
+                        <div
+                          style={{
+                            minWidth: duration && zoom > 1 ? `${duration * zoom * 100}px` : '100%',
+                          }}
+                        >
                       {track.automation.lanes
                         .filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
                         .map((lane) => (
@@ -431,6 +627,9 @@ export function TrackList({
                               }}
                             />
                         ))}
+                        </div>
+                      </div>
+                      )}
                     </div>
                     );
                   })()}
@@ -439,7 +638,7 @@ export function TrackList({
                   {!track.collapsed && (
                     <div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
                       {/* Effects Header - Collapsible */}
-                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-b border-border/30 overflow-x-auto">
+                      <div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30 overflow-x-auto">
                         <span className="text-xs font-medium flex-shrink-0">Effects</span>
 
                         {/* Effect name labels */}
@@ -477,7 +676,7 @@ export function TrackList({
                         </Button>
                       </div>
 
-                      {/* Effects Content - Collapsible, no inner container */}
+                      {/* Effects Content - Collapsible, horizontally scrollable */}
                       {track.effectsExpanded && (
                         <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
                           <div className="flex h-full gap-3 p-3">
diff --git a/types/track.ts b/types/track.ts
index 3e1f8c7..a94537a 100644
--- a/types/track.ts
+++ b/types/track.ts
@@ -35,6 +35,7 @@ export interface Track {
   selected: boolean;
   showEffects: boolean; // Show/hide per-track effects panel
   effectsExpanded?: boolean; // Whether effects bar is expanded (when showEffects is true)
+  automationExpanded?: boolean; // Whether automation bar is expanded (shows full controls)
 
   // Selection (for editing operations)
   selection: Selection | null;
@@ -69,7 +70,7 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
   gray: 'rgb(156, 163, 175)',
 };
 
-export const DEFAULT_TRACK_HEIGHT = 360; // Knob + fader with labels + R/S/M/A/E buttons
-export const MIN_TRACK_HEIGHT = 360; // Minimum to fit knob + fader with labels + all buttons
+export const DEFAULT_TRACK_HEIGHT = 400; // Knob + fader with labels + R/S/M/A/E buttons
+export const MIN_TRACK_HEIGHT = 400; // Minimum to fit knob + fader with labels + all buttons
 export const MAX_TRACK_HEIGHT = 500; // Increased for better waveform viewing
 export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state