Ranggefuege: Rollen, die aufeinander aufbauen

Bisher trug jede Rolle ihre Rechte vollstaendig selbst. Bei achtzehn Rollen
und zweiundzwanzig Rechten heisst das, dass eine hoehere Rangrolle die ganze
Liste der darunterliegenden noch einmal abhaken muss - beim Anlegen
fehleranfaellig und bei jeder spaeteren Aenderung doppelt zu pflegen.

Ein Gefuege ist eine benannte, geordnete Folge von Rollen. Jede Sprosse
erbt alles von jeder Sprosse unter ihr, verwaltet wird nur noch das, was
oben dazukommt. Geerbt wird nicht nur die Rechteliste, sondern auch
Freigabestufe und Anmeldung: sonst waere eine Befoerderung unter Umstaenden
eine Herabstufung, naemlich immer dann, wenn Discord beim Befoerdern die
alte Rangrolle abnimmt.

Die Ordnung ist bewusst eine Reihenfolge und kein Zeiger je Rolle - ueber
ganzen Zahlen gibt es keinen Zyklus, den man abfangen muesste. Aufloesen
eines Gefueges laesst die Rollen stehen und nimmt nur das Geerbte weg.

Die Rechnung steht als reine Funktion in lib/auth/ladders.ts und wird an
drei Stellen benutzt: bei der Rechteaufloesung, in der Verwaltung und in
der Vorschau des Editors, die im Browser mitrechnet. Eine Vorschau, die den
Stand vor dem Verschieben zeigt, waere schlimmer als keine.

Die Rollenseite zeigt Geerbtes kursiv und gesperrt an, damit dort niemand
blind Kaestchen setzt, die laengst gesetzt sind.

Nebenbei: Aenderungen an der Rollenzuordnung landen jetzt im Protokoll, mit
Vorher und Nachher. Wer Rollen aendert, aendert die Rechte anderer - genau
dafuer ist es da.

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

@@ -0,0 +1,81 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { listLadders } from '@/lib/roles/ladders'
+import { de } from '@/lib/i18n/de'
+import { LadderEditor } from './LadderEditor'
+import { NewLadderForm } from './NewLadderForm'
+
+export const metadata: Metadata = { title: de.ladderAdmin.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Ranggefüge verwalten.
+ *
+ * Eigene Seite und nicht ein weiterer Block auf der Rollenseite: dort steht
+ * jede Rolle für sich mit zweiundzwanzig Kästchen, hier steht die Ordnung
+ * zwischen den Rollen. Das sind zwei verschiedene Fragen, und beide brauchen
+ * Platz.
+ */
+export default async function LadderAdminPage() {
+  const user = await requireUser()
+  if (!user.permissions.isAdmin && !user.permissions.permissions.has('roles.manage')) {
+    notFound()
+  }
+
+  const [leitern, rollen, stufen] = await Promise.all([
+    listLadders(user.permissions),
+    db.roleMapping.findMany({
+      orderBy: [{ sortOrder: 'desc' }, { label: 'asc' }],
+      select: {
+        discordRoleId: true,
+        label: true,
+        ladderId: true,
+        isPresent: true,
+        clearanceLevel: true,
+        permissions: true,
+        grantsMembership: true,
+      },
+    }),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+  ])
+
+  return (
+    <section>
+      <h2 className="font-condensed">{de.ladderAdmin.heading}</h2>
+      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.ladderAdmin.intro}
+      </p>
+      <p className="mt-2 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.ladderAdmin.why}
+      </p>
+
+      {rollen.length === 0 ? (
+        <p className="mt-8 text-text-dim">{de.ladderAdmin.noRoles}</p>
+      ) : (
+        <>
+          <div className="mt-6">
+            <NewLadderForm />
+          </div>
+
+          {leitern.length === 0 ? (
+            <p className="mt-10 text-text-dim">{de.ladderAdmin.empty}</p>
+          ) : (
+            <div className="mt-10 border-t border-line">
+              {leitern.map((leiter) => (
+                <LadderEditor
+                  key={leiter.id}
+                  ladder={{ id: leiter.id, name: leiter.name, note: leiter.note }}
+                  order={leiter.roles.map((rolle) => rolle.discordRoleId)}
+                  allRoles={rollen}
+                  levels={stufen.map((stufe) => ({ level: stufe.level, name: stufe.name }))}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  )
+}