Runde Bedienelemente, Admin zusammengelegt, Kanäle entfallen

Vier der acht Änderungswünsche.

**Knöpfe.** Rund vierzig der siebzig Knöpfe waren blosser Text in Akzentfarbe,
von einem Link nicht zu unterscheiden. Jeder trägt jetzt Rahmen und
Grundfläche, über die Klasse .btn an einer Stelle definiert statt siebzigmal
als Klassenkette. Beim Drücken zieht der Knopf sich zusammen und bekommt einen
inneren Ring — er wirkt kurz dicker, ohne dass die Rahmenbreite sich ändert und
das Umfeld springt; die Rückmeldung setzt ohne Verzögerung ein und klingt
langsam ab, sonst bliebe ein kurzer Klick unsichtbar.

Dazu die neue Regel: Flächen bleiben eckig, alles Bedienbare ist rund. Damit
ist die Rundung eine Auskunft und keine Verzierung.

**Verwaltung.** Rollen, Vorlagen und Änderungsrichtlinie waren drei Einträge in
der Kopfzeile für etwas, das man selten und dann zusammenhängend braucht. Jetzt
ein Eintrag /admin mit Reiterleiste, dazu eine gemeinsame Tabs-Komponente, die
auch der Fallakte zeigt, welcher Reiter offen ist.

**Kanäle.** Ersatzlos entfernt, mitsamt Tabelle. Der Chat gehört dorthin, wo
der Vorgang steht; ein eigener Reiter mit freien Räumen war der Rückweg nach
Discord. Die Personalakte hat jetzt denselben Chat wie die Fallakte — ohne
„als Vermerk übernehmen", denn dafür braucht es einen Verlauf, und Meldungen
gehen nur an Erwähnte, nie in den allgemeinen Kanal: dass es zu jemandem eine
Personalakte gibt, ist selbst eine Auskunft. Ein CHECK erzwingt jetzt, dass
eine Nachricht zu genau einem Ort gehört.

**Kopfzeile.** Suchbalken statt Suchlink, als gewöhnliches Formular ohne ein
Byte im Bündel. Thema, Benachrichtigungen und Abmelden sitzen hinter dem
Profilbild, das von Discord kommt; wer keins hat, bekommt seine Initialen.

Nebenbei: Aktenzeichen in Tests waren nur auf vier Stellen eindeutig und
kollidierten zwischen Läufen, weil Akten nicht löschbar sind.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/(app)/admin/layout.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+import { notFound } from 'next/navigation'
+import { requireUser } from '@/lib/auth/current'
+import { de } from '@/lib/i18n/de'
+import { adminSections, hasAdminAccess } from './sections'
+import { Tabs } from '@/components/Tabs'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Kopf und Leiste der Verwaltung.
+ *
+ * Wie bei der Fallakte sind die Bereiche **eigene Seiten** unter einem
+ * gemeinsamen Layout, keine umgeschalteten Blöcke. Wer gar keinen Bereich
+ * sehen darf, bekommt 404 — die Verwaltung ist für ihn nicht vorhanden.
+ */
+export default async function AdminLayout({ children }: { children: ReactNode }) {
+  const user = await requireUser()
+  if (!hasAdminAccess(user.permissions)) notFound()
+
+  const bereiche = adminSections(user.permissions)
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <header>
+        <h1 className="font-condensed">{de.admin.heading}</h1>
+        <p className="mt-1 text-2xs text-text-dim">{de.admin.intro}</p>
+      </header>
+
+      <Tabs tabs={bereiche.map((bereich) => ({ href: bereich.href, label: bereich.label }))} />
+
+      <div className="mt-8">{children}</div>
+    </main>
+  )
+}

