Plugin benachrichtigung: E-Mail, Telegram, In-App per Adapter-Muster

- Adapter-Pattern mit drei Kanaelen: E-Mail (SMTP per Env, TLS starttls/ssl,
  Dev-Fallback: Protokoll), Telegram (Bot-API, Token per Env, Chat-ID pro
  Benutzer), In-App (persistente Nachrichten mit Unread-Counter und
  'Alle als gelesen markieren')
- Pro Benutzer Kanal-Praeferenzen (Einstellungsseite, mehrere Kanaele
  gleichzeitig) plus eigene Kontakt-Tabelle (E-Mail-Adresse, Chat-ID);
  Kern und users-Tabelle unveraendert
- Oeffentliche Plugin-API: await send_notification(user, titel, text,
  kategorie) - andere Plugins holen das Plugin ueber app.state.registry
- Eigene Migration (0001_tabellen), eigene Routen/Templates, deutsche UI
- Tests: Adapter-Auswahl nach Praeferenz, In-App-Persistenz, Dev-Log-
  Adapter, SMTP-Versand (gemockt), Telegram-API-Aufruf, Einstellungsseite
- README: Plugin-Doku + neue Env-Variablen; docker-compose: Platzhalter

plugins/benachrichtigung/templates/benachrichtigung/einstellungen.html

@@ -0,0 +1,75 @@
+{% extends "base.html" %}
+{% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
+{% block inhalt %}
+<h1 class="text-2xl font-bold mb-1">Benachrichtigungen &mdash; Einstellungen</h1>
+<p class="text-slate-600 mb-4">
+  W&auml;hlen Sie, &uuml;ber welche Kan&auml;le Sie Benachrichtigungen erhalten.
+  Mehrere Kan&auml;le sind gleichzeitig m&ouml;glich.
+</p>
+
+<a href="/benachrichtigung" class="text-sm text-emerald-700 hover:underline">&larr; Zur&uuml;ck zum Posteingang</a>
+
+{% if gespeichert %}
+<div class="mt-4 mb-2 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-2 text-sm">
+  Einstellungen gespeichert.
+</div>
+{% endif %}
+{% if fehler %}
+<div class="mt-4 mb-2 rounded-lg bg-red-50 border border-red-200 text-red-800 px-4 py-2 text-sm">
+  {{ fehler }}
+</div>
+{% endif %}
+
+<form method="post" action="/benachrichtigung/einstellungen"
+      class="mt-4 bg-white rounded-xl border border-slate-200 p-5 max-w-2xl space-y-5">
+
+  <fieldset>
+    <legend class="text-sm font-semibold mb-2">Kan&auml;le</legend>
+    <div class="space-y-2">
+      {% for schluessel, status in kanal_status.items() %}
+      <label class="flex items-start gap-3 p-2 rounded hover:bg-slate-50 cursor-pointer">
+        <input type="checkbox" name="kanaele" value="{{ schluessel }}"
+               {% if schluessel in gewaehlte %}checked{% endif %}
+               class="mt-1 h-4 w-4 accent-emerald-600">
+        <span>
+          <span class="font-medium">{{ status.label }}</span>
+          {% if status.aktiv %}
+            <span class="ml-1 text-xs bg-emerald-100 text-emerald-700 rounded px-1.5 py-0.5">konfiguriert</span>
+          {% else %}
+            <span class="ml-1 text-xs bg-amber-100 text-amber-700 rounded px-1.5 py-0.5">nicht konfiguriert &mdash; nur Serverprotokoll</span>
+          {% endif %}
+          {% if schluessel == 'email' %}
+            <span class="block text-sm text-slate-500">Versand &uuml;ber SMTP; ohne Mailserver erscheint die Nachricht im Protokoll.</span>
+          {% elif schluessel == 'telegram' %}
+            <span class="block text-sm text-slate-500">Bot-Token wird zentral gesetzt (Umgebungsvariable), die Chat-ID hinterlegen Sie hier.</span>
+          {% elif schluessel == 'inapp' %}
+            <span class="block text-sm text-slate-500">Nachricht erscheint im Posteingang des Portals.</span>
+          {% endif %}
+        </span>
+      </label>
+      {% endfor %}
+    </div>
+  </fieldset>
+
+  <div>
+    <label for="emailadresse" class="block text-sm font-semibold mb-1">E-Mail-Adresse</label>
+    <input id="emailadresse" name="emailadresse" type="email" value="{{ emailadresse }}"
+           placeholder="name@example.org"
+           class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+  </div>
+
+  <div>
+    <label for="telegram_chat_id" class="block text-sm font-semibold mb-1">Telegram-Chat-ID</label>
+    <input id="telegram_chat_id" name="telegram_chat_id" value="{{ telegram_chat_id }}"
+           placeholder="z. B. 123456789 (Gruppen mit Minus)"
+           class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+  </div>
+
+  <div class="flex items-center gap-3">
+    <button type="submit" class="px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700">
+      Speichern
+    </button>
+    <span class="text-xs text-slate-400">Ohne ausgew&auml;hlten Kanal erhalten Sie keine Benachrichtigungen.</span>
+  </div>
+</form>
+{% endblock %}

plugins/benachrichtigung/templates/benachrichtigung/index.html

@@ -1,10 +1,56 @@
 {% extends "base.html" %}
-{% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
+{% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
 {% block inhalt %}
-<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
-<p class="text-slate-600 max-w-2xl">
-  Plugin <code class="bg-slate-200 rounded px-1 py-0.5 text-sm">{{ name }}</code>
-  in Version {{ version }} ist geladen.
-  Diese Seite ist ein Platzhalter &mdash; die Funktion wird in einer sp&auml;teren Phase implementiert.
+<div class="flex flex-wrap items-center gap-3 mb-1">
+  <h1 class="text-2xl font-bold">{{ titel }}</h1>
+  <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium
+               {% if ungelesen %}bg-red-100 text-red-700{% else %}bg-slate-200 text-slate-500{% endif %}">
+    {{ ungelesen }} ungelesen
+  </span>
+</div>
+<p class="text-slate-600 mb-4">
+  Zustellung aktuell &uuml;ber:
+  {% if gewaehlte_kanaelle %}<span class="font-medium">{{ gewaehlte_kanaelle|join(", ") }}</span>
+  {% else %}<span class="text-red-600">kein Kanal ausgew&auml;hlt</span>{% endif %}
 </p>
+
+<div class="flex flex-wrap gap-2 mb-6">
+  <form method="post" action="/benachrichtigung/alle-gelesen">
+    <button type="submit" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700">
+      Alle als gelesen markieren
+    </button>
+  </form>
+  <a href="/benachrichtigung/einstellungen"
+     class="px-3 py-1.5 rounded-lg border border-slate-300 bg-white text-sm font-medium hover:bg-slate-50">
+    Kan&auml;le &amp; Einstellungen
+  </a>
+</div>
+
+{% if mitteilungen %}
+<div class="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
+  {% for m in mitteilungen %}
+  <div class="px-4 py-3 flex flex-col gap-1 {% if not m.gelesen %}border-l-4 border-l-emerald-500{% endif %}">
+    <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+      <span class="{% if m.gelesen %}text-slate-600{% else %}font-semibold text-slate-900{% endif %}">{{ m.titel }}</span>
+      <span class="text-xs uppercase tracking-wide bg-slate-100 text-slate-500 rounded px-1.5 py-0.5">{{ m.kategorie }}</span>
+      <span class="text-xs text-slate-400 ml-auto">{{ m.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
+    </div>
+    <p class="text-sm text-slate-600 whitespace-pre-line">{{ m.text }}</p>
+    <div class="text-xs">
+      {% if m.gelesen %}
+        <span class="text-slate-400">Gelesen</span>
+      {% else %}
+        <form method="post" action="/benachrichtigung/{{ m.id }}/gelesen">
+          <button type="submit" class="text-emerald-700 hover:underline">Als gelesen markieren</button>
+        </form>
+      {% endif %}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<p class="text-slate-500 bg-white rounded-xl border border-slate-200 px-4 py-8 text-center">
+  Keine Benachrichtigungen vorhanden.
+</p>
+{% endif %}
 {% endblock %}