feat(anhaenge): Fotos und Dateien an einem Schritt (#52) (#59)

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

@@ -15,10 +15,12 @@ import {
   LaufMitAdKontoVerknuepfen,
   LaufZurueckholen,
 } from "@/components/laeufe/lauf-aktionen";
+import { SchrittAnhaenge, type SchrittAnhang } from "@/components/laeufe/schritt-anhaenge";
 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 { anhaengeDesLaufs } from "@/server/services/anhaenge";
 import { protokollDesLaufs } from "@/server/queries/protokoll";
 import {
   kommentareDesLaufs,
@@ -82,12 +84,14 @@ function Schritt({
   lesend,
   ausfuehrlich,
   kommentare,
+  anhaenge,
 }: {
   schritt: AbarbeitungsSchritt;
   laufId: string;
   lesend: boolean;
   ausfuehrlich: boolean;
   kommentare: readonly KommentarZeile[];
+  anhaenge: readonly SchrittAnhang[];
 }) {
   const vomTisch =
     schritt.zustand === SchrittZustand.ERLEDIGT || schritt.zustand === SchrittZustand.NICHT_ZUTREFFEND;
@@ -197,6 +201,22 @@ function Schritt({
             </ul>
           ) : null}
 
+          {/*
+           * Anhaenge (#032). Immer sichtbar, wenn es welche gibt — auch an einem
+           * archivierten Lauf, nur dann ohne Knoepfe. Ein Foto vom Typenschild
+           * ist Teil des Belegs.
+           */}
+          {anhaenge.length > 0 || (!lesend && schritt.ergebnisId) ? (
+            <div className="mt-3">
+              <SchrittAnhaenge
+                laufId={laufId}
+                vorlagenSchrittId={schritt.schrittId}
+                anhaenge={anhaenge}
+                lesend={lesend || !schritt.ergebnisId}
+              />
+            </div>
+          ) : null}
+
           {lesend || !schritt.ergebnisId ? null : (
             <details className="mt-2">
               <summary className="flex min-h-11 cursor-pointer list-none items-center gap-2 text-xs text-nebentext hover:text-text md:min-h-9">
@@ -220,12 +240,14 @@ function Abschnitt({
   lesend,
   ausfuehrlich,
   kommentare,
+  anhaenge,
 }: {
   abschnitt: AbarbeitungsAbschnitt;
   laufId: string;
   lesend: boolean;
   ausfuehrlich: boolean;
   kommentare: readonly KommentarZeile[];
+  anhaenge: readonly (SchrittAnhang & { readonly schrittergebnisId: string })[];
 }) {
   const erledigt = abschnitt.schritte.filter(
     (schritt) =>
@@ -263,6 +285,7 @@ function Abschnitt({
             lesend={lesend}
             ausfuehrlich={ausfuehrlich}
             kommentare={kommentare.filter((kommentar) => kommentar.schrittergebnisId === schritt.ergebnisId)}
+            anhaenge={anhaenge.filter((anhang) => anhang.schrittergebnisId === schritt.ergebnisId)}
           />
         ))}
       </ul>
@@ -297,6 +320,9 @@ export default async function LaufSeite({
   // 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 Sicht hat `laufHolen` oben schon angewandt; hier nur die Metadaten der
+  // Anhaenge dieses Laufs (#032).
+  const anhaenge = await anhaengeDesLaufs(id);
   /*
    * Die Personenliste nur fuer den Onboarding-Fall holen — sonst stuende in
    * jedem Seitenaufbau eine Abfrage, die niemand braucht.
@@ -394,6 +420,7 @@ export default async function LaufSeite({
             lesend={lesend}
             ausfuehrlich={ausfuehrlich}
             kommentare={kommentare}
+            anhaenge={anhaenge}
           />
         ))}
       </div>