From 1d35c8f5b2ce0e06d2d617507705615de93149a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 00:38:55 +0100
Subject: [PATCH] feat: center fader with knob above and buttons below
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restructured TrackControls layout using flexbox justify-between
- Pan knob positioned at top
- Fader vertically centered in flex-1 middle section
- R/S/M/A/E buttons positioned at bottom in two rows
- Main container uses h-full for proper vertical distribution

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/TrackControls.tsx | 157 ++++++++++++++--------------
 1 file changed, 80 insertions(+), 77 deletions(-)

diff --git a/components/tracks/TrackControls.tsx b/components/tracks/TrackControls.tsx
index 1c3bdb1..41d1f25 100644
--- a/components/tracks/TrackControls.tsx
+++ b/components/tracks/TrackControls.tsx
@@ -56,8 +56,8 @@ export function TrackControls({
   className,
 }: TrackControlsProps) {
   return (
-    <div className={cn('flex flex-col items-center gap-2 py-2', className)}>
-      {/* Pan Control - Centered */}
+    <div className={cn('flex flex-col items-center justify-between h-full py-2', className)}>
+      {/* Pan Control - Top */}
       <div className="flex justify-center w-full">
         <CircularKnob
           value={pan}
@@ -77,8 +77,8 @@ export function TrackControls({
         />
       </div>
 
-      {/* Track Fader with Integrated Meters - Centered */}
-      <div className="flex justify-center w-full">
+      {/* Track Fader - Center (vertically centered in remaining space) */}
+      <div className="flex justify-center items-center flex-1 w-full">
         <TrackFader
           value={volume}
           peakLevel={peakLevel}
@@ -89,89 +89,92 @@ export function TrackControls({
         />
       </div>
 
-      {/* Control Buttons Row 1: R/S/M */}
-      <div className="flex items-center gap-0.5 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',
-              isRecordEnabled
-                ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
-                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
-              isRecording && 'animate-pulse'
-            )}
-            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" />
-          </button>
-        )}
-
-        {/* Mute Button */}
-        <button
-          onClick={onMuteToggle}
-          className={cn(
-            'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] 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'
+      {/* 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">
+          {/* 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',
+                isRecordEnabled
+                  ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
+                isRecording && 'animate-pulse'
+              )}
+              title="Arm track for recording"
+            >
+              <Circle className="h-2.5 w-2.5 fill-current" />
+            </button>
           )}
-          title="Mute track"
-        >
-          M
-        </button>
-      </div>
 
-      {/* Control Buttons Row 2: A/E */}
-      <div className="flex items-center gap-0.5 w-full justify-center">
-        {/* Automation Toggle */}
-        {onAutomationToggle && (
+          {/* 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" />
+            </button>
+          )}
+
+          {/* Mute Button */}
           <button
-            onClick={onAutomationToggle}
+            onClick={onMuteToggle}
             className={cn(
               'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-              showAutomation
-                ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+              isMuted
+                ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
                 : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
             )}
-            title="Toggle automation"
+            title="Mute track"
           >
-            A
+            M
           </button>
-        )}
+        </div>
 
-        {/* Effects Button */}
-        {onEffectsClick && (
-          <button
-            onClick={onEffectsClick}
-            className={cn(
-              'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
-              showEffects
-                ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
-                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
-            )}
-            title={showEffects ? 'Hide effects' : 'Show effects'}
-          >
-            E
-          </button>
-        )}
+        {/* Control Buttons Row 2: A/E */}
+        <div className="flex items-center gap-0.5 w-full justify-center">
+          {/* Automation Toggle */}
+          {onAutomationToggle && (
+            <button
+              onClick={onAutomationToggle}
+              className={cn(
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+                showAutomation
+                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title="Toggle automation"
+            >
+              A
+            </button>
+          )}
+
+          {/* Effects Button */}
+          {onEffectsClick && (
+            <button
+              onClick={onEffectsClick}
+              className={cn(
+                'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
+                showEffects
+                  ? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title={showEffects ? 'Hide effects' : 'Show effects'}
+            >
+              E
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );