From 6ee16f9df8aeabfef0ca533f9f5b13daab3a3758 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 19:28:03 +0200
Subject: feat: so much stuff

---
 apps/web/src/hooks/use-drag-drop.ts | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/hooks')

diff --git a/apps/web/src/hooks/use-drag-drop.ts b/apps/web/src/hooks/use-drag-drop.ts
index 6b0c5a9f..eaab89d8 100644
--- a/apps/web/src/hooks/use-drag-drop.ts
+++ b/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);
     }
   };
-- 
cgit v1.3.1