Config: Speichern-Leiste und durchsuchbare Kanal-Auswahl

Der Speichern-Knopf stand am Seitenende und war bei den zweispaltigen
Bereichen oft gar nicht zu sehen. Vor allem gab es keinen Hinweis, dass
etwas offen ist — wer einen Kanal umstellte und neu lud, verlor die
Änderung kommentarlos.

Jetzt erscheint unten eine Leiste, sobald sich etwas vom gespeicherten
Stand unterscheidet: Anzahl der Änderungen, Verwerfen, Speichern. Beim
Verlassen mit offenen Änderungen fragt der Browser nach. Der Vergleich
zieht Bot-Name und -Beschreibung mit ein, die außerhalb des Formulars
gepflegt werden.

Die 27 Kanal- und Rollen-Auswahlen sind keine nativen Dropdowns mehr,
sondern dieselbe durchsuchbare Liste wie bei den gamedig-IDs: tippen
filtert, Enter nimmt den ersten Treffer. Bei zwölf Kanälen merkt man das
schon, bei fünfzig ist es der Unterschied.

Beim Testen zwei echte Fehler gefunden, beide älter als diese Änderung:

Nicht gesetzte Kanäle kommen als null aus der API. String(null) ist
"null" — also eine Kanal-ID, die es nie gibt. Auf einer frischen
Installation scheiterte damit das Speichern *jeder* Einstellung, solange
Devlog- oder Commit-Kanal leer waren. Sichtbar wurde das erst, weil die
Leiste jetzt überall auftaucht statt nur auf vier Bereichen.

Außerdem wurde jeder Kanal im Formular geprüft, auch die unveränderten.
Ein inzwischen gelöschter Kanal hätte damit das Speichern aller anderen
Einstellungen dauerhaft blockiert. Geprüft wird jetzt nur, was sich
gegenüber dem ausgelieferten Stand wirklich ändert.

Nachtrag zum Selbsttest: der erste Versuch, die Auswahlen per Regex zu
ersetzen, lief mit DOTALL und griff dadurch über <select>-Grenzen hinweg —
zwei fremde Dropdowns wurden zerlegt. Der Build hat es gemeldet, die Datei
wurde zurückgesetzt und der Ersatz zeilenweise wiederholt.

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

frontend/src/style.css

@@ -1341,6 +1341,41 @@ label.toggle {
 .gamesel-id { color: var(--muted2); font-family: var(--mono); font-size: .75rem; }
 .gamesel-item:hover .gamesel-id { color: var(--muted); }
 
+/* Durchsuchbare Kanal-/Rollen-Auswahl (ersetzt die nativen Dropdowns) */
+.picksel { position: relative; max-width: 44rem; }
+.picksel input {
+    width: 100%; padding-right: 2rem;
+    background: #0d0d0d; border: 1px solid var(--border); border-radius: 8px;
+    color: var(--text); font-family: var(--body); font-size: .95rem;
+    padding: .55rem .8rem; outline: none;
+    transition: border-color .2s;
+}
+.picksel input:focus { border-color: var(--neon); }
+.picksel-caret {
+    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
+    display: inline-flex; color: var(--muted2); cursor: pointer;
+}
+.picksel-caret:hover { color: var(--neon); }
+.picksel-list {
+    position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
+    max-height: 17rem; overflow-y: auto;
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, .65);
+}
+.picksel-item {
+    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
+    width: 100%; padding: .45rem .75rem; border: 0; background: none; cursor: pointer;
+    color: var(--text); font-family: var(--body); font-size: .93rem; text-align: left;
+}
+.picksel-item:hover, .picksel-item.active { background: var(--bg3); color: var(--neon); }
+.picksel-label.muted { color: var(--muted2); font-style: italic; }
+.picksel-hint { color: var(--muted2); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
+.picksel-item:hover .picksel-hint { color: var(--muted); }
+.picksel-none {
+    display: block; padding: .6rem .75rem;
+    color: var(--muted2); font-family: var(--mono); font-size: .7rem;
+}
+
 /* ── Member-Bereich: Gate-Banner, Profil, Web-Voting ── */
 .gate-banner {
     display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
@@ -1994,6 +2029,32 @@ button.with-icon, a.with-icon { justify-content: center; }
 }
 .empty-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .8rem; }
 
+/* ── SPEICHERN-LEISTE ──────────────────────────────── */
+/* Klebt am unteren Rand, sobald etwas offen ist. Vorher stand der Knopf am
+   Seitenende — bei den zweispaltigen Bereichen sah man ihn oft gar nicht. */
+.save-bar {
+    position: sticky; bottom: 1.2rem; z-index: 300;
+    display: flex; align-items: center; gap: 1rem;
+    width: fit-content; max-width: 100%;
+    margin: -3.5rem auto 0;
+    padding: .7rem .9rem .7rem 1.3rem;
+    background: rgba(18, 18, 18, .96);
+    border: 1px solid var(--neon);
+    border-radius: 99px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 20px rgba(245, 197, 24, .12);
+    animation: riseIn .25s ease both;
+}
+.save-bar-text {
+    font-family: var(--mono); font-size: .68rem;
+    letter-spacing: .12em; text-transform: uppercase;
+    color: var(--neon); white-space: nowrap;
+}
+.save-bar .btn { padding: .45rem 1.1rem; font-size: .62rem; }
+@media (max-width: 640px) {
+    .save-bar { gap: .5rem; padding: .6rem .6rem .6rem .9rem; }
+    .save-bar-text { font-size: .6rem; letter-spacing: .08em; }
+}
+
 /* ── NACH OBEN ─────────────────────────────────────── */
 .to-top {
     position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 400;