design(verwaltung): Einstellungen und Verwaltung aufgeraeumt

Gemeinsame Navigation fuer Einstellungen und Verwaltung (Verwaltung in
Benutzer und Zugang / Module / Anbindungen gegliedert), einheitlicher
Seitenkopf und Abschnittskarten, Speichern in der Kartenfusszeile.
Menuepunkt 'Administrator' heisst 'Verwaltung'; Seitentitel gleich den
Navigationseintraegen. Kein 'Zurueck zum Dashboard' mehr. Tabellen ohne
waagerechte Seitenscrollleiste; auf dem Handy Auswahlliste statt Liste.

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

apps/web/src/components/custom-modules/custom-module-manager.tsx

@@ -6,6 +6,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { type CustomModule, listCustomModules } from '@/lib/custom-modules-api';
 import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
 import { useCategoryLabel } from '@/lib/use-category-label';
+import { PageHeader } from '@/components/control-center/page-header';
+import { SettingsSection } from '@/components/control-center/settings-section';
 import { CustomModuleFormModal } from './custom-module-form-modal';
 import { DeleteCustomModuleDialog } from './delete-custom-module-dialog';
 
@@ -84,20 +86,19 @@ export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps)
   };
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className={`${shared ? 'text-2xl' : 'text-lg'} font-semibold text-foreground`}>
-          {texts.title}
-        </h1>
-        <button type="button" onClick={openCreate} className="btn btn-primary">
-          {texts.create}
-        </button>
-      </div>
-
-      <p className="text-sm text-muted-foreground">{texts.description}</p>
+    <div>
+      <PageHeader
+        title={texts.title}
+        description={texts.description}
+        actions={
+          <button type="button" onClick={openCreate} className="btn btn-primary">
+            {texts.create}
+          </button>
+        }
+      />
 
       {loadFailed && (
-        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+        <div className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
           {tManage('loadError')}
         </div>
       )}
@@ -105,30 +106,34 @@ export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps)
       {/* Bei einem Ladefehler ohne Eintraege steht nur die Fehlermeldung da —
           „keine Eintraege“ waere dann falsch. */}
       {loading ? (
-        <p className="text-muted-foreground">{tCommon('loading')}</p>
+        <p className="text-sm text-muted-foreground">{tCommon('loading')}</p>
       ) : modules.length === 0 && loadFailed ? null : 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">{texts.noModules}</h2>
-          <p className="mb-6 text-sm text-muted-foreground">{texts.noModulesBody}</p>
-          <button type="button" onClick={openCreate} className="btn btn-primary">
-            {texts.create}
-          </button>
-        </div>
+        <SettingsSection>
+          <div className="flex flex-col items-start gap-3">
+            <div>
+              <p className="text-sm font-medium text-foreground">{texts.noModules}</p>
+              <p className="mt-1 text-sm text-muted-foreground">{texts.noModulesBody}</p>
+            </div>
+            <button type="button" onClick={openCreate} className="btn btn-secondary">
+              {texts.create}
+            </button>
+          </div>
+        </SettingsSection>
       ) : (
-        <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">
+        <SettingsSection flush>
+          <table className="w-full table-fixed text-sm">
+            <thead>
+              <tr className="border-b border-border">
+                <th className="w-[28%] px-5 pb-2 text-left text-xs font-medium text-muted-foreground">
                   {t('name')}
                 </th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                <th className="px-5 pb-2 text-left text-xs font-medium text-muted-foreground">
                   {t('url')}
                 </th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                <th className="w-[18%] px-5 pb-2 text-left text-xs font-medium text-muted-foreground">
                   {t('category')}
                 </th>
-                <th className="px-4 py-3 text-right font-medium text-muted-foreground">
+                <th className="w-[10rem] px-5 pb-2 text-right text-xs font-medium text-muted-foreground">
                   {tManage('actions')}
                 </th>
               </tr>
@@ -136,30 +141,32 @@ export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps)
             <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">
+                  <td className="truncate px-5 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">
+                  <td className="px-5 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">
+                  <td className="truncate px-5 py-3 text-muted-foreground">
+                    {categoryLabel(mod.category)}
+                  </td>
+                  <td className="px-5 py-3 text-right">
+                    <div className="flex items-center justify-end gap-1">
                       <button
                         type="button"
                         onClick={() => openEdit(mod)}
-                        className="rounded px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted"
+                        className="btn btn-subtle text-xs"
                       >
                         {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"
+                        className="btn btn-subtle text-xs text-destructive"
                       >
                         {tCommon('delete')}
                       </button>
@@ -169,7 +176,7 @@ export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps)
               ))}
             </tbody>
           </table>
-        </div>
+        </SettingsSection>
       )}
 
       {showFormModal && (