feat: Refactor tag drag and drop interactions

frontend/src/documents/panel/DocumentsPanel.tsx

@@ -59,11 +59,15 @@ export interface DocumentsViewProps {
   onFolderDragEnd?: (event: DragEvent<HTMLElement>) => void;
   onFolderRename?: (folderId: Identifier | 'root', nextName: string) => Promise<boolean> | boolean;
   onDocumentOpen?: DocumentEventHandler;
+  onDocumentActivate?: (doc: Document, event?: unknown) => void;
   onDocumentDragStart?: (event: DragEvent<HTMLElement>, document: Document) => void;
   onDocumentDragEnd?: (event: DragEvent<HTMLElement>) => void;
-  onDocumentTagDragOver?: (event: DragEvent<HTMLElement>) => void;
+  onDocumentTagDragStart?: (event: DragEvent<HTMLElement>, docId: Identifier, tagId: Identifier) => void;
+  onDocumentTagDragEnd?: (event: DragEvent<HTMLElement>) => void;
+  onDocumentTagDragOver?: (event: DragEvent<HTMLElement>, docId: Identifier) => void;
   onDocumentTagDragLeave?: (event: DragEvent<HTMLElement>) => void;
-  onDocumentTagDrop?: (documentId: Identifier, tag: any) => void;
+  onDocumentTagAttach?: (documentId: Identifier, tagId: Identifier) => void;
+  onDocumentTagDetach?: (documentId: Identifier, tagId: Identifier) => void;
   onDocumentRename?: (documentId: Identifier, nextTitle: string) => Promise<boolean> | boolean;
   tagLookupById?: Map<Identifier, DocumentTag> | null;
   onTagClick?: (tagId: Identifier) => void;
@@ -126,7 +130,8 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
   activeTagFilters = [],
   activeCorrespondentFilters = [],
   selectedFolder = null,
-  onDocumentTagDrop,
+  onDocumentTagAttach,
+  onDocumentTagDetach,
   currentTenantId,
 }): ReactNode => {
   const {
@@ -317,13 +322,32 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
 
   const isTagDragEvent = useCallback((event) => isTagTransferEvent(event), []);
 
+  const draggingTagRef = useRef<{ docId: Identifier; tagId: Identifier } | null>(null);
+
+  const handleDocumentTagDragStart = useCallback(
+    (_event, docId, tagId) => {
+      draggingTagRef.current = { docId, tagId };
+    },
+    [],
+  );
+
+  const handleDocumentTagDragEnd = useCallback(
+    (_event) => {
+      draggingTagRef.current = null;
+    },
+    [],
+  );
+
   const handleDocumentTagDragOver = useCallback(
-    (event) => {
+    (event, docId) => {
       if (!isTagDragEvent(event)) {
         return;
       }
       event.preventDefault();
-      event.dataTransfer.dropEffect = 'copy';
+
+      const isSource = draggingTagRef.current?.docId === docId;
+      event.dataTransfer.dropEffect = isSource ? 'copy' : 'move';
+
       event.currentTarget.classList.add('tag-drop-target');
     },
     [isTagDragEvent],
@@ -422,13 +446,15 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
     onFolderDragStart,
     onFolderDragEnd,
     onFolderRename,
-
     onDocumentActivate: handleDocumentActivate,
     onDocumentDragStart: handleDocumentDragStartLocal,
     onDocumentDragEnd: handleDocumentDragEndLocal,
+    onDocumentTagDragStart: handleDocumentTagDragStart,
+    onDocumentTagDragEnd: handleDocumentTagDragEnd,
     onDocumentTagDragOver: handleDocumentTagDragOver,
     onDocumentTagDragLeave: handleDocumentTagDragLeave,
-    onDocumentTagDrop,
+    onDocumentTagAttach,
+    onDocumentTagDetach,
     onDocumentRename,
     ensureAssetUrl,
     getDocumentAsset,