feat: folder permissions (ACLs) - share folders with users/groups, inherit to subfolders, permission dialog UI

frontend/src/api/contactFolders.ts

@@ -11,6 +11,30 @@ export interface ContactFolder {
   user_id: string;
   sort_order: number;
   contact_count: number;
+  access_level?: string; // owner | admin | write | read | none
+  is_shared?: boolean;
+}
+
+export type FolderPermissionLevel = 'none' | 'read' | 'write' | 'admin';
+
+export interface FolderPermission {
+  id: string;
+  folder_id: string;
+  user_id: string | null;
+  group_id: string | null;
+  user_name: string | null;
+  group_name: string | null;
+  permission_level: FolderPermissionLevel;
+  inherit_to_subfolders: boolean;
+  created_at: string | null;
+}
+
+export interface FolderAccessInfo {
+  folder_id: string;
+  access_level: string;
+  is_owner: boolean;
+  is_shared: boolean;
+  inherited_from: string | null;
 }
 
 export interface ContactFolderTreeNode extends ContactFolder {
@@ -39,6 +63,30 @@ export const reorderContactFolders = (folderId: string, orders: { id: string; so
 export const moveContactToFolder = (contactId: string, folderId: string | null) =>
   apiPut<{ id: string; folder_id: string | null }>(`/contact-folders/contacts/${contactId}/move`, { folder_id: folderId });
 
+// ── Folder Permissions ──
+
+export const fetchFolderPermissions = (folderId: string) =>
+  apiGet<{ items: FolderPermission[]; total: number }>(`/contact-folders/${folderId}/permissions`);
+
+export const createFolderPermission = (
+  folderId: string,
+  data: { user_id?: string; group_id?: string; permission_level: FolderPermissionLevel; inherit_to_subfolders?: boolean }
+) =>
+  apiPost<FolderPermission>(`/contact-folders/${folderId}/permissions`, data);
+
+export const updateFolderPermission = (
+  folderId: string,
+  permissionId: string,
+  data: { permission_level: FolderPermissionLevel; inherit_to_subfolders?: boolean }
+) =>
+  apiPut<FolderPermission>(`/contact-folders/${folderId}/permissions/${permissionId}`, data);
+
+export const deleteFolderPermission = (folderId: string, permissionId: string) =>
+  apiDelete(`/contact-folders/${folderId}/permissions/${permissionId}`);
+
+export const fetchFolderAccess = (folderId: string) =>
+  apiGet<FolderAccessInfo>(`/contact-folders/${folderId}/access`);
+
 // ── Tree builder ──
 
 export function buildFolderTree(folders: ContactFolder[]): ContactFolderTreeNode[] {

frontend/src/api/contacts.ts

@@ -112,3 +112,72 @@ export function useMoveContactToFolder() {
     },
   });
 }
+
+// ── Folder Permissions ──
+
+export function useFolderPermissions(folderId: string | null) {
+  return useQuery({
+    queryKey: ['folderPermissions', folderId],
+    queryFn: async () => {
+      if (!folderId) return { items: [], total: 0 };
+      const res = await apiGet<{ items: import('./contactFolders').FolderPermission[]; total: number }>(
+        `/contact-folders/${folderId}/permissions`
+      );
+      return res;
+    },
+    enabled: !!folderId,
+  });
+}
+
+export function useCreateFolderPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      folderId,
+      data,
+    }: {
+      folderId: string;
+      data: {
+        user_id?: string;
+        group_id?: string;
+        permission_level: string;
+        inherit_to_subfolders?: boolean;
+      };
+    }) => apiPost(`/contact-folders/${folderId}/permissions`, data),
+    onSuccess: (_data, vars) => {
+      queryClient.invalidateQueries({ queryKey: ['folderPermissions', vars.folderId] });
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}
+
+export function useUpdateFolderPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      folderId,
+      permissionId,
+      data,
+    }: {
+      folderId: string;
+      permissionId: string;
+      data: { permission_level: string; inherit_to_subfolders?: boolean };
+    }) => apiPut(`/contact-folders/${folderId}/permissions/${permissionId}`, data),
+    onSuccess: (_data, vars) => {
+      queryClient.invalidateQueries({ queryKey: ['folderPermissions', vars.folderId] });
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}
+
+export function useDeleteFolderPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ folderId, permissionId }: { folderId: string; permissionId: string }) =>
+      apiDelete(`/contact-folders/${folderId}/permissions/${permissionId}`),
+    onSuccess: (_data, vars) => {
+      queryClient.invalidateQueries({ queryKey: ['folderPermissions', vars.folderId] });
+      queryClient.invalidateQueries({ queryKey: ['contactFolders'] });
+    },
+  });
+}

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -10,7 +10,8 @@ import {
   useMoveContactToFolder,
 } from '@/api/hooks';
 import { buildFolderTree, type ContactFolderTreeNode, type ContactFolder } from '@/api/contactFolders';
