From e3582b7b9a090f6e9ba7e86233252925ed5ba59c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 18 Nov 2025 07:09:29 +0100
Subject: [PATCH] feat: show waveform in collapsed state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Waveform canvas now displays even when track is collapsed
- Only the upload placeholder is hidden when collapsed
- Gives better visual overview when tracks are minimized
- Similar to DAWs like Ableton Live

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/tracks/Track.tsx | 72 ++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/components/tracks/Track.tsx b/components/tracks/Track.tsx
index 8e2a3b4..81ee352 100644
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -81,7 +81,7 @@ export function Track({
 
   // Draw waveform
   React.useEffect(() => {
-    if (!track.audioBuffer || !canvasRef.current || track.collapsed) return;
+    if (!track.audioBuffer || !canvasRef.current) return;
 
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
@@ -387,43 +387,41 @@ export function Track({
         className="flex-1 relative bg-slate-900 border-b border-border cursor-pointer"
         onClick={onSelect}
       >
-        {!track.collapsed && (
-          <>
-            {track.audioBuffer ? (
-              <canvas
-                ref={canvasRef}
-                className="absolute inset-0 w-full h-full cursor-pointer"
-                onClick={handleCanvasClick}
+        {track.audioBuffer ? (
+          <canvas
+            ref={canvasRef}
+            className="absolute inset-0 w-full h-full cursor-pointer"
+            onClick={handleCanvasClick}
+          />
+        ) : (
+          !track.collapsed && (
+            <>
+              <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",
+                  isDragging ? "bg-primary/20 text-primary border-2 border-primary border-dashed" : "hover:bg-accent/50"
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleLoadAudioClick();
+                }}
+                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"
+                accept="audio/*"
+                onChange={handleFileChange}
+                className="hidden"
               />
-            ) : (
-              <>
-                <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",
-                    isDragging ? "bg-primary/20 text-primary border-2 border-primary border-dashed" : "hover:bg-accent/50"
-                  )}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleLoadAudioClick();
-                  }}
-                  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"
-                  accept="audio/*"
-                  onChange={handleFileChange}
-                  className="hidden"
-                />
-              </>
-            )}
-          </>
+            </>
+          )
         )}
       </div>
     </div>