From 4bc11efc25dbcd5df0327d4ac33d4fe7666e15ec Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 20 Jul 2026 00:25:58 +0200
Subject: [PATCH] UI: Suchfeld 10% niedriger, Kontakt-Baum mit
 Firmen/Privatpersonen Trennung, Toolbar vereinfacht (Sort+View Toggle)

---
 .../components/contacts/ContactFolderTree.tsx | 153 ++++++++++--------
 .../src/components/shared/SearchDropdown.tsx  |   2 +-
 frontend/src/i18n/locales/de.json             |   1 +
 frontend/src/i18n/locales/en.json             |   1 +
 frontend/src/pages/ContactsList.tsx           | 104 ++++++++----
 5 files changed, 165 insertions(+), 96 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index d7c61a9..f333ba2 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 
@@ -11,12 +11,28 @@ export interface ContactFolderTreeProps {
   loading?: boolean;
 }
 
-const folderIcon = (path: string) => (
-  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+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} />
   </svg>
 );
 
+const chevron = (open: boolean) => (
+  <svg
+    className={clsx('w-3.5 h-3.5 transition-transform flex-shrink-0', open && 'rotate-90')}
+    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+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',
+};
+
 export function ContactFolderTree({
   selectedFilter,
   onSelect,
@@ -24,74 +40,79 @@ export function ContactFolderTree({
   loading,
 }: ContactFolderTreeProps) {
   const { t } = useTranslation();
+  const [tagsOpen, setTagsOpen] = useState(true);
 
-  const folders: { key: ContactFilter; label: string; icon: React.ReactNode }[] = [
-    {
-      key: 'all',
-      label: t('contacts.allContacts'),
-      icon: folderIcon('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'),
-    },
-    {
-      key: 'company',
-      label: t('contacts.companies'),
-      icon: folderIcon('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'),
-    },
-    {
-      key: 'person',
-      label: t('contacts.persons'),
-      icon: folderIcon('M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'),
-    },
-  ];
+  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',
+    );
 
   return (
-    <nav className="space-y-1" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
-      {folders.map((folder) => (
-        <button
-          key={folder.key}
-          onClick={() => onSelect(folder.key)}
-          className={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',
-            selectedFilter === folder.key
-              ? 'bg-primary-50 text-primary-700'
-              : 'text-secondary-700 hover:bg-secondary-100',
-          )}
-          aria-current={selectedFilter === folder.key ? 'true' : undefined}
-        >
-          {folder.icon}
-          <span>{folder.label}</span>
-        </button>
-      ))}
+    <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>
 
+      {/* Firmen */}
+      <button
+        onClick={() => onSelect('company')}
+        className={itemCls(selectedFilter === 'company')}
+        aria-current={selectedFilter === 'company' ? 'true' : undefined}
+      >
+        {icon(ICONS.company)}
+        <span>{t('contacts.companies')}</span>
+      </button>
+
+      {/* Privatpersonen */}
+      <button
+        onClick={() => onSelect('person')}
+        className={itemCls(selectedFilter === 'person')}
+        aria-current={selectedFilter === 'person' ? 'true' : undefined}
+      >
+        {icon(ICONS.person)}
+        <span>{t('contacts.persons')}</span>
+      </button>
+
+      {/* Tags — collapsible */}
       {tags.length > 0 && (
-        <>
-          <div className="my-2 border-t border-secondary-200" />
-          <div className="px-2 py-1 text-xs font-semibold text-secondary-500 uppercase tracking-wide">
-            {t('tags.title')}
-          </div>
-          {tags.map((tag) => {
-            const key = `tag:${tag}` as ContactFilter;
-            return (
-              <button
-                key={key}
-                onClick={() => onSelect(key)}
-                className={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',
-                  selectedFilter === key
-                    ? 'bg-primary-50 text-primary-700'
-                    : 'text-secondary-700 hover:bg-secondary-100',
-                )}
-                aria-current={selectedFilter === key ? 'true' : undefined}
-              >
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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" />
-                </svg>
-                <span className="truncate">{tag}</span>
-              </button>
-            );
-          })}
-        </>
+        <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>
       )}
 
       {loading && (
diff --git a/frontend/src/components/shared/SearchDropdown.tsx b/frontend/src/components/shared/SearchDropdown.tsx
index 8cfb6c9..7abbcfe 100644
--- a/frontend/src/components/shared/SearchDropdown.tsx
+++ b/frontend/src/components/shared/SearchDropdown.tsx
@@ -89,7 +89,7 @@ export function SearchDropdown({ placeholder }: SearchDropdownProps) {
         onFocus={() => query && setOpen(true)}
         onKeyDown={handleKeyDown}
         placeholder={placeholder || t('topbar.search')}
-        className="w-64 pl-10 pr-3 py-1.5 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-touch"
+        className="w-64 pl-10 pr-3 py-1 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
         aria-label={t('topbar.search')}
         role="combobox"
         aria-expanded={open}
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index e6d62b6..974923c 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -64,6 +64,7 @@
     "optional": "Optional",
     "back": "Zurück",
     "filter": "Filtern",
+    "sort": "Sortieren",
     "reset": "Zurücksetzen",
     "export": "Exportieren",
     "import": "Importieren",
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 1dfd381..c8de973 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -64,6 +64,7 @@
     "optional": "Optional",
     "back": "Back",
     "filter": "Filter",
+    "sort": "Sort",
     "reset": "Reset",
     "export": "Export",
     "import": "Import",
diff --git a/frontend/src/pages/ContactsList.tsx b/frontend/src/pages/ContactsList.tsx
index ce6f5e8..10550d6 100644
--- a/frontend/src/pages/ContactsList.tsx
+++ b/frontend/src/pages/ContactsList.tsx
@@ -6,10 +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 { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { Select } from '@/components/ui/Select';
 import { useToast } from '@/components/ui/Toast';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
@@ -232,33 +231,80 @@ export function ContactsListPage() {
           className="border-r border-secondary-200 bg-white"
           data-testid="contact-list-pane"
         >
-          {/* Toolbar */}
-          <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 bg-white flex-shrink-0">
-            <Input
-              type="search"
-              value={search}
-              onChange={(e) => handleSearch(e.target.value)}
-              placeholder={t('contacts.searchPlaceholder')}
-              aria-label={t('common.search')}
-              className="flex-1"
-            />
-            <Select
-              value={viewMode}
-              onChange={(e) => setViewMode(e.target.value as ContactViewMode)}
-              options={viewModeOptions}
-              aria-label={t('contacts.viewMode')}
-              className="w-auto"
-            />
-            <Select
-              value={sortBy}
-              onChange={(e) => { setSortBy(e.target.value); setPage(1); }}
-              options={sortOptions}
-              aria-label={t('common.filter')}
-              className="w-auto"
-            />
-            <Button size="sm" onClick={handleCreate} data-testid="contacts-new-btn">
-              {t('contacts.create')}
-            </Button>
+          {/* Toolbar — minimal: sort toggle + view toggle + new */}
+          <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'}
+              >
+                <svg className="w-3.5 h-3.5 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortOrder === 'asc' ? 'M3 4h13M3 8h9M3 12h5m13 0l-4 4m4-4l-4-4m4 4v6' : 'M3 4h13M3 8h9M3 12h5m13-4v6m0 0l-4-4m4 4l-4 4'} />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1" />
+
+            {/* 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' && (
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                    </svg>
+                  )}
+                  {opt.value === 'table' && (
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zM4 10h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zM4 16h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z" />
+                    </svg>
+                  )}
+                  {opt.value === 'cards' && (
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5h6v6H4V5zm10 0h6v6h-6V5zM4 13h6v6H4v-6zm10 0h6v6h-6v-6z" />
+                    </svg>
+                  )}
+                </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"
+            >
+              <svg className="w-4 h-4 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+            </button>
           </div>
 
           {/* List */}