-import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Tag, Trash2, Users } from 'lucide-react';
+import { ChevronRight, Folder, MoreVertical, Palette, Pencil, Pin, Plus, Shield, Tag, Trash2, Users } from 'lucide-react';
+import { FolderPermissionDialog } from './FolderPermissionDialog';
 
 export type ContactFilter = 'all' | 'company' | 'person' | `tag:${string}` | `folder:${string}`;
 
@@ -74,6 +75,7 @@ function FolderDropdown({
   onDelete,
   onColor,
   onPin,
+  onPermissions,
 }: {
   state: DropdownState;
   onClose: () => void;
@@ -81,6 +83,7 @@ function FolderDropdown({
   onDelete: (id: string) => void;
   onColor: (id: string) => void;
   onPin: (id: string) => void;
+  onPermissions: (id: string) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -96,6 +99,7 @@ function FolderDropdown({
     { 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: 'Rechte', icon: Shield, action: () => { onPermissions(state.folderId); onClose(); } },
     { label: 'L\u00f6schen', icon: Trash2, action: () => { onDelete(state.folderId); onClose(); }, danger: true },
   ];
 
@@ -268,6 +272,7 @@ export function ContactFolderTree({
   const [colorPicker, setColorPicker] = useState<{ folderId: string; color: string } | null>(null);
   const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
   const [multiSelectMode, setMultiSelectMode] = useState(false);
+  const [permDialog, setPermDialog] = useState<{ folderId: string; folderName: string } | null>(null);
 
   const { data: folders, isLoading: foldersLoading } = useContactFolders();
   const createFolderMut = useCreateContactFolder();
@@ -329,6 +334,11 @@ export function ContactFolderTree({
     updateFolderMut.mutate({ id, data: { pinned: !pinned } as any });
   };
 
+  const handlePermissions = (id: string) => {
+    const folder = folderList.find((f) => f.id === id);
+    setPermDialog({ folderId: id, folderName: folder?.name || 'Ordner' });
+  };
+
   // Drag and Drop handlers
   const handleDragOver = (e: React.DragEvent, folderId: string) => {
     e.preventDefault();
@@ -530,6 +540,15 @@ export function ContactFolderTree({
           onDelete={handleDelete}
           onColor={handleColor}
           onPin={handlePin}
+          onPermissions={handlePermissions}
+        />
+      )}
+
+      {permDialog && (
+        <FolderPermissionDialog
+          folderId={permDialog.folderId}
+          folderName={permDialog.folderName}
+          onClose={() => setPermDialog(null)}
         />
       )}
 

frontend/src/components/contacts/FolderPermissionDialog.tsx

@@ -0,0 +1,311 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { X, Shield, User, Users, Plus, Trash2, Lock, Eye, Pencil, ChevronDown } from 'lucide-react';
+import {
+  useFolderPermissions,
+  useCreateFolderPermission,
+  useUpdateFolderPermission,
+  useDeleteFolderPermission,
+} from '@/api/contacts';
+import { useUsers } from '@/api/users';
+import { useGroups } from '@/api/groups';
+import type { FolderPermission } from '@/api/contactFolders';
+
+interface FolderPermissionDialogProps {
+  folderId: string;
+  folderName: string;
+  onClose: () => void;
+}
+
+const PERM_LEVELS = [
+  { value: 'read', label: 'Lesen', icon: Eye, desc: 'Ordner und Kontakte ansehen' },
+  { value: 'write', label: 'Schreiben', icon: Pencil, desc: 'Kontakte bearbeiten, neue hinzufügen' },
+  { value: 'admin', label: 'Admin', icon: Shield, desc: 'Bearbeiten + Löschen + Rechte verwalten' },
+  { value: 'none', label: 'Kein Zugriff', icon: Lock, desc: 'Ordner wird ausgeblendet' },
+];
+
+function permIcon(level: string) {
+  const p = PERM_LEVELS.find((l) => l.value === level);
+  return p ? p.icon : Eye;
+}
+
+function permLabel(level: string) {
+  const p = PERM_LEVELS.find((l) => l.value === level);
+  return p ? p.label : level;
+}
+
+export function FolderPermissionDialog({ folderId, folderName, onClose }: FolderPermissionDialogProps) {
+  const { data: permData, isLoading } = useFolderPermissions(folderId);
+  const { data: usersData } = useUsers(1, 100);
+  const { data: groupsData } = useGroups();
+  const createMut = useCreateFolderPermission();
+  const updateMut = useUpdateFolderPermission();
+  const deleteMut = useDeleteFolderPermission();
+
+  const [showAdd, setShowAdd] = useState(false);
+  const [addType, setAddType] = useState<'user' | 'group'>('user');
+  const [addPrincipalId, setAddPrincipalId] = useState('');
+  const [addLevel, setAddLevel] = useState('read');
+  const [addInherit, setAddInherit] = useState(true);
+
+  const permissions = permData?.items ?? [];
+  const users = usersData?.items ?? [];
+  const groups = groupsData?.items ?? [];
+
+  const handleAdd = () => {
+    if (!addPrincipalId) return;
+    createMut.mutate({
+      folderId,
+      data: {
+        user_id: addType === 'user' ? addPrincipalId : undefined,
+        group_id: addType === 'group' ? addPrincipalId : undefined,
+        permission_level: addLevel,
+        inherit_to_subfolders: addInherit,
+      },
+    }, {
+      onSuccess: () => {
+        setShowAdd(false);
+        setAddPrincipalId('');
+        setAddLevel('read');
+        setAddInherit(true);
+      },
+    });
+  };
+
+  const handleUpdate = (perm: FolderPermission, newLevel: string) => {
+    updateMut.mutate({
+      folderId,
+      permissionId: perm.id,
+      data: { permission_level: newLevel, inherit_to_subfolders: perm.inherit_to_subfolders },
+    });
+  };
+
+  const handleToggleInherit = (perm: FolderPermission) => {
+    updateMut.mutate({
+      folderId,
+      permissionId: perm.id,
+      data: { permission_level: perm.permission_level, inherit_to_subfolders: !perm.inherit_to_subfolders },
+    });
+  };
+
+  const handleDelete = (perm: FolderPermission) => {
+    if (!confirm(`Berechtigung für ${perm.user_name || perm.group_name || 'diesen Eintrag'} entfernen?`)) return;
+    deleteMut.mutate({ folderId, permissionId: perm.id });
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[80vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-secondary-200">
+          <div className="flex items-center gap-2">
+            <Shield className="w-5 h-5 text-primary-600" strokeWidth={2} />
+            <h2 className="text-lg font-semibold text-secondary-800">Rechte: {folderName}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-secondary-400 hover:text-secondary-600 p-1 rounded-md hover:bg-secondary-100"
+            aria-label="Schließen"
+          >
+            <X className="w-5 h-5" strokeWidth={2} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          {/* Info banner */}
+          <div className="mb-4 p-3 bg-primary-50 border border-primary-200 rounded-lg text-sm text-primary-700">
+            <p className="font-medium mb-1">Ordner teilen</p>
+            <p className="text-primary-600">
+              Gewähre Benutzern oder Gruppen Zugriff auf diesen Ordner. Mit „Vererben" gelten die Rechte auch für alle Unterordner.
+            </p>
+          </div>
+
+          {/* Existing permissions */}
+          {isLoading ? (
+            <div className="text-sm text-secondary-400 py-4 text-center">Laden…</div>
+          ) : permissions.length === 0 ? (
+            <div className="text-sm text-secondary-400 py-4 text-center">
+              Noch keine Berechtigungen vergeben. Dieser Ordner ist nur für den Besitzer sichtbar.
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {permissions.map((perm) => {
+                const Icon = perm.user_id ? User : Users;
+                const name = perm.user_name || perm.group_name || 'Unbekannt';
+                const PermIcon = permIcon(perm.permission_level);
+                return (
+                  <div
+                    key={perm.id}
+                    className="flex items-center gap-3 p-3 border border-secondary-200 rounded-lg hover:bg-secondary-50"
+                  >
+                    <Icon className="w-4 h-4 text-secondary-400 flex-shrink-0" strokeWidth={2} />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-secondary-700 truncate">{name}</div>
+                      <div className="flex items-center gap-2 mt-0.5">
+                        <label className="flex items-center gap-1 text-xs text-secondary-500 cursor-pointer">
+                          <input
+                            type="checkbox"
+                            checked={perm.inherit_to_subfolders}
+                            onChange={() => handleToggleInherit(perm)}
+                            className="w-3 h-3 rounded border-secondary-300 text-primary-600"
+                          />
+                          Vererben
+                        </label>
+                      </div>
+                    </div>
+                    {/* Permission level selector */}
+                    <div className="relative">
+                      <select
+                        value={perm.permission_level}
+                        onChange={(e) => handleUpdate(perm, e.target.value)}
+                        className="appearance-none pl-8 pr-7 py-1.5 text-sm border border-secondary-200 rounded-md bg-white cursor-pointer hover:border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      >
+                        {PERM_LEVELS.map((l) => (
+                          <option key={l.value} value={l.value}>{l.label}</option>
+                        ))}
+                      </select>
+                      <PermIcon className="w-3.5 h-3.5 text-secondary-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" strokeWidth={2} />
+                      <ChevronDown className="w-3.5 h-3.5 text-secondary-400 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" strokeWidth={2} />
+                    </div>
+                    {/* Delete */}
+                    <button
+                      onClick={() => handleDelete(perm)}
+                      className="text-secondary-400 hover:text-red-600 p-1.5 rounded-md hover:bg-red-50 flex-shrink-0"
+                      title="Entfernen"
+                      aria-label="Berechtigung entfernen"
+                    >
+                      <Trash2 className="w-4 h-4" strokeWidth={2} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Add new permission */}
+          {showAdd ? (
+            <div className="mt-4 p-4 border-2 border-primary-200 rounded-lg bg-primary-50/50">
+              <div className="flex items-center gap-2 mb-3">
+                <Plus className="w-4 h-4 text-primary-600" strokeWidth={2} />
+                <span className="text-sm font-medium text-secondary-700">Neue Berechtigung</span>
+              </div>
+
+              {/* Type toggle */}
+              <div className="flex gap-2 mb-3">
+                <button
+                  onClick={() => { setAddType('user'); setAddPrincipalId(''); }}
+                  className={clsx(
+                    'flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border',
+                    addType === 'user' ? 'bg-primary-600 text-white border-primary-600' : 'bg-white text-secondary-600 border-secondary-200 hover:border-secondary-300'
+                  )}
+                >
+                  <User className="w-3.5 h-3.5" strokeWidth={2} />
+                  Benutzer
+                </button>
+                <button
+                  onClick={() => { setAddType('group'); setAddPrincipalId(''); }}
+                  className={clsx(
+                    'flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border',
+                    addType === 'group' ? 'bg-primary-600 text-white border-primary-600' : 'bg-white text-secondary-600 border-secondary-200 hover:border-secondary-300'
+                  )}
+                >
+                  <Users className="w-3.5 h-3.5" strokeWidth={2} />
+                  Gruppe
+                </button>
+              </div>
+
+              {/* Principal select */}
+              <select
+                value={addPrincipalId}
+                onChange={(e) => setAddPrincipalId(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md mb-3 bg-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500"
+              >
+                <option value="">{addType === 'user' ? 'Benutzer auswählen…' : 'Gruppe auswählen…'}</option>
+                {addType === 'user'
+                  ? users.map((u) => (
+                      <option key={u.id} value={u.id}>{u.name} ({u.email})</option>
+                    ))
+                  : groups.map((g) => (
+                      <option key={g.id} value={g.id}>{g.name}</option>
+                    ))
+                }
+              </select>
+
+              {/* Permission level */}
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                {PERM_LEVELS.map((l) => (
+                  <button
+                    key={l.value}
+                    onClick={() => setAddLevel(l.value)}
+                    className={clsx(
+                      'flex items-start gap-2 p-2.5 text-left rounded-md border text-sm',
+                      addLevel === l.value ? 'bg-primary-50 border-primary-400 text-primary-700' : 'bg-white border-secondary-200 text-secondary-600 hover:border-secondary-300'
+                    )}
+                  >
+                    <l.icon className="w-4 h-4 flex-shrink-0 mt-0.5" strokeWidth={2} />
+                    <div>
+                      <div className="font-medium">{l.label}</div>
+                      <div className="text-xs text-secondary-400">{l.desc}</div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+
+              {/* Inherit checkbox */}
+              <label className="flex items-center gap-2 mb-3 text-sm text-secondary-600 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={addInherit}
+                  onChange={(e) => setAddInherit(e.target.checked)}
+                  className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+                />
+                Auf Unterordner vererben
+              </label>
+
+              {/* Actions */}
+              <div className="flex justify-end gap-2">
+                <button
+                  onClick={() => setShowAdd(false)}
+                  className="px-3 py-1.5 text-sm text-secondary-600 hover:bg-secondary-100 rounded-md"
+                >
+                  Abbrechen
+                </button>
+                <button
+                  onClick={handleAdd}
+                  disabled={!addPrincipalId || createMut.isPending}
+                  className="px-4 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {createMut.isPending ? 'Speichern…' : 'Hinzufügen'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              onClick={() => setShowAdd(true)}
+              className="mt-4 w-full flex items-center justify-center gap-2 py-2.5 text-sm text-primary-600 border-2 border-dashed border-primary-200 rounded-lg hover:bg-primary-50 hover:border-primary-300 transition-colors"
+            >
+              <Plus className="w-4 h-4" strokeWidth={2} />
+              Berechtigung hinzufügen
+            </button>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-secondary-200 flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-secondary-600 hover:bg-secondary-100 rounded-md"
+          >
+            Schließen
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}