feat(ui): Benachrichtigungsziele unter "Mein Konto"

Beliebig viele Ziele je Konto, jedes mit eigenen Anlaessen. Jedes laesst sich
einzeln testen und pausieren; Ergebnis und Zeitpunkt der letzten Zustellung
stehen an der Karte.

Der Weg laesst sich nach dem Anlegen nicht mehr aendern - ein Webhook-Ziel zu
einer E-Mail-Adresse umzubiegen ergaebe keinen Sinn und muesste das
Geheimnis mitwandern lassen. Ist kein SMTP hinterlegt, ist die Auswahl
"E-Mail" gesperrt und erklaert, warum.

targetSafeSelect liegt in lib/notify/types statt in der Route: Next laesst in
route.ts nur bestimmte Exporte zu und bricht den Bau bei allem anderen ab.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app/account/page.tsx

@@ -1,5 +1,10 @@
 import type { Metadata } from "next";
 import { AccountManager, type AccountData } from "@/components/account/AccountManager";
+import {
+  NotificationSection,
+  type NotificationTargetEntry,
+} from "@/components/account/NotificationSection";
+import { emailAvailable } from "@/lib/notify";
 import { requireUserPage } from "@/lib/auth/guard";
 import { WEBAUTHN_AVAILABLE } from "@/lib/config";
 import { prisma } from "@/lib/db";
