feat: Kontakt-Ordner mit Drag&Drop Baum (wie KI-Chat Sidebar)

- Backend: ContactFolder model (hierarchisch, parent_id, sort_order)
- Migration 0022: contact_folders Tabelle + folder_id FK auf contacts
- CRUD Routes: /api/v1/contact-folders (list, create, update, delete, reorder)
- Move Contact API: /api/v1/contact-folders/contacts/{id}/move
- folder_id Filter in contacts list API
- Frontend: ContactFolderTree mit Baum-Struktur, Drag&Drop, Kontext-Menü
- Kontakt-Personen-Icon statt Ordner-Symbol
- ContactList Items draggable (List/Table/Cards View)
- React Query Hooks für Folder CRUD + Move Contact
- Alle 266 Frontend-Tests passing

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

@@ -59,6 +59,11 @@ vi.mock('@/api/hooks', () => ({
   useCreateContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
   useUpdateContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
   useDeleteContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useContactFolders: () => ({ data: [], isLoading: false }),
+  useCreateContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
+  useMoveContactToFolder: () => ({ mutate: vi.fn(), isPending: false }),
 }));
 
 vi.mock('@/components/ui/Toast', () => ({

frontend/src/api/contactFolders.ts

@@ -0,0 +1,62 @@
+/**
+ * Contact folder API client — CRUD, move contacts, reorder.
+ */
+
+import { apiGet, apiPost, apiPut, apiDelete } from './client';
+
+export interface ContactFolder {
+  id: string;
+  name: string;
+  parent_id: string | null;
+  user_id: string;
+  sort_order: number;
+  contact_count: number;
+}
+
+export interface ContactFolderTreeNode extends ContactFolder {
+  children: ContactFolderTreeNode[];
+}
+
+// ── Folders ──
+
+export const fetchContactFolders = () =>
+  apiGet<ContactFolder[]>('/contact-folders');
+
+export const createContactFolder = (data: { name: string; parent_id?: string }) =>
+  apiPost<ContactFolder>('/contact-folders', data);
+
+export const updateContactFolder = (id: string, data: Partial<ContactFolder>) =>
+  apiPut<ContactFolder>(`/contact-folders/${id}`, data);
+
+export const deleteContactFolder = (id: string) =>
+  apiDelete(`/contact-folders/${id}`);
+
+export const reorderContactFolders = (folderId: string, orders: { id: string; sort_order: number; parent_id?: string | null }[]) =>
+  apiPut(`/contact-folders/${folderId}/reorder`, orders);
+
+// ── Move contact ──
+
+export const moveContactToFolder = (contactId: string, folderId: string | null) =>
+  apiPut<{ id: string; folder_id: string | null }>(`/contact-folders/contacts/${contactId}/move`, { folder_id: folderId });
+
+// ── Tree builder ──
+
+export function buildFolderTree(folders: ContactFolder[]): ContactFolderTreeNode[] {
+  const folderMap = new Map<string, ContactFolderTreeNode>();
+  const roots: ContactFolderTreeNode[] = [];
+
+  for (const f of folders) {
+    folderMap.set(f.id, { ...f, children: [] });
+  }
+
+  for (const f of folders) {
+    const node = folderMap.get(f.id)!;
+    if (f.parent_id && folderMap.has(f.parent_id)) {
+      folderMap.get(f.parent_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}

frontend/src/api/hooks.ts

@@ -669,6 +669,7 @@ export interface UnifiedContact {
   tags?: string | null;
   image?: string | null;
   custom?: Record<string, any> | null;
+  folder_id?: string | null;
   default_person_id?: string | null;
   admin_contactperson_id?: string | null;
   contact_persons?: ContactPerson[];
@@ -683,14 +684,16 @@ export function useUnifiedContacts(
   contactType?: string,
   sortBy?: string,
   sortOrder?: string,
+  folderId?: string,
 ) {
   const params = new URLSearchParams({ page: String(page), page_size: String(pageSize) });
   if (search) params.set('search', search);
   if (contactType) params.set('type', contactType);
   if (sortBy) params.set('sort_by', sortBy);
   if (sortOrder) params.set('sort_order', sortOrder);
+  if (folderId) params.set('folder_id', folderId);
   return useQuery({
-    queryKey: ['unifiedContacts', page, pageSize, search, contactType, sortBy, sortOrder],
+    queryKey: ['unifiedContacts', page, pageSize, search, contactType, sortBy, sortOrder, folderId],
     queryFn: () =>
       apiGet<PaginatedResponse<UnifiedContact>>(`/contacts?${params.toString()}`),
   });
@@ -1240,3 +1243,55 @@ export function useUserGroups(userId: string | null) {
     enabled: !!userId,
   });
 }
+
+// ── Contact Folders ──
+
+export function useContactFolders() {
+  return useQuery({
+    queryKey: ['contactFolders'],
+    queryFn: () => apiGet<import('./contactFolders').ContactFolder[]>('/contact-folders'),
+  });
+}
+
+export function useCreateContactFolder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { name: string; parent_id?: string }) => apiPost('/contact-folders', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}
+
+export function useUpdateContactFolder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: { name?: string; parent_id?: string | null; sort_order?: number } }) =>
+      apiPut(`/contact-folders/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}
+
+export function useDeleteContactFolder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => apiDelete(`/contact-folders/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}
+
+export function useMoveContactToFolder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ contactId, folderId }: { contactId: string; folderId: string | null }) =>
+      apiPut(`/contact-folders/contacts/${contactId}/move`, { folder_id: folderId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['unifiedContacts'] });
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -1,16 +1,27 @@
-import React, { useState } from 'react';
+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 } from '@/api/contactFolders';
 
