feat: notification preferences system with plugin registry

- Add NotificationType and NotificationPreference models - Add get_notification_types() to BasePlugin for plugin registration - Add sync_notification_types() to PluginRegistry - Update create_notification() to check user preferences (returns Notification|None) - Add API endpoints: GET /types, GET /preferences, PATCH /preferences/{type_key} - Add NotificationPreferenceUpdate schema - Mail plugin registers 10 notification types with metadata - Add Alembic migration 0017 for new tables + seed data - Frontend: SettingsNotifications page with toggle switches - Frontend: Settings tab, route, hooks for notification preferences - i18n: notification settings keys (de/en)
2026-07-15 21:00:32 +02:00
parent c4d0ec6f7f
commit b0e987f790
15 changed files with 652 additions and 11 deletions
@@ -459,6 +459,42 @@ export function useDeleteNotification() {
  });
 }

+export interface NotificationTypeItem {
+  type_key: string;
+  plugin_name: string;
+  category: string;
+  label: string;
+  description: string | null;
+  is_enabled_by_default: boolean;
+  is_enabled: boolean;
+}
+
+export function useNotificationTypes() {
+  return useQuery({
+    queryKey: ['notification-types'],
+    queryFn: () => apiGet<{ items: NotificationTypeItem[] }>('/notifications/types'),
+  });
+}
+
+export function useNotificationPreferences() {
+  return useQuery({
+    queryKey: ['notification-preferences'],
+    queryFn: () => apiGet<{ items: { type_key: string; is_enabled: boolean }[] }>('/notifications/preferences'),
+  });
+}
+
+export function useUpdateNotificationPreference() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ typeKey, isEnabled }: { typeKey: string; isEnabled: boolean }) =>
+      apiPatch(`/notifications/preferences/${typeKey}`, { is_enabled: isEnabled }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notification-preferences'] });
+      queryClient.invalidateQueries({ queryKey: ['notification-types'] });
+    },
+  });
+}
+
 export function usePlugins() {
  return useQuery({
    queryKey: ['plugins'],
@@ -407,7 +407,7 @@
    "testConnection": "Verbindung testen",
    "connectionSuccess": "Verbindung erfolgreich.",
    "syncNow": "Jetzt synchronisieren",
-    "syncSuccess": "{{count}} E-Mails synchronisiert.",
+    "syncSuccess": "Synchronisierung erfolgreich",
    "selectAccount": "Account auswählen",
    "selectAccountFirst": "Bitte wählen Sie zuerst einen Account aus.",
    "folders": "Ordner",
@@ -560,9 +560,19 @@
    "sortSubject": "Betreff",
    "sortAsc": "Aufsteigend",
    "sortDesc": "Absteigend",
-    "syncSuccess": "Synchronisierung erfolgreich",
    "syncFailed": "Synchronisierung fehlgeschlagen",
    "syncing": "Synchronisiere...",
    "autoSyncEnabled": "Auto-Sync aktiv"
+  },
+  "notifications": {
+    "title": "Benachrichtigungseinstellungen",
+    "description": "Wählen Sie welche Benachrichtigungen Sie erhalten möchten",
+    "enabled": "Aktiviert",
+    "disabled": "Deaktiviert",
+    "saved": "Einstellung gespeichert",
+    "category": {
+      "mail": "E-Mail",
+      "general": "Allgemein"
+    }
  }
 }
@@ -407,7 +407,7 @@
    "testConnection": "Test Connection",
    "connectionSuccess": "Connection successful.",
    "syncNow": "Sync Now",
-    "syncSuccess": "{{count}} emails synced.",
+    "syncSuccess": "Sync successful",
    "selectAccount": "Select Account",
    "selectAccountFirst": "Please select an account first.",
    "folders": "Folders",
@@ -560,9 +560,19 @@
    "sortSubject": "Subject",
    "sortAsc": "Ascending",
    "sortDesc": "Descending",
-    "syncSuccess": "Sync successful",
    "syncFailed": "Sync failed",
    "syncing": "Syncing...",
    "autoSyncEnabled": "Auto-sync enabled"
+  },
+  "notifications": {
+    "title": "Notification Settings",
+    "description": "Choose which notifications you want to receive",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "saved": "Preference saved",
+    "category": {
+      "mail": "Mail",
+      "general": "General"
+    }
  }
 }
