feat: refactor frontend tag interaction handlers

frontend/src/desktop/components/DesktopDocumentCard.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 import DesktopPreviewCard from './DesktopPreviewCard';
 import { resolveCorrespondents } from '../../documents/correspondents';
-import { getTagColorStyle } from '../../utils/colors';
-import type { DocumentId } from '../../types/identifiers';
 import type { Document } from '../../types/documents';
 import { LayoutCard } from '../logic/LayoutSystem';
 import { useCardPointer } from '../interactions/useCardPointer';
+import DocumentTags from '../../documents/components/DocumentTags';
+import { TagInteractionHandlers } from '../../documents/interactions/useTagInteractions';
 
 const preventAll = (event?: React.SyntheticEvent | Event | null) => {
   if (!event) return;
@@ -27,12 +27,7 @@ interface DesktopDocumentCardProps {
   onDeselect: (ids: string[]) => void;
   selection: string[];
   requestCanvasFocus?: () => void;
-  onTagDragEnter?: (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;
-  onTagDragStart?: (event: React.DragEvent<HTMLElement>, doc: Document, tag: any) => void;
-  onTagDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
+  tagHandlers?: TagInteractionHandlers;
   layoutCard: LayoutCard;
 }
 
@@ -50,12 +45,7 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
   onDeselect,
   selection,
   requestCanvasFocus,
-  onTagDragEnter,
-  onTagDragOver,
-  onTagDragLeave,
-  onTagDrop,
-  onTagDragStart,
-  onTagDragEnd,
+  tagHandlers,
   layoutCard,
 }) => {
   const cardPointerHandlers = useCardPointer(
@@ -89,10 +79,10 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
       aria-hidden={ariaHidden}
       ref={(node) => layoutCard?.setRef(node)}
       {...cardPointerHandlers}
-      onDragEnter={(event) => onTagDragEnter?.(event, doc.id!)}
-      onDragOver={(event) => onTagDragOver?.(event, doc)}
-      onDragLeave={(event) => onTagDragLeave?.(event, doc.id!)}
-      onDrop={(event) => onTagDrop?.(event, doc)}
+      onDragEnter={(event) => tagHandlers?.onTagDragEnter(event, doc.id!)}
+      onDragOver={(event) => tagHandlers?.onTagDragOver(event, doc)}
+      onDragLeave={(event) => tagHandlers?.onTagDragLeave(event, doc.id!)}
+      onDrop={(event) => tagHandlers?.onTagDrop(event, doc)}
       onKeyDown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {
           preventAll(event);
@@ -123,24 +113,12 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
         )}
         {tags.length > 0 && (
           <div className="desk-item__tags" aria-hidden="true">
-            {tags.map((tag) => {
-              const colorStyle = getTagColorStyle(tag.color);
-              const tagClasses = ['badge', 'tag-chip', 'tag-chip--draggable'];
-              return (
-                <span
-                  key={tag.id}
-                  className={tagClasses.join(' ')}
-                  style={colorStyle || undefined}
-                  title={tag.label}
-                  draggable
-                  data-desk-tag-chip="true"
-                  onDragStart={(event) => onTagDragStart?.(event, doc, tag)}
-                  onDragEnd={(event) => onTagDragEnd?.(event)}
-                >
-                  <span className="tag-chip__label">{tag.label}</span>
-                </span>
-              );
-            })}
+            <DocumentTags
+              doc={doc}
+              tags={tags}
+              tagHandlers={tagHandlers}
+              onTagClick={tagHandlers?.onTagClick}
+            />
           </div>
         )}
       </div>