From be9837ba506b4ae9bdf02d32dd7d386edb7c5b30 Mon Sep 17 00:00:00 2001
From: Florian Wilde <wilde.florian@gmail.com>
Date: Mon, 12 Oct 2026 17:21:57 +0200
Subject: [PATCH] feat(zuweisungen): Zum Dry-Run springt zur Dry-Run-Karte
 (#032)

Der Link im Zell-Dialog der Zuweisungsmatrix fuehrte nur auf den Kopf
der Schluesselseite; die Dry-Run-Karte liegt weit unten, und wer aus der
Matrix kommt, will genau dorthin. Die Karte traegt jetzt id="dry-run"
(Karte nimmt dafuer eine optionale id an), der Link zeigt auf
/schluessel/<id>#dry-run. scroll-mt haelt die Karte unter der festen
Kopfleiste der schmalen Ansicht.

E2E: der Matrix-Test klickt den Link und prueft Adresse und Sichtbarkeit
der Karte.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/(app)/schluessel/[id]/page.tsx      | 4 ++++
 src/components/ui/Karte.tsx                 | 4 ++++
 src/components/zuweisungen/ZellenDialog.tsx | 2 +-
 tests/e2e/zuweisungen.spec.ts               | 8 ++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/schluessel/[id]/page.tsx b/src/app/(app)/schluessel/[id]/page.tsx
index 836e6f7..46cb372 100644
--- a/src/app/(app)/schluessel/[id]/page.tsx
+++ b/src/app/(app)/schluessel/[id]/page.tsx
@@ -457,6 +457,10 @@ export default async function SchluesselSeite({
         !imWiderruf &&
         (s.publicVerwendungen.length > 0 || (rechte.privat && s.privateVerwendungen.length > 0)) && (
           <Karte
+            // Sprungziel fuer „Zum Dry-Run“ aus der Zuweisungsmatrix; scroll-mt haelt die Karte
+            // unter der festen Kopfleiste der schmalen Ansicht (#032).
+            id="dry-run"
+            className="scroll-mt-20"
             titel="Dry-Run-Vorschau"
             untertitel="Erst prüfen, dann anwenden – auf den Hosts ändert sich vorher nichts"
           >
diff --git a/src/components/ui/Karte.tsx b/src/components/ui/Karte.tsx
index c1b6bfd..f988ec3 100644
--- a/src/components/ui/Karte.tsx
+++ b/src/components/ui/Karte.tsx
@@ -13,6 +13,7 @@ export function Karte({
   className,
   innen = "normal",
   as: Element = "section",
+  id,
 }: {
   titel?: ReactNode;
   untertitel?: ReactNode;
@@ -22,9 +23,12 @@ export function Karte({
   /** „ohne“ für Inhalte, die bis an den Rand reichen (z. B. Tabellen mit eigenem Abstand). */
   innen?: "normal" | "ohne";
   as?: "section" | "div" | "article";
+  /** Sprungziel für Links von anderen Seiten (z. B. `#dry-run`, #032). */
+  id?: string;
 }) {
   return (
     <Element
+      id={id}
       className={clsx(
         "border-border bg-surface min-w-0 rounded-karte border",
         innen === "normal" && "p-5 sm:p-6",
diff --git a/src/components/zuweisungen/ZellenDialog.tsx b/src/components/zuweisungen/ZellenDialog.tsx
index 1f781f6..aac9512 100644
--- a/src/components/zuweisungen/ZellenDialog.tsx
+++ b/src/components/zuweisungen/ZellenDialog.tsx
@@ -175,7 +175,7 @@ export function ZellenDialog({
             zeigt und schreibt die Änderung.
           </p>
           <Button
-            href={`/schluessel/${schluessel.id}`}
+            href={`/schluessel/${schluessel.id}#dry-run`}
             klein
             className="self-start"
             icon={<ArrowRight className="size-4" />}
diff --git a/tests/e2e/zuweisungen.spec.ts b/tests/e2e/zuweisungen.spec.ts
index 232d52c..2a7ad2a 100644
--- a/tests/e2e/zuweisungen.spec.ts
+++ b/tests/e2e/zuweisungen.spec.ts
@@ -128,6 +128,14 @@ test("Matrix zeigt Gruppen-Zuweisung, filtert, weist zu und exportiert", async (
     `"${name} Backup";"SHA256:${name}";"${name}-h2";"root";"Public Key";"${name}-g";"restrict";"noch nicht ausgerollt"`,
   );
   expect(text).toContain(`"${name}-h3";"deploy";"Public Key";""`);
+
+  // „Zum Dry-Run“ springt direkt zur Dry-Run-Karte der Schluesselseite (#032).
+  await matrix.getByRole("button", { name: new RegExp(`auf ${name}-h3: Public Key direkt`) }).click();
+  await dialog.getByRole("link", { name: "Zum Dry-Run" }).click();
+  await expect(page).toHaveURL(new RegExp(`/schluessel/${ids.schluessel}#dry-run$`));
+  const karte = page.locator("#dry-run");
+  await expect(karte).toContainText("Dry-Run-Vorschau");
+  await expect(karte).toBeInViewport();
 });
 
 test("Leser sieht die Matrix, aber keinen Zuweisen-Knopf", async ({ page }) => {