@@ -15,6 +15,7 @@ export function SettingsPage() {
    { to: '/settings/taxes', label: t('taxes.title'), icon: '\ud83d\udccb' },
    { to: '/settings/sequences', label: t('sequences.title'), icon: '\ud83d\udd22' },
    { to: '/settings/mail', label: t('mail.settings'), icon: '\ud83d\udce7' },
+    { to: '/settings/notifications', label: t('settings.notifications'), icon: '\ud83d\udd14' },
  ];

  return (
@@ -0,0 +1,158 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useToast } from '@/components/ui/Toast';
+import {
+  useNotificationTypes,
+  useUpdateNotificationPreference,
+} from '@/api/hooks';
+
+interface NotificationTypeItem {
+  type_key: string;
+  plugin_name: string;
+  category: string;
+  label: string;
+  description: string | null;
+  is_enabled_by_default: boolean;
+  is_enabled: boolean;
+}
+
+export function SettingsNotificationsPage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const { data, isLoading, error } = useNotificationTypes();
+  const updateMutation = useUpdateNotificationPreference();
+
+  const items: NotificationTypeItem[] = data?.items ?? [];
+
+  // Group by plugin_name
+  const grouped = useMemo(() => {
+    const map = new Map<string, NotificationTypeItem[]>();
+    for (const item of items) {
+      const key = item.plugin_name;
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)!.push(item);
+    }
+    return Array.from(map.entries());
+  }, [items]);
+
+  const handleToggle = (typeKey: string, isEnabled: boolean) => {
+    updateMutation.mutate(
+      { typeKey, isEnabled },
+      {
+        onSuccess: () => {
+          toast.success(t('notifications.saved'));
+        },
+        onError: (err: any) => {
+          toast.error(err.message || t('common.error'));
+        },
+      }
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <p className="text-secondary-500">{t('common.loading')}</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <p className="text-red-600">{t('common.error')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="settings-notifications-page">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-secondary-900">
+          {t('notifications.title')}
+        </h2>
+        <p className="mt-1 text-sm text-secondary-500">
+          {t('notifications.description')}
+        </p>
+      </div>
+
+      {grouped.length === 0 && (
+        <div className="rounded-lg border border-secondary-200 p-8 text-center">
+          <p className="text-secondary-500">{t('common.noResults')}</p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {grouped.map(([pluginName, pluginItems]) => (
+          <div
+            key={pluginName}
+            className="rounded-lg border border-secondary-200 bg-white shadow-sm overflow-hidden"
+          >
+            <div className="border-b border-secondary-200 bg-secondary-50 px-5 py-3">
+              <h3 className="text-lg font-semibold text-secondary-900 capitalize">
+                {pluginName}
+              </h3>
+            </div>
+            <div className="divide-y divide-secondary-100">
+              {pluginItems.map((item) => (
+                <div
+                  key={item.type_key}
+                  className="flex items-start justify-between gap-4 px-5 py-4"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-secondary-900">
+                      {item.label}
+                    </p>
+                    {item.description && (
+                      <p className="mt-0.5 text-xs text-secondary-500">
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                  <ToggleSwitch
+                    checked={item.is_enabled}
+                    onChange={(checked) => handleToggle(item.type_key, checked)}
+                    disabled={updateMutation.isPending}
+                    ariaLabel={item.label}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ToggleSwitch({
+  checked,
+  onChange,
+  disabled,
+  ariaLabel,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  ariaLabel: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
+        checked ? 'bg-primary-600' : 'bg-secondary-300'
+      }`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+          checked ? 'translate-x-5' : 'translate-x-0'
+        }`}
+      />
+    </button>
+  );
+}
@@ -29,6 +29,7 @@ import { DmsPage } from '@/pages/Dms';
 import { DmsTrashPage } from '@/pages/DmsTrash';
 import { MailPage } from '@/pages/Mail';
 import { MailSettingsPage } from '@/pages/MailSettings';
+import { SettingsNotificationsPage } from '@/pages/SettingsNotifications';

 const router = createBrowserRouter([
  {
@@ -81,6 +82,7 @@ const router = createBrowserRouter([
          { path: 'taxes', element: <SettingsTaxesPage /> },
          { path: 'sequences', element: <SettingsSequencesPage /> },
          { path: 'mail', element: <MailSettingsPage /> },
+          { path: 'notifications', element: <SettingsNotificationsPage /> },
        ],
      },
    ],