feat: Refactor tag drag and drop interactions

frontend/src/desktop/DesktopWorkspace.tsx

@@ -48,7 +48,8 @@ export interface DesktopWorkspaceProps {
   getDocumentAsset?: (...args: any[]) => unknown;
   onDocumentActivate?: (doc: DeskDocument, event?: unknown) => void;
   onSelectionChange?: (selectedIds: Identifier[]) => void;
-  onDocumentTagDrop?: (docId: Identifier, tag: any) => void;
+  onDocumentTagAttach?: (docId: Identifier, tagId: Identifier) => void;
+  onDocumentTagDetach?: (docId: Identifier, tagId: Identifier) => void;
   tenantId?: Identifier | null;
   viewId?: string | null;
 }
@@ -81,7 +82,8 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
   getDocumentAsset,
   onDocumentActivate,
   onSelectionChange,
-  onDocumentTagDrop,
+  onDocumentTagAttach,
+  onDocumentTagDetach,
   tenantId,
   viewId,
 }) => {
@@ -183,20 +185,12 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
   const focusShell = useCallback(() => { }, []);
 
   // Tag Interactions
-  const [pendingRemovalTag, setPendingRemovalTag] = useState<{ docId?: string; tagId?: string } | null>(null);
-  const [tagDropTargetId, setTagDropTargetId] = useState<string | null>(null);
-  const [pendingTagDocId, setPendingTagDocId] = useState<string | null>(null);
-
-  const tagEngine = useMemo(() => ({
-    setPendingRemovalTag,
-    setTagDropTargetId,
-    setPendingTagDocId,
-  }), []);
-
   const tagInteractions = useDeskTagInteractions({
-    engine: tagEngine,
-    onAssignTagToDocument: (docId: string, tag: any) => {
-      onDocumentTagDrop?.(docId, tag);
+    onAssignTagToDocument: (docId: string, tagId: string) => {
+      onDocumentTagAttach?.(docId, tagId);
+    },
+    onRemoveTagFromDocument: (docId: string, tagId: string) => {
+      onDocumentTagDetach?.(docId, tagId);
     },
     requestCanvasFocus: focusShell,
   });
@@ -250,6 +244,8 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
               (e.target as Element).releasePointerCapture(e.pointerId);
             }
           }}
+          onDrop={tagInteractions.handleCanvasDrop}
+          onDragOver={tagInteractions.handleCanvasDragOver}
         >
           {isLayoutReady && items.map((doc, index) => {
             const docId = doc.id ? String(doc.id) : `temp-${index}`;
@@ -286,13 +282,8 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
                 onTagDragOver={tagInteractions.handleTagDragOverDoc}
                 onTagDragLeave={tagInteractions.handleTagDragLeaveDoc}
                 onTagDrop={tagInteractions.handleTagDropOnDoc}
-                onDocTagPointerDown={tagInteractions.handleDocTagPointerDown}
                 onDocTagDragStart={tagInteractions.handleDocTagDragStart}
-                onDocTagDrag={tagInteractions.handleDocTagDrag}
                 onDocTagDragEnd={tagInteractions.handleDocTagDragEnd}
-                tagTargetActive={tagDropTargetId === docId}
-                tagTargetPending={pendingTagDocId === docId}
-                pendingRemovalTag={pendingRemovalTag}
                 onSelect={(ids, extend = false) => {
                   if (!extend) {
                     handleSelectionChange(ids);