fix(timeline): drag and drop to create new track

1 files changed, 11 insertions, 9 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce0ffa30..f84a1863 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -566,15 +566,6 @@ export function Timeline() {
       onMouseLeave={() => setIsInTimeline(false)}

       onWheel={handleWheel}

     >

-      {/* Show overlay when dragging media over the timeline */}

-      {isDragOver && (

-        <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">

-          <div>

-            Drop media here to add to timeline

-          </div>

-        </div>

-      )}

-

       {/* Toolbar */}

       <div className="border-b flex items-center px-2 py-1 gap-1">

         <TooltipProvider delayDuration={500}>

@@ -953,6 +944,17 @@ export function Timeline() {
                     )}

                   </>

                 )}

+                {isDragOver && (

+                  <div

+                    className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"

+                    style={{

+                      top: `${tracks.length * 60}px`,

+                      height: "60px",

+                    }}

+                  >

+                    <div>Drop media here to add a new track</div>

+                  </div>

+                )}

               </div>

             </div>

           </div>