@@ -13,7 +18,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function AccountPage() {
   const user = await requireUserPage();
 
-  const [passkeys, sessions] = await Promise.all([
+  const [passkeys, sessions, targets] = await Promise.all([
     prisma.credential.findMany({
       where: { userId: user.id },
       select: {
@@ -37,6 +42,22 @@ export default async function AccountPage() {
       },
       orderBy: { lastSeenAt: "desc" },
     }),
+    prisma.notificationTarget.findMany({
+      where: { userId: user.id },
+      select: {
+        id: true,
+        name: true,
+        channel: true,
+        target: true,
+        secretHint: true,
+        events: true,
+        isActive: true,
+        lastSentAt: true,
+        lastOk: true,
+        lastMessage: true,
+      },
+      orderBy: { name: "asc" },
+    }),
   ]);
 
   const data: AccountData = {
@@ -60,6 +81,11 @@ export default async function AccountPage() {
       </header>
 
       <AccountManager data={data} />
+
+      <NotificationSection
+        targets={targets as unknown as NotificationTargetEntry[]}
+        emailAvailable={emailAvailable()}
+      />
     </div>
   );
 }

src/app/api/notifications/[id]/route.ts

@@ -0,0 +1,93 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { jsonError, readJsonBody } from "@/lib/security/request";
+import { BlockedHostError, assertAllowedUrl } from "@/lib/security/ssrf";
+import { targetSafeSelect } from "@/lib/notify/types";
+import { formatZodError, notificationTargetUpdateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const { id } = await params;
+  const existing = await prisma.notificationTarget.findFirst({
+    where: { id, userId: auth.user.id },
+  });
+  if (!existing) return jsonError("Ziel nicht gefunden", 404);
+
+  const body = await readJsonBody(request);
+  if (!body.ok) return body.response;
+
+  const parsed = notificationTargetUpdateSchema.safeParse(body.data);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const data = parsed.data;
+  const update: Record<string, unknown> = {};
+
+  if (data.name !== undefined) update.name = data.name;
+  if (data.events !== undefined) update.events = data.events;
+  if (data.isActive !== undefined) update.isActive = data.isActive;
+
+  if (data.target !== undefined) {
+    if (existing.channel !== "EMAIL") {
+      try {
+        await assertAllowedUrl(data.target);
+      } catch (error) {
+        if (error instanceof BlockedHostError) {
+          return NextResponse.json(
+            { error: error.message, fields: { target: error.message } },
+            { status: 422 },
+          );
+        }
+        throw error;
+      }
+    }
+    update.target = data.target;
+  }
+
+  // Leeres Feld heisst "unveraendert", null heisst "entfernen".
+  if (data.secret !== undefined) {
+    if (data.secret) {
+      update.secretCipher = encryptSecret(data.secret);
+      update.secretHint = tokenHint(data.secret);
+    } else {
+      update.secretCipher = null;
+      update.secretHint = null;
+    }
+  }
+
+  try {
+    const target = await prisma.notificationTarget.update({
+      where: { id },
+      data: update,
+      select: targetSafeSelect,
+    });
+    return NextResponse.json({ target });
+  } catch {
+    return jsonError("Name bereits vergeben.", 409);
+  }
+}
+
+export async function DELETE(_request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const { id } = await params;
+  const result = await prisma.notificationTarget.deleteMany({
+    where: { id, userId: auth.user.id },
+  });
+  if (result.count === 0) return jsonError("Ziel nicht gefunden", 404);
+
+  return NextResponse.json({ ok: true });
+}

src/app/api/notifications/[id]/test/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { prisma } from "@/lib/db";
+import { deliver } from "@/lib/notify/channels";
+import { testMessage } from "@/lib/notify";
+import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
+import { clientIp, jsonError, tooManyRequests } from "@/lib/security/request";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+/** Schickt eine Testnachricht an genau dieses Ziel. */
+export async function POST(request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  // Loest einen ausgehenden Aufruf aus – entsprechend begrenzt.
+  const limited = rateLimit(
+    `notify-test:${auth.user.id}:${clientIp(request)}`,
+    LIMITS.outbound.limit,
+    LIMITS.outbound.windowMs,
+  );
+  if (!limited.ok) return tooManyRequests(limited.retryAfter);
+
+  const { id } = await params;
+  const target = await prisma.notificationTarget.findFirst({
+    where: { id, userId: auth.user.id },
+  });
+  if (!target) return jsonError("Ziel nicht gefunden", 404);
+
+  const result = await deliver(target, testMessage());
+
+  await prisma.notificationTarget.update({
+    where: { id },
+    data: { lastSentAt: new Date(), lastOk: result.ok, lastMessage: result.message },
+  });
+
+  return NextResponse.json(result, { status: result.ok ? 200 : 502 });
+}

src/app/api/notifications/route.ts

@@ -0,0 +1,83 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { readJsonBody } from "@/lib/security/request";
+import { targetSafeSelect } from "@/lib/notify/types";
+import { BlockedHostError, assertAllowedUrl } from "@/lib/security/ssrf";
+import { formatZodError, notificationTargetCreateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const targets = await prisma.notificationTarget.findMany({
+    where: { userId: auth.user.id },
+    select: targetSafeSelect,
+    orderBy: { name: "asc" },
+  });
+  return NextResponse.json({ targets });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const body = await readJsonBody(request);
+  if (!body.ok) return body.response;
+
+  const parsed = notificationTargetCreateSchema.safeParse(body.data);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const { name, channel, target, secret, events, isActive } = parsed.data;
+
+  // Webhook und ntfy ruft der Server spaeter selbst auf – gleiche Pruefung
+  // wie bei den Git-Verbindungen.
+  if (channel !== "EMAIL") {
+    try {
+      await assertAllowedUrl(target);
+    } catch (error) {
+      if (error instanceof BlockedHostError) {
+        return NextResponse.json(
+          { error: error.message, fields: { target: error.message } },
+          { status: 422 },
+        );
+      }
+      throw error;
+    }
+  }
+
+  const duplicate = await prisma.notificationTarget.findFirst({
+    where: { userId: auth.user.id, name },
+    select: { id: true },
+  });
+  if (duplicate) {
+    return NextResponse.json(
+      { error: "Name bereits vergeben.", fields: { name: "Name bereits vergeben" } },
+      { status: 409 },
+    );
+  }
+
+  const created = await prisma.notificationTarget.create({
+    data: {
+      userId: auth.user.id,
+      name,
+      channel,
+      target,
+      secretCipher: secret ? encryptSecret(secret) : null,
+      secretHint: secret ? tokenHint(secret) : null,
+      events,
+      isActive,
+    },
+    select: targetSafeSelect,
+  });
+
+  return NextResponse.json({ target: created }, { status: 201 });
+}

src/components/account/NotificationSection.tsx

@@ -0,0 +1,515 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Bell,
+  BellRing,
+  CheckCircle2,
+  KeyRound,
+  Loader2,
+  Mail,
+  Pencil,
+  Plus,
+  Trash2,
+  Webhook,
+  XCircle,
+} from "lucide-react";
+import type { NotificationChannel, NotificationEvent } from "@prisma/client";
+import { Modal } from "@/components/ui/Modal";
+import { EVENT_META, NOTIFICATION_EVENTS } from "@/lib/notify/types";
+import { cn, formatRelative } from "@/lib/utils";
+
+export interface NotificationTargetEntry {
+  id: string;
+  name: string;
+  channel: NotificationChannel;
+  target: string;
+  secretHint: string | null;
+  events: NotificationEvent[];
+  isActive: boolean;
+  lastSentAt: string | Date | null;
+  lastOk: boolean | null;
+  lastMessage: string | null;
+}
+
+const CHANNEL_META: Record<
+  NotificationChannel,
+  { label: string; icon: typeof Webhook; hint: string; placeholder: string }
+> = {
+  NTFY: {
+    label: "ntfy",
+    icon: BellRing,
+    hint: "Vollstaendige Themen-URL, z. B. https://ntfy.sh/mein-geheimes-thema",
+    placeholder: "https://ntfy.sh/mein-thema",
+  },
+  WEBHOOK: {
+    label: "Webhook",
+    icon: Webhook,
+    hint: "Bekommt JSON per POST. Mit Geheimnis wird der Rumpf signiert (X-Nebula-Signature).",
+    placeholder: "https://mein-dienst.de/haken",
+  },
+  EMAIL: {
+    label: "E-Mail",
+    icon: Mail,
+    hint: "Braucht SMTP-Zugangsdaten in der .env der Instanz.",
+    placeholder: "ich@example.com",
+  },
+};
+
+export function NotificationSection({
+  targets,
+  emailAvailable,
+}: {
+  targets: NotificationTargetEntry[];
+  emailAvailable: boolean;
+}) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<NotificationTargetEntry | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [notice, setNotice] = useState<{ ok: boolean; text: string } | null>(null);
+
+  async function test(entry: NotificationTargetEntry) {
+    setBusyId(entry.id);
+    setNotice(null);
+    try {
+      const response = await fetch(`/api/notifications/${entry.id}/test`, { method: "POST" });
+      const body = await response.json().catch(() => ({}));
+      setNotice({ ok: response.ok, text: body.message ?? body.error ?? "Unbekannte Antwort." });
+      router.refresh();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function remove(entry: NotificationTargetEntry) {
+    if (!window.confirm(`Ziel „${entry.name}“ entfernen?`)) return;
+    setBusyId(entry.id);
+    await fetch(`/api/notifications/${entry.id}`, { method: "DELETE" }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  async function toggle(entry: NotificationTargetEntry) {
+    setBusyId(entry.id);
+    await fetch(`/api/notifications/${entry.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ isActive: !entry.isActive }),
+    }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  return (
+    <section className="glass p-5">
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-500/12 text-violet-300">
+            <Bell className="h-4 w-4" />
+          </span>
+          <div>
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-200">
+              Benachrichtigungen
+            </h2>
+            <p className="mt-1 max-w-xl text-sm text-slate-400">
+              Meldung bei fehlgeschlagenem Abgleich, roter CI oder neuem Release. Gemeldet
+              wird nur bei einer <strong className="text-slate-300">Aenderung</strong> –
+              nicht bei jedem Durchlauf.
+            </p>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="btn btn-ghost px-3 py-1.5 text-xs"
+          onClick={() => {
+            setEditing(null);
+            setDialogOpen(true);
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Ziel hinzufuegen
+        </button>
+      </div>
+
+      {targets.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-white/8 px-4 py-6 text-center text-sm text-slate-500">
+          Noch kein Ziel eingerichtet.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {targets.map((entry) => {
+            const meta = CHANNEL_META[entry.channel];
+            const Icon = meta.icon;
+            return (
+              <div key={entry.id} className="glass-soft px-3 py-3">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="flex flex-wrap items-center gap-2 text-sm text-slate-100">
+                      <Icon className="h-3.5 w-3.5 shrink-0 text-violet-300" />
+                      {entry.name}
+                      <span className="rounded bg-white/6 px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-slate-400">
+                        {meta.label}
+                      </span>
+                      {!entry.isActive ? (
+                        <span className="rounded bg-slate-500/15 px-1.5 py-0.5 text-[10px] text-slate-400">
+                          pausiert
+                        </span>
+                      ) : null}
+                      {entry.secretHint ? (
+                        <span className="inline-flex items-center gap-1 font-mono text-[10px] text-amber-300/70">
+                          <KeyRound className="h-2.5 w-2.5" />
+                          {entry.secretHint}
+                        </span>
+                      ) : null}
+                    </p>
+                    <p className="mt-0.5 truncate font-mono text-[11px] text-slate-500">
+                      {entry.target}
+                    </p>
+                    <p className="mt-1.5 flex flex-wrap gap-1">
+                      {entry.events.map((event) => (
+                        <span
+                          key={event}
+                          className="rounded bg-white/6 px-1.5 py-0.5 text-[10px] text-slate-400"
+                        >
+                          {EVENT_META[event].emoji} {EVENT_META[event].label}
+                        </span>
+                      ))}
+                    </p>
+                    {entry.lastSentAt ? (
+                      <p
+                        className={cn(
+                          "mt-1.5 flex items-center gap-1.5 text-[11px]",
+                          entry.lastOk ? "text-emerald-200/80" : "text-rose-200/80",
+                        )}
+                        suppressHydrationWarning
+                      >
+                        {entry.lastOk ? (
+                          <CheckCircle2 className="h-3 w-3" />
+                        ) : (
+                          <XCircle className="h-3 w-3" />
+                        )}
+                        {formatRelative(entry.lastSentAt)} · {entry.lastMessage}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div className="flex shrink-0 items-center gap-1">
+                    {busyId === entry.id ? (
+                      <Loader2 className="h-4 w-4 animate-spin text-slate-500" />
+                    ) : (
+                      <>
+                        <button
+                          type="button"
+                          className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                          onClick={() => test(entry)}
+                        >
+                          Testen
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                          onClick={() => toggle(entry)}
+                          title={entry.isActive ? "Pausieren" : "Fortsetzen"}
+                        >
+                          {entry.isActive ? "Pause" : "An"}
+                        </button>
+                        <button
+                          type="button"
+                          className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-violet-300"
+                          onClick={() => {
+                            setEditing(entry);
+                            setDialogOpen(true);
+                          }}
+                          aria-label="Bearbeiten"
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          type="button"
+                          className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-rose-500/12 hover:text-rose-300"
+                          onClick={() => remove(entry)}
+                          aria-label="Entfernen"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {notice ? (
+        <p
+          className={cn(
+            "mt-3 rounded-lg border px-3 py-2 text-sm",
+            notice.ok
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+              : "border-rose-500/30 bg-rose-500/10 text-rose-200",
+          )}
+        >
+          {notice.text}
+        </p>
+      ) : null}
+
+      {!emailAvailable ? (
+        <p className="mt-3 text-[11px] text-slate-600">
+          E-Mail steht nicht bereit: In der <code className="text-violet-300">.env</code> der
+          Instanz fehlt <code className="text-violet-300">SMTP_HOST</code>. ntfy und Webhook
+          funktionieren ohne weitere Einrichtung.
+        </p>
+      ) : null}
+
+      <TargetDialog
+        open={dialogOpen}
+        entry={editing}
+        emailAvailable={emailAvailable}
+        onClose={() => {
+          setDialogOpen(false);
+          setEditing(null);
+        }}
+      />
+    </section>
+  );
+}
+
+function TargetDialog({
+  open,
+  entry,
+  emailAvailable,
+  onClose,
+}: {
+  open: boolean;
+  entry: NotificationTargetEntry | null;
+  emailAvailable: boolean;
+  onClose: () => void;
+}) {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [channel, setChannel] = useState<NotificationChannel>("NTFY");
+  const [target, setTarget] = useState("");
+  const [secret, setSecret] = useState("");
+  const [events, setEvents] = useState<NotificationEvent[]>(["SYNC_FAILED", "CI_FAILED"]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+
+  const isEdit = Boolean(entry);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(entry?.name ?? "");
+    setChannel(entry?.channel ?? "NTFY");
+    setTarget(entry?.target ?? "");
+    setSecret("");
+    setEvents(entry?.events ?? ["SYNC_FAILED", "CI_FAILED"]);
+    setError(null);
+    setFieldErrors({});
+  }, [open, entry]);
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    setFieldErrors({});
+
+    const body: Record<string, unknown> = { name, target, events };
+    if (!isEdit) body.channel = channel;
+    if (!isEdit || secret.trim()) body.secret = secret;
+
+    try {
+      const response = await fetch(
+        isEdit ? `/api/notifications/${entry?.id}` : "/api/notifications",
+        {
+          method: isEdit ? "PATCH" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        },
+      );
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        setFieldErrors(payload.fields ?? {});
+        throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
+      }
+      onClose();
+      router.refresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const meta = CHANNEL_META[channel];
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      width="md"
+      title={isEdit ? "Ziel bearbeiten" : "Neues Benachrichtigungsziel"}
+      description={
+        isEdit ? "Der Zustellweg selbst laesst sich nicht mehr aendern." : undefined
+      }
+    >
+      <form onSubmit={submit} className="space-y-4">
+        {!isEdit ? (
+          <div>
+            <span className="field-label">Weg</span>
+            <div className="grid grid-cols-3 gap-2">
+              {(Object.keys(CHANNEL_META) as NotificationChannel[]).map((value) => {
+                const option = CHANNEL_META[value];
+                const Icon = option.icon;
+                const disabled = value === "EMAIL" && !emailAvailable;
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={disabled}
+                    onClick={() => setChannel(value)}
+                    title={disabled ? "Kein SMTP in der .env hinterlegt" : undefined}
+                    className={cn(
+                      "rounded-xl border px-3 py-2.5 text-sm transition-all disabled:opacity-40",
+                      channel === value
+                        ? "border-violet-400/60 bg-violet-500/12 text-white"
+                        : "border-white/9 text-slate-400 hover:border-white/20",
+                    )}
+                  >
+                    <span className="flex items-center justify-center gap-1.5">
+                      <Icon className="h-3.5 w-3.5" />
+                      {option.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
+        <div>
+          <label className="field-label" htmlFor="notify-name">
+            Name *
+          </label>
+          <input
+            id="notify-name"
+            className="field"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Handy"
+            required
+            maxLength={60}
+          />
+          {fieldErrors.name ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.name}</p>
+          ) : null}
+        </div>
+
+        <div>
+          <label className="field-label" htmlFor="notify-target">
+            {channel === "EMAIL" ? "E-Mail-Adresse *" : "URL *"}
+          </label>
+          <input
+            id="notify-target"
+            className="field font-mono text-xs"
+            value={target}
+            onChange={(e) => setTarget(e.target.value)}
+            placeholder={meta.placeholder}
+            required
+          />
+          <p className="mt-1 text-[11px] text-slate-500">{meta.hint}</p>
+          {fieldErrors.target ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.target}</p>
+          ) : null}
+        </div>
+
+        {channel !== "EMAIL" ? (
+          <div>
+            <label className="field-label" htmlFor="notify-secret">
+              Geheimnis {isEdit ? "(leer = unveraendert)" : "(optional)"}
+            </label>
+            <input
+              id="notify-secret"
+              className="field font-mono text-xs"
+              type="password"
+              value={secret}
+              onChange={(e) => setSecret(e.target.value)}
+              autoComplete="off"
+              placeholder={isEdit ? "••••••••" : ""}
+            />
+            <p className="mt-1 text-[11px] text-slate-500">
+              {channel === "NTFY"
+                ? "Wird als Bearer-Token gesendet – fuer geschuetzte Themen."
+                : "Signiert den Rumpf per HMAC-SHA256 im Kopf X-Nebula-Signature."}
+            </p>
+          </div>
+        ) : null}
+
+        <div>
+          <span className="field-label">Anlaesse *</span>
+          <div className="space-y-1.5">
+            {NOTIFICATION_EVENTS.map((event) => {
+              const option = EVENT_META[event];
+              const checked = events.includes(event);
+              return (
+                <label
+                  key={event}
+                  className="flex cursor-pointer items-start gap-2.5 rounded-lg border border-white/8 bg-black/20 px-3 py-2"
+                >
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={(e) =>
+                      setEvents((current) =>
+                        e.target.checked
+                          ? [...current, event]
+                          : current.filter((value) => value !== event),
+                      )
+                    }
+                    className="mt-0.5 h-4 w-4 accent-violet-500"
+                  />
+                  <span>
+                    <span className="block text-sm text-slate-200">
+                      {option.emoji} {option.label}
+                    </span>
+                    <span className="mt-0.5 block text-[11px] text-slate-500">
+                      {option.description}
+                    </span>
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+          {fieldErrors.events ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.events}</p>
+          ) : null}
+        </div>
+
+        {error ? (
+          <p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="flex justify-end gap-2 pt-1">
+          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={busy || events.length === 0}
+          >
+            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+            Speichern
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}