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

frontend/src/desktop/components/DesktopDocumentCard.tsx

@@ -28,20 +28,20 @@ interface DesktopDocumentCardProps {
   selection: string[];
   requestCanvasFocus?: () => void;
   onTagDragEnter?: (event: React.DragEvent<HTMLDivElement>, docId: DocumentId) => void;
-  onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, docId: DocumentId) => void;
+  onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, doc: Document) => void;
   onTagDragLeave?: (event: React.DragEvent<HTMLDivElement>, docId: DocumentId) => void;
   onTagDrop?: (event: React.DragEvent<HTMLDivElement>, doc: Document) => void;
-  onDocTagDragStart?: (event: React.DragEvent<HTMLElement>, doc: Document, tag: any) => void;
-  onDocTagDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
+  onTagDragStart?: (event: React.DragEvent<HTMLElement>, doc: Document, tag: any) => void;
+  onTagDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
   layoutCard: LayoutCard;
 }
 
 const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
   doc,
   style,
-  shouldLoad,
-  matchesFilter,
-  selected,
+  shouldLoad = false,
+  matchesFilter = true,
+  selected = false,
   docTagTokens,
   ensureAssetUrl,
   getDocumentAsset,
@@ -54,8 +54,8 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
   onTagDragOver,
   onTagDragLeave,
   onTagDrop,
-  onDocTagDragStart,
-  onDocTagDragEnd,
+  onTagDragStart,
+  onTagDragEnd,
   layoutCard,
 }) => {
   const cardPointerHandlers = useCardPointer(
@@ -89,27 +89,10 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
       aria-hidden={ariaHidden}
       ref={(node) => layoutCard?.setRef(node)}
       {...cardPointerHandlers}
-      onDragEnter={(event) => {
-        if (doc?.id == null) {
-          return;
-        }
-        onTagDragEnter?.(event, doc.id);
-      }}
-      onDragOver={(event) => {
-        if (doc?.id == null) {
-          return;
-        }
-        onTagDragOver?.(event, doc.id);
-      }}
-      onDragLeave={(event) => {
-        if (doc?.id == null) {
-          return;
-        }
-        onTagDragLeave?.(event, doc.id);
-      }}
-      onDrop={(event) => {
-        onTagDrop?.(event, doc);
-      }}
+      onDragEnter={(event) => onTagDragEnter?.(event, doc.id!)}
+      onDragOver={(event) => onTagDragOver?.(event, doc)}
+      onDragLeave={(event) => onTagDragLeave?.(event, doc.id!)}
+      onDrop={(event) => onTagDrop?.(event, doc)}
       onKeyDown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {
           preventAll(event);
@@ -151,8 +134,8 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
                   title={tag.label}
                   draggable
                   data-desk-tag-chip="true"
-                  onDragStart={(event) => onDocTagDragStart?.(event, doc, tag)}
-                  onDragEnd={(event) => onDocTagDragEnd?.(event)}
+                  onDragStart={(event) => onTagDragStart?.(event, doc, tag)}
+                  onDragEnd={(event) => onTagDragEnd?.(event)}
                 >
                   <span className="tag-chip__label">{tag.label}</span>
                 </span>