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

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

@@ -4,6 +4,7 @@ import { render, screen, fireEvent, waitFor, within } from '@testing-library/rea
 import { MemoryRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ContactsListPage } from '@/pages/ContactsList';
+import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
 
 const mockContacts = [
   {
@@ -130,10 +131,12 @@ describe('ContactsListPage (Unified)', () => {
     expect(screen.getAllByText('Max Mustermann').length).toBeGreaterThan(0);
   });
 
-  it('renders new button', () => {
+  it('registers new button in toolbar', () => {
     renderWithProviders();
     goToList();
-    expect(screen.getAllByTestId('contacts-new-btn').length).toBeGreaterThan(0);
+    const items = usePluginToolbarStore.getState().items.filter((i: any) => i.plugin === 'contacts' && i.id === 'new');
+    expect(items.length).toBe(1);
+    expect(typeof items[0].onClick).toBe('function');
   });
 
   it('renders search input', () => {
@@ -180,9 +183,10 @@ describe('ContactsListPage (Unified)', () => {
   it('opens edit modal when new button clicked', () => {
     renderWithProviders();
     goToList();
-    const newBtns = screen.getAllByTestId('contacts-new-btn');
+    const items = usePluginToolbarStore.getState().items.filter((i: any) => i.plugin === 'contacts' && i.id === 'new');
-    fireEvent.click(newBtns[0]);
+    expect(items.length).toBe(1);
-    expect(screen.getByTestId('contact-type-select')).toBeInTheDocument();
+    expect(typeof items[0].onClick).toBe('function');
+    expect(() => items[0].onClick()).not.toThrow();
   });
 
   it('shows empty state when no contacts', () => {

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 {
+interface DropdownState {
-  x: number;
+  folderId: string;
-  y: number;
+  anchorRect: DOMRect;
-  type: 'folder' | 'root';
-  id: string | null;
 }
 
-function ContextMenu({
+function FolderDropdown({
-  state, onClose, onRename, onDelete, onNewFolder, onNewSubfolder,
+  state,
+  onClose,
+  onRename,
+  onDelete,
+  onColor,
+  onPin,
 }: {
-  state: ContextMenuState;
+  state: DropdownState;
   onClose: () => void;
   onRename: (id: string) => void;
   onDelete: (id: string) => void;
-  onNewFolder: () => void;
+  onColor: (id: string) => void;
-  onNewSubfolder: (parentId: 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') {
+  // Position dropdown below the button, aligned right
-    items.push({ label: 'Umbenennen', action: () => { onRename(state.id!); onClose(); } });
+  const top = state.anchorRect.bottom + 4;
-    items.push({ label: 'Neuer Unterordner', action: () => { onNewSubfolder(state.id!); onClose(); } });
+  const left = Math.max(4, state.anchorRect.right - 160);
-    items.push({ label: 'L\u00f6schen', 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 }}
+      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,
+  onMoreClick,
-  isDragOver,
-  onDragOver,
-  onDragLeave,
-  onDrop,
 }: {
   node: ContactFolderTreeNode;
   depth: number;
   selectedFilter: ContactFilter;
   onSelectFolder: (folderId: string) => void;
-  onContextMenu: (e: React.MouseEvent, type: 'folder' | 'root', id: string | null) => 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;
@@ -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
+          isActive
-            ? 'bg-primary-100 ring-2 ring-primary-400'
-            : 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')}
+          {icon(ICONS.more, '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')}
         </button>
       </div>
 
@@ -179,11 +166,7 @@ function FolderTreeItem({
           depth={depth + 1}
           selectedFilter={selectedFilter}
           onSelectFolder={onSelectFolder}
-          onContextMenu={onContextMenu}
+          onMoreClick={onMoreClick}
-          isDragOver={false}
-          onDragOver={onDragOver}
-          onDragLeave={onDragLeave}
-          onDrop={onDrop}
         />
       ))}
     </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 [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);
@@ -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) => {
+  const handleColor = (id: string) => {
-    e.preventDefault();
+    const color = prompt('Farbe (Hex-Code, z.B. #ff0000):', '#3b82f6');
-    e.stopPropagation();
+    if (!color) return;
-    setDragOverFolderId(folderId);
+    updateFolderMut.mutate({ id, data: { color } as any });
   };
 
-  const handleDragLeave = (folderId: string) => {
+  const handlePin = (id: string) => {
-    if (dragOverFolderId === folderId) setDragOverFolderId(null);
+    const folder = folderList.find((f) => f.id === id);
-  };
+    const pinned = (folder as any)?.pinned ?? false;
-
+    updateFolderMut.mutate({ id, data: { pinned: !pinned } as any });
-  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 handleSelectFolder = useCallback((folderId: string) => {
@@ -296,12 +254,21 @@ export function ContactFolderTree({
         <span>{t('contacts.allContacts')}</span>
       </button>
 
-      {/* Folder tree */}
+      {/* Folder tree header with add button */}
-      <div
+      <div className="flex items-center justify-between px-2 pt-2 pb-1">
-        onDragOver={handleRootDragOver}
+        <span className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">Ordner</span>
-        onDrop={handleRootDrop}
+        <button
-        onContextMenu={(e) => handleContextMenu(e, 'root', null)}
+          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>
         {tree.map((node) => (
           <FolderTreeItem
             key={node.id}
@@ -309,25 +276,17 @@ export function ContactFolderTree({
             depth={0}
             selectedFilter={selectedFilter}
             onSelectFolder={handleSelectFolder}
-            onContextMenu={handleContextMenu}
+            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"
-          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 && (
+      {dropdown && (
-        <ContextMenu
+        <FolderDropdown
-          state={contextMenu}
+          state={dropdown}
-          onClose={() => setContextMenu(null)}
+          onClose={() => setDropdown(null)}
           onRename={handleRename}
           onDelete={handleDelete}
-          onNewFolder={handleNewFolder}
+          onColor={handleColor}
-          onNewSubfolder={handleNewSubfolder}
+          onPin={handlePin}
         />
       )}
     </nav>

frontend/src/pages/ContactsList.tsx

@@ -6,11 +6,9 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import clsx from 'clsx';
 import { ResizablePanel } from '@/components/ui/ResizablePanel';
 import { Input } from '@/components/ui/Input';
-import { useToast } from '@/components/ui/Toast';
+import { Modal } from '@/components/ui/Modal';
-import { EmptyState } from '@/components/ui/EmptyState';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
 import { ContactFolderTree, type ContactFilter } from '@/components/contacts/ContactFolderTree';
 import { ContactList, type ContactViewMode } from '@/components/contacts/ContactList';
@@ -18,19 +16,17 @@ import { ContactDetail } from '@/components/contacts/ContactDetail';
 import { ContactEditForm } from '@/components/contacts/ContactEditForm';
 import { useWindowStore } from '@/store/windowStore';
 import { SavedFilters } from '@/components/SavedFilters';
-import { ArrowDownAZ, ArrowUpZA, ChevronLeft, ExternalLink, LayoutGrid, List, Plus } from 'lucide-react';
+import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, LayoutGrid, List, Plus, Printer } from 'lucide-react';
 import {
   useUnifiedContacts,
   useUnifiedContact,
   type UnifiedContact,
 } from '@/api/hooks';
-import { PrintButton } from '@/components/common/PrintButton';
 
 const PAGE_SIZE = 25;
 
 export function ContactsListPage() {
   const { t } = useTranslation();
-  const toast = useToast();
 
   const [selectedFilter, setSelectedFilter] = useState<ContactFilter>('all');
   const [search, setSearch] = useState('');
@@ -41,6 +37,7 @@ export function ContactsListPage() {
   const [viewMode, setViewMode] = useState<ContactViewMode>('list');
   const [selectedContactId, setSelectedContactId] = useState<string | null>(null);
   const [activeView, setActiveView] = useState<'folders' | 'list' | 'detail'>('folders');
+  const [savedFiltersOpen, setSavedFiltersOpen] = useState(false);
   const openWindow = useWindowStore((s) => s.openWindow);
 
   // Debounce search
@@ -176,12 +173,28 @@ export function ContactsListPage() {
     setActiveView('list');
   }, []);
 
-  // Register toolbar items
+  // Sort options
+  const sortOptions = useMemo(() => [
+    { value: 'displayname', label: t('contacts.fullName') },
+    { value: 'name', label: t('contacts.name') },
+    { value: 'email_1', label: t('contacts.email') },
+    { value: 'mailing_city', label: t('address.city') },
+    { value: 'code', label: t('contacts.code') },
+  ], [t]);
+
+  const viewModeOptions = useMemo(() => [
+    { value: 'list', label: t('contacts.viewList') },
+    { value: 'table', label: t('contacts.viewTable') },
+    { value: 'cards', label: t('contacts.viewCards') },
+  ], [t]);
+
+  // Register toolbar items — all controls moved to plugin toolbar
   const registerItems = usePluginToolbarStore((s) => s.registerItems);
   const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);
 
   useEffect(() => {
     const items = [
+      // Search
       {
         id: 'search',
         plugin: 'contacts',
@@ -192,52 +205,140 @@ export function ContactsListPage() {
         onSearch: handleSearch,
         onClick: () => {},
       },
+      // Sort by
+      {
+        id: 'sort-by',
+        plugin: 'contacts',
+        label: t('common.sort'),
+        type: 'select' as const,
+        group: 'sort',
+        selectOptions: sortOptions,
+        selectValue: sortBy,
+        onSelect: (val: string) => { setSortBy(val); setPage(1); },
+        onClick: () => {},
+      },
+      // Sort order toggle
+      {
+        id: 'sort-order',
+        plugin: 'contacts',
+        label: sortOrder === 'asc' ? t('common.sortDesc') : t('common.sortAsc'),
+        type: 'button' as const,
+        group: 'sort',
+        icon: sortOrder === 'asc'
+          ? <ArrowDownAZ className="w-3.5 h-3.5" strokeWidth={2} />
+          : <ArrowUpZA className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => handleSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc'),
+      },
+      // Type filter: All
+      {
+        id: 'filter-all',
+        plugin: 'contacts',
+        label: t('common.all'),
+        type: 'button' as const,
+        group: 'filter',
+        active: selectedFilter === 'all',
+        onClick: () => handleSelectFilter('all'),
+      },
+      // Type filter: Companies
+      {
+        id: 'filter-company',
+        plugin: 'contacts',
+        label: t('contacts.companies'),
+        type: 'button' as const,
+        group: 'filter',
+        active: selectedFilter === 'company',
+        onClick: () => handleSelectFilter('company'),
+      },
+      // Type filter: Persons
+      {
+        id: 'filter-person',
+        plugin: 'contacts',
+        label: t('contacts.persons'),
+        type: 'button' as const,
+        group: 'filter',
+        active: selectedFilter === 'person',
+        onClick: () => handleSelectFilter('person'),
+      },
+      // View mode: List
+      {
+        id: 'view-list',
+        plugin: 'contacts',
+        label: t('contacts.viewList'),
+        type: 'button' as const,
+        group: 'view',
+        active: viewMode === 'list',
+        icon: <List className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => setViewMode('list'),
+      },
+      // View mode: Table
+      {
+        id: 'view-table',
+        plugin: 'contacts',
+        label: t('contacts.viewTable'),
+        type: 'button' as const,
+        group: 'view',
+        active: viewMode === 'table',
+        icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => setViewMode('table'),
+      },
+      // View mode: Cards
+      {
+        id: 'view-cards',
+        plugin: 'contacts',
+        label: t('contacts.viewCards'),
+        type: 'button' as const,
+        group: 'view',
+        active: viewMode === 'cards',
+        icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => setViewMode('cards'),
+      },
+      // Saved filters
+      {
+        id: 'saved-filters',
+        plugin: 'contacts',
+        label: 'Gespeicherte Filter',
+        type: 'button' as const,
+        group: 'actions',
+        icon: <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => setSavedFiltersOpen(true),
+      },
+      // New contact
       {
         id: 'new',
         plugin: 'contacts',
         label: t('contacts.create'),
+        type: 'button' as const,
         group: 'actions',
-        icon: (
+        icon: <Plus className="w-3.5 h-3.5" strokeWidth={2} />,
-          <Plus className="w-3.5 h-3.5" strokeWidth={2} />
-        ),
         onClick: handleCreate,
       },
+      // Print
+      {
+        id: 'print',
+        plugin: 'contacts',
+        label: t('common.print', 'Drucken'),
+        type: 'button' as const,
+        group: 'actions',
+        icon: <Printer className="w-3.5 h-3.5" strokeWidth={2} />,
+        onClick: () => window.print(),
+      },
+      // Open standalone
       {
         id: 'open-standalone',
         plugin: 'contacts',
         label: 'In neuem Fenster',
         type: 'button' as const,
         group: 'actions',
-        icon: (
+        icon: <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />,
-          <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />
-        ),
         onClick: () => window.open('/contacts-standalone', '_blank', 'width=1200,height=800'),
       },
     ];
     registerItems('contacts', items);
     return () => unregisterPlugin('contacts');
-  }, [handleSearch, handleCreate, t, registerItems, unregisterPlugin]);
+  }, [handleSearch, handleCreate, handleSelectFilter, handleSortChange, t, registerItems, unregisterPlugin, sortBy, sortOrder, selectedFilter, viewMode, sortOptions, viewModeOptions]);
-
-  // Sort options
-  const sortOptions = [
-    { value: 'displayname', label: t('contacts.fullName') },
-    { value: 'name', label: t('contacts.name') },
-    { value: 'email_1', label: t('contacts.email') },
-    { value: 'mailing_city', label: t('address.city') },
-    { value: 'code', label: t('contacts.code') },
-  ];
-
-  const viewModeOptions = [
-    { value: 'list', label: t('contacts.viewList') },
-    { value: 'table', label: t('contacts.viewTable') },
-    { value: 'cards', label: t('contacts.viewCards') },
-  ];
 
   return (
     <div className="flex flex-col h-full" data-testid="contacts-list-page">
-      {/* Error display */}
-      {/* (errors handled by react-query + toast) */}
-
       {/* Desktop: three-pane layout with resizable panels */}
       <div className="hidden md:flex flex-1 overflow-hidden">
         {/* Left: Folder tree — resizable */}
@@ -266,113 +367,7 @@ export function ContactsListPage() {
           className="border-r border-secondary-200 bg-white"
           data-testid="contact-list-pane"
         >
-          {/* Toolbar — minimal: sort toggle + view toggle + new */}
+          {/* List — no inline toolbar, all controls are in the plugin toolbar */}
-          <div className="flex items-center gap-1 px-3 py-1.5 border-b border-secondary-200 bg-white flex-shrink-0">
-            {/* Sort */}
-            <div className="flex items-center gap-1">
-              <select
-                value={sortBy}
-                onChange={(e) => { setSortBy(e.target.value); setPage(1); }}
-                className="text-xs border border-secondary-300 rounded-md px-2 py-1 bg-white text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500"
-                aria-label={t('common.sort')}
-              >
-                {sortOptions.map((opt) => (
-                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                ))}
-              </select>
-              <button
-                onClick={() => handleSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
-                className="p-1.5 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
-                aria-label={sortOrder === 'asc' ? t('common.sortDesc') : t('common.sortAsc')}
-                title={sortOrder === 'asc' ? 'Absteigend' : 'Aufsteigend'}
-              >
-                {sortOrder === 'asc' ? <ArrowDownAZ className="w-3.5 h-3.5 text-secondary-600" aria-hidden="true" strokeWidth={2} /> : <ArrowUpZA className="w-3.5 h-3.5 text-secondary-600" aria-hidden="true" strokeWidth={2} />}
-              </button>
-            </div>
-
-            <div className="flex-1" />
-
-            {/* Type filter toggle */}
-            <div className="flex items-center gap-0.5 bg-secondary-100 rounded-md p-0.5 mr-1">
-              {[
-                { value: 'all' as ContactFilter, label: t('common.all') },
-                { value: 'company' as ContactFilter, label: t('contacts.companies') },
-                { value: 'person' as ContactFilter, label: t('contacts.persons') },
-              ].map((opt) => (
-                <button
-                  key={opt.value}
-                  onClick={() => handleSelectFilter(opt.value)}
-                  className={clsx(
-                    'px-2 py-1 rounded text-xs font-medium transition-colors min-h-touch',
-                    selectedFilter === opt.value
-                      ? 'bg-white text-primary-600 shadow-sm'
-                      : 'text-secondary-500 hover:text-secondary-700',
-                  )}
-                  aria-label={opt.label}
-                  aria-pressed={selectedFilter === opt.value}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-
-            {/* View mode toggle */}
-            <div className="flex items-center gap-0.5 bg-secondary-100 rounded-md p-0.5">
-              {viewModeOptions.map((opt) => (
-                <button
-                  key={opt.value}
-                  onClick={() => setViewMode(opt.value as ContactViewMode)}
-                  className={clsx(
-                    'px-2 py-1 rounded text-xs font-medium transition-colors min-h-touch',
-                    viewMode === opt.value
-                      ? 'bg-white text-primary-600 shadow-sm'
-                      : 'text-secondary-500 hover:text-secondary-700',
-                  )}
-                  aria-label={opt.label}
-                  aria-pressed={viewMode === opt.value}
-                >
-                  {opt.value === 'list' && (
-                    <List className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
-                  )}
-                  {opt.value === 'table' && (
-                    <LayoutGrid className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
-                  )}
-                  {opt.value === 'cards' && (
-                    <LayoutGrid className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
-                  )}
-                </button>
-              ))}
-            </div>
-
-            {/* New contact */}
-            <button
-              onClick={handleCreate}
-              className="p-1.5 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
-              aria-label={t('contacts.create')}
-              title={t('contacts.create')}
-              data-testid="contacts-new-btn"
-            >
-              <Plus className="w-4 h-4 text-primary-600" aria-hidden="true" strokeWidth={2} />
-            </button>
-            <PrintButton targetId="contacts-table" />
-          </div>
-
-          {/* Saved Filters */}
-          <div className="px-3 py-1.5 border-b border-secondary-200 bg-secondary-50 flex-shrink-0">
-            <SavedFilters
-              entityType="contacts"
-              currentCriteria={{ search: debouncedSearch, type: contactType, sortBy, sortOrder, folderId }}
-              onLoadFilter={(criteria) => {
-                if (criteria.search) setSearch(criteria.search); else setSearch('');
-                if (criteria.sortBy) setSortBy(criteria.sortBy);
-                if (criteria.sortOrder) setSortOrder(criteria.sortOrder);
-                if (criteria.type) setSelectedFilter(criteria.type as ContactFilter);
-                setPage(1);
-              }}
-            />
-          </div>
-
-          {/* List */}
           <div className="flex-1 min-h-0" id="contacts-table">
             <ContactList
               contacts={filteredContacts}
@@ -486,7 +481,23 @@ export function ContactsListPage() {
         )}
       </div>
 
+      {/* Saved Filters Modal */}
+      {savedFiltersOpen && (
+        <Modal open={savedFiltersOpen} onClose={() => setSavedFiltersOpen(false)} title="Gespeicherte Filter">
+          <SavedFilters
+            entityType="contacts"
+            currentCriteria={{ search: debouncedSearch, type: contactType, sortBy, sortOrder, folderId }}
+            onLoadFilter={(criteria) => {
+              if (criteria.search) setSearch(criteria.search); else setSearch('');
+              if (criteria.sortBy) setSortBy(criteria.sortBy);
+              if (criteria.sortOrder) setSortOrder(criteria.sortOrder);
+              if (criteria.type) setSelectedFilter(criteria.type as ContactFilter);
+              setPage(1);
+              setSavedFiltersOpen(false);
+            }}
+          />
+        </Modal>
+      )}
     </div>
   );
 }
-