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,6 +233,7 @@ 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"
       >
+        {hasAnyClips && (
           <div
             ref={previewRef}
             className="relative overflow-hidden rounded-sm bg-black border"
@@ -240,16 +244,15 @@ export function PreviewPanel() {
           >
             {activeClips.length === 0 ? (
               <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-              {tracks.length === 0
+                No clips at current time
-                ? "No media added to timeline"
-                : "No clips at current time"}
               </div>
             ) : (
               activeClips.map((clipData, index) => renderClip(clipData, index))
             )}
           </div>
+        )}
 
-        <PreviewToolbar />
+        {hasAnyClips && <PreviewToolbar />}
       </div>
     </div>
   );