From a034ca7e859b1cda138526aa67f3bac2c8beff9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 07:11:43 +0100
Subject: [PATCH] feat: center transport controls and add spacebar play/pause
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Transport controls now centered in footer with flexbox justify-center
- Added spacebar keyboard shortcut for play/pause toggle
- Spacebar only works when not typing in input/textarea fields
- Prevents default spacebar behavior (page scroll) when playing/pausing

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/AudioEditor.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index 92deed9..cc8379e 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -96,6 +96,20 @@ export function AudioEditor() {
     setZoom(1);
   };
 
+  // Keyboard shortcuts
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Spacebar for play/pause - only if not typing in an input
+      if (e.code === 'Space' && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        togglePlayPause();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [togglePlayPause]);
+
   // Find selected track
   const selectedTrack = tracks.find((t) => t.id === selectedTrackId);
 
@@ -260,7 +274,7 @@ export function AudioEditor() {
           </div>
 
           {/* Multi-Track Playback Controls */}
-          <div className="border-t border-border bg-card p-3">
+          <div className="border-t border-border bg-card p-3 flex justify-center">
             <PlaybackControls
               isPlaying={isPlaying}
               isPaused={!isPlaying}