web/app/(app)/admin/page.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { requireUser } from '@/lib/auth/current'
+import { de } from '@/lib/i18n/de'
+import { adminSections } from './sections'
+
+export const metadata: Metadata = { title: de.admin.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Die Startseite der Verwaltung: was es gibt und wofür es da ist.
+ *
+ * Kein Weiterleiten auf den ersten Bereich. Wer die Verwaltung öffnet, weiss
+ * nicht immer, wo das Gesuchte liegt — eine Liste mit einem Satz je Bereich
+ * beantwortet das schneller als das Durchklicken der Leiste.
+ */
+export default async function AdminIndexPage() {
+  const user = await requireUser()
+  const bereiche = adminSections(user.permissions)
+
+  return (
+    <ul className="border-t border-line">
+      {bereiche.map((bereich) => (
+        <li key={bereich.key} className="border-b border-line">
+          <Link href={bereich.href} className="block py-3 no-underline">
+            <span className="font-condensed text-text">{bereich.label}</span>
+            <span className="mt-0.5 block text-2xs text-text-dim">{bereich.description}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

web/app/(app)/admin/richtlinie/PolicyForm.tsx

@@ -74,7 +74,7 @@ export function PolicyForm({
             setGrace(Number(event.target.value))
             setSaved(false)
           }}
-          className="mt-1.5 block w-24 border border-line bg-raised px-3 py-2 font-mono text-sm disabled:text-text-dim"
+          className="mt-1.5 block w-24 field font-mono disabled:text-text-dim"
         />
       </label>
 
@@ -95,7 +95,7 @@ export function PolicyForm({
           type="button"
           onClick={submit}
           disabled={pending}
-          className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
+          className="btn btn-primary"
         >
           {pending ? caseText.saving : settingsText.save}
         </button>

web/app/(app)/admin/richtlinie/page.tsx

@@ -13,8 +13,8 @@ export default async function PolicyPage() {
   const setting = await db.appSetting.findUnique({ where: { id: 1 } })
 
   return (
-    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
-      <h1 className="font-condensed">{de.settings.heading}</h1>
+    <section>
+      <h2 className="font-condensed">{de.settings.heading}</h2>
       <p className="mt-2 text-text-dim">{de.settings.intro}</p>
       <PolicyForm
         initial={{
@@ -23,6 +23,6 @@ export default async function PolicyPage() {
           entryEditMarkGrace: setting?.entryEditMarkGrace ?? false,
         }}
       />
-    </main>
+    </section>
   )
 }

web/app/(app)/admin/rollen/RoleRow.tsx

@@ -91,7 +91,7 @@ export function RoleRow({
               setCategory(event.target.value)
               setSaved(false)
             }}
-            className="border border-line bg-raised px-2 py-1"
+            className="field"
           >
             {CATEGORIES.map((value) => (
               <option key={value} value={value}>
@@ -109,7 +109,7 @@ export function RoleRow({
               setClearanceLevel(Number(event.target.value))
               setSaved(false)
             }}
-            className="border border-line bg-raised px-2 py-1"
+            className="field"
           >
             {levels.map((level) => (
               <option key={level.level} value={level.level}>
@@ -160,7 +160,7 @@ export function RoleRow({
           type="button"
           onClick={submit}
           disabled={pending || !dirty}
-          className="border border-line bg-raised px-3 py-1.5 font-condensed text-xs text-accent disabled:text-text-dim"
+          className="btn btn-primary"
         >
           {pending ? roleAdminText.saving : roleAdminText.save}
         </button>

web/app/(app)/admin/rollen/page.tsx

@@ -27,8 +27,8 @@ export default async function RoleAdminPage() {
   ])
 
   return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
-      <h1 className="font-condensed">{de.roleAdmin.heading}</h1>
+    <section>
+      <h2 className="font-condensed">{de.roleAdmin.heading}</h2>
       <p className="mt-2 max-w-(--container-measure) text-text-dim">{de.roleAdmin.intro}</p>
 
       {mappings.length === 0 ? (
@@ -73,6 +73,6 @@ export default async function RoleAdminPage() {
           })}
         </>
       )}
-    </main>
+    </section>
   )
 }

web/app/(app)/admin/sections.ts

@@ -0,0 +1,53 @@
+import type { EffectivePermissions } from '@/lib/auth/permissions'
+import { de } from '@/lib/i18n/de'
+
+/**
+ * Die Bereiche der Verwaltung, an einer Stelle.
+ *
+ * Vorher standen Rollenverwaltung, Vorlagen und Änderungsrichtlinie als drei
+ * eigene Einträge in der Kopfzeile — drei Einträge für etwas, das man selten
+ * und dann meist zusammenhängend braucht. Jetzt ist es ein Eintrag mit einer
+ * Leiste darunter.
+ *
+ * Die Rechteprüfung steht hier **nicht** als Berechtigung, sondern nur für die
+ * Anzeige: jede Seite prüft selbst noch einmal mit `requirePermission`. Eine
+ * versteckte Kachel ist kein Schutz.
+ */
+export type AdminSection = {
+  key: string
+  href: string
+  label: string
+  description: string
+}
+
+export function adminSections(p: EffectivePermissions): AdminSection[] {
+  const darf = (recht: 'roles.manage' | 'template.manage' | 'admin'): boolean =>
+    p.isAdmin || (recht !== 'admin' && p.permissions.has(recht))
+
+  const alle: (AdminSection & { sichtbar: boolean })[] = [
+    { key: 'roles', href: '/admin/rollen', sichtbar: darf('roles.manage'), ...text('roles') },
+    {
+      key: 'templates',
+      href: '/admin/vorlagen',
+      sichtbar: darf('template.manage'),
+      ...text('templates'),
+    },
+    { key: 'policy', href: '/admin/richtlinie', sichtbar: darf('admin'), ...text('policy') },
+    { key: 'log', href: '/admin/protokoll', sichtbar: darf('admin'), ...text('log') },
+    { key: 'system', href: '/admin/system', sichtbar: darf('admin'), ...text('system') },
+  ]
+
+  return alle.filter((bereich) => bereich.sichtbar).map(({ sichtbar: _, ...rest }) => rest)
+}
+
+function text(key: string): { label: string; description: string } {
+  return {
+    label: de.admin.sections[key] ?? key,
+    description: de.admin.descriptions[key] ?? '',
+  }
+}
+
+/** Ob jemand die Verwaltung überhaupt sieht. Für die Kopfzeile. */
+export function hasAdminAccess(p: EffectivePermissions): boolean {
+  return p.isAdmin || p.permissions.has('roles.manage') || p.permissions.has('template.manage')
+}

web/app/(app)/admin/system/page.tsx

@@ -54,8 +54,8 @@ export default async function SystemPage() {
   await requirePermission('admin')
 
   return (
-    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
-      <h1 className="font-condensed">{de.health.heading}</h1>
+    <section>
+      <h2 className="font-condensed">{de.health.heading}</h2>
       <Suspense
         fallback={
           <div className="mt-6">
@@ -91,7 +91,7 @@ export default async function SystemPage() {
           <a href="/api/admin/export?kind=bundle">{de.export.bundle}</a>
         </p>
       </section>
-    </main>
+    </section>
   )
 }
 

web/app/(app)/admin/vorlagen/TemplateEditor.tsx

@@ -85,7 +85,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
             <input
               value={name}
               onChange={(event) => setName(event.target.value)}
-              className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
+              className="mt-1 block w-full field"
             />
           </label>
 
@@ -94,7 +94,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
             <input
               value={description}
               onChange={(event) => setDescription(event.target.value)}
-              className="mt-1 block w-full border border-line bg-raised px-2 py-1 text-sm"
+              className="mt-1 block w-full field"
             />
           </label>
 
@@ -104,7 +104,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
               <input
                 value={numberPrefix}
                 onChange={(event) => setNumberPrefix(event.target.value)}
-                className="mt-1 block w-32 border border-line bg-raised px-2 py-1 font-mono text-sm"
+                className="mt-1 block w-32 field font-mono"
               />
             </label>
             <label className="block">
@@ -115,7 +115,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
                 max={8}
                 value={numberPadding}
                 onChange={(event) => setNumberPadding(Number(event.target.value))}
-                className="mt-1 block w-20 border border-line bg-raised px-2 py-1 font-mono text-sm"
+                className="mt-1 block w-20 field font-mono"
               />
             </label>
           </div>
@@ -127,7 +127,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
               onChange={(event) => setJson(event.target.value)}
               rows={16}
               spellCheck={false}
-              className="mt-1 block w-full border border-line bg-raised px-2 py-1 font-mono text-2xs"
+              className="mt-1 block w-full field font-mono text-2xs"
             />
             <span className="mt-1 block text-2xs text-text-dim">{templateAdminText.fieldsHelp}</span>
           </label>
@@ -137,7 +137,7 @@ export function TemplateEditor({ vorlage }: { vorlage: Vorlage }) {
               type="button"
               onClick={submit}
               disabled={pending || !geparst.ok}
-              className="border border-line bg-raised px-3 py-1.5 font-condensed text-accent disabled:text-text-dim"
+              className="btn btn-primary"
             >
               {pending ? caseText.saving : templateAdminText.save}
             </button>

web/app/(app)/admin/vorlagen/page.tsx

@@ -17,8 +17,8 @@ export default async function TemplateAdminPage() {
   })
 
   return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
-      <h1 className="font-condensed">{de.templateAdmin.heading}</h1>
+    <section>
+      <h2 className="font-condensed">{de.templateAdmin.heading}</h2>
       <p className="mt-2 max-w-(--container-measure) text-text-dim">{de.templateAdmin.intro}</p>
 
       {vorlagen.length === 0 ? (
@@ -41,6 +41,6 @@ export default async function TemplateAdminPage() {
           ))}
         </div>
       )}
-    </main>
+    </section>
   )
 }