feat: refactor frontend tag interaction handlers

frontend/src/documents/components/DocumentEntry.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { DocumentViewLogic } from '../logic/useDocumentViewLogic';
 import { useDocumentItemLogic } from '../logic/useDocumentItemLogic';
 import EntryShell from './EntryShell';
-import type { TagDragHandlers } from '../interactions/useTagInteractions';
+import type { TagInteractionHandlers } from '../interactions/useTagInteractions';
 
 interface DocumentEntryProps {
     doc: any;
-    tagDragHandlers?: TagDragHandlers;
+    tagHandlers?: TagInteractionHandlers;
     viewLogic: DocumentViewLogic;
     component: React.ElementType;
     className?: string;
@@ -15,8 +15,8 @@ interface DocumentEntryProps {
 }
 
 const DocumentEntry: React.FC<DocumentEntryProps> = (props) => {
-    const { doc, tagDragHandlers, component, className, role, children, viewLogic } = props;
-    const logic = useDocumentItemLogic({ doc, tagDragHandlers, viewLogic });
+    const { doc, tagHandlers, component, className, role, children, viewLogic } = props;
+    const logic = useDocumentItemLogic({ doc, tagHandlers, viewLogic });
 
     return (
         <EntryShell

frontend/src/documents/components/DocumentTags.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { getTagColorStyle } from '../../utils/colors';
 import type { Document, DocumentTag } from '../../types/documents';
 import type { Identifier } from '../../types/identifiers';
-import type { TagDragHandlers } from '../interactions/useTagInteractions';
+import type { TagInteractionHandlers } from '../interactions/useTagInteractions';
 
 interface DocumentTagsProps {
     tags: DocumentTag[];
     tagLookupById?: Map<Identifier, DocumentTag> | null;
     onTagClick?: (tagId: Identifier) => void;
     doc: Document;
-    tagDragHandlers?: TagDragHandlers;
+    tagHandlers?: TagInteractionHandlers;
 }
 
 const DocumentTags: React.FC<DocumentTagsProps> = ({
@@ -17,7 +17,7 @@ const DocumentTags: React.FC<DocumentTagsProps> = ({
     tagLookupById,
     onTagClick,
     doc,
-    tagDragHandlers,
+    tagHandlers,
 }) => {
     const sortedTags = useMemo(() => {
         return [...tags].sort((a, b) => {
@@ -38,12 +38,13 @@ const DocumentTags: React.FC<DocumentTagsProps> = ({
                 const style = getTagColorStyle(colorSource);
                 const tagId = tag?.id ?? null;
                 const clickable = tagId != null && typeof onTagClick === 'function';
+                const draggable = !!tagId;
                 const key = tagId ?? `${doc.id}-tag-${index}`;
 
                 return (
                     <span
                         key={key}
-                        className="badge tag-chip"
+                        className={`badge tag-chip${draggable ? ' tag-chip--draggable' : ''}`}
                         style={style || undefined}
                         title={tag.label}
                         role={clickable ? 'button' : undefined}
@@ -53,8 +54,8 @@ const DocumentTags: React.FC<DocumentTagsProps> = ({
                             onTagClick?.(tagId);
                         } : undefined}
                         draggable={!!tagId}
-                        onDragStart={(event) => tagId && tagDragHandlers?.onTagDragStart(event, doc, tag)}
-                        onDragEnd={tagDragHandlers?.onTagDragEnd}
+                        onDragStart={(event) => tagId && tagHandlers?.onTagDragStart(event, doc, tag)}
+                        onDragEnd={tagHandlers?.onTagDragEnd}
                         onKeyDown={clickable ? (event) => {
                             if (event.key === 'Enter' || event.key === ' ') {
                                 event.preventDefault();

frontend/src/documents/components/DocumentsGridCard.tsx

@@ -12,17 +12,17 @@ import EntryCorrespondents from './EntryCorrespondents';
 import EntryTags from './EntryTags';
 import FolderEntry from './FolderEntry';
 import DocumentEntry from './DocumentEntry';
-import { TagDragHandlers } from '../interactions/useTagInteractions';
+import { TagInteractionHandlers } from '../interactions/useTagInteractions';
 
 interface DocumentsGridCardProps {
     entry: DocumentsListEntry;
     viewLogic: DocumentViewLogic;
     iconSize?: number;
-    tagDragHandlers?: TagDragHandlers;
+    tagHandlers?: TagInteractionHandlers;
 }
 
 const DocumentsGridCard: React.FC<DocumentsGridCardProps> = (props) => {
-    const { entry, iconSize, tagDragHandlers } = props;
+    const { entry, iconSize, tagHandlers } = props;
     const { ensureAssetUrl, getDocumentAsset } = useDocumentsAssetContext();
     const { scrollRef, activeCorrespondentIdSet, tagLookupById } = useDocumentsViewStateContext();
     const {
@@ -80,7 +80,7 @@ const DocumentsGridCard: React.FC<DocumentsGridCardProps> = (props) => {
     return (
         <DocumentEntry
             doc={doc}
-            tagDragHandlers={tagDragHandlers}
+            tagHandlers={tagHandlers}
             viewLogic={props.viewLogic}
             component="div"
             className="document-card document"
@@ -127,7 +127,7 @@ const DocumentsGridCard: React.FC<DocumentsGridCardProps> = (props) => {
                                 tagLookupById={tagLookupById}
                                 onTagClick={onTagClick}
                                 doc={doc}
-                                tagDragHandlers={logic.handlers.tagDragHandlers}
+                                tagHandlers={logic.handlers.tagHandlers}
                             />
                         </div>
                     </div>

frontend/src/documents/components/DocumentsListRow.tsx

@@ -14,17 +14,17 @@ import EntryTags from './EntryTags';
 import FolderEntry from './FolderEntry';
 import DocumentEntry from './DocumentEntry';
 
-import { TagDragHandlers } from '../interactions/useTagInteractions';
+import { TagInteractionHandlers } from '../interactions/useTagInteractions';
 
 interface DocumentsListRowProps {
     entry: DocumentsListEntry;
     viewLogic: DocumentViewLogic;
     iconSize?: number;
-    tagDragHandlers?: TagDragHandlers;
+    tagHandlers?: TagInteractionHandlers;
 }
 
 const DocumentsListRow: React.FC<DocumentsListRowProps> = (props) => {
-    const { entry, iconSize, tagDragHandlers } = props;
+    const { entry, iconSize, tagHandlers } = props;
     const { ensureAssetUrl, getDocumentAsset } = useDocumentsAssetContext();
     const { scrollRef, activeCorrespondentIdSet, tagLookupById } = useDocumentsViewStateContext();
     const {
@@ -91,7 +91,7 @@ const DocumentsListRow: React.FC<DocumentsListRowProps> = (props) => {
     return (
         <DocumentEntry
             doc={doc}
-            tagDragHandlers={tagDragHandlers}
+            tagHandlers={tagHandlers}
             viewLogic={props.viewLogic}
             component="tr"
             className="document"
@@ -142,7 +142,7 @@ const DocumentsListRow: React.FC<DocumentsListRowProps> = (props) => {
                                     tagLookupById={tagLookupById}
                                     onTagClick={onTagClick}
                                     doc={doc}
-                                    tagDragHandlers={logic.handlers.tagDragHandlers}
+                                    tagHandlers={logic.handlers.tagHandlers}
                                 />
                             </div>
                         </div>

frontend/src/documents/components/EntryTags.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import DocumentTags from './DocumentTags';
 import type { Document, DocumentTag } from '../../types/documents';
-import type { TagDragHandlers } from '../interactions/useTagInteractions';
+import type { TagInteractionHandlers } from '../interactions/useTagInteractions';
 import type { Identifier } from '../../types/identifiers';
 
 interface EntryTagsProps {
@@ -9,7 +9,7 @@ interface EntryTagsProps {
     tagLookupById?: Map<Identifier, DocumentTag> | null;
     onTagClick?: (tagId: Identifier) => void;
     doc: Document;
-    tagDragHandlers?: TagDragHandlers;
+    tagHandlers?: TagInteractionHandlers;
 }
 
 const EntryTags: React.FC<EntryTagsProps> = (props) => {
@@ -23,7 +23,7 @@ const EntryTags: React.FC<EntryTagsProps> = (props) => {
             tagLookupById={props.tagLookupById}
             onTagClick={props.onTagClick}
             doc={props.doc}
-            tagDragHandlers={props.tagDragHandlers}
+            tagHandlers={props.tagHandlers}
         />
     );
 };