From cb2a7484ed3c6797a33acc2d4ab21130f8f00008 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 14:50:22 +0200
Subject: add drag and drop to the timeline

---
 apps/web/src/components/editor/timeline.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components/editor/timeline.tsx')

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index da44022e..dd312764 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -17,13 +17,33 @@ import {
   TooltipTrigger,
   TooltipProvider,
 } from "../ui/tooltip";
+import { DragOverlay } from "../ui/drag-overlay";
 import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+import { useDragDrop } from "@/hooks/use-drag-drop";
 
 export function Timeline() {
   const { tracks, addTrack } = useTimelineStore();
 
+  const { isDragOver, dragProps } = useDragDrop({
+    onDrop: (files) => {
+      // TODO: Handle file drop functionality for timeline
+      console.log("Files dropped on timeline:", files);
+    },
+  });
+
   return (
-    <div className="h-full flex flex-col">
+    <div
+      className={`h-full flex flex-col transition-colors duration-200 relative ${
+        isDragOver ? "bg-accent/30 border-accent" : ""
+      }`}
+      {...dragProps}
+    >
+      <DragOverlay
+        isVisible={isDragOver}
+        title="Drop files here"
+        description="Add media to timeline tracks"
+      />
+
       {/* Toolbar */}
       <div className="border-b flex items-center px-2 py-1 gap-1">
         <TooltipProvider delayDuration={500}>
-- 
cgit v1.3.1