-export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}`;
+export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}` | `folder:${string}`;
 
 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 = (path: string, cls = 'w-4 h-4') => (
   <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={path} />
@@ -31,16 +42,221 @@ const ICONS = {
   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 ──
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  type: 'folder' | 'root';
+  id: string | null;
+}
+
+function ContextMenu({
+  state, onClose, onRename, onDelete, onNewFolder, onNewSubfolder,
+}: {
+  state: ContextMenuState;
+  onClose: () => void;
+  onRename: (id: string) => void;
+  onDelete: (id: string) => void;
+  onNewFolder: () => void;
+  onNewSubfolder: (parentId: 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; action: () => void; danger?: boolean }[] = [];
+
+  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 });
+  } else {
+    items.push({ label: 'Neuer Ordner', action: () => { onNewFolder(); onClose(); } });
+  }
+
+  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 }}
+    >
+      {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',
+            item.danger && 'text-red-600 hover:bg-red-50'
+          )}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── Folder Tree Item ──
+
+function FolderTreeItem({
+  node,
+  depth,
+  selectedFilter,
+  onSelectFolder,
+  onContextMenu,
+  isDragOver,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  contacts,
+}: {
+  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;
+  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>
+      {/* Folder header — drop target */}
+      <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
+            ? '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)}
+        {/* Contact person icon instead of folder icon */}
+        {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>
+        )}
+        <button
+          onClick={(e) => { e.stopPropagation(); onContextMenu(e, 'folder', node.id); }}
+          className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-0.5"
+          title="Umbenennen"
+        >
+          {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öschen"
+        >
+          {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
+              key={contact.id}
+              draggable
+              onDragStart={(e) => {
+                e.dataTransfer.setData('text/plain', contact.id);
+                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}
+          node={child}
+          depth={depth + 1}
+          selectedFilter={selectedFilter}
+          onSelectFolder={onSelectFolder}
+          onContextMenu={onContextMenu}
+          isDragOver={false}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          contacts={contacts}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ── Main Component ──
+
 export function ContactFolderTree({
   selectedFilter,
   onSelect,
   tags,
   loading,
+  contacts = [],
 }: ContactFolderTreeProps) {
   const { t } = useTranslation();
   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();
+  const updateFolderMut = useUpdateContactFolder();
+  const deleteFolderMut = useDeleteContactFolder();
+  const moveContactMut = useMoveContactToFolder();
+
+  const folderList = folders ?? [];
+  const tree = buildFolderTree(folderList);
 
   const itemCls = (active: boolean) =>
     clsx(
@@ -49,6 +265,67 @@ 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) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({ x: e.clientX, y: e.clientY, type, id });
+  }, []);
+
+  const handleNewFolder = () => {
+    const name = prompt('Ordnername:');
+    if (!name) return;
+    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 || '');
+    if (!newName) return;
+    updateFolderMut.mutate({ id, data: { name: newName } });
+  };
+
+  const handleDelete = (id: string) => {
+    if (!confirm('Ordner löschen? Kontakte bleiben erhalten, werden aber keinem Ordner mehr zugeordnet.')) return;
+    deleteFolderMut.mutate(id);
+  };
+
+  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 });
+  };
+
+  // Root drop zone (unassign from folder)
+  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();
+  };
+
   return (
     <nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
       {/* Alle Kontakte */}
@@ -81,6 +358,48 @@ export function ContactFolderTree({
         <span>{t('contacts.persons')}</span>
       </button>
 
+      {/* Folders section */}
+      <div className="pt-1">
+        <div className="flex items-center justify-between px-2 py-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={(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 */}
+        <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>
+
       {/* Tags — collapsible */}
       {tags.length > 0 && (
         <div className="pt-1">
@@ -115,8 +434,15 @@ export function ContactFolderTree({
         </div>
       )}
 
-      {loading && (
-        <div className="px-2 py-1 text-xs text-secondary-400">{t('common.loading')}</div>
+      {contextMenu && (
+        <ContextMenu
+          state={contextMenu}
+          onClose={() => setContextMenu(null)}
+          onRename={handleRename}
+          onDelete={handleDelete}
+          onNewFolder={handleNewFolder}
+          onNewSubfolder={handleNewSubfolder}
+        />
       )}
     </nav>
   );

frontend/src/components/contacts/ContactList.tsx

@@ -113,6 +113,11 @@ export function ContactList({
             {contacts.map((contact) => (
               <li key={contact.id}>
                 <button
+                  draggable
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData('text/plain', contact.id);
+                    e.dataTransfer.effectAllowed = 'move';
+                  }}
                   onClick={() => onSelectContact(contact)}
                   className={clsx(
                     'flex items-center gap-3 w-full px-3 py-2.5 text-left min-h-touch transition-colors',
@@ -201,6 +206,11 @@ export function ContactList({
               {contacts.map((contact) => (
                 <tr
                   key={contact.id}
+                  draggable
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData('text/plain', contact.id);
+                    e.dataTransfer.effectAllowed = 'move';
+                  }}
                   onClick={() => onSelectContact(contact)}
                   className={clsx(
                     'cursor-pointer transition-colors',
@@ -247,6 +257,11 @@ export function ContactList({
           {contacts.map((contact) => (
             <div
               key={contact.id}
+              draggable
+              onDragStart={(e) => {
+                e.dataTransfer.setData('text/plain', contact.id);
+                e.dataTransfer.effectAllowed = 'move';
+              }}
               onClick={() => onSelectContact(contact)}
               className={clsx(
                 'p-3 rounded-lg border cursor-pointer transition-colors min-h-touch',

frontend/src/pages/ContactsList.tsx

@@ -53,6 +53,12 @@ export function ContactsListPage() {
     return undefined;
   }, [selectedFilter]);
 
+  // Derive folder filter
+  const folderId = useMemo(() => {
+    if (selectedFilter.startsWith('folder:')) return selectedFilter.slice(7);
+    return undefined;
+  }, [selectedFilter]);
+
   // Derive tag filter
   const tagFilter = useMemo(() => {
     if (selectedFilter.startsWith('tag:')) return selectedFilter.slice(4);
@@ -67,6 +73,7 @@ export function ContactsListPage() {
     contactType,
     sortBy,
     sortOrder,
+    folderId,
   );
 
   // Fetch selected contact detail (with contact_persons)
@@ -219,6 +226,7 @@ export function ContactsListPage() {
               selectedFilter={selectedFilter}
               onSelect={handleSelectFilter}
               tags={allTags}
+              contacts={contacts}
             />
           </div>
         </ResizablePanel>
@@ -351,6 +359,7 @@ export function ContactsListPage() {
                 selectedFilter={selectedFilter}
                 onSelect={handleSelectFilter}
                 tags={allTags}
+                contacts={contacts}
               />
             </div>
           </div>