feat: hide preview canvas when nothing in timeline

apps/web/src/components/editor/preview-panel.tsx

@@ -117,6 +117,9 @@ export function PreviewPanel() {
 
   const activeClips = getActiveClips();
 
+  // Check if there are any clips in the timeline at all
+  const hasAnyClips = tracks.some((track) => track.clips.length > 0);
+
   // Render a clip
   const renderClip = (clipData: ActiveClip, index: number) => {
     const { clip, mediaItem } = clipData;
@@ -230,26 +233,26 @@ export function PreviewPanel() {
         ref={containerRef}
         className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0 gap-4"
       >
-        <div
+        {hasAnyClips && (
-          ref={previewRef}
+          <div
-          className="relative overflow-hidden rounded-sm bg-black border"
+            ref={previewRef}
-          style={{
+            className="relative overflow-hidden rounded-sm bg-black border"
-            width: previewDimensions.width,
+            style={{
-            height: previewDimensions.height,
+              width: previewDimensions.width,
-          }}
+              height: previewDimensions.height,
-        >
+            }}
-          {activeClips.length === 0 ? (
+          >
-            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+            {activeClips.length === 0 ? (
-              {tracks.length === 0
+              <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-                ? "No media added to timeline"
+                No clips at current time
-                : "No clips at current time"}
+              </div>
-            </div>
+            ) : (
-          ) : (
+              activeClips.map((clipData, index) => renderClip(clipData, index))
-            activeClips.map((clipData, index) => renderClip(clipData, index))
+            )}
-          )}
+          </div>
-        </div>
+        )}
 
-        <PreviewToolbar />
+        {hasAnyClips && <PreviewToolbar />}
       </div>
     </div>
   );