feat: so much stuff

apps/web/src/hooks/use-drag-drop.ts

@@ -4,12 +4,29 @@ interface UseDragDropOptions {
   onDrop?: (files: FileList) => void;
 }
 
+// Helper function to check if drag contains files from external sources (not internal app drags)
+const containsFiles = (dataTransfer: DataTransfer): boolean => {
+  // Check if this is an internal app drag (media item)
+  if (dataTransfer.types.includes("application/x-media-item")) {
+    return false;
+  }
+
+  // Only show overlay for external file drags
+  return dataTransfer.types.includes("Files");
+};
+
 export function useDragDrop(options: UseDragDropOptions = {}) {
   const [isDragOver, setIsDragOver] = useState(false);
   const dragCounterRef = useRef(0);
 
   const handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault();
+
+    // Only handle external file drags, not internal app element drags
+    if (!containsFiles(e.dataTransfer)) {
+      return;
+    }
+
     dragCounterRef.current += 1;
     if (!isDragOver) {
       setIsDragOver(true);
@@ -18,10 +35,21 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
 
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
+
+    // Only handle file drags
+    if (!containsFiles(e.dataTransfer)) {
+      return;
+    }
   };
 
   const handleDragLeave = (e: React.DragEvent) => {
     e.preventDefault();
+
+    // Only handle file drags
+    if (!containsFiles(e.dataTransfer)) {
+      return;
+    }
+
     dragCounterRef.current -= 1;
     if (dragCounterRef.current === 0) {
       setIsDragOver(false);
@@ -33,7 +61,12 @@ export function useDragDrop(options: UseDragDropOptions = {}) {
     setIsDragOver(false);
     dragCounterRef.current = 0;
 
-    if (options.onDrop && e.dataTransfer.files) {
+    // Only handle file drops
+    if (
+      options.onDrop &&
+      e.dataTransfer.files &&
+      containsFiles(e.dataTransfer)
+    ) {
       options.onDrop(e.dataTransfer.files);
     }
   };