playful

frontend/src/documents/DocumentsGrid.jsx

@@ -4,6 +4,7 @@ import DocumentThumbnailImage from './DocumentThumbnailImage';
 import CorrespondentLinks from './CorrespondentLinks';
 import { getTagColorStyle } from '../utils/colors';
 import { resolveCorrespondents } from './correspondents';
+import { writeTagTransferData } from './tagTransfer';
 
 const DocumentsGrid = ({
   entries,
@@ -110,8 +111,6 @@ const DocumentsGrid = ({
       const cardClasses = ['document-card', 'document'];
       if (isSelected) cardClasses.push('selected');
       if (isDraggingDoc) cardClasses.push('is-dragging');
-      const titleText = doc.title || doc.original_name;
-
       return (
         <div
           key={entry.key}
@@ -135,12 +134,12 @@ const DocumentsGrid = ({
             document={doc}
             ensureAssetUrl={ensureAssetUrl}
             getDocumentAsset={getDocumentAsset}
-            alt={`Thumbnail for ${titleText}`}
+            alt={`Thumbnail for ${doc.title}`}
             maxSize={gridIconSize}
             scrollRootRef={scrollRef}
           />
           <div className="document-card__meta">
-            <div className="document-card__title" title={titleText}>
+            <div className="document-card__title" title={doc.title}>
               {correspondents.length > 0 ? (
                 <span className="doc-correspondents">
                   <CorrespondentLinks
@@ -150,7 +149,7 @@ const DocumentsGrid = ({
                   />
                 </span>
               ) : null}
-              <span className="doc-name__primary">{titleText}</span>
+              <span className="doc-name__primary">{doc.title}</span>
             </div>
             {visibleTags.length > 0 && (
               <div className="document-card__tags">
@@ -175,17 +174,10 @@ const DocumentsGrid = ({
                           if (event.dataTransfer) {
                             event.dataTransfer.effectAllowed = 'copyMove';
                           }
-                          const payload = JSON.stringify({
-                            id: tag.id,
-                            label: tag.label,
-                            sourceDocId: doc.id,
-                          });
-                          event.dataTransfer?.setData('application/x-papercrate-tag', payload);
-                          event.dataTransfer?.setData('text/papercrate-tag', payload);
-                          event.dataTransfer?.setData('text/plain', tag.label || 'Tag');
                         } catch (error) {
-                          console.warn('[documents] Failed to configure tag drag payload', error);
+                          console.warn('[documents] Failed to configure drag effect', error);
                         }
+                        writeTagTransferData(event.dataTransfer, tag, doc.id);
                       }}
                       onDragEnd={(event) => {
                         event.stopPropagation();