From ee38b200f8afd57f2691646b74a50c13e6aade11 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 27 Jul 2026 23:46:16 +0200
Subject: [PATCH] fix: tighten folder tree spacing + collapsible search icon in
 toolbar

---
 .../components/contacts/ContactFolderTree.tsx |  2 +-
 .../src/components/layout/PluginToolbar.tsx   | 68 ++++++++++++++++---
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index 1758d86..ce2f217 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -165,7 +165,7 @@ function FolderTreeItem({
           onDragLeave={() => onDragLeave(node.id)}
           onDrop={(e) => onDrop(e, node.id)}
           className={clsx(
-            'group flex items-center gap-1.5 flex-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
+            'group flex items-center gap-1 flex-1 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'
diff --git a/frontend/src/components/layout/PluginToolbar.tsx b/frontend/src/components/layout/PluginToolbar.tsx
index 8ba2154..8a84eb4 100644
--- a/frontend/src/components/layout/PluginToolbar.tsx
+++ b/frontend/src/components/layout/PluginToolbar.tsx
@@ -21,15 +21,67 @@ function ToolbarButton({ item }: { item: ToolbarItem }) {
 }
 
 function ToolbarSearch({ item }: { item: ToolbarItem }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleToggle = () => {
+    if (expanded) {
+      // Collapse: clear and close
+      setValue('');
+      item.onSearch?.('');
+      setExpanded(false);
+    } else {
+      setExpanded(true);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    item.onSearch?.(e.target.value);
+  };
+
+  if (!expanded) {
+    return (
+      <button
+        onClick={handleToggle}
+        title={item.label || 'Suchen'}
+        aria-label={item.label || 'Suchen'}
+        className="inline-flex items-center justify-center p-1.5 rounded text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900 transition-colors cursor-pointer flex-shrink-0"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="7" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+      </button>
+    );
+  }
+
   return (
-    <input
-      type="text"
-      placeholder={item.searchPlaceholder || 'Suchen...'}
-      onChange={(e) => item.onSearch?.(e.target.value)}
-      className="w-28 sm:w-40 px-2 py-1 text-xs border border-secondary-200 rounded
-        focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
-        placeholder:text-secondary-400 flex-shrink-0"
-    />
+    <div className="flex items-center flex-shrink-0">
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={item.searchPlaceholder || 'Suchen...'}
+        onChange={handleChange}
+        onBlur={() => { if (!value) { setExpanded(false); } }}
+        className="w-28 sm:w-40 px-2 py-1 text-xs border border-secondary-200 rounded
+          focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
+          placeholder:text-secondary-400"
+      />
+      <button
+        onClick={handleToggle}
+        className="ml-1 p-1 rounded hover:bg-secondary-100 text-secondary-400 hover:text-secondary-600 transition-colors"
+        aria-label="Suche schließen"
+      >
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
   );
 }