From 78738f5aa946a9496dd0a8c7cc7d58f7216a0bd8 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Tue, 28 Jul 2026 12:22:30 +0200
Subject: [PATCH] feat: folder multi-select mode with checkboxes, shows
 contacts from multiple folders

---
 .../components/contacts/ContactFolderTree.tsx | 133 +++++++++++++++---
 frontend/src/pages/ContactsList.tsx           |  12 +-
 2 files changed, 121 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index 76b0d2d..6104e92 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -34,6 +34,8 @@ export interface ContactFolderTreeProps {
   tags: string[];
   loading?: boolean;
   contacts?: { id: string; displayname: string; type: string; folder_id?: string | null }[];
+  multiSelectFolders?: string[];
+  onMultiSelectChange?: (folderIds: string[]) => void;
 }
 
 // Icons
@@ -137,6 +139,9 @@ function FolderTreeItem({
   onDragOver,
   onDragLeave,
   onDrop,
+  multiSelectMode,
+  multiSelectedFolders,
+  onToggleMultiSelect,
 }: {
   node: ContactFolderTreeNode;
   depth: number;
@@ -147,10 +152,14 @@ function FolderTreeItem({
   onDragOver: (e: React.DragEvent, folderId: string) => void;
   onDragLeave: (folderId: string) => void;
   onDrop: (e: React.DragEvent, folderId: string) => void;
+  multiSelectMode?: boolean;
+  multiSelectedFolders?: string[];
+  onToggleMultiSelect?: (folderId: string) => void;
 }) {
   const [expanded, setExpanded] = useState(true);
   const folderKey = `folder:${node.id}` as ContactFilter;
   const isActive = selectedFilter === folderKey;
+  const isChecked = multiSelectedFolders?.includes(node.id) ?? false;
 
   return (
     <div>
@@ -174,29 +183,45 @@ function FolderTreeItem({
               : 'text-secondary-700 hover:bg-secondary-100',
           )}
           onClick={() => {
-            setExpanded(!expanded);
-            onSelectFolder(node.id);
+            if (multiSelectMode && onToggleMultiSelect) {
+              onToggleMultiSelect(node.id);
+            } else {
+              setExpanded(!expanded);
+              onSelectFolder(node.id);
+            }
           }}
         >
-          {chevron(expanded)}
+          {multiSelectMode ? (
+            <input
+              type="checkbox"
+              checked={isChecked}
+              onChange={() => onToggleMultiSelect?.(node.id)}
+              onClick={(e) => e.stopPropagation()}
+              className="w-3.5 h-3.5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 flex-shrink-0 cursor-pointer"
+            />
+          ) : (
+            chevron(expanded)
+          )}
           {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>
           )}
         </div>
-        <button
-          type="button"
-          onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
-          className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
-          title="Optionen"
-          aria-label="Optionen"
-        >
-          {icon(ICONS.more, 'w-4 h-4')}
-        </button>
+        {!multiSelectMode && (
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
+            className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
+            title="Optionen"
+            aria-label="Optionen"
+          >
+            {icon(ICONS.more, 'w-4 h-4')}
+          </button>
+        )}
       </div>
 
-      {expanded && node.children.map((child) => (
+      {expanded && !multiSelectMode && node.children.map((child) => (
         <FolderTreeItem
           key={child.id}
           node={child}
@@ -208,6 +233,26 @@ function FolderTreeItem({
           onDragOver={onDragOver}
           onDragLeave={onDragLeave}
           onDrop={onDrop}
+          multiSelectMode={multiSelectMode}
+          multiSelectedFolders={multiSelectedFolders}
+          onToggleMultiSelect={onToggleMultiSelect}
+        />
+      ))}
+      {multiSelectMode && node.children.map((child) => (
+        <FolderTreeItem
+          key={child.id}
+          node={child}
+          depth={depth + 1}
+          selectedFilter={selectedFilter}
+          onSelectFolder={onSelectFolder}
+          onMoreClick={onMoreClick}
+          isDragOver={false}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          multiSelectMode={multiSelectMode}
+          multiSelectedFolders={multiSelectedFolders}
+          onToggleMultiSelect={onToggleMultiSelect}
         />
       ))}
     </div>
@@ -222,12 +267,15 @@ export function ContactFolderTree({
   tags,
   loading,
   contacts = [],
+  multiSelectFolders = [],
+  onMultiSelectChange,
 }: ContactFolderTreeProps) {
   const { t } = useTranslation();
   const [tagsOpen, setTagsOpen] = useState(true);
   const [dropdown, setDropdown] = useState<DropdownState | null>(null);
   const [colorPicker, setColorPicker] = useState<{ folderId: string; color: string } | null>(null);
   const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
+  const [multiSelectMode, setMultiSelectMode] = useState(false);
 
   const { data: folders, isLoading: foldersLoading } = useContactFolders();
   const createFolderMut = useCreateContactFolder();
@@ -344,6 +392,22 @@ export function ContactFolderTree({
     onSelect(`folder:${folderId}` as ContactFilter);
   }, [onSelect]);
 
+  const handleToggleMultiSelect = useCallback((folderId: string) => {
+    if (!onMultiSelectChange) return;
+    if (multiSelectFolders.includes(folderId)) {
+      onMultiSelectChange(multiSelectFolders.filter((id) => id !== folderId));
+    } else {
+      onMultiSelectChange([...multiSelectFolders, folderId]);
+    }
+  }, [multiSelectFolders, onMultiSelectChange]);
+
+  const handleToggleMultiSelectMode = () => {
+    setMultiSelectMode(!multiSelectMode);
+    if (multiSelectMode && onMultiSelectChange) {
+      onMultiSelectChange([]);
+    }
+  };
+
   return (
     <nav className="space-y-0.5" aria-label={t('contacts.title')} data-testid="contact-folder-tree">
       {/* Alle Kontakte */}
@@ -359,16 +423,40 @@ export function ContactFolderTree({
       {/* Folder tree header with add button */}
       <div className="flex items-center justify-between px-2 pt-2 pb-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"
-          aria-label="Neuer Ordner"
-        >
-          {icon(ICONS.plus, 'w-3.5 h-3.5')}
-        </button>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={handleToggleMultiSelectMode}
+            className={`text-secondary-400 hover:text-primary-600 p-0.5 ${multiSelectMode ? 'text-primary-600 bg-primary-50 rounded' : ''}`}
+            title="Mehrere Ordner auswählen"
+            aria-label="Mehrere Ordner auswählen"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <rect x="3" y="3" width="7" height="7" rx="1" />
+              <rect x="14" y="3" width="7" height="7" rx="1" />
+              <rect x="3" y="14" width="7" height="7" rx="1" />
+              <rect x="14" y="14" width="7" height="7" rx="1" />
+            </svg>
+          </button>
+          <button
+            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>
       </div>
 
+      {/* Multi-select info */}
+      {multiSelectMode && (
+        <div className="px-2 pb-1 text-[11px] text-primary-600">
+          {multiSelectFolders.length > 0
+            ? `${multiSelectFolders.length} Ordner ausgewählt`
+            : 'Ordner durch Anklicken auswählen'}
+        </div>
+      )}
+
       {/* Folder tree with drag-drop */}
       <div
         onDragOver={handleRootDragOver}
@@ -386,6 +474,9 @@ export function ContactFolderTree({
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
+            multiSelectMode={multiSelectMode}
+            multiSelectedFolders={multiSelectFolders}
+            onToggleMultiSelect={handleToggleMultiSelect}
           />
         ))}
 
diff --git a/frontend/src/pages/ContactsList.tsx b/frontend/src/pages/ContactsList.tsx
index 2ca1a4a..2cc3172 100644
--- a/frontend/src/pages/ContactsList.tsx
+++ b/frontend/src/pages/ContactsList.tsx
@@ -50,6 +50,7 @@ export function ContactsListPage() {
   const [groupState, setGroupState] = useState<GroupState>(emptyGroupState);
   const [viewsOpen, setViewsOpen] = useState(true);
   const [foldersOpen, setFoldersOpen] = useState(true);
+  const [multiSelectFolders, setMultiSelectFolders] = useState<string[]>([]);
   const [savedViews, setSavedViews] = useState<{ id: string; name: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode }[]>([]);
   const [activeViewId, setActiveViewId] = useState<string | null>(null);
   const openWindow = useWindowStore((s) => s.openWindow);
@@ -113,7 +114,10 @@ export function ContactsListPage() {
   // Filter by tag client-side if tag filter is active, then apply FilterPanel conditions
   const filteredContacts = useMemo(() => {
     let result = contacts;
-    if (tagFilter) {
+    // Multi-select folder filter — show contacts from multiple folders
+    if (multiSelectFolders.length > 0) {
+      result = result.filter((c) => c.folder_id != null && multiSelectFolders.includes(c.folder_id));
+    } else if (tagFilter) {
       result = result.filter((c) => {
         if (!c.tags) return false;
         return c.tags.split(',').map((t) => t.trim()).includes(tagFilter);
@@ -124,7 +128,7 @@ export function ContactsListPage() {
     // Apply SortPanel sorting
     result = applySorting(result, sortState);
     return result;
-  }, [contacts, tagFilter, filterState, sortState]);
+  }, [contacts, tagFilter, filterState, sortState, multiSelectFolders]);
 
   // Apply GroupPanel grouping
   const groupedContacts = useMemo(() => applyGrouping(filteredContacts, groupState), [filteredContacts, groupState]);
@@ -370,7 +374,7 @@ export function ContactsListPage() {
     ];
     registerItems('contacts', items);
     return () => unregisterPlugin('contacts');
-  }, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId]);
+  }, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId, multiSelectFolders]);
 
   return (
     <div className="flex flex-col h-full" data-testid="contacts-list-page">
@@ -486,6 +490,8 @@ export function ContactsListPage() {
                     onSelect={handleSelectFilter}
                     tags={allTags}
                     contacts={contacts}
+                    multiSelectFolders={multiSelectFolders}
+                    onMultiSelectChange={setMultiSelectFolders}
                   />
                 </div>
               )}