feat: so much stuff

1 files changed, 34 insertions, 1 deletions

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);

     }

   };