Phase 3: Plugin-UI-System (WordPress-Style)

Backend:
- PluginManifest um 5 neue UI-Felder erweitert: menu_items, page_routes,
  detail_tabs, settings_pages, dashboard_widgets (FrontendMenuItem,
  FrontendPageRoute, FrontendDetailTab, FrontendSettingsPage,
  FrontendDashboardWidget)
- GET /api/v1/plugins/active-manifests Endpoint liefert UI-Manifeste
  aller aktiven Plugins
- Registry.get_active_manifests() + PluginService.get_active_manifests()
- 12 Built-in Plugins mit UI-Manifest-Daten gefuellt (menu_items,
  page_routes, detail_tabs, settings_pages)
- Plugin-Install-System: POST /upload (ZIP), POST /install-url (URL)
  mit Validierung (Manifest, dangerous imports, SQL migrations)

Frontend:
- pluginStore.ts (Zustand) mit PluginUiManifest Typen + Selektoren
- useActivePluginManifests() React Query Hook
- PluginRegistry.tsx — fetcht Manifeste beim App-Start
- PluginLoader.tsx — dynamisches React.lazy() mit ErrorBoundary
- PluginRouteRenderer.tsx — Catch-all fuer Plugin-Routes
- routes/index.tsx — Catch-all Routes fuer Plugin-Pages + Settings
- Sidebar.tsx — dynamische Plugin Menu-Items mit Grouping + Icons
- Settings.tsx — dynamische Plugin Settings-Pages
- ContactDetail.tsx — dynamische Plugin Detail-Tabs mit Permissions
- AppShell.tsx — PluginRegistry Provider eingebunden
- SettingsPlugins.tsx — Install-UI (ZIP Upload + URL Install)
- plugins.ts — useUploadPlugin() + useInstallPluginFromUrl() Hooks

Docs & Templates:
- docs/plugin-development-guide.md — komplette Entwickler-Doku
- templates/plugin-template/ — Boilerplate mit allen Manifest-Feldern

Tests:
- 34 Vitest-Tests (PluginRegistry, PluginLoader, PluginRouteRenderer,
  pluginStore) — alle bestanden
- TSC: keine neuen Errors (nur pre-existing Dms.tsx)

frontend/src/pages/Settings.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { usePluginStore } from '@/store/pluginStore';
+import * as LucideIcons from 'lucide-react';
 
 export function SettingsPage() {
   const { t } = useTranslation();
+  const pluginSettingsPages = usePluginStore(s => s.getAllSettingsPages());
 
-  const navItems = [
+  const hardcodedNavItems = [
     { to: '/settings/system', label: t('systemSettings.title'), icon: '\u2699\ufe0f' },
     { to: '/settings/roles', label: t('settings.roles'), icon: '\ud83d\udd11' },
     { to: '/settings/users', label: t('settings.users'), icon: '\ud83d\udc65' },
@@ -21,6 +24,20 @@ export function SettingsPage() {
     { to: '/settings/theme', label: t('settings.theme', 'Theme'), icon: '\ud83c\udfa8' },
   ];
 
+  const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
+  const pluginNavItems = pluginSettingsPages
+    .filter(p => !existingPaths.has(`/settings/${p.path}`))
+    .map(p => ({
+      to: `/settings/${p.path}`,
+      label: t(p.label_key, p.label),
+      icon: (() => {
+        const Icon = (LucideIcons as any)[p.icon];
+        return Icon ? React.createElement(Icon, { className: 'w-4 h-4' }) : '\ud83d\udce6';
+      })(),
+    }));
+
+  const navItems = [...hardcodedNavItems, ...pluginNavItems];
+
   return (
     <div className="flex max-w-7xl mx-auto" data-testid="settings-page">
       <aside className="w-64 flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)]">