Webinterface: Emojis durch Lucide-Icons ersetzt

Emojis werden vom Betriebssystem gerendert — auf Windows, Mac und Android
sehen sie unterschiedlich aus, und sie sind bunt. Im streng zweifarbigen
D4RKST3R-Look stachen sie entsprechend heraus.

Jetzt kommen die Symbole aus einem einzigen Set (Lucide, dünne Outlines),
zentral in src/icons.jsx gebündelt: eine Größe, eine Strichstärke, überall
gleich — und sie erben die Textfarbe, sind also Teil der Marke statt
Fremdkörper. Betroffen sind Navigation, Startseite, Server, Roadmap,
Profil, Level, Galerie, Devlogs, Lightbox, Composer und alle Setup-Tabs.

Bewusst Emojis geblieben sind:
- die Spiel-Presets der Server (landen als Icon im Discord-Embed)
- Rollen-Menü-Emojis und Platzhalter für Discord-Inhalte
- beschreibende Hinweise wie „🔔-Button am Post" oder „🟢/🔴 im Embed",
  die zeigen, wie etwas in Discord aussehen wird
- die selbst gepflegten Dienst-Icons im Portal

Dazu Detailarbeit: Server-Status als farbiger Punkt statt Emoji, Platz 1–3
der Bestenliste als Pokal in Gold/Silber/Bronze, Pagination mit Chevrons.
Bundle wächst um 19 kB (Tree-Shaking greift, nur die ~70 genutzten Icons).

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

frontend/src/components/EmbedComposer.jsx

@@ -2,6 +2,7 @@
 // mit Live-Vorschau im Discord-Look + speicherbaren Vorlagen.
 import { useEffect, useState } from 'react';
 import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
+import { IconBot, IconSave, IconX } from '../icons.jsx';
 import { Markdown } from '../markdown.jsx';
 
 const EMPTY_EMBED = {
@@ -54,7 +55,7 @@ function DiscordPreview({ content, embed, useEmbed }) {
     return (
         <div className="dpv">
             <div className="dpv-msg">
-                <div className="dpv-avatar">🤖</div>
+                <div className="dpv-avatar"><IconBot size={20} /></div>
                 <div className="dpv-body">
                     <div className="dpv-name">d4rkbot <span className="dpv-tag">APP</span> <span className="dpv-time">heute um {new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr</span></div>
                     {content.trim() && <div className="dpv-content"><Markdown text={content} /></div>}
@@ -179,8 +180,8 @@ export default function EmbedComposer({ channelOptions, flash }) {
                         {templates.map((t) => <option key={t.name} value={t.name}>{t.name}</option>)}
                     </select>
                     <input type="text" style={{ flex: 1 }} placeholder="Als Vorlage speichern unter…" value={templateName} onChange={(e) => setTemplateName(e.target.value)} />
-                    <button className="btn" onClick={saveTemplate}>💾</button>
-                    <button className="card-delete" title="Vorlage löschen" onClick={removeTemplate}>✕</button>
+                    <button className="btn" onClick={saveTemplate} title="Vorlage speichern"><IconSave size={15} /></button>
+                    <button className="card-delete" title="Vorlage löschen" onClick={removeTemplate}><IconX size={14} /></button>
                 </div>
             </div>
 

frontend/src/components/Lightbox.jsx

@@ -3,6 +3,7 @@
 // die Pfeile stehen NEBEN dem Bild, die Info-Zeile darunter.
 import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { IconX, IconChevronLeft, IconChevronRight } from '../icons.jsx';
 
 export default function Lightbox({ images, start = 0, onClose }) {
     const [index, setIndex] = useState(start);
@@ -42,10 +43,10 @@ export default function Lightbox({ images, start = 0, onClose }) {
             }}
             role="dialog" aria-modal="true"
         >
-            <button className="lb-close" onClick={onClose} title="Schließen (Esc)">✕</button>
+            <button className="lb-close" onClick={onClose} title="Schließen (Esc)"><IconX size={17} /></button>
             <div className="lb-row">
                 {images.length > 1 && (
-                    <button className="lb-nav" onClick={(e) => { e.stopPropagation(); prev(); }} title="Zurück (←)">‹</button>
+                    <button className="lb-nav" onClick={(e) => { e.stopPropagation(); prev(); }} title="Zurück"><IconChevronLeft size={24} /></button>
                 )}
                 <figure className="lb-figure" onClick={(e) => e.stopPropagation()}>
                     <img className="lb-img" src={img.src ?? img} alt={img.alt ?? ''} />
@@ -55,7 +56,7 @@ export default function Lightbox({ images, start = 0, onClose }) {
                     </figcaption>
                 </figure>
                 {images.length > 1 && (
-                    <button className="lb-nav" onClick={(e) => { e.stopPropagation(); next(); }} title="Weiter (→)">›</button>
+                    <button className="lb-nav" onClick={(e) => { e.stopPropagation(); next(); }} title="Weiter"><IconChevronRight size={24} /></button>
                 )}
             </div>
         </div>,