Playtester bekommen einen eigenen Bereich, Module ziehen um

Playtester und Alpha-Keys standen als zwei Kaesten mitten im Community-Bereich
zwischen Geburtstagen und Starboard. Die Liste war reine Anzeige: Namen und
Datum, sonst nichts. Wer einem Einzelnen einen Schluessel geben wollte, konnte
nur "an alle verteilen" druecken, und wer jemanden wieder rausnehmen wollte,
musste an die Datenbank.

Jetzt ist es ein eigener Bereich mit drei Zahlen oben und einer Liste, in der
neben jedem Namen sein Schluessel steht. Daneben, je nach Zustand, "Schluessel
geben" oder "Zurueckziehen", und ein ✕ zum Entfernen — die Rolle geht dabei
mit, denn nur aus der Liste zu streichen und die Rolle stehen zu lassen waere
eine Halbwahrheit.

Der Vorrat ist jetzt sichtbar, nicht nur seine Groesse: einen vertippten
Schluessel findet man sonst nie wieder. Nachlegen und "wer bekommt einen?"
laufen ueber Dialoge, damit der Bereich nicht zumuellt — dafuer gibt es jetzt
eine kleine Dialog-Komponente, gebaut wie die Lightbox (Portal, Escape,
Hintergrund festhalten).

Zurueckziehen legt den Schluessel zurueck in den Vorrat. Die Person hat ihn per
DM natuerlich weiterhin — das ist eine Buchhaltung, keine Sperre. Loeschen geht
absichtlich nur bei freien Schluesseln.

## Module dorthin, wo man sie sucht

Ein paar Module standen im falschen Bereich, teils seit Langem:

- Willkommens-Karte: Support → Brand. Sie ist Aussehen, kein Support-Fall, und
  im Brand-Bereich steht der Rest vom Auftritt. Der Block ist woertlich
  umgezogen, nur in eine eigene Konstante — so kann sich beim Umzug nichts am
  Inhalt geaendert haben.
- Twitch & YouTube: System → Feeds. Es ist ein Feed.
- Events: System → Community.
- Auto-Rolle und Rollen merken: Ihre Felder standen laengst im Rollen-Bereich,
  nur das Register sagte "Community" — dadurch sprang "Einrichten" woanders hin
  als die Einstellung liegt.
- Playtester und Alpha-Keys: Community → eigener Bereich.

Damit ist System kein Sammelbecken mehr, sondern nur noch Technik: Waechter,
Sprachkanaele, Erinnerungen, Sicherungen, Member-Gate.

Geprueft: Routen (alle vier neuen bewacht), SQL gegen das Schema, und im
Browser beide Dialoge (Escape schliesst, Hintergrund wird wieder freigegeben,
Hinzufuegen bleibt bei leerem Feld aus), die Liste in allen drei Zustaenden,
und die Suche — "willkommen" fuehrt jetzt nach Brand, "twitch" zu Feeds,
"sticky" zu Rollen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/pages/Settings.jsx

@@ -6,11 +6,12 @@ import {
     IconApplications, IconComposer, IconServer, IconSystem, IconApi, IconTeam,
     IconLock, IconBot, IconUpload, IconChevronDown, IconKey, IconPages, IconX,
     IconHome as IconLayers, IconWarning, IconCheck, IconMessage, IconRefresh,
-    IconSearch, IconSystem as IconTune, IconStar,
+    IconSearch, IconSystem as IconTune, IconStar, IconGame, IconTrash,
 } from '../icons.jsx';
 import { moduleIcon } from '../module-icons.jsx';
 import ModulePage from '../components/ModulePage.jsx';
 import UptimeTrack from '../components/UptimeTrack.jsx';
+import Dialog from '../components/Dialog.jsx';
 import { findSettings, SETTING_INDEX } from '../setting-index.js';
 import { Markdown } from '../markdown.jsx';
 
@@ -59,6 +60,8 @@ const TABS = [
       find: 'rollen menü selbstbedienung buttons reaction roles' },
     { id: 'support', Icon: IconSupport, label: 'Support', section: 'community',
       find: 'ticket modmail willkommen protokoll modlog moderation warnung' },
