UI: ContactFolderTree als echter Baum - keine Trennung Firmen/Privat, ein Baum mit allen Kontakten, Personen-Symbol statt Ordner-Symbol

frontend/src/__tests__/contacts/ContactsList.test.tsx

@@ -121,8 +121,7 @@ describe('ContactsListPage (Unified)', () => {
     const folderTree = getFirstByTestId('contact-folder-tree');
     expect(folderTree).toBeInTheDocument();
     expect(within(folderTree).getByText('Alle Kontakte')).toBeInTheDocument();
-    expect(within(folderTree).getByText('Firmen')).toBeInTheDocument();
+    expect(within(folderTree).getByText('Ordner')).toBeInTheDocument();
-    expect(within(folderTree).getByText('Privatpersonen')).toBeInTheDocument();
   });
 
   it('renders contact list with contacts', () => {

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -20,7 +20,7 @@ export interface ContactFolderTreeProps {
   contacts?: { id: string; displayname: string; type: string; folder_id?: string | null }[];
 }
 
-// ── Icons ──
+// Icons
 
 const icon = (path: string, cls = 'w-4 h-4') => (
   <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -39,18 +39,14 @@ const chevron = (open: boolean) => (
 
 const ICONS = {
   all: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
-  company: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
   person: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
   tag: 'M7 7h.01M7 3h5a1.99 1.99 0 01.832.184l4 2A2 2 0 0118 7v10a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z',
-  // Contact person icon (used instead of folder icon)
-  folder: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
-  contactPerson: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
   edit: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
   trash: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
   plus: 'M12 4v16m8-8H4',
 };
 
-// ── Context Menu ──
+// Context Menu
 
 interface ContextMenuState {
   x: number;
@@ -84,7 +80,7 @@ function ContextMenu({
   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öschen', action: () => { onDelete(state.id!); onClose(); }, danger: true });
+    items.push({ label: 'L\u00f6schen', action: () => { onDelete(state.id!); onClose(); }, danger: true });
   } else {
     items.push({ label: 'Neuer Ordner', action: () => { onNewFolder(); onClose(); } });
   }
@@ -111,7 +107,37 @@ function ContextMenu({
   );
 }
 
-// ── Folder Tree Item ──
+// Contact Leaf Node
+
+function ContactLeaf({
+  contact,
+  depth,
+  onSelectFolder,
+}: {
+  contact: { id: string; displayname: string; type: string; folder_id?: string | null };
+  depth: number;
+  onSelectFolder: (folderId: string) => void;
+}) {
+  return (
+    <div
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.setData('text/plain', contact.id);
+        e.dataTransfer.effectAllowed = 'move';
+      }}
+      onClick={() => contact.folder_id && onSelectFolder(contact.folder_id)}
+      className={clsx(
+        'group flex items-center gap-2 px-3 py-1 text-sm cursor-grab rounded-md hover:bg-secondary-100 min-h-touch',
+      )}
+      style={{ paddingLeft: depth * 12 + 32 }}
+    >
+      {icon(ICONS.person, 'w-3.5 h-3.5 text-secondary-400 flex-shrink-0')}
+      <span className="flex-1 truncate text-secondary-600">{contact.displayname}</span>
+    </div>
+  );
+}
+
+// Folder Tree Item
 
 function FolderTreeItem({
   node,
@@ -143,7 +169,6 @@ function FolderTreeItem({
 
   return (
     <div>
-      {/* Folder header — drop target */}
       <div
         onDragOver={(e) => onDragOver(e, node.id)}
         onDragLeave={() => onDragLeave(node.id)}
@@ -165,8 +190,7 @@ function FolderTreeItem({
         }}
       >
         {chevron(expanded)}
-        {/* Contact person icon instead of folder icon */}
+        {icon(ICONS.person, 'w-4 h-4 text-secondary-400')}
-        {icon(ICONS.contactPerson, '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>
@@ -181,40 +205,25 @@ function FolderTreeItem({
         <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öschen"
+          title="L\u00f6schen"
         >
           {icon(ICONS.trash, 'w-3.5 h-3.5')}
         </button>
       </div>
 
-      {/* Contacts inside folder (leaf nodes) */}
       {expanded && folderContacts.length > 0 && (
         <div>
           {folderContacts.map((contact) => (
-            <div
+            <ContactLeaf
               key={contact.id}
-              draggable
+              contact={contact}
-              onDragStart={(e) => {
+              depth={depth + 1}
-                e.dataTransfer.setData('text/plain', contact.id);
+              onSelectFolder={onSelectFolder}
-                e.dataTransfer.effectAllowed = 'move';
+            />
-              }}
-              onClick={() => onSelectFolder(node.id)}
-              className={clsx(
-                'group flex items-center gap-2 px-3 py-1 text-sm cursor-grab rounded-md hover:bg-secondary-100 min-h-touch',
-              )}
-              style={{ paddingLeft: depth * 12 + 32 }}
-            >
-              {icon(
-                contact.type === 'company' ? ICONS.company : ICONS.person,
-                'w-3.5 h-3.5 text-secondary-400 flex-shrink-0',
-              )}
-              <span className="flex-1 truncate text-secondary-600">{contact.displayname}</span>
-            </div>
           ))}
         </div>
       )}
 
-      {/* Child folders */}
       {expanded && node.children.map((child) => (
         <FolderTreeItem
           key={child.id}
@@ -234,7 +243,7 @@ function FolderTreeItem({
   );
 }
 
-// ── Main Component ──
+// Main Component
 
 export function ContactFolderTree({
   selectedFilter,
@@ -244,10 +253,10 @@ export function ContactFolderTree({
   contacts = [],
 }: ContactFolderTreeProps) {
   const { t } = useTranslation();
+  const [rootExpanded, setRootExpanded] = useState(true);
   const [tagsOpen, setTagsOpen] = useState(true);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
   const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
-  const [dragContactId, setDragContactId] = useState<string | null>(null);
 
   const { data: folders, isLoading: foldersLoading } = useContactFolders();
   const createFolderMut = useCreateContactFolder();
@@ -258,6 +267,8 @@ export function ContactFolderTree({
   const folderList = folders ?? [];
   const tree = buildFolderTree(folderList);
 
+  const rootContacts = contacts.filter((c) => !c.folder_id);
+
   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',
@@ -291,7 +302,7 @@ export function ContactFolderTree({
   };
 
   const handleDelete = (id: string) => {
-    if (!confirm('Ordner löschen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
+    if (!confirm('Ordner l\u00f6schen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
     deleteFolderMut.mutate(id);
   };
 
@@ -314,7 +325,6 @@ export function ContactFolderTree({
     moveContactMut.mutate({ contactId, folderId });
   };
 
-  // Root drop zone (unassign from folder)
   const handleRootDrop = (e: React.DragEvent) => {
     e.preventDefault();
     const contactId = e.dataTransfer.getData('text/plain');
@@ -326,81 +336,86 @@ export function ContactFolderTree({
     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 */}
+      <div
-      <button
+        onDragOver={handleRootDragOver}
-        onClick={() => onSelect('all')}
+        onDrop={handleRootDrop}
-        className={itemCls(selectedFilter === 'all')}
+        onContextMenu={(e) => handleContextMenu(e, 'root', null)}
-        aria-current={selectedFilter === 'all' ? 'true' : undefined}
       >
-        {icon(ICONS.all)}
+        <button
-        <span>{t('contacts.allContacts')}</span>
+          onClick={() => {
-      </button>
+            setRootExpanded(!rootExpanded);
+            onSelect('all');
+          }}
+          className={itemCls(selectedFilter === 'all')}
+          aria-current={selectedFilter === 'all' ? 'true' : undefined}
+          aria-expanded={rootExpanded}
+        >
+          {chevron(rootExpanded)}
+          {icon(ICONS.all)}
+          <span>{t('contacts.allContacts')}</span>
+          {contacts.length > 0 && (
+            <span className="text-xs text-secondary-400 tabular-nums ml-auto">{contacts.length}</span>
+          )}
+        </button>
 
-      {/* Firmen */}
+        {rootExpanded && (
-      <button
+          <div className="mt-0.5">
-        onClick={() => onSelect('company')}
+            {rootContacts.map((contact) => (
-        className={itemCls(selectedFilter === 'company')}
+              <ContactLeaf
-        aria-current={selectedFilter === 'company' ? 'true' : undefined}
+                key={contact.id}
-      >
+                contact={contact}
-        {icon(ICONS.company)}
+                depth={0}
-        <span>{t('contacts.companies')}</span>
+                onSelectFolder={handleSelectFolder}
-      </button>
+              />
+            ))}
 
-      {/* Privatpersonen */}
+            <div className="flex items-center justify-between px-2 py-1 mt-1">
-      <button
+              <span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
-        onClick={() => onSelect('person')}
+              <button
-        className={itemCls(selectedFilter === 'person')}
+                onClick={handleNewFolder}
-        aria-current={selectedFilter === 'person' ? 'true' : undefined}
+                className="text-secondary-400 hover:text-primary-600 p-0.5"
-      >
+                title="Neuer Ordner"
-        {icon(ICONS.person)}
+              >
-        <span>{t('contacts.persons')}</span>
+                {icon(ICONS.plus, 'w-3.5 h-3.5')}
-      </button>
+              </button>
+            </div>
 
-      {/* Folders section */}
+            {tree.map((node) => (
-      <div className="pt-1">
+              <FolderTreeItem
-        <div className="flex items-center justify-between px-2 py-1">
+                key={node.id}
-          <span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
+                node={node}
-          <button
+                depth={0}
-            onClick={handleNewFolder}
+                selectedFilter={selectedFilter}
-            className="text-secondary-400 hover:text-primary-600 p-0.5"
+                onSelectFolder={handleSelectFolder}
-            title="Neuer Ordner"
+                onContextMenu={handleContextMenu}
-          >
+                isDragOver={dragOverFolderId === node.id}
-            {icon(ICONS.plus, 'w-3.5 h-3.5')}
+                onDragOver={handleDragOver}
-          </button>
+                onDragLeave={handleDragLeave}
-        </div>
+                onDrop={handleDrop}
+                contacts={contacts}
+              />
+            ))}
 
-        {tree.map((node) => (
+            <div
-          <FolderTreeItem
+              onDragOver={handleRootDragOver}
-            key={node.id}
+              onDrop={handleRootDrop}
-            node={node}
+              className="min-h-[12px] mt-1 rounded-md transition-colors hover:bg-secondary-50"
-            depth={0}
+              onContextMenu={(e) => handleContextMenu(e, 'root', null)}
-            selectedFilter={selectedFilter}
+            />
-            onSelectFolder={(folderId) => onSelect(`folder:${folderId}` as ContactFilter)}
-            onContextMenu={handleContextMenu}
-            isDragOver={dragOverFolderId === node.id}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            contacts={contacts}
-          />
-        ))}
 
-        {/* Root drop zone — unassign contact */}
+            {(foldersLoading || loading) && (
-        <div
+              <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
-          onDragOver={handleRootDragOver}
+            )}
-          onDrop={handleRootDrop}
+          </div>
-          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>
         )}
       </div>
 
-      {/* Tags — collapsible */}
       {tags.length > 0 && (
         <div className="pt-1">
           <button