feat(260929-dzu): Einstellungen > Eigene Module fuer jeden Benutzer, Verwaltung nur gemeinsam

- gemeinsame Oberflaeche (CustomModuleManager, Formular, Loeschdialog) fuer Verwaltung und Einstellungen
- Einstellungen: persoenliche Eintraege, Verwaltung sendet shared: true und zeigt nur gemeinsame
- Navigation, Texte de/en, Komponententests

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/app/(portal)/admin/custom-modules/page.tsx

@@ -1,74 +1,24 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import { type CustomModule, listCustomModules } from '@/lib/custom-modules-api';
-import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
+import { CustomModuleManager } from '@/components/custom-modules/custom-module-manager';
 import { useAuthStore } from '@/lib/stores/auth-store';
-import { useCategoryLabel } from '@/lib/use-category-label';
-import { CustomModuleFormModal } from './components/CustomModuleFormModal';
-import { DeleteCustomModuleDialog } from './components/DeleteCustomModuleDialog';
 
 /**
  * Verwaltung „Eigene Module“ (quick-260929-9wc, D-07, Vorbild
- * `admin/groups`). ADMIN und SUPER_ADMIN; die Rollenpruefung hier ist nur
- * Anzeige — durchgesetzt wird sie serverseitig durch `@Roles` an POST, PATCH
- * und DELETE von `/custom-modules`. Nach jedem erfolgreichen Anlegen,
- * Aendern oder Loeschen zieht die Seitenleiste ueber `bumpSidebarRefresh`
- * ohne Neuladen nach (D-05).
+ * `admin/groups`; quick-260929-dzu: nur die GEMEINSAMEN Eintraege). ADMIN und
+ * SUPER_ADMIN; die Rollenpruefung hier ist nur Anzeige — durchgesetzt wird sie
+ * serverseitig: die API verlangt fuer gemeinsame Eintraege (`shared: true`,
+ * Aendern, Loeschen) die Administrator-Rolle. Persoenliche Eintraege eines
+ * Administrators stehen wie bei jedem Benutzer unter Einstellungen.
  */
 export default function AdminCustomModulesPage() {
   const t = useTranslations('admin.customModules');
   const tCommon = useTranslations('common');
-  const categoryLabel = useCategoryLabel();
   const currentUser = useAuthStore((s) => s.user);
-  const bumpSidebarRefresh = useMarketplaceStore((s) => s.bumpSidebarRefresh);
-
-  const [modules, setModules] = useState<CustomModule[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [loadFailed, setLoadFailed] = useState(false);
-
-  const [showFormModal, setShowFormModal] = useState(false);
-  const [editing, setEditing] = useState<CustomModule | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<CustomModule | null>(null);
 
   const hasAccess = currentUser?.role === 'ADMIN' || currentUser?.role === 'SUPER_ADMIN';
 
-  const fetchModules = useCallback(async () => {
-    try {
-      setModules(await listCustomModules());
-      setLoadFailed(false);
-    } catch {
-      setLoadFailed(true);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (hasAccess) {
-      fetchModules();
-    } else {
-      setLoading(false);
-    }
-  }, [hasAccess, fetchModules]);
-
-  const handleChanged = () => {
-    fetchModules();
-    bumpSidebarRefresh();
-  };
-
-  const openCreate = () => {
-    setEditing(null);
-    setShowFormModal(true);
-  };
-
-  const openEdit = (mod: CustomModule) => {
-    setEditing(mod);
-    setShowFormModal(true);
-  };
-
   if (!hasAccess) {
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
@@ -78,97 +28,15 @@ export default function AdminCustomModulesPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
-        <button type="button" onClick={openCreate} className="btn btn-primary">
-          {t('create')}
-        </button>
-      </div>
-
-      <p className="text-sm text-muted-foreground">{t('description')}</p>
-
-      {loadFailed && (
-        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
-          {t('loadError')}
-        </div>
-      )}
-
-      {loading ? (
-        <p className="text-muted-foreground">{tCommon('loading')}</p>
-      ) : modules.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <h2 className="mb-2 text-lg font-semibold text-foreground">{t('noModules')}</h2>
-          <p className="mb-6 text-sm text-muted-foreground">{t('noModulesBody')}</p>
-          <button type="button" onClick={openCreate} className="btn btn-primary">
-            {t('create')}
-          </button>
-        </div>
-      ) : (
-        <div className="overflow-x-auto rounded-md border border-border">
-          <table className="w-full text-sm">
-            <thead className="bg-muted/50">
-              <tr>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('name')}</th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('url')}</th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('category')}</th>
-                <th className="px-4 py-3 text-right font-medium text-muted-foreground">{t('actions')}</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border">
-              {modules.map((mod) => (
-                <tr key={mod.id} className="transition-colors hover:bg-muted/30">
-                  <td className="px-4 py-3 font-medium text-foreground">
-                    <Link href={`/modules/custom/${mod.id}`} className="link">
-                      {mod.name}
-                    </Link>
-                  </td>
-                  <td className="max-w-[24rem] px-4 py-3 text-muted-foreground">
-                    <span className="block truncate" title={mod.url}>
-                      {mod.url}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 text-muted-foreground">{categoryLabel(mod.category)}</td>
-                  <td className="px-4 py-3 text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <button
-                        type="button"
-                        onClick={() => openEdit(mod)}
-                        className="rounded px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted"
-                      >
-                        {tCommon('edit')}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setDeleteTarget(mod)}
-                        className="rounded px-2 py-1 text-xs text-destructive transition-colors hover:bg-destructive/10"
-                      >
-                        {tCommon('delete')}
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-
-      {showFormModal && (
-        <CustomModuleFormModal
-          mod={editing}
-          onClose={() => setShowFormModal(false)}
-          onSaved={handleChanged}
-        />
-      )}
-
-      {deleteTarget && (
-        <DeleteCustomModuleDialog
-          mod={deleteTarget}
-          onClose={() => setDeleteTarget(null)}
-          onDeleted={handleChanged}
-        />
-      )}
-    </div>
+    <CustomModuleManager
+      scope="shared"
+      texts={{
+        title: t('title'),
+        description: t('description'),
+        create: t('create'),
+        noModules: t('noModules'),
+        noModulesBody: t('noModulesBody'),
+      }}
+    />
   );
 }