feat(C): Phase C — Core UI prüfen, vervollständigen, testen

C-ERR-BOUNDARY: ErrorBoundary erweitert (trace_id, Fallback-UI, PluginErrorBoundary) C-NOTIF: NotificationDropdown mit System-Channel-Link C-DOCS: ApiDocs.tsx Seite (Swagger UI iframe) C-A11Y: aria-label, min-h-touch, focus-visible ergänzt C-FE-TEST: 29 neue Tests (ErrorBoundary, ApiDocs, PrintButton, themeStore, NotificationDropdown) C-DOC: ui-design-guidelines.md aktualisiert Verifiziert (keine Änderungen nötig): - C-TAGS, C-CF, C-FILTER, C-DEDUP, C-ONBOARD, C-THEME, C-PWA, C-PRINT TSC: 0 errors, Build: erfolgreich, Vitest: 29/29 passed
2026-08-13 21:57:59 +02:00
parent 0e72d4624d
commit 25b2581653
15 changed files with 713 additions and 62 deletions
@@ -0,0 +1,50 @@
+/**
+ * ApiDocs page — embeds the FastAPI Swagger UI at /docs in an iframe.
+ * Provides in-app access to API documentation without leaving LeoCRM.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { BookOpen, ExternalLink } from 'lucide-react';
+
+export function ApiDocsPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col h-full" data-testid="api-docs-page">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200 bg-white">
+        <div className="flex items-center gap-3">
+          <BookOpen className="w-5 h-5 text-primary-600" aria-hidden="true" />
+          <div>
+            <h1 className="text-lg font-semibold text-secondary-900">
+              {t('apiDocs.title', 'API-Dokumentation')}
+            </h1>
+            <p className="text-sm text-secondary-500">
+              {t('apiDocs.description', 'Swagger UI — Interaktive API-Referenz')}
+            </p>
+          </div>
+        </div>
+        <a
+          href="/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-md transition-colors min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label={t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
+        >
+          <ExternalLink className="w-4 h-4" aria-hidden="true" />
+          {t('apiDocs.openInNewTab', 'In neuem Tab öffnen')}
+        </a>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <iframe
+          src="/docs"
+          title={t('apiDocs.title', 'API-Dokumentation')}
+          className="w-full h-full border-0"
+          aria-label={t('apiDocs.title', 'API-Dokumentation')}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ApiDocsPage;