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/LadderEditor.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import { useMemo, useState, useTransition } from 'react'
+import { ladderAdminText } from '@/lib/i18n/admin'
+import { resolveAll, type LadderRung } from '@/lib/auth/ladders'
+import { deleteLadderAction, setLadderRolesAction } from './actions'
+
+export type RoleOption = {
+  discordRoleId: string
+  label: string
+  isPresent: boolean
+  ladderId: string | null
+  clearanceLevel: number
+  permissions: string[]
+  grantsMembership: boolean
+}
+
+/**
+ * Eine Leiter bearbeiten: welche Rollen darin stehen und in welcher Ordnung.
+ *
+ * Angezeigt wird von oben nach unten, weil man ein Ranggefüge so liest - die
+ * höchste Rolle zuerst. Gespeichert wird umgekehrt, `ladderRank` 0 ist unten.
+ * Die Umkehr steht genau an einer Stelle, in `speichern`.
+ *
+ * Die Vorschau rechnet **im Browser** mit derselben Funktion wie der Server
+ * (lib/auth/ladders.ts). Eine Vorschau, die den Stand vor dem Verschieben
+ * zeigt, wäre schlimmer als keine: sie sähe richtig aus und wäre falsch.
+ *
+ * Bewusst nicht optimistisch. Eine Änderung hier wirkt sofort für alle
+ * Träger dieser Rollen, deshalb Bestätigung und gesperrter Knopf statt einer
+ * vorweggenommenen Rückmeldung. Siehe docs/09-performance-und-ux.md.
+ */
+export function LadderEditor({
+  ladder,
+  order,
+  allRoles,
+  levels,
+}: {
+  ladder: { id: string; name: string; note: string | null }
+  /** Von unten nach oben, so wie es in der Datenbank steht. */
+  order: string[]
+  allRoles: RoleOption[]
+  levels: { level: number; name: string }[]
+}) {
+  // Im Zustand von oben nach unten, so wie es dasteht.
+  const [sprossen, setSprossen] = useState<string[]>(() => [...order].reverse())
+  const [fehler, setFehler] = useState<string | null>(null)
+  const [gespeichert, setGespeichert] = useState(false)
+  const [pending, startTransition] = useTransition()
+
+  const nachId = useMemo(
+    () => new Map(allRoles.map((rolle) => [rolle.discordRoleId, rolle])),
+    [allRoles],
+  )
+
+  const geaendert = sprossen.join() !== [...order].reverse().join()
+
+  /**
+   * Dieselbe Rechnung wie serverseitig, auf dem aktuellen Entwurf. `sprossen`
+   * steht von oben nach unten, `ladderRank` zählt von unten - daher der
+   * gedrehte Index.
+   */
+  const aufgeloest = useMemo(() => {
+    const rungs: LadderRung[] = sprossen.flatMap((id, index) => {
+      const rolle = nachId.get(id)
+      if (!rolle) return []
+      return [
+        {
+          discordRoleId: rolle.discordRoleId,
+          clearanceLevel: rolle.clearanceLevel,
+          permissions: rolle.permissions,
+          grantsMembership: rolle.grantsMembership,
+          ladderId: ladder.id,
+          ladderRank: sprossen.length - 1 - index,
+        },
+      ]
+    })
+    return resolveAll(rungs)
+  }, [sprossen, nachId, ladder.id])
+
+  const verfuegbar = allRoles.filter(
+    (rolle) => !sprossen.includes(rolle.discordRoleId) && rolle.ladderId === null,
+  )
+
+  function verschieben(index: number, richtung: -1 | 1) {
+    const ziel = index + richtung
+    if (ziel < 0 || ziel >= sprossen.length) return
+    const naechste = [...sprossen]
+    const [herausgenommen] = naechste.splice(index, 1)
+    naechste.splice(ziel, 0, herausgenommen!)
+    setSprossen(naechste)
+    setGespeichert(false)
+  }
+
+  function herausnehmen(id: string) {
+    setSprossen((aktuell) => aktuell.filter((eintrag) => eintrag !== id))
+    setGespeichert(false)
+  }
+
+  function aufnehmen(id: string) {
+    if (id === '') return
+    setSprossen((aktuell) => [id, ...aktuell])
+    setGespeichert(false)
+  }
+
+  function speichern() {
+    if (!confirm(ladderAdminText.confirmSave)) return
+    setFehler(null)
+    startTransition(async () => {
+      // Zurück in die Reihenfolge der Datenbank: unten zuerst.
+      const ergebnis = await setLadderRolesAction({
+        id: ladder.id,
+        roleIds: [...sprossen].reverse(),
+      })
+      if (ergebnis.ok) setGespeichert(true)
+      else setFehler(ergebnis.error)
+    })
+  }
+
+  function aufloesen() {
+    if (!confirm(ladderAdminText.confirmRemove)) return
+    setFehler(null)
+    startTransition(async () => {
+      const ergebnis = await deleteLadderAction(ladder.id)
+      if (!ergebnis.ok) setFehler(ergebnis.error)
+    })
+  }
+
+  return (
+    <section className="border-b border-line py-6">
+      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        <h3 className="font-condensed">{ladder.name}</h3>
+        {ladder.note ? <span className="text-2xs text-text-dim">{ladder.note}</span> : null}
+      </div>
+
+      {sprossen.length === 0 ? (
+        <p className="mt-3 text-2xs text-text-dim">{ladderAdminText.emptyLadder}</p>
+      ) : (
+        <ol className="mt-4 border-t border-line">
+          {sprossen.map((id, index) => {
+            const rolle = nachId.get(id)
+            if (!rolle) return null
+            const ergebnis = aufgeloest.get(id)
+            const geerbt = ergebnis ? [...ergebnis.inherited].sort() : []
+            const angehoben =
+              ergebnis !== undefined && ergebnis.clearanceLevel > ergebnis.ownClearanceLevel
+            const stufe = levels.find((l) => l.level === ergebnis?.clearanceLevel)
+
+            return (
+              <li key={id} className="border-b border-line py-3">
+                <div className="record-row">
+                  <span className="record-key">{sprossen.length - index}</span>
+                  <span className="record-title">{rolle.label}</span>
+                  {!rolle.isPresent ? (
+                    <span className="font-condensed text-2xs text-stamp-4">!</span>
+                  ) : null}
+                  <span className="font-condensed text-2xs text-text-dim">
+                    {index === 0 && sprossen.length > 1 ? ladderAdminText.top : null}
+                    {index === sprossen.length - 1 ? ladderAdminText.bottom : null}
+                  </span>
+
+                  <span className="ml-auto flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => verschieben(index, -1)}
+                      disabled={index === 0 || pending}
+                      className="btn btn-sm"
+                      title={ladderAdminText.up}
+                    >
+                      ↑
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => verschieben(index, 1)}
+                      disabled={index === sprossen.length - 1 || pending}
+                      className="btn btn-sm"
+                      title={ladderAdminText.down}
+                    >
+                      ↓
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => herausnehmen(id)}
+                      disabled={pending}
+                      className="btn btn-sm"
+                    >
+                      {ladderAdminText.drop}
+                    </button>
+                  </span>
+                </div>
+
+                <p className="mt-1.5 text-2xs text-text-dim">
+                  {geerbt.length === 0 ? (
+                    ladderAdminText.inheritsNothing
+                  ) : (
+                    <>
+                      {ladderAdminText.inherits}{' '}
+                      <span className="font-mono text-stamp-3">{geerbt.join(', ')}</span>
+                    </>
+                  )}
+                  {stufe ? (
+                    <>
+                      {' · '}
+                      {ladderAdminText.effectiveClearance} {stufe.level} · {stufe.name}
+                      {angehoben ? ` (${ladderAdminText.raisedBy})` : ''}
+                    </>
+                  ) : null}
+                </p>
+              </li>
+            )
+          })}
+        </ol>
+      )}
+
+      <div className="mt-4 flex flex-wrap items-center gap-3">
+        <label className="field-row">
+          <span className="field-label">{ladderAdminText.addRole}</span>
+          <select
+            value=""
+            onChange={(event) => aufnehmen(event.target.value)}
+            disabled={pending || verfuegbar.length === 0}
+            className="field"
+          >
+            <option value="">{ladderAdminText.none}</option>
+            {verfuegbar.map((rolle) => (
+              <option key={rolle.discordRoleId} value={rolle.discordRoleId}>
+                {rolle.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <button
+          type="button"
+          onClick={speichern}
+          disabled={pending || !geaendert}
+          className="btn btn-primary"
+        >
+          {pending ? ladderAdminText.saving : ladderAdminText.save}
+        </button>
+        <button type="button" onClick={aufloesen} disabled={pending} className="btn btn-sm">
+          {ladderAdminText.remove}
+        </button>
+
+        {gespeichert && !geaendert ? (
+          <span className="font-condensed text-2xs text-text-dim">{ladderAdminText.saved}</span>
+        ) : null}
+        {fehler ? <span className="font-condensed text-2xs text-stamp-4">{fehler}</span> : null}
+      </div>
+    </section>
+  )
+}