feat(bausteine): Abschnitte, die mehrere Vorlagen teilen (#57)

src/components/vorlagen/editor-abschnitt.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { Blocks } from "lucide-react";
 import { KlappKarte, LoeschKnopf, TextKnopf, Textfeld } from "@/components/vorlagen/editor-felder";
 import { SortierBereich, SortierZeile, VerschiebeKnoepfe } from "@/components/vorlagen/editor-sortieren";
 import { SchrittKarte } from "@/components/vorlagen/editor-schritt";
@@ -57,6 +58,7 @@ export function AbschnittKarte({
   const [offen, setzeOffen] = useState(true);
   const voll = abschnitt.schritte.length >= GRENZEN.schritteJeAbschnitt;
   const anzahlSchritte = abschnitt.schritte.length;
+  const baustein = abschnitt.baustein;
 
   return (
     <KlappKarte
@@ -75,6 +77,12 @@ export function AbschnittKarte({
           <span className="shrink-0 text-xs font-normal text-nebentext">
             {anzahlSchritte} {anzahlSchritte === 1 ? "Schritt" : "Schritte"}
           </span>
+          {baustein ? (
+            <span className="inline-flex shrink-0 items-center gap-1 rounded-pille bg-flaeche-hoch px-2.5 py-0.5 text-xs font-normal text-nebentext">
+              <Blocks className="size-3.5" strokeWidth={1.75} aria-hidden="true" />
+              Baustein
+            </span>
+          ) : null}
         </>
       }
       knoepfe={
@@ -96,7 +104,32 @@ export function AbschnittKarte({
         )
       }
     >
-      {lesend ? null : (
+      {/*
+        Ein Baustein-Abschnitt ist eine **Einheit** (#030): weder Titel noch
+        Schritte lassen sich hier aendern. Beides kommt beim Veroeffentlichen aus
+        dem Baustein, und ein Feld, das man ausfuellen kann und das danach
+        ueberschrieben wird, waere eine Falle. Geaendert wird am Baustein.
+      */}
+      {baustein ? (
+        <>
+          <p className="max-w-prose text-sm text-nebentext">
+            Dieser Abschnitt kommt aus dem Baustein{" "}
+            <span className="font-semibold text-text">{baustein.name}</span>
+            {baustein.version > 0 ? `, Fassung ${baustein.version}` : ""}. Titel und Schritte werden beim
+            Veröffentlichen von dort eingesetzt — geändert wird sie am Baustein, nicht hier.
+          </p>
+          <p className="max-w-prose text-sm text-nebentext">
+            Eine neue Fassung des Bausteins wirkt erst in der <strong>nächsten</strong> veröffentlichten
+            Version dieser Vorlage. Schon veröffentlichte Versionen und laufende Arbeiten bleiben, wie sie
+            sind.
+          </p>
+          <p className="text-sm text-nebentext">
+            {anzahlSchritte} {anzahlSchritte === 1 ? "Schritt" : "Schritte"} aus dem Baustein.
+          </p>
+        </>
+      ) : null}
+
+      {!baustein && !lesend ? (
         <Textfeld
           beschriftung="Titel des Abschnitts"
           wert={abschnitt.titel}
@@ -104,9 +137,9 @@ export function AbschnittKarte({
           lesend={lesend}
           vorschlag="Vorbereitung"
         />
-      )}
+      ) : null}
 
-      {anzahlSchritte === 0 ? (
+      {baustein ? null : anzahlSchritte === 0 ? (
         <p className="text-sm text-nebentext">Noch kein Schritt in diesem Abschnitt.</p>
       ) : (
         <SortierBereich
@@ -137,7 +170,7 @@ export function AbschnittKarte({
         </SortierBereich>
       )}
 
-      {lesend ? null : (
+      {baustein || lesend ? null : (
         <TextKnopf
           beschriftung={voll ? `Höchstens ${GRENZEN.schritteJeAbschnitt} Schritte` : "Schritt hinzufügen"}
           aus={voll}