feat(protokoll): Protokoll ansehen, mit Filtern und Mandantensicht (#45)

src/app/(app)/laeufe/[id]/page.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { ArrowLeft, MessageSquare, Printer, Star } from "lucide-react";
+import { ArrowLeft, MessageSquare, Printer, ScrollText, Star } from "lucide-react";
 import { LaufStatus, SchrittTyp, SchrittZustand } from "@/generated/prisma/enums";
 import { Markdown } from "@/components/markdown";
 import { AbschnittHuelle } from "@/components/laeufe/abschnitt-huelle";
@@ -19,6 +19,7 @@ import { SchrittWert } from "@/components/laeufe/schritt-wert";
 import { SchrittZustandWaehlen, ZustandKennzeichen } from "@/components/laeufe/schritt-zustand";
 import { darf } from "@/server/auth/rollen";
 import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
+import { protokollDesLaufs } from "@/server/queries/protokoll";
 import {
   kommentareDesLaufs,
   laufZumAbarbeiten,
@@ -293,6 +294,9 @@ export default async function LaufSeite({
   if (!daten) notFound();
 
   const kommentare = await kommentareDesLaufs(id, benutzer);
+  // Die Sicht hat `laufHolen` oben schon angewandt; hier geht es nur noch um die
+  // Einträge dieses Laufs (#023).
+  const laufProtokoll = await protokollDesLaufs(id);
   /*
    * Die Personenliste nur fuer den Onboarding-Fall holen — sonst stuende in
    * jedem Seitenaufbau eine Abfrage, die niemand braucht.
@@ -416,6 +420,41 @@ export default async function LaufSeite({
           </div>
         )}
       </section>
+
+      {/*
+       * Die Geschichte dieses Laufs, eingeklappt (#023). Sie steht hier und
+       * nicht nur unter Verwaltung → Protokoll, weil die Frage „wer hat das
+       * zurückgeholt“ am Lauf aufkommt und nicht in der Verwaltung. Eingeklappt,
+       * weil ein abgearbeiteter Lauf Dutzende Einträge hat und sie die Schritte
+       * sonst aus dem Bild schieben.
+       *
+       * Kein eigenes Recht: wer den Lauf sehen darf, darf auch sehen, was an ihm
+       * geschehen ist. Die Mandantensicht hat `laufHolen` oben schon angewandt.
+       */}
+      {laufProtokoll.length > 0 ? (
+        <section className="mt-4 rounded-karte border border-linie bg-flaeche p-4 md:p-5">
+          <details>
+            <summary className="flex min-h-11 cursor-pointer items-center gap-2 text-lg font-semibold md:min-h-0">
+              <ScrollText className="size-5 text-nebentext" strokeWidth={1.75} aria-hidden="true" />
+              Protokoll dieses Laufs
+              <span className="text-sm font-normal text-nebentext">({laufProtokoll.length})</span>
+            </summary>
+            <ol className="mt-3 flex flex-col gap-2">
+              {laufProtokoll.map((eintrag) => (
+                <li key={eintrag.id} className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm">
+                  <span className="mono shrink-0 text-xs text-nebentext">
+                    {ZEITPUNKT.format(eintrag.erstelltAm)}
+                  </span>
+                  <span className="min-w-0 break-words">{eintrag.aktion}</span>
+                  <span className="text-xs text-nebentext">
+                    {eintrag.urheber ? eintrag.urheber.name : "Systemlauf"}
+                  </span>
+                </li>
+              ))}
+            </ol>
+          </details>
+        </section>
+      ) : null}
     </>
   );
 }