feat: Implement new drag-and-drop system for documents and tags, including workspace-level handling and improved visual feedback.

frontend/src/documents/interactions/useWorkspaceDragDrop.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import type { MutableRefObject } from 'react';
+import { isTagTransferEvent } from '../features/tagging/tagTransfer';
+
+interface UseWorkspaceDragDropArgs {
+    shellRef: MutableRefObject<HTMLElement | null>;
+}
+
+const useWorkspaceDragDrop = ({
+    shellRef,
+}: UseWorkspaceDragDropArgs) => {
+
+    useEffect(() => {
+        const host = shellRef.current;
+        if (!host) {
+            return;
+        }
+
+        // Allow drop on workspace
+        const handleTagDragOver = (event: DragEvent) => {
+            if (!isTagTransferEvent(event)) {
+                return;
+            }
+
+            event.preventDefault();
+            if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+        };
+
+        // Use bubbling (false) so children can stopPropagation
+        host.addEventListener('dragover', handleTagDragOver, false);
+
+        return () => {
+            host.removeEventListener('dragover', handleTagDragOver, false);
+        };
+    }, [shellRef]);
+
+    return {};
+};
+
+export default useWorkspaceDragDrop;