Ideen bekommen Bereiche und einen Thread zum Reden

Nach dem Vorbild von windrose.support: Bereiche zum Einsortieren, Sortierung
nach Top / Bewegung / Neu, und eine Zahl daneben, wie viel darueber geredet
wird.

Der Unterschied zu so einem Dienst ist, wo geredet wird. Zu jedem Wunsch macht
der Bot jetzt einen Thread unter dem Post auf. Der Kommentar-Zaehler auf der
Roadmap zaehlt die Beitraege darin und verlinkt hinein — es gibt also einen
Zaehler wie bei einem Ideen-Board, aber ohne ein zweites Kommentarsystem neben
Discord zu stellen. Genau das hatte ich beim letzten Mal als das Falsche
bezeichnet, und dabei bleibt es.

Eingereicht wird jetzt auch ueber einen Aufruf-Post: /wunsch-setup postet ihn,
und mit Bereichen wird daraus ein Auswahlmenue — erst wohin, dann das
Formular. Ohne Bereiche bleibt es beim einen Knopf. Derselbe Aufbau wie bei den
Ticket-Anliegen, bis hin zur Emoji-Pruefung, die ich mir dort schon geschrieben
hatte.

Das Anlegen selbst ist nach bot/wishes.js gewandert. /wunsch, der Knopf und die
Webseite gehen jetzt denselben Weg — vorher hatte die Webseite ihr eigenes
Embed zusammengebaut, das dem aus dem Befehl nur aehnlich sah und keinen Thread
bekam.

"Bewegung" sind die Stimmen der letzten sieben Tage. Die Rangliste allein
zementiert alte Wuensche: was einmal oben steht, bleibt oben, egal ob noch
jemand hinschaut. Sortiert wird auf dem Server, weil die Zeitstempel der
Stimmen im Browser gar nicht ankommen.

Bewusst nicht uebernommen: Gegenstimmen. Windrose hat sie, aber bei einer
Community dieser Groesse laden sie zum Nachtreten ein und schrecken vom
Einreichen ab — und eine Zahl, die aus zwei Richtungen kommt, sagt am Ende
weniger als eine, die nur zaehlt, wer etwas will.

Geprueft: Migration erneut durchgespielt (das Schema hat drei Spalten
dazubekommen), Routen, SQL gegen das Schema, und im Browser alle drei
Filterreihen einzeln und kombiniert, der Sortierwechsel, die Thread-Links und
die Bereichs-Pflege im Panel.

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

frontend/src/pages/Settings.jsx

@@ -365,6 +365,8 @@ export default function Settings({ me }) {
     const [statusDialog, setStatusDialog] = useState(null);
     const [statusGrund, setStatusGrund] = useState('');
     const [mergeVon, setMergeVon] = useState(null);
+    const [bereiche, setBereiche] = useState([]);
+    const [bereichDraft, setBereichDraft] = useState({ id: null, name: '', emoji: '' });
     const [anliegenDraft, setAnliegenDraft] = useState({ id: null, name: '', emoji: '🎫', beschreibung: '', ping_role_id: '', intro: '' });
     const [dienstDraft, setDienstDraft] = useState({ id: null, name: '', url: '', gruppe: 'Dienste', oeffentlich: false });
     const [owner, setOwner] = useState(null);
@@ -495,7 +497,10 @@ export default function Settings({ me }) {
         apiGet('/api/watchdog').then(setWatchdog).catch(() => {});
         apiGet('/api/automod').then(setAutomod).catch(() => {});
         apiGet('/api/ticket-categories').then((d) => setAnliegen(d.kategorien ?? [])).catch(() => {});
-        apiGet('/api/wishes').then((d) => setWuensche(d.wishes ?? [])).catch(() => {});
+        apiGet('/api/wishes').then((d) => {
+            setWuensche(d.wishes ?? []);
+            setBereiche(d.bereiche ?? []);
+        }).catch(() => {});
         apiGet('/api/ssoapps').then((d) => setSsoApps(d.apps)).catch(() => {});
         apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {});
         apiGet('/api/pages/all/list').then((d) => setPages(d.pages)).catch(() => {});
@@ -1865,6 +1870,64 @@ export default function Settings({ me }) {
                 </Dialog>
             )}
 
