From 35fcd2a9d4808f4dac289ce9f6362d733a59de27 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 20 Jul 2026 07:36:35 +0200
Subject: [PATCH] fix: ContactFolderTree nur Ordner-Baum ohne Kontakte,
 Kontakte in mittlerer Liste

---
 .../__tests__/contacts/ContactsList.test.tsx  |   1 -
 .../components/contacts/ContactFolderTree.tsx | 153 +++++-------------
 2 files changed, 37 insertions(+), 117 deletions(-)

diff --git a/frontend/src/__tests__/contacts/ContactsList.test.tsx b/frontend/src/__tests__/contacts/ContactsList.test.tsx
index a681c53..8a46df1 100644
--- a/frontend/src/__tests__/contacts/ContactsList.test.tsx
+++ b/frontend/src/__tests__/contacts/ContactsList.test.tsx
@@ -121,7 +121,6 @@ describe('ContactsListPage (Unified)', () => {
     const folderTree = getFirstByTestId('contact-folder-tree');
     expect(folderTree).toBeInTheDocument();
     expect(within(folderTree).getByText('Alle Kontakte')).toBeInTheDocument();
-    expect(within(folderTree).getByText('Ordner')).toBeInTheDocument();
   });
 
   it('renders contact list with contacts', () => {
diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index f7e0d4b..36bd5d9 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -39,7 +39,7 @@ 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',
-  person: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+  folder: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z',
   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',
   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',
@@ -107,36 +107,6 @@ function ContextMenu({
   );
 }
 
-// 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({
@@ -149,7 +119,6 @@ function FolderTreeItem({
   onDragOver,
   onDragLeave,
   onDrop,
-  contacts,
 }: {
   node: ContactFolderTreeNode;
   depth: number;
@@ -160,12 +129,10 @@ function FolderTreeItem({
   onDragOver: (e: React.DragEvent, folderId: string) => void;
   onDragLeave: (folderId: string) => void;
   onDrop: (e: React.DragEvent, folderId: string) => void;
-  contacts: { id: string; displayname: string; type: string; folder_id?: string | null }[];
 }) {
   const [expanded, setExpanded] = useState(true);
   const folderKey = `folder:${node.id}` as ContactFilter;
   const isActive = selectedFilter === folderKey;
-  const folderContacts = contacts.filter((c) => c.folder_id === node.id);
 
   return (
     <div>
@@ -190,7 +157,7 @@ function FolderTreeItem({
         }}
       >
         {chevron(expanded)}
-        {icon(ICONS.person, 'w-4 h-4 text-secondary-400')}
+        {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>
@@ -211,19 +178,6 @@ function FolderTreeItem({
         </button>
       </div>
 
-      {expanded && folderContacts.length > 0 && (
-        <div>
-          {folderContacts.map((contact) => (
-            <ContactLeaf
-              key={contact.id}
-              contact={contact}
-              depth={depth + 1}
-              onSelectFolder={onSelectFolder}
-            />
-          ))}
-        </div>
-      )}
-
       {expanded && node.children.map((child) => (
         <FolderTreeItem
           key={child.id}
@@ -236,7 +190,6 @@ function FolderTreeItem({
           onDragOver={onDragOver}
           onDragLeave={onDragLeave}
           onDrop={onDrop}
-          contacts={contacts}
         />
       ))}
     </div>
@@ -253,7 +206,6 @@ 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);
@@ -267,8 +219,6 @@ 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',
@@ -342,80 +292,51 @@ export function ContactFolderTree({
 
   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 */}
       <div
         onDragOver={handleRootDragOver}
         onDrop={handleRootDrop}
         onContextMenu={(e) => handleContextMenu(e, 'root', null)}
       >
-        <button
-          onClick={() => {
-            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>
+        {tree.map((node) => (
+          <FolderTreeItem
+            key={node.id}
+            node={node}
+            depth={0}
+            selectedFilter={selectedFilter}
+            onSelectFolder={handleSelectFolder}
+            onContextMenu={handleContextMenu}
+            isDragOver={dragOverFolderId === node.id}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          />
+        ))}
 
-        {rootExpanded && (
-          <div className="mt-0.5">
-            {rootContacts.map((contact) => (
-              <ContactLeaf
-                key={contact.id}
-                contact={contact}
-                depth={0}
-                onSelectFolder={handleSelectFolder}
-              />
-            ))}
+        {/* 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)}
+        />
 
-            <div className="flex items-center justify-between px-2 py-1 mt-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"
-              >
-                {icon(ICONS.plus, 'w-3.5 h-3.5')}
-              </button>
-            </div>
-
-            {tree.map((node) => (
-              <FolderTreeItem
-                key={node.id}
-                node={node}
-                depth={0}
-                selectedFilter={selectedFilter}
-                onSelectFolder={handleSelectFolder}
-                onContextMenu={handleContextMenu}
-                isDragOver={dragOverFolderId === node.id}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-                contacts={contacts}
-              />
-            ))}
-
-            <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>
-            )}
-          </div>
+        {(foldersLoading || loading) && (
+          <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
         )}
       </div>
 
+      {/* Tags */}
       {tags.length > 0 && (
         <div className="pt-1">
           <button