fix: ContactFolderTree drag-drop removed, dropdown menu with rename/color/pin/delete; ContactsList toolbar moved to plugin toolbar

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -6,10 +6,9 @@ import {
   useCreateContactFolder,
   useUpdateContactFolder,
   useDeleteContactFolder,
-  useMoveContactToFolder,
 } from '@/api/hooks';
 import { buildFolderTree, type ContactFolderTreeNode } from '@/api/contactFolders';
-import { ChevronRight, Folder, Pencil, Plus, Tag, Trash2, Users } from 'lucide-react';
+import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Tag, Trash2, Users } from 'lucide-react';
 
 export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}` | `folder:${string}`;
 
@@ -38,26 +37,32 @@ const ICONS = {
   edit: Pencil,
   trash: Trash2,
   plus: Plus,
+  more: MoreVertical,
+  palette: Palette,
+  pin: Pin,
 };
 
-// Context Menu
+// Dropdown Menu
 
-interface ContextMenuState {
-  x: number;
-  y: number;
-  type: 'folder' | 'root';
-  id: string | null;
+interface DropdownState {
+  folderId: string;
+  anchorRect: DOMRect;
 }
 
-function ContextMenu({
-  state, onClose, onRename, onDelete, onNewFolder, onNewSubfolder,
+function FolderDropdown({
+  state,
+  onClose,
+  onRename,
+  onDelete,
+  onColor,
+  onPin,
 }: {
-  state: ContextMenuState;
+  state: DropdownState;
   onClose: () => void;
   onRename: (id: string) => void;
   onDelete: (id: string) => void;
-  onNewFolder: () => void;
-  onNewSubfolder: (parentId: string) => void;
+  onColor: (id: string) => void;
+  onPin: (id: string) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -69,31 +74,33 @@ function ContextMenu({
     return () => document.removeEventListener('mousedown', handler);
   }, [onClose]);
 
-  const items: { label: string; action: () => void; danger?: boolean }[] = [];
+  const items: { label: string; icon: React.ElementType; action: () => void; danger?: boolean }[] = [
+    { label: 'Umbenennen', icon: Pencil, action: () => { onRename(state.folderId); onClose(); } },
+    { label: 'Farbe', icon: Palette, action: () => { onColor(state.folderId); onClose(); } },
+    { label: 'Anpinnen', icon: Pin, action: () => { onPin(state.folderId); onClose(); } },
+    { label: 'L\u00f6schen', icon: Trash2, action: () => { onDelete(state.folderId); onClose(); }, danger: true },
+  ];
 
-  if (state.type === 'folder') {
-    items.push({ label: 'Umbenennen', action: () => { onRename(state.id!); onClose(); } });
-    items.push({ label: 'Neuer Unterordner', action: () => { onNewSubfolder(state.id!); onClose(); } });
-    items.push({ label: 'L\u00f6schen', action: () => { onDelete(state.id!); onClose(); }, danger: true });
-  } else {
-    items.push({ label: 'Neuer Ordner', action: () => { onNewFolder(); onClose(); } });
-  }
+  // Position dropdown below the button, aligned right
+  const top = state.anchorRect.bottom + 4;
+  const left = Math.max(4, state.anchorRect.right - 160);
 
   return (
     <div
       ref={ref}
       className="fixed z-50 bg-white border border-secondary-200 rounded-lg shadow-lg py-1 min-w-[160px]"
-      style={{ left: state.x, top: state.y }}
+      style={{ top, left }}
     >
       {items.map((item, i) => (
         <button
           key={i}
           onClick={item.action}
           className={clsx(
-            'w-full text-left px-3 py-1.5 text-sm hover:bg-secondary-100',
+            'w-full flex items-center gap-2 text-left px-3 py-1.5 text-sm hover:bg-secondary-100',
             item.danger && 'text-red-600 hover:bg-red-50'
           )}
         >
+          <item.icon className="w-3.5 h-3.5 flex-shrink-0" strokeWidth={2} />
           {item.label}
         </button>
       ))}
@@ -108,21 +115,13 @@ function FolderTreeItem({
   depth,
   selectedFilter,
   onSelectFolder,
-  onContextMenu,
-  isDragOver,
-  onDragOver,
-  onDragLeave,
-  onDrop,
+  onMoreClick,
 }: {
   node: ContactFolderTreeNode;
   depth: number;
   selectedFilter: ContactFilter;
   onSelectFolder: (folderId: string) => void;
-  onContextMenu: (e: React.MouseEvent, type: 'folder' | 'root', id: string | null) => void;
-  isDragOver: boolean;
-  onDragOver: (e: React.DragEvent, folderId: string) => void;
-  onDragLeave: (folderId: string) => void;
-  onDrop: (e: React.DragEvent, folderId: string) => void;
+  onMoreClick: (e: React.MouseEvent, folderId: string) => void;
 }) {
   const [expanded, setExpanded] = useState(true);
   const folderKey = `folder:${node.id}` as ContactFilter;
@@ -131,16 +130,10 @@ function FolderTreeItem({
   return (
     <div>
       <div
-        onDragOver={(e) => onDragOver(e, node.id)}
-        onDragLeave={() => onDragLeave(node.id)}
-        onDrop={(e) => onDrop(e, node.id)}
-        onContextMenu={(e) => onContextMenu(e, 'folder', 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',
-          isDragOver
-            ? 'bg-primary-100 ring-2 ring-primary-400'
-            : isActive
+          isActive
             ? 'bg-primary-50 text-primary-700'
             : 'text-secondary-700 hover:bg-secondary-100',
         )}
@@ -157,18 +150,12 @@ function FolderTreeItem({
           <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
         )}
         <button
-          onClick={(e) => { e.stopPropagation(); onContextMenu(e, 'folder', node.id); }}
+          onClick={(e) => { e.stopPropagation(); onMoreClick(e, node.id); }}
           className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-0.5"
-          title="Umbenennen"
+          title="Optionen"
+          aria-label="Optionen"
         >
-          {icon(ICONS.edit, 'w-3.5 h-3.5')}
-        </button>
-        <button
-          onClick={(e) => { e.stopPropagation(); onContextMenu(e, 'folder', node.id); }}
-          className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600 p-0.5"
-          title="L\u00f6schen"
-        >
-          {icon(ICONS.trash, 'w-3.5 h-3.5')}
+          {icon(ICONS.more, 'w-3.5 h-3.5')}
         </button>
       </div>
 
@@ -179,11 +166,7 @@ function FolderTreeItem({
           depth={depth + 1}
           selectedFilter={selectedFilter}
           onSelectFolder={onSelectFolder}
-          onContextMenu={onContextMenu}
-          isDragOver={false}
-          onDragOver={onDragOver}
-          onDragLeave={onDragLeave}
-          onDrop={onDrop}
+          onMoreClick={onMoreClick}
         />
       ))}
     </div>
@@ -201,14 +184,12 @@ export function ContactFolderTree({
 }: ContactFolderTreeProps) {
   const { t } = useTranslation();
   const [tagsOpen, setTagsOpen] = useState(true);
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
+  const [dropdown, setDropdown] = useState<DropdownState | 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);
@@ -220,10 +201,11 @@ export function ContactFolderTree({
       active ? 'bg-primary-50 text-primary-700' : 'text-secondary-700 hover:bg-secondary-100',
     );
 
-  const handleContextMenu = useCallback((e: React.MouseEvent, type: 'folder' | 'root', id: string | null) => {
+  const handleMoreClick = useCallback((e: React.MouseEvent, folderId: string) => {
     e.preventDefault();
     e.stopPropagation();
-    setContextMenu({ x: e.clientX, y: e.clientY, type, id });
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setDropdown({ folderId, anchorRect: rect });
   }, []);
 
   const handleNewFolder = () => {
@@ -232,12 +214,6 @@ export function ContactFolderTree({
     createFolderMut.mutate({ name });
   };
 
-  const handleNewSubfolder = (parentId: string) => {
-    const name = prompt('Unterordnername:');
-    if (!name) return;
-    createFolderMut.mutate({ name, parent_id: parentId });
-  };
-
   const handleRename = (id: string) => {
     const folder = folderList.find((f) => f.id === id);
     const newName = prompt('Neuer Name:', folder?.name || '');
@@ -250,34 +226,16 @@ export function ContactFolderTree({
     deleteFolderMut.mutate(id);
   };
 
-  const handleDragOver = (e: React.DragEvent, folderId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverFolderId(folderId);
+  const handleColor = (id: string) => {
+    const color = prompt('Farbe (Hex-Code, z.B. #ff0000):', '#3b82f6');
+    if (!color) return;
+    updateFolderMut.mutate({ id, data: { color } as any });
   };
 
-  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 handlePin = (id: string) => {
+    const folder = folderList.find((f) => f.id === id);
+    const pinned = (folder as any)?.pinned ?? false;
+    updateFolderMut.mutate({ id, data: { pinned: !pinned } as any });
   };
 
   const handleSelectFolder = useCallback((folderId: string) => {
@@ -296,12 +254,21 @@ export function ContactFolderTree({
         <span>{t('contacts.allContacts')}</span>
       </button>
 
+      {/* Folder tree header with add button */}
+      <div className="flex items-center justify-between px-2 pt-2 pb-1">
+        <span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
+        <button
+          onClick={handleNewFolder}
+          className="text-secondary-400 hover:text-primary-600 p-0.5"
+          title="Neuer Ordner"
+          aria-label="Neuer Ordner"
+        >
+          {icon(ICONS.plus, 'w-3.5 h-3.5')}
+        </button>
+      </div>
+
       {/* Folder tree */}
-      <div
-        onDragOver={handleRootDragOver}
-        onDrop={handleRootDrop}
-        onContextMenu={(e) => handleContextMenu(e, 'root', null)}
-      >
+      <div>
         {tree.map((node) => (
           <FolderTreeItem
             key={node.id}
@@ -309,25 +276,17 @@ export function ContactFolderTree({
             depth={0}
             selectedFilter={selectedFilter}
             onSelectFolder={handleSelectFolder}
-            onContextMenu={handleContextMenu}
-            isDragOver={dragOverFolderId === node.id}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
+            onMoreClick={handleMoreClick}
           />
         ))}
 
-        {/* Root drop zone */}
-        <div
-          onDragOver={handleRootDragOver}
-          onDrop={handleRootDrop}
-          className="min-h-[12px] mt-1 rounded-md transition-colors hover:bg-secondary-50"
-          onContextMenu={(e) => handleContextMenu(e, 'root', null)}
-        />
-
         {(foldersLoading || loading) && (
           <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
         )}
+
+        {tree.length === 0 && !foldersLoading && !loading && (
+          <div className="px-2 py-1 text-xs text-secondary-400">Keine Ordner vorhanden</div>
+        )}
       </div>
 
       {/* Tags */}
@@ -364,14 +323,14 @@ export function ContactFolderTree({
         </div>
       )}
 
-      {contextMenu && (
-        <ContextMenu
-          state={contextMenu}
-          onClose={() => setContextMenu(null)}
+      {dropdown && (
+        <FolderDropdown
+          state={dropdown}
+          onClose={() => setDropdown(null)}
           onRename={handleRename}
           onDelete={handleDelete}
-          onNewFolder={handleNewFolder}
-          onNewSubfolder={handleNewSubfolder}
+          onColor={handleColor}
+          onPin={handlePin}
         />
       )}
     </nav>