feat: SaveViewDialog with selectable components (folder, view, filter, group, sort)

frontend/src/components/contacts/SaveViewDialog.tsx

@@ -0,0 +1,146 @@
+/**
+ * Dialog for saving a custom view with selectable components.
+ */
+
+import React, { useState } from 'react';
+import { Bookmark, Check, Folder, Filter, Group as GroupIcon, ArrowDownAZ, LayoutGrid } from 'lucide-react';
+
+export interface SaveViewSelection {
+  folder: boolean;
+  viewMode: boolean;
+  filter: boolean;
+  group: boolean;
+  sort: boolean;
+}
+
+interface SaveViewDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (name: string, selection: SaveViewSelection) => void;
+  hasFilter: boolean;
+  hasGroup: boolean;
+  hasSort: boolean;
+  hasFolder: boolean;
+}
+
+const defaultSelection: SaveViewSelection = {
+  folder: true,
+  viewMode: true,
+  filter: true,
+  group: true,
+  sort: true,
+};
+
+export function SaveViewDialog({ open, onClose, onSave, hasFilter, hasGroup, hasSort, hasFolder }: SaveViewDialogProps) {
+  const [name, setName] = useState('');
+  const [selection, setSelection] = useState<SaveViewSelection>(defaultSelection);
+
+  if (!open) return null;
+
+  const handleSave = () => {
+    if (!name.trim()) return;
+    onSave(name.trim(), selection);
+    setName('');
+    setSelection(defaultSelection);
+    onClose();
+  };
+
+  const toggle = (key: keyof SaveViewSelection) => {
+    setSelection((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const options: { key: keyof SaveViewSelection; label: string; icon: React.ReactNode; available: boolean; description: string }[] = [
+    { key: 'folder', label: 'Ordner-Auswahl', icon: <Folder className="w-4 h-4" strokeWidth={2} />, available: hasFolder, description: 'Aktuell ausgewählte Ordner' },
+    { key: 'viewMode', label: 'Ansichtsmodus', icon: <LayoutGrid className="w-4 h-4" strokeWidth={2} />, available: true, description: 'Liste, Tabelle oder Karten' },
+    { key: 'filter', label: 'Filter', icon: <Filter className="w-4 h-4" strokeWidth={2} />, available: hasFilter, description: 'Aktive Filterbedingungen' },
+    { key: 'group', label: 'Gruppierung', icon: <GroupIcon className="w-4 h-4" strokeWidth={2} />, available: hasGroup, description: 'Aktive Gruppierungen' },
+    { key: 'sort', label: 'Sortierung', icon: <ArrowDownAZ className="w-4 h-4" strokeWidth={2} />, available: hasSort, description: 'Aktive Sortierungen' },
+  ];
+
+  return (
+    <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-secondary-900/50" onClick={onClose}>
+      <div
+        className="bg-white rounded-lg shadow-xl w-[420px] max-w-[90vw]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-2 px-5 py-4 border-b border-secondary-100">
+          <Bookmark className="w-5 h-5 text-primary-600" strokeWidth={2} />
+          <h2 className="text-base font-semibold text-secondary-800">Ansicht speichern</h2>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4 space-y-4">
+          {/* Name input */}
+          <div>
+            <label className="block text-xs font-medium text-secondary-600 mb-1">Name der Ansicht</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="z.B. Meine Firmen-Kontakte"
+              autoFocus
+              onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
+              className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300"
+            />
+          </div>
+
+          {/* Component selection */}
+          <div>
+            <label className="block text-xs font-medium text-secondary-600 mb-2">Was soll gespeichert werden?</label>
+            <div className="space-y-1.5">
+              {options.map((opt) => (
+                <label
+                  key={opt.key}
+                  className={`
+                    flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors
+                    ${opt.available ? 'hover:bg-secondary-50' : 'opacity-40 cursor-not-allowed'}
+                  `}
+                >
+                  <input
+                    type="checkbox"
+                    checked={selection[opt.key] && opt.available}
+                    disabled={!opt.available}
+                    onChange={() => opt.available && toggle(opt.key)}
+                    className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span className="flex items-center gap-2 flex-1">
+                    <span className="text-secondary-500">{opt.icon}</span>
+                    <div>
+                      <div className="text-sm font-medium text-secondary-700">{opt.label}</div>
+                      <div className="text-[11px] text-secondary-400">{opt.description}</div>
+                    </div>
+                  </span>
+                  {!opt.available && (
+                    <span className="text-[10px] text-secondary-400 italic">nicht aktiv</span>
+                  )}
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-secondary-100">
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100 rounded-md transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={!name.trim()}
+            className="
+              inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md transition-colors
+              ${name.trim() ? 'bg-primary-600 hover:bg-primary-700' : 'bg-secondary-300 cursor-not-allowed'}
+            "
+          >
+            <Check className="w-4 h-4" strokeWidth={2} />
+            Speichern
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ContactsList.tsx

@@ -23,6 +23,7 @@ import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, LayoutGrid
 import { FilterPanel, applyFilters, emptyFilterState, type FilterState, type SavedFilter } from '@/components/contacts/FilterPanel';
 import { SortPanel, applySorting, emptySortState, type SortState } from '@/components/contacts/SortPanel';
 import { GroupPanel, applyGrouping, emptyGroupState, type GroupState, type GroupedContacts } from '@/components/contacts/GroupPanel';
+import { SaveViewDialog, type SaveViewSelection } from '@/components/contacts/SaveViewDialog';
 import {
   useUnifiedContacts,
   useUnifiedContact,
@@ -51,9 +52,10 @@ export function ContactsListPage() {
   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 [savedViews, setSavedViews] = useState<{ id: string; name: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode; multiSelectFolders: string[]; selection: SaveViewSelection }[]>([]);
   const [activeViewId, setActiveViewId] = useState<string | null>(null);
   const [savedFilters, setSavedFilters] = useState<SavedFilter[]>([]);
+  const [saveViewDialogOpen, setSaveViewDialogOpen] = useState(false);
   const openWindow = useWindowStore((s) => s.openWindow);
 
   // Debounce search
@@ -202,10 +204,13 @@ export function ContactsListPage() {
     setActiveView('list');
   }, []);
 
-  // Save current view configuration as a custom view
+  // Save current view configuration as a custom view — opens dialog
   const handleSaveView = useCallback(() => {
-    const name = window.prompt('Name für diese Ansicht:', 'Meine Ansicht');
+    setSaveViewDialogOpen(true);
-    if (!name) return;
+  }, []);
+
+  // Actually save the view with selection
+  const handleSaveViewConfirm = useCallback((name: string, selection: SaveViewSelection) => {
     const id = `view-${Date.now()}`;
     setSavedViews((prev) => [...prev, {
       id,
@@ -215,17 +220,22 @@ export function ContactsListPage() {
       groupState: { ...groupState },
       selectedFilter,
       viewMode,
+      multiSelectFolders: [...multiSelectFolders],
+      selection,
     }]);
     setActiveViewId(id);
-  }, [filterState, sortState, groupState, selectedFilter, viewMode]);
+  }, [filterState, sortState, groupState, selectedFilter, viewMode, multiSelectFolders]);
 
-  // Apply a saved custom view
+  // Apply a saved custom view — only selected components
-  const applySavedView = useCallback((view: { id: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode }) => {
+  const applySavedView = useCallback((view: { id: string; filterState: FilterState; sortState: SortState; groupState: GroupState; selectedFilter: ContactFilter; viewMode: ContactViewMode; multiSelectFolders: string[]; selection: SaveViewSelection }) => {
-    setFilterState({ ...view.filterState });
+    if (view.selection.folder) {
-    setSortState({ ...view.sortState });
+      setSelectedFilter(view.selectedFilter);
-    setGroupState({ ...view.groupState });
+      setMultiSelectFolders(view.multiSelectFolders || []);
-    setSelectedFilter(view.selectedFilter);
+    }
-    setViewMode(view.viewMode);
+    if (view.selection.viewMode) setViewMode(view.viewMode);
+    if (view.selection.filter) setFilterState({ ...view.filterState });
+    if (view.selection.group) setGroupState({ ...view.groupState });
+    if (view.selection.sort) setSortState({ ...view.sortState });
     setActiveViewId(view.id);
     setPage(1);
   }, []);
@@ -398,7 +408,7 @@ export function ContactsListPage() {
     ];
     registerItems('contacts', items);
     return () => unregisterPlugin('contacts');
-  }, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, handleSaveFilter, handleLoadFilter, handleDeleteFilter, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId, multiSelectFolders, savedFilters]);
+  }, [handleSearch, handleCreate, handleSelectFilter, handleSaveView, applySavedView, deleteSavedView, handleSaveViewConfirm, handleSaveFilter, handleLoadFilter, handleDeleteFilter, t, registerItems, unregisterPlugin, selectedFilter, viewMode, sortOptions, viewModeOptions, filterState, contactType, sortState, groupState, savedViews, activeViewId, multiSelectFolders, savedFilters, saveViewDialogOpen]);
 
   return (
     <div className="flex flex-col h-full" data-testid="contacts-list-page">
@@ -666,6 +676,17 @@ export function ContactsListPage() {
           />
         </Modal>
       )}
+
+      {/* Save View Dialog */}
+      <SaveViewDialog
+        open={saveViewDialogOpen}
+        onClose={() => setSaveViewDialogOpen(false)}
+        onSave={handleSaveViewConfirm}
+        hasFilter={filterState.conditions.length > 0}
+        hasGroup={groupState.conditions.length > 0}
+        hasSort={sortState.conditions.length > 0}
+        hasFolder={selectedFilter !== 'all' || multiSelectFolders.length > 0}
+      />
     </div>
   );
 }