fix: restore drag-and-drop in ContactFolderTree with dropdown menu (rename/color/pin/delete)

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -6,6 +6,7 @@ import {
   useCreateContactFolder,
   useUpdateContactFolder,
   useDeleteContactFolder,
+  useMoveContactToFolder,
 } from '@/api/hooks';
 import { buildFolderTree, type ContactFolderTreeNode } from '@/api/contactFolders';
 import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Tag, Trash2, Users } from 'lucide-react';
@@ -81,7 +82,6 @@ function FolderDropdown({
     { label: 'L\u00f6schen', icon: Trash2, action: () => { onDelete(state.folderId); onClose(); }, danger: true },
   ];
 
-  // Position dropdown below the button, aligned right
   const top = state.anchorRect.bottom + 4;
   const left = Math.max(4, state.anchorRect.right - 160);
 
@@ -116,12 +116,20 @@ function FolderTreeItem({
   selectedFilter,
   onSelectFolder,
   onMoreClick,
+  isDragOver,
+  onDragOver,
+  onDragLeave,
+  onDrop,
 }: {
   node: ContactFolderTreeNode;
   depth: number;
   selectedFilter: ContactFilter;
   onSelectFolder: (folderId: string) => void;
   onMoreClick: (e: React.MouseEvent, folderId: string) => void;
+  isDragOver: boolean;
+  onDragOver: (e: React.DragEvent, folderId: string) => void;
+  onDragLeave: (folderId: string) => void;
+  onDrop: (e: React.DragEvent, folderId: string) => void;
 }) {
   const [expanded, setExpanded] = useState(true);
   const folderKey = `folder:${node.id}` as ContactFilter;
@@ -130,10 +138,15 @@ function FolderTreeItem({
   return (
     <div>
       <div
+        onDragOver={(e) => onDragOver(e, node.id)}
+        onDragLeave={() => onDragLeave(node.id)}
+        onDrop={(e) => onDrop(e, node.id)}
         className={clsx(
           'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
           'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-          isActive
+          isDragOver
+            ? 'bg-primary-100 ring-2 ring-primary-400'
+            : isActive
             ? 'bg-primary-50 text-primary-700'
             : 'text-secondary-700 hover:bg-secondary-100',
         )}
@@ -167,6 +180,10 @@ function FolderTreeItem({
           selectedFilter={selectedFilter}
           onSelectFolder={onSelectFolder}
           onMoreClick={onMoreClick}
+          isDragOver={false}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
         />
       ))}
     </div>
@@ -185,11 +202,13 @@ export function ContactFolderTree({
   const { t } = useTranslation();
   const [tagsOpen, setTagsOpen] = useState(true);
   const [dropdown, setDropdown] = useState<DropdownState | null>(null);
+  const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
 
   const { data: folders, isLoading: foldersLoading } = useContactFolders();
   const createFolderMut = useCreateContactFolder();
   const updateFolderMut = useUpdateContactFolder();
   const deleteFolderMut = useDeleteContactFolder();
+  const moveContactMut = useMoveContactToFolder();
 
   const folderList = folders ?? [];
   const tree = buildFolderTree(folderList);
@@ -238,6 +257,37 @@ export function ContactFolderTree({
     updateFolderMut.mutate({ id, data: { pinned: !pinned } as any });
   };
 
+  // Drag and Drop handlers
+  const handleDragOver = (e: React.DragEvent, folderId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverFolderId(folderId);
+  };
+
+  const handleDragLeave = (folderId: string) => {
+    if (dragOverFolderId === folderId) setDragOverFolderId(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, folderId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverFolderId(null);
+    const contactId = e.dataTransfer.getData('text/plain');
+    if (!contactId) return;
+    moveContactMut.mutate({ contactId, folderId });
+  };
+
+  const handleRootDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const contactId = e.dataTransfer.getData('text/plain');
+    if (!contactId) return;
+    moveContactMut.mutate({ contactId, folderId: null });
+  };
+
+  const handleRootDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
   const handleSelectFolder = useCallback((folderId: string) => {
     onSelect(`folder:${folderId}` as ContactFilter);
   }, [onSelect]);
@@ -267,8 +317,11 @@ export function ContactFolderTree({
         </button>
       </div>
 
-      {/* Folder tree */}
-      <div>
+      {/* Folder tree with drag-drop */}
+      <div
+        onDragOver={handleRootDragOver}
+        onDrop={handleRootDrop}
+      >
         {tree.map((node) => (
           <FolderTreeItem
             key={node.id}
@@ -277,9 +330,20 @@ export function ContactFolderTree({
             selectedFilter={selectedFilter}
             onSelectFolder={handleSelectFolder}
             onMoreClick={handleMoreClick}
+            isDragOver={dragOverFolderId === node.id}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
           />
         ))}
 
+        {/* Root drop zone */}
+        <div
+          onDragOver={handleRootDragOver}
+          onDrop={handleRootDrop}
+          className="min-h-[12px] mt-1 rounded-md transition-colors hover:bg-secondary-50"
+        />
+
         {(foldersLoading || loading) && (
           <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
         )}