Agent Zero
75505ab5bf
- Button: draggable={false}, onMouseDown stopPropagation prevents drag swallow
- Button: larger (p-1.5, w-4 h-4), opacity-70, rounded hover bg
- Parent onDragStart: checks if target is Optionen button, prevents drag
- handleMoreClick: currentTarget fallback to closest('button')
- type='button' prevents accidental form submit
456 lines
15 KiB
TypeScript
456 lines
15 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import clsx from 'clsx';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
useContactFolders,
|
|
useCreateContactFolder,
|
|
useUpdateContactFolder,
|
|
useDeleteContactFolder,
|
|
useMoveContactToFolder,
|
|
} from '@/api/hooks';
|
|
import { buildFolderTree, type ContactFolderTreeNode, type ContactFolder } from '@/api/contactFolders';
|
|
import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Tag, Trash2, Users } from 'lucide-react';
|
|
|
|
export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}` | `folder:${string}`;
|
|
|
|
/**
|
|
* Returns true if `descendantId` is a descendant of (or equal to) `ancestorId`
|
|
* in the given flat folder list. Used to prevent circular folder moves.
|
|
*/
|
|
function isDescendantOrSelf(folders: ContactFolder[], descendantId: string, ancestorId: string): boolean {
|
|
if (descendantId === ancestorId) return true;
|
|
let current = folders.find((f) => f.id === descendantId);
|
|
while (current && current.parent_id) {
|
|
if (current.parent_id === ancestorId) return true;
|
|
current = folders.find((f) => f.id === current!.parent_id!);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
export interface ContactFolderTreeProps {
|
|
selectedFilter: ContactFilter;
|
|
onSelect: (filter: ContactFilter) => void;
|
|
tags: string[];
|
|
loading?: boolean;
|
|
contacts?: { id: string; displayname: string; type: string; folder_id?: string | null }[];
|
|
}
|
|
|
|
// Icons
|
|
|
|
const icon = (IconComp: React.ElementType, cls = 'w-4 h-4') => (
|
|
<IconComp className={cls} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const chevron = (open: boolean) => (
|
|
<ChevronRight className={clsx('w-3.5 h-3.5 transition-transform flex-shrink-0', open && 'rotate-90')} aria-hidden="true" strokeWidth={2} />
|
|
);
|
|
|
|
const ICONS = {
|
|
all: Users,
|
|
folder: Folder,
|
|
tag: Tag,
|
|
edit: Pencil,
|
|
trash: Trash2,
|
|
plus: Plus,
|
|
more: MoreVertical,
|
|
palette: Palette,
|
|
pin: Pin,
|
|
};
|
|
|
|
// Dropdown Menu
|
|
|
|
interface DropdownState {
|
|
folderId: string;
|
|
anchorRect: DOMRect;
|
|
}
|
|
|
|
function FolderDropdown({
|
|
state,
|
|
onClose,
|
|
onRename,
|
|
onDelete,
|
|
onColor,
|
|
onPin,
|
|
}: {
|
|
state: DropdownState;
|
|
onClose: () => void;
|
|
onRename: (id: string) => void;
|
|
onDelete: (id: string) => void;
|
|
onColor: (id: string) => void;
|
|
onPin: (id: string) => void;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [onClose]);
|
|
|
|
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 },
|
|
];
|
|
|
|
const top = state.anchorRect.bottom + 4;
|
|
const left = Math.max(4, Math.min(state.anchorRect.right - 160, window.innerWidth - 170));
|
|
const maxHeight = Math.min(300, window.innerHeight - top - 8);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="fixed z-50 bg-white border border-secondary-200 rounded-lg shadow-lg py-1 min-w-[160px]"
|
|
style={{ top, left, maxHeight: maxHeight > 0 ? maxHeight : undefined, overflowY: 'auto' }}
|
|
>
|
|
{items.map((item, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={item.action}
|
|
className={clsx(
|
|
'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>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Folder Tree Item
|
|
|
|
function FolderTreeItem({
|
|
node,
|
|
depth,
|
|
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;
|
|
const isActive = selectedFilter === folderKey;
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
draggable
|
|
onDragStart={(e) => {
|
|
// Prevent drag when the click originated from the more-options button
|
|
const target = e.target as HTMLElement;
|
|
if (target.tagName === 'BUTTON' || target.closest('button[aria-label="Optionen"]')) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
e.dataTransfer.setData('text/folder-id', node.id);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}}
|
|
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',
|
|
isDragOver
|
|
? 'bg-primary-100 ring-2 ring-primary-400'
|
|
: isActive
|
|
? 'bg-primary-50 text-primary-700'
|
|
: 'text-secondary-700 hover:bg-secondary-100',
|
|
)}
|
|
style={{ paddingLeft: depth * 12 + 8 }}
|
|
onClick={() => {
|
|
setExpanded(!expanded);
|
|
onSelectFolder(node.id);
|
|
}}
|
|
>
|
|
{chevron(expanded)}
|
|
{icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
|
|
<span className="flex-1 truncate">{node.name}</span>
|
|
{node.contact_count > 0 && (
|
|
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
draggable={false}
|
|
onMouseDown={(e) => { e.stopPropagation(); }}
|
|
onDragStart={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
|
|
className="flex-shrink-0 opacity-70 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-opacity touch-manipulation"
|
|
title="Optionen"
|
|
aria-label="Optionen"
|
|
>
|
|
{icon(ICONS.more, 'w-4 h-4')}
|
|
</button>
|
|
</div>
|
|
|
|
{expanded && node.children.map((child) => (
|
|
<FolderTreeItem
|
|
key={child.id}
|
|
node={child}
|
|
depth={depth + 1}
|
|
selectedFilter={selectedFilter}
|
|
onSelectFolder={onSelectFolder}
|
|
onMoreClick={onMoreClick}
|
|
isDragOver={false}
|
|
onDragOver={onDragOver}
|
|
onDragLeave={onDragLeave}
|
|
onDrop={onDrop}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Main Component
|
|
|
|
export function ContactFolderTree({
|
|
selectedFilter,
|
|
onSelect,
|
|
tags,
|
|
loading,
|
|
contacts = [],
|
|
}: ContactFolderTreeProps) {
|
|
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);
|
|
|
|
const itemCls = (active: boolean) =>
|
|
clsx(
|
|
'flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm font-medium min-h-touch text-left',
|
|
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
|
active ? 'bg-primary-50 text-primary-700' : 'text-secondary-700 hover:bg-secondary-100',
|
|
);
|
|
|
|
const handleMoreClick = useCallback((e: React.MouseEvent, folderId: string) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// Robust rect: prefer currentTarget, fallback to target.closest('button')
|
|
const btn = (e.currentTarget as HTMLElement) || ((e.target as HTMLElement)?.closest('button'));
|
|
if (!btn) return;
|
|
const rect = btn.getBoundingClientRect();
|
|
setDropdown({ folderId, anchorRect: rect });
|
|
}, []);
|
|
|
|
const handleNewFolder = () => {
|
|
const name = prompt('Ordnername:');
|
|
if (!name) return;
|
|
createFolderMut.mutate({ name });
|
|
};
|
|
|
|
const handleRename = (id: string) => {
|
|
const folder = folderList.find((f) => f.id === id);
|
|
const newName = prompt('Neuer Name:', folder?.name || '');
|
|
if (!newName) return;
|
|
updateFolderMut.mutate({ id, data: { name: newName } });
|
|
};
|
|
|
|
const handleDelete = (id: string) => {
|
|
if (!confirm('Ordner l\u00f6schen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
|
|
deleteFolderMut.mutate(id);
|
|
};
|
|
|
|
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 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 });
|
|
};
|
|
|
|
// 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);
|
|
|
|
// 1) Folder-to-folder drop: move dragged folder into target folder
|
|
const draggedFolderId = e.dataTransfer.getData('text/folder-id');
|
|
if (draggedFolderId) {
|
|
// Prevent dropping a folder into itself or any of its descendants
|
|
if (isDescendantOrSelf(folderList, folderId, draggedFolderId)) {
|
|
return;
|
|
}
|
|
updateFolderMut.mutate({ id: draggedFolderId, data: { parent_id: folderId } });
|
|
return;
|
|
}
|
|
|
|
// 2) Contact-to-folder drop
|
|
const contactId = e.dataTransfer.getData('text/plain');
|
|
if (!contactId) return;
|
|
moveContactMut.mutate({ contactId, folderId });
|
|
};
|
|
|
|
const handleRootDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
// Folder-to-root: unparent the dragged folder
|
|
const draggedFolderId = e.dataTransfer.getData('text/folder-id');
|
|
if (draggedFolderId) {
|
|
updateFolderMut.mutate({ id: draggedFolderId, data: { parent_id: null } });
|
|
return;
|
|
}
|
|
// Contact-to-root: remove from any folder
|
|
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]);
|
|
|
|
return (
|
|
<nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
|
|
{/* Alle Kontakte */}
|
|
<button
|
|
onClick={() => onSelect('all')}
|
|
className={itemCls(selectedFilter === 'all')}
|
|
aria-current={selectedFilter === 'all' ? 'true' : undefined}
|
|
>
|
|
{icon(ICONS.all)}
|
|
<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 with drag-drop */}
|
|
<div
|
|
onDragOver={handleRootDragOver}
|
|
onDrop={handleRootDrop}
|
|
>
|
|
{tree.map((node) => (
|
|
<FolderTreeItem
|
|
key={node.id}
|
|
node={node}
|
|
depth={0}
|
|
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>
|
|
)}
|
|
|
|
{tree.length === 0 && !foldersLoading && !loading && (
|
|
<div className="px-2 py-1 text-xs text-secondary-400">Keine Ordner vorhanden</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{tags.length > 0 && (
|
|
<div className="pt-1">
|
|
<button
|
|
onClick={() => setTagsOpen(!tagsOpen)}
|
|
className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-md text-xs font-semibold text-secondary-500 uppercase tracking-wide hover:bg-secondary-100 min-h-touch text-left"
|
|
aria-expanded={tagsOpen}
|
|
>
|
|
{chevron(tagsOpen)}
|
|
{icon(ICONS.tag, 'w-3.5 h-3.5')}
|
|
<span>{t('tags.title')}</span>
|
|
</button>
|
|
{tagsOpen && (
|
|
<div className="mt-0.5 space-y-0.5">
|
|
{tags.map((tag) => {
|
|
const key = `tag:${tag}` as ContactFilter;
|
|
return (
|
|
<button
|
|
key={key}
|
|
onClick={() => onSelect(key)}
|
|
style={{ paddingLeft: '32px' }}
|
|
className={itemCls(selectedFilter === key)}
|
|
aria-current={selectedFilter === key ? 'true' : undefined}
|
|
>
|
|
{icon(ICONS.tag, 'w-3.5 h-3.5')}
|
|
<span className="truncate">{tag}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{dropdown && (
|
|
<FolderDropdown
|
|
state={dropdown}
|
|
onClose={() => setDropdown(null)}
|
|
onRename={handleRename}
|
|
onDelete={handleDelete}
|
|
onColor={handleColor}
|
|
onPin={handlePin}
|
|
/>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|