+            <div className="settings-section">
+                <h2 className="settings-title">// Wunsch-Bereiche</h2>
+                <p className="section-intro">
+                    Schubladen für Ideen — „Fahrzeuge", „Wirtschaft", „Technik". Ohne Bereiche
+                    bleibt die Liste eine Liste; mit ihnen kann man auf der Roadmap filtern, und
+                    der Aufruf-Post in Discord fragt beim Einreichen nach dem Bereich. Nach dem
+                    Ändern <strong>/wunsch-setup</strong> neu ausführen.
+                </p>
+
+                {bereiche.length === 0 && <p className="notice">Noch keine Bereiche.</p>}
+
+                {bereiche.length > 0 && (
+                    <div className="key-list" style={{ marginBottom: '1.2rem' }}>
+                        {bereiche.map((b) => (
+                            <div className="key-row" key={b.id}>
+                                <span className="tk-emoji">{b.emoji}</span>
+                                <span className="key-name">{b.name}</span>
+                                <span className="key-used">
+                                    {(() => {
+                                        const n = wuensche.filter((w) => w.category_id === b.id).length;
+                                        return `${n} ${n === 1 ? 'Wunsch' : 'Wünsche'}`;
+                                    })()}
+                                </span>
+                                <button
+                                    className="btn btn-mini"
+                                    onClick={() => setBereichDraft({ id: b.id, name: b.name, emoji: b.emoji ?? '' })}
+                                >
+                                    Bearbeiten
+                                </button>
+                                <button className="card-delete" title="Bereich entfernen" onClick={() => bereichLoeschen(b)}>✕</button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                <div className="field-row">
+                    <input
+                        type="text" maxLength={32} placeholder="🚗" style={{ maxWidth: '5rem' }}
+                        value={bereichDraft.emoji}
+                        onChange={(e) => setBereichDraft({ ...bereichDraft, emoji: e.target.value })}
+                    />
+                    <input
+                        type="text" maxLength={40} placeholder="Name, z. B. Fahrzeuge"
+                        value={bereichDraft.name}
+                        onChange={(e) => setBereichDraft({ ...bereichDraft, name: e.target.value })}
+                        onKeyDown={(e) => { if (e.key === 'Enter') bereichSpeichern(); }}
+                    />
+                    <button className="btn" onClick={bereichSpeichern}>
+                        {bereichDraft.id ? 'Speichern' : 'Hinzufügen'}
+                    </button>
+                    {bereichDraft.id && (
+                        <button className="btn btn-ghost" onClick={() => setBereichDraft({ id: null, name: '', emoji: '' })}>
+                            Abbrechen
+                        </button>
+                    )}
+                </div>
+            </div>
+
             <div className="settings-section">
                 <h2 className="settings-title">// Geburtstage</h2>
                 <div className="field" data-setting="birthday_channel_id">
@@ -2080,6 +2143,29 @@ export default function Settings({ me }) {
         </>
     );
 
+    async function bereichSpeichern() {
+        try {
+            const res = bereichDraft.id
+                ? await apiPut(`/api/wish-categories/${bereichDraft.id}`, bereichDraft)
+                : await apiPost('/api/wish-categories', bereichDraft);
+            setBereiche(res.bereiche ?? []);
+            setBereichDraft({ id: null, name: '', emoji: '' });
+        } catch (e) {
+            flash(`✗ ${e.body?.error ?? 'Fehlgeschlagen'}`);
+        }
+    }
+
+    async function bereichLoeschen(b) {
+        if (!window.confirm(`Bereich „${b.name}" entfernen? Die Wünsche darin bleiben, stehen dann nur ohne Schild da.`)) return;
+        try {
+            const res = await apiDelete(`/api/wish-categories/${b.id}`);
+            setBereiche(res.bereiche ?? []);
+            if (res.wishes) setWuensche(res.wishes);
+        } catch {
+            flash('✗ Entfernen fehlgeschlagen');
+        }
+    }
+
     /** Status setzen — mit Begruendung, denn genau die fehlt sonst */
     function wunschStatus(wunsch, status) {
         const label = Object.fromEntries(WUNSCH_STATUS)[status];