+    { id: 'playtester', Icon: IconGame, label: 'Playtester', section: 'community',
+      find: 'tester alpha keys schlüssel vergeben pool testen einladen' },
     { id: 'bewerbungen', Icon: IconApplications, label: 'Bewerbungen', section: 'community',
       find: 'formular fragen bewerbung prüfen annehmen ablehnen' },
 
@@ -88,6 +91,7 @@ const TAB_SCOPES = {
     community: 'community',
     rollen: 'rollen',
     support: 'settings',
+    playtester: 'community',
     bewerbungen: 'bewerbungen',
     composer: 'content',
     seiten: 'content',
@@ -298,7 +302,6 @@ export default function Settings({ me }) {
     const [error, setError] = useState(null);
     const [feedback, setFeedback] = useState(null);
     // Community
-    const [playtesters, setPlaytesters] = useState([]);
     // Rollen-Menüs
     const emptyMenu = {
         id: null, title: '', description: '', channel_id: '', exclusive: false,
@@ -312,6 +315,9 @@ export default function Settings({ me }) {
     const [twitchCreds, setTwitchCreds] = useState({ id: '', secret: '' });
     // Alpha-Keys
     const [alphaKeys, setAlphaKeys] = useState(null);
+    // Offene Dialoge: Schlüssel nachlegen bzw. jemanden auswählen
+    const [keyDialog, setKeyDialog] = useState(false);
+    const [keyEmpfaenger, setKeyEmpfaenger] = useState(null);
     const [keyUpload, setKeyUpload] = useState('');
     // Bewerbungs-Formulare
     const emptyForm = {
@@ -459,7 +465,6 @@ export default function Settings({ me }) {
             })
             .catch((e) => setError(e.status));
         apiGet('/api/apikeys').then((d) => setKeys(d.keys)).catch(() => {});
-        apiGet('/api/playtesters').then((d) => setPlaytesters(d.playtesters)).catch(() => {});
         apiGet('/api/rolemenus').then((d) => setMenus(d.menus)).catch(() => {});
         apiGet('/api/tags').then((d) => setTags(d.tags)).catch(() => {});
         apiGet('/api/scheduled').then((d) => setScheduled(d.posts)).catch(() => {});
@@ -820,6 +825,48 @@ export default function Settings({ me }) {
         }
     }
 
+    /** Einen Schlüssel an eine ausgewählte Person schicken */
+    async function keyGeben(userId, name) {
+        try {
+            const res = await apiPost('/api/alphakeys/assign', { user_id: userId });
+            setAlphaKeys(res);
+            setKeyEmpfaenger(null);
+            flash(`✓ Schlüssel an ${name} verschickt`);
+        } catch (e) {
+            flash(`✗ ${e.body?.error ?? 'Vergeben fehlgeschlagen'}`);
+        }
+    }
+
+    /** Vergebenen Schlüssel zurück in den Vorrat */
+    async function keyZurueck(key) {
+        if (!window.confirm(`Schlüssel ${key} wieder freigeben? Die Person behält die Nachricht mit dem Schlüssel.`)) return;
+        try {
+            setAlphaKeys(await apiPost('/api/alphakeys/revoke', { key }));
+        } catch {
+            flash('✗ Zurückziehen fehlgeschlagen');
+        }
+    }
+
+    /** Freien Schlüssel löschen — z. B. einen vertippten */
+    async function keyLoeschen(key) {
+        try {
+            setAlphaKeys(await apiDelete(`/api/alphakeys/${encodeURIComponent(key)}`));
+        } catch (e) {
+            flash(`✗ ${e.body?.error ?? 'Löschen fehlgeschlagen'}`);
+        }
+    }
+
+    async function playtesterEntfernen(userId, name) {
+        if (!window.confirm(`${name} aus dem Playtester-Programm nehmen? Die Rolle wird mit entfernt.`)) return;
+        try {
+            const res = await apiDelete(`/api/playtesters/${userId}`);
+            setAlphaKeys(await apiGet('/api/alphakeys'));
+            flash(res.rolleWeg ? `✓ ${name} entfernt` : `✓ ${name} entfernt — Rolle blieb (Rechte prüfen)`);
+        } catch {
+            flash('✗ Entfernen fehlgeschlagen');
+        }
+    }
+
     async function distributeKeys() {
         if (!window.confirm(`Alpha-Keys jetzt per DM an ${alphaKeys?.playtestersWithout?.length ?? 0} Playtester verteilen?`)) return;
         try {
@@ -1400,6 +1447,106 @@ export default function Settings({ me }) {
     );
 
     const statusDot = { online: '#23a55a', idle: '#f0b232', dnd: '#f23f43' }[form.bot_presence_status] ?? '#23a55a';
+    // Willkommens-Karte: eigener Block, damit sie im Brand-Bereich stehen
+    // kann, wo das uebrige Aussehen gepflegt wird — inhaltlich unveraendert.
+    const willkommensKarte = (
+        <>
+        <div className="settings-section">
+            <h2 className="settings-title">// Willkommen</h2>
+            <div className="field" data-setting="welcome_channel_id">
+                <label>Willkommens-Kanal <span className="field-hint">Begrüßungs-Embed für neue Member</span></label>
+                <PickSelect
+                    items={channelItems}
+                    value={form.welcome_channel_id ?? ''}
+                    onChange={(v) => setForm({ ...form, welcome_channel_id: v })}
+                    empty="— deaktiviert —"
+                />
+            </div>
+        </div>
+
+        <div className="settings-section">
+            <h2 className="settings-title">// Willkommens-Karte</h2>
+            <p className="section-intro">
+                Das Bild, das neue Mitglieder im Willkommens-Kanal begrüßt. Die Vorschau
+                zeigt sofort, wie es aussieht — gespeichert wird erst mit dem Knopf unten.
+            </p>
+
+            <div className="field" data-setting="welcome_card_enabled">
+                <label className="toggle">
+                    <input
+                        type="checkbox"
+                        checked={form.welcome_card_enabled}
+                        onChange={(e) => setForm({ ...form, welcome_card_enabled: e.target.checked })}
+                    />
+                    <span>Karte rendern</span>
+                    <span className="field-hint">aus = nur das Text-Embed mit Avatar als Vorschaubild</span>
+                </label>
+            </div>
+
+            {form.welcome_card_enabled && (
+                <>
+                    <img className="welcome-preview" src={welcomePreviewUrl} alt="Vorschau der Willkommens-Karte" />
+
+                    <div className="wc-colors">
+                        {[
+                            ['welcome_card_bg', 'Hintergrund'],
+                            ['welcome_card_accent', 'Akzent 1'],
+                            ['welcome_card_accent2', 'Akzent 2'],
+                            ['welcome_card_text', 'Name'],
+                        ].map(([key, label]) => (
+                            <label className="wc-color" key={key}>
+                                <input
+                                    className="color-pick"
+                                    type="color"
+                                    value={form[key] ?? '#000000'}
+                                    onChange={(e) => setForm({ ...form, [key]: e.target.value })}
+                                />
+                                <span>{label}</span>
+                            </label>
+                        ))}
+                    </div>
+
+                    <div className="field" data-setting="welcome_card_kicker">
+                        <label>Kleine Zeile <span className="field-hint">über dem Namen — leer = weglassen</span></label>
+                        <input
+                            type="text" maxLength={24} placeholder="WILLKOMMEN"
+                            value={form.welcome_card_kicker ?? ''}
+                            onChange={(e) => setForm({ ...form, welcome_card_kicker: e.target.value })}
+                        />
+                    </div>
+                    <div className="field" data-setting="welcome_card_sub">
+                        <label>Zeile darunter <span className="field-hint">{'{count}'} wird zur Mitglieds-Nummer — leer = weglassen</span></label>
+                        <input
+                            type="text" maxLength={60} placeholder="Member #{count}"
+                            value={form.welcome_card_sub ?? ''}
+                            onChange={(e) => setForm({ ...form, welcome_card_sub: e.target.value })}
+                        />
+                    </div>
+                    <div className="field" data-setting="welcome_card_image">
+                        <label>Hintergrundbild <span className="field-hint">https-Adresse, 900×300 passt genau — leer = nur Farbe mit Raster</span></label>
+                        <input
+                            type="text" placeholder="https://cdn.d4rkst3r.de/welcome.png"
+                            value={form.welcome_card_image ?? ''}
+                            onChange={(e) => setForm({ ...form, welcome_card_image: e.target.value })}
+                        />
+                    </div>
+                    <div className="field" data-setting="welcome_card_watermark">
+                        <label className="toggle">
+                            <input
+                                type="checkbox"
+                                checked={form.welcome_card_watermark}
+                                onChange={(e) => setForm({ ...form, welcome_card_watermark: e.target.checked })}
+                            />
+                            <span>Markenname im Hintergrund</span>
+                            <span className="field-hint">großer, schwach sichtbarer Schriftzug hinten rechts</span>
+                        </label>
+                    </div>
+                </>
+            )}
+        </div>
+        </>
+    );
+
     const tabBrand = (
         <>
             <div className="settings-section bot-card">
@@ -1482,6 +1629,7 @@ export default function Settings({ me }) {
             <div className="settings-actions">
                 <button className="btn btn-save" onClick={saveBrand}>Speichern &amp; anwenden</button>
             </div>
+        {willkommensKarte}
         </>
     );
 
@@ -1500,6 +1648,32 @@ export default function Settings({ me }) {
                         />
                         <button className="btn" onClick={() => sendTest('devlog')}>Test</button>
                     </div>
+
+            <div className="settings-section">
+                <h2 className="settings-title">// Twitch &amp; YouTube</h2>
+                <div className="field" data-setting="social_announce_channel_id">
+                    <label>Social-Kanal <span className="field-hint">🔴 Twitch-Live + ▶️ neue YouTube-Videos</span></label>
+                    <PickSelect
+                        items={channelItems}
+                        value={form.social_announce_channel_id ?? ''}
+                        onChange={(v) => setForm({ ...form, social_announce_channel_id: v })}
+                        empty="— deaktiviert —"
+                    />
+                </div>
+                <div className="field" data-setting="youtube_channel_id">
+                    <div className="field-row">
+                        <input type="text" placeholder="YouTube-Kanal-ID (UC…)" value={form.youtube_channel_id} onChange={(e) => setForm({ ...form, youtube_channel_id: e.target.value })} />
+                        <input type="text" placeholder="Twitch-Login (z. B. d4rkst3r)" value={form.twitch_channel} onChange={(e) => setForm({ ...form, twitch_channel: e.target.value })} />
+                    </div>
+                </div>
+                <div className="field">
+                    <label>Twitch-App-Credentials <span className="field-hint">{form.twitch_creds_set ? '✓ gesetzt' : 'dev.twitch.tv → App registrieren'} — write-only</span></label>
+                    <div className="field-row">
+                        <input type="password" placeholder="Client-ID" value={twitchCreds.id} onChange={(e) => setTwitchCreds({ ...twitchCreds, id: e.target.value })} />
+                        <input type="password" placeholder="Client-Secret" value={twitchCreds.secret} onChange={(e) => setTwitchCreds({ ...twitchCreds, secret: e.target.value })} />
+                    </div>
+                </div>
+            </div>
                 </div>
                 <div className="field" data-setting="commit_channel_id">
                     <label>Commit-Kanal <span className="field-hint">privat — hier landen die Push-Embeds</span></label>
@@ -1603,59 +1777,16 @@ export default function Settings({ me }) {
             </div>
 
             <div className="settings-section">
-                <h2 className="settings-title">// Playtester</h2>
-                <div className="field" data-setting="playtester_role_id">
-                    <label>Playtester-Rolle <span className="field-hint">Bewerbungs-Post via /playtester-setup; leer = aus</span></label>
+                <h2 className="settings-title">// Events</h2>
+                <div className="field" data-setting="events_announce_channel_id">
+                    <label>Event-Ankündigungs-Kanal <span className="field-hint">neue Discord-Events werden hier angekündigt + Events-Seite</span></label>
                     <PickSelect
-                        items={roleItems}
-                        value={form.playtester_role_id ?? ''}
-                        onChange={(v) => setForm({ ...form, playtester_role_id: v })}
+                        items={channelItems}
+                        value={form.events_announce_channel_id ?? ''}
+                        onChange={(v) => setForm({ ...form, events_announce_channel_id: v })}
                         empty="— deaktiviert —"
                     />
                 </div>
-                {playtesters.length > 0 && (
-                    <div className="key-list">
-                        {playtesters.map((p) => (
-                            <div className="key-row" key={p.user_id}>
-                                <span className="key-name">{p.username}</span>
-                                <span className="key-used">seit {p.applied_at.slice(0, 10)}</span>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
-
-            <div className="settings-section">
-                <h2 className="settings-title">// Alpha-Keys</h2>
-                <div className="stats" style={{ marginBottom: '1.2rem' }}>
-                    <div className="stat"><span className="stat-value">{alphaKeys?.free ?? '—'}</span><span className="stat-label">Frei</span></div>
-                    <div className="stat"><span className="stat-value">{alphaKeys?.assigned?.length ?? '—'}</span><span className="stat-label">Vergeben</span></div>
-                    <div className="stat"><span className="stat-value">{alphaKeys?.playtestersWithout?.length ?? '—'}</span><span className="stat-label">Warten</span></div>
-                </div>
-                <div className="field">
-                    <label>Keys hinzufügen <span className="field-hint">einer pro Zeile</span></label>
-                    <textarea rows={3} placeholder={'KEY-AAAA-0001\nKEY-AAAA-0002'} value={keyUpload} onChange={(e) => setKeyUpload(e.target.value)} />
-                </div>
-                <div className="field-row">
-                    <button className="btn" onClick={uploadAlphaKeys}>Hinzufügen</button>
-                    <button
-                        className="btn btn-save"
-                        onClick={distributeKeys}
-                        disabled={!alphaKeys || alphaKeys.free === 0 || alphaKeys.playtestersWithout.length === 0}
-                    >
-                        <IconKey size={14} /> An {alphaKeys?.playtestersWithout?.length ?? 0} Playtester verteilen
-                    </button>
-                </div>
-                {alphaKeys?.assigned?.length > 0 && (
-                    <div className="key-list" style={{ marginTop: '1rem' }}>
-                        {alphaKeys.assigned.map((k) => (
-                            <div className="key-row" key={k.key}>
-                                <span className="key-name">{k.key}</span>
-                                <span className="key-used">→ {k.assigned_to} · {k.assigned_at?.slice(0, 10)}</span>
-                            </div>
-                        ))}
-                    </div>
-                )}
             </div>
 
             <div className="settings-section">
@@ -2046,15 +2177,6 @@ export default function Settings({ me }) {
                     empty="— deaktiviert —"
                 />
             </div>
-            <div className="field" data-setting="welcome_channel_id">
-                <label>Willkommens-Kanal <span className="field-hint">Begrüßungs-Embed für neue Member</span></label>
-                <PickSelect
-                    items={channelItems}
-                    value={form.welcome_channel_id ?? ''}
-                    onChange={(v) => setForm({ ...form, welcome_channel_id: v })}
-                    empty="— deaktiviert —"
-                />
-            </div>
             <div className="field" data-setting="modlog_channel_id">
                 <label>Mod-Log-Kanal <span className="field-hint">PRIVAT — gelöschte/bearbeitete Nachrichten</span></label>
                 <PickSelect
@@ -2065,87 +2187,170 @@ export default function Settings({ me }) {
                 />
             </div>
         </div>
+        </>
+    );
 
-        <div className="settings-section">
-            <h2 className="settings-title">// Willkommens-Karte</h2>
-            <p className="section-intro">
-                Das Bild, das neue Mitglieder im Willkommens-Kanal begrüßt. Die Vorschau
-                zeigt sofort, wie es aussieht — gespeichert wird erst mit dem Knopf unten.
-            </p>
-
-            <div className="field" data-setting="welcome_card_enabled">
-                <label className="toggle">
-                    <input
-                        type="checkbox"
-                        checked={form.welcome_card_enabled}
-                        onChange={(e) => setForm({ ...form, welcome_card_enabled: e.target.checked })}
+    const tabPlaytester = (
+        <>
+            <div className="settings-section">
+                <h2 className="settings-title">// Playtester</h2>
+                <p className="section-intro">
+                    Wer sich über den Knopf aus <strong>/playtester-setup</strong> meldet, landet
+                    hier — mit Rolle. Schlüssel gehen per Direktnachricht raus; kommt sie nicht
+                    an, bleibt der Schlüssel im Vorrat.
+                </p>
+                <div className="field" data-setting="playtester_role_id">
+                    <label>Playtester-Rolle <span className="field-hint">Bewerbungs-Post via /playtester-setup; leer = aus</span></label>
+                    <PickSelect
+                        items={roleItems}
+                        value={form.playtester_role_id ?? ''}
+                        onChange={(v) => setForm({ ...form, playtester_role_id: v })}
+                        empty="— deaktiviert —"
                     />
-                    <span>Karte rendern</span>
-                    <span className="field-hint">aus = nur das Text-Embed mit Avatar als Vorschaubild</span>
-                </label>
-            </div>
+                </div>
 
-            {form.welcome_card_enabled && (
-                <>
-                    <img className="welcome-preview" src={welcomePreviewUrl} alt="Vorschau der Willkommens-Karte" />
+                <div className="stats" style={{ margin: '1.2rem 0' }}>
+                    <div className="stat"><span className="stat-value">{alphaKeys?.playtesters?.length ?? '—'}</span><span className="stat-label">Playtester</span></div>
+                    <div className="stat"><span className="stat-value">{alphaKeys?.free ?? '—'}</span><span className="stat-label">Freie Schlüssel</span></div>
+                    <div className="stat"><span className="stat-value">{alphaKeys?.playtestersWithout?.length ?? '—'}</span><span className="stat-label">Warten</span></div>
+                </div>
 
-                    <div className="wc-colors">
-                        {[
-                            ['welcome_card_bg', 'Hintergrund'],
-                            ['welcome_card_accent', 'Akzent 1'],
-                            ['welcome_card_accent2', 'Akzent 2'],
-                            ['welcome_card_text', 'Name'],
-                        ].map(([key, label]) => (
-                            <label className="wc-color" key={key}>
-                                <input
-                                    className="color-pick"
-                                    type="color"
-                                    value={form[key] ?? '#000000'}
-                                    onChange={(e) => setForm({ ...form, [key]: e.target.value })}
-                                />
-                                <span>{label}</span>
-                            </label>
+                {(alphaKeys?.playtesters?.length ?? 0) === 0 ? (
+                    <p className="notice">Noch niemand dabei.</p>
+                ) : (
+                    <div className="key-list">
+                        {alphaKeys.playtesters.map((p) => (
+                            <div className="key-row" key={p.user_id}>
+                                <span className="key-name">{p.username}</span>
+                                <span className="key-scopes">
+                                    {p.key
+                                        ? <code className="pt-key">{p.key}</code>
+                                        : <span className="pt-wartet">wartet auf Schlüssel</span>}
+                                </span>
+                                <span className="key-used">seit {p.applied_at?.slice(0, 10)}</span>
+                                {p.key ? (
+                                    <button className="btn btn-mini" title="Schlüssel wieder freigeben" onClick={() => keyZurueck(p.key)}>
+                                        Zurückziehen
+                                    </button>
+                                ) : (
+                                    <button
+                                        className="btn btn-mini"
+                                        disabled={!alphaKeys.free}
+                                        title={alphaKeys.free ? 'Schlüssel per Direktnachricht schicken' : 'Vorrat ist leer'}
+                                        onClick={() => keyGeben(p.user_id, p.username)}
+                                    >
+                                        Schlüssel geben
+                                    </button>
+                                )}
+                                <button className="card-delete" title="Aus dem Programm nehmen" onClick={() => playtesterEntfernen(p.user_id, p.username)}>✕</button>
+                            </div>
                         ))}
                     </div>
+                )}
+            </div>
 
-                    <div className="field" data-setting="welcome_card_kicker">
-                        <label>Kleine Zeile <span className="field-hint">über dem Namen — leer = weglassen</span></label>
-                        <input
-                            type="text" maxLength={24} placeholder="WILLKOMMEN"
-                            value={form.welcome_card_kicker ?? ''}
-                            onChange={(e) => setForm({ ...form, welcome_card_kicker: e.target.value })}
-                        />
+            <div className="settings-section">
+                <h2 className="settings-title">// Schlüssel-Vorrat</h2>
+                <div className="field-row" style={{ marginBottom: '1rem' }}>
+                    <button className="btn" onClick={() => setKeyDialog(true)}>
+                        <IconKey size={14} /> Schlüssel nachlegen
+                    </button>
+                    <button
+                        className="btn"
+                        disabled={!alphaKeys?.free || !alphaKeys?.playtestersWithout?.length}
+                        onClick={() => setKeyEmpfaenger('wahl')}
+                    >
+                        Gezielt vergeben …
+                    </button>
+                    <button
+                        className="btn btn-save"
+                        onClick={distributeKeys}
+                        disabled={!alphaKeys || alphaKeys.free === 0 || alphaKeys.playtestersWithout.length === 0}
+                    >
+                        An alle {alphaKeys?.playtestersWithout?.length ?? 0} Wartenden
+                    </button>
+                </div>
+
+                {(alphaKeys?.freieKeys?.length ?? 0) === 0 ? (
+                    <p className="notice">Der Vorrat ist leer.</p>
+                ) : (
+                    <div className="key-list">
+                        {alphaKeys.freieKeys.map((k) => (
+                            <div className="key-row" key={k}>
+                                <span className="key-name"><code className="pt-key">{k}</code></span>
+                                <span className="key-used">frei</span>
+                                <button className="card-delete" title="Schlüssel löschen" onClick={() => keyLoeschen(k)}>✕</button>
+                            </div>
+                        ))}
                     </div>
-                    <div className="field" data-setting="welcome_card_sub">
-                        <label>Zeile darunter <span className="field-hint">{'{count}'} wird zur Mitglieds-Nummer — leer = weglassen</span></label>
-                        <input
-                            type="text" maxLength={60} placeholder="Member #{count}"
-                            value={form.welcome_card_sub ?? ''}
-                            onChange={(e) => setForm({ ...form, welcome_card_sub: e.target.value })}
-                        />
-                    </div>
-                    <div className="field" data-setting="welcome_card_image">
-                        <label>Hintergrundbild <span className="field-hint">https-Adresse, 900×300 passt genau — leer = nur Farbe mit Raster</span></label>
-                        <input
-                            type="text" placeholder="https://cdn.d4rkst3r.de/welcome.png"
-                            value={form.welcome_card_image ?? ''}
-                            onChange={(e) => setForm({ ...form, welcome_card_image: e.target.value })}
-                        />
-                    </div>
-                    <div className="field" data-setting="welcome_card_watermark">
-                        <label className="toggle">
-                            <input
-                                type="checkbox"
-                                checked={form.welcome_card_watermark}
-                                onChange={(e) => setForm({ ...form, welcome_card_watermark: e.target.checked })}
-                            />
-                            <span>Markenname im Hintergrund</span>
-                            <span className="field-hint">großer, schwach sichtbarer Schriftzug hinten rechts</span>
+                )}
+
+                {alphaKeys?.assigned?.length > 0 && (
+                    <>
+                        <h3 className="tm-form-title" style={{ marginTop: '1.6rem' }}>Vergeben</h3>
+                        <div className="key-list">
+                            {alphaKeys.assigned.map((k) => (
+                                <div className="key-row" key={k.key}>
+                                    <span className="key-name"><code className="pt-key">{k.key}</code></span>
+                                    <span className="key-used">
+                                        → {alphaKeys.playtesters?.find((p) => p.user_id === k.assigned_to)?.username ?? k.assigned_to}
+                                        {' · '}{k.assigned_at?.slice(0, 10)}
+                                    </span>
+                                    <button className="btn btn-mini" onClick={() => keyZurueck(k.key)}>Zurückziehen</button>
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
+
+            {keyDialog && (
+                <Dialog
+                    title="Schlüssel nachlegen"
+                    onClose={() => setKeyDialog(false)}
+                    footer={
+                        <>
+                            <button className="btn btn-ghost" onClick={() => setKeyDialog(false)}>Abbrechen</button>
+                            <button
+                                className="btn btn-save"
+                                disabled={!keyUpload.trim()}
+                                onClick={async () => { await uploadAlphaKeys(); setKeyDialog(false); }}
+                            >
+                                Hinzufügen
+                            </button>
+                        </>
+                    }
+                >
+                    <div className="field">
+                        <label>
+                            Schlüssel <span className="field-hint">einer pro Zeile; schon bekannte werden übersprungen</span>
                         </label>
+                        <textarea
+                            rows={8}
+                            placeholder={'KEY-AAAA-0001\nKEY-AAAA-0002'}
+                            value={keyUpload}
+                            onChange={(e) => setKeyUpload(e.target.value)}
+                        />
                     </div>
-                </>
+                </Dialog>
+            )}
+
+            {keyEmpfaenger && (
+                <Dialog title="Wer bekommt einen Schlüssel?" onClose={() => setKeyEmpfaenger(null)}>
+                    <p className="section-intro">
+                        {alphaKeys?.free ?? 0} im Vorrat. Der Schlüssel geht sofort als
+                        Direktnachricht raus — kommt sie nicht an, bleibt er frei.
+                    </p>
+                    <div className="dlg-pick">
+                        {alphaKeys?.playtestersWithout?.map((p) => (
+                            <button key={p.user_id} onClick={() => keyGeben(p.user_id, p.username)}>
+                                {p.username}
+                                <span className="pick-hint">seit {p.applied_at?.slice(0, 10)}</span>
+                            </button>
+                        ))}
+                    </div>
+                </Dialog>
             )}
-        </div>
         </>
     );
 
@@ -2468,38 +2673,7 @@ export default function Settings({ me }) {
             </div>
 
             <div className="settings-section">
-                <h2 className="settings-title">// Events, Social &amp; Voice</h2>
-                <div className="field" data-setting="events_announce_channel_id">
-                    <label>Event-Ankündigungs-Kanal <span className="field-hint">neue Discord-Events werden hier angekündigt + Events-Seite</span></label>
-                    <PickSelect
-                        items={channelItems}
-                        value={form.events_announce_channel_id ?? ''}
-                        onChange={(v) => setForm({ ...form, events_announce_channel_id: v })}
-                        empty="— deaktiviert —"
-                    />
-                </div>
-                <div className="field" data-setting="social_announce_channel_id">
-                    <label>Social-Kanal <span className="field-hint">🔴 Twitch-Live + ▶️ neue YouTube-Videos</span></label>
-                    <PickSelect
-                        items={channelItems}
-                        value={form.social_announce_channel_id ?? ''}
-                        onChange={(v) => setForm({ ...form, social_announce_channel_id: v })}
-                        empty="— deaktiviert —"
-                    />
-                </div>
-                <div className="field" data-setting="youtube_channel_id">
-                    <div className="field-row">
-                        <input type="text" placeholder="YouTube-Kanal-ID (UC…)" value={form.youtube_channel_id} onChange={(e) => setForm({ ...form, youtube_channel_id: e.target.value })} />
-                        <input type="text" placeholder="Twitch-Login (z. B. d4rkst3r)" value={form.twitch_channel} onChange={(e) => setForm({ ...form, twitch_channel: e.target.value })} />
-                    </div>
-                </div>
-                <div className="field">
-                    <label>Twitch-App-Credentials <span className="field-hint">{form.twitch_creds_set ? '✓ gesetzt' : 'dev.twitch.tv → App registrieren'} — write-only</span></label>
-                    <div className="field-row">
-                        <input type="password" placeholder="Client-ID" value={twitchCreds.id} onChange={(e) => setTwitchCreds({ ...twitchCreds, id: e.target.value })} />
-                        <input type="password" placeholder="Client-Secret" value={twitchCreds.secret} onChange={(e) => setTwitchCreds({ ...twitchCreds, secret: e.target.value })} />
-                    </div>
-                </div>
+                <h2 className="settings-title">// Sprachkanäle</h2>
                 <div className="field" data-setting="tempvoice_channel_id">
                     <label>Temp-Voice-Hub <span className="field-hint">„Join to Create": Beitritt erzeugt eigenen Voice-Kanal (Bot braucht Kanäle verwalten + Member verschieben)</span></label>
                     <PickSelect
@@ -3404,6 +3578,7 @@ export default function Settings({ me }) {
         community: tabCommunity,
         rollen: tabRollen,
         support: tabSupport,
+        playtester: tabPlaytester,
         bewerbungen: tabBewerbungen,
         composer: tabComposer,
         seiten: tabSeiten,