Discord-Webhook für Streamer-Meldungen mit wählbaren Ereignissen

Meldungen zu Veto, Match-Start, Map- und Serienende, Matchende und
Serverfehlern gehen an DISCORD_WEBHOOK_URL. Im Admin-Bereich wählt man,
welche Ereignisse gemeldet werden, und kann eine Testmeldung senden.

client/src/pages/AdminPage.jsx

@@ -92,6 +92,7 @@ export default function AdminPage() {
         <button className="btn btn-sm" onClick={logout}>Abmelden</button>
       </header>
 
+      {token && <NotificationSettings token={token} setNotice={setNotice} />}
       {notice && <div className={`toast toast-${notice.tone}`} role="status">{notice.text}</div>}
       {error && <div className="alert alert-error">{error}</div>}
       {matches === null && !error && <p className="muted">Lade Matches …</p>}
@@ -106,6 +107,73 @@ export default function AdminPage() {
   );
 }
 
+/** Auswahl, welche Ereignisse Discord erhalten. Die Werte werden erst beim Speichern übernommen. */
+function NotificationSettings({ token, setNotice }) {
+  const [settings, setSettings] = useState(null);
+  const [events, setEvents] = useState({});
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    api('/admin/notifications', { token })
+      .then((res) => { setSettings(res); setEvents(res.events); })
+      .catch((err) => setNotice({ tone: 'error', text: err.message }));
+  }, [token, setNotice]);
+
+  const save = async () => {
+    setBusy(true);
+    try {
+      const res = await api('/admin/notifications', { method: 'PUT', body: { events }, token });
+      setSettings(res);
+      setEvents(res.events);
+      setNotice({ tone: 'ok', text: 'Meldungen gespeichert' });
+    } catch (err) {
+      setNotice({ tone: 'error', text: err.message });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const test = async () => {
+    setBusy(true);
+    try {
+      await api('/admin/notifications/test', { method: 'POST', token });
+      setNotice({ tone: 'ok', text: 'Testmeldung gesendet' });
+    } catch (err) {
+      setNotice({ tone: 'error', text: err.message });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!settings) return null;
+  const dirty = settings.catalog.some(({ key }) => !!events[key] !== settings.events[key]);
+
+  return (
+    <section className="admin-settings">
+      <h2>Discord-Meldungen</h2>
+      {!settings.enabled && (
+        <p className="alert alert-error">Kein Webhook eingerichtet. Setze DISCORD_WEBHOOK_URL und starte die Anwendung neu.</p>
+      )}
+      <div className="admin-settings-grid">
+        {settings.catalog.map(({ key, label }) => (
+          <label key={key} className="admin-check">
+            <input
+              type="checkbox"
+              checked={!!events[key]}
+              onChange={(e) => setEvents({ ...events, [key]: e.target.checked })}
+            />
+            {label}
+          </label>
+        ))}
+      </div>
+      <div className="admin-actions">
+        <button className="btn btn-sm btn-primary" onClick={save} disabled={busy || !dirty}>Speichern</button>
+        <button className="btn btn-sm" onClick={test} disabled={busy || !settings.enabled}>Testmeldung senden</button>
+      </div>
+    </section>
+  );
+}
+
 function AdminLogin({ onLogin }) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);

client/src/styles.css

@@ -512,3 +512,8 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 .rollback h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
 .rollback select { min-width: 200px; }
 .admin-badge { font: 600 .75rem var(--body); color: #fff; background: var(--brand-red); padding: 2px 8px; border-radius: 3px; }
+
+.admin-settings { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; }
+.admin-settings h2 { margin: 0 0 12px; font-size: 1.1rem; }
+.admin-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin-bottom: 12px; }
+.admin-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }