playful

frontend/src/documents/DocumentsList.jsx

@@ -9,6 +9,7 @@ import { getTagColorStyle } from '../utils/colors';
 import DocumentThumbnailImage from './DocumentThumbnailImage';
 import CorrespondentLinks from './CorrespondentLinks';
 import { resolveCorrespondents } from './correspondents';
+import { writeTagTransferData } from './tagTransfer';
 
 const DocumentsList = ({
   entries,
@@ -156,8 +157,6 @@ const DocumentsList = ({
         if (isDraggingDoc) rowClasses.push('is-dragging');
         const downloadHref = getDownloadHref?.(doc) || null;
         const correspondents = resolveCorrespondents(doc);
-        const titleText = doc.title || doc.original_name;
-
         return (
           <tr
             key={entry.key}
@@ -178,7 +177,7 @@ const DocumentsList = ({
                 document={doc}
                 ensureAssetUrl={ensureAssetUrl}
                 getDocumentAsset={getDocumentAsset}
-                alt={`Thumbnail for ${titleText}`}
+                alt={`Thumbnail for ${doc.title}`}
                 scrollRootRef={scrollRef}
               />
             </td>
@@ -195,7 +194,7 @@ const DocumentsList = ({
                         />
                       </span>
                     ) : null}
-                    <span className="doc-name__primary">{titleText}</span>
+                    <span className="doc-name__primary">{doc.title}</span>
                   </span>
                 </div>
                 {(doc.tags || []).length > 0 && (
@@ -221,17 +220,10 @@ const DocumentsList = ({
                               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();
@@ -272,7 +264,7 @@ const DocumentsList = ({
                     type="button"
                     className="icon-button"
                     title="Rename"
-                    aria-label={`Rename document ${titleText}`}
+                    aria-label={`Rename document ${doc.title}`}
                     onClick={(event) => {
                       event.stopPropagation();
                       const nextName = window.prompt('Rename document', doc.title);