Webinterface: Emojis durch Lucide-Icons ersetzt
Deploy / check (push) Has been cancelled
Deploy / deploy (push) Has been cancelled

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>
This commit is contained in:
2026-07-31 14:37:25 +02:00
co-authored by Claude Fable 5
parent 6daa1f7d43
commit 1afbe9d238
20 changed files with 295 additions and 79 deletions
+8 -7
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { apiGet, apiPost } from '../api.js';
import { Markdown } from '../markdown.jsx';
import { SkeletonCards } from '../components/Skeleton.jsx';
import { IconThumbsUp } from '../icons.jsx';
const dueFmt = new Intl.DateTimeFormat('de-DE', { month: 'long', year: 'numeric' });
@@ -104,20 +105,20 @@ export default function Roadmap() {
? w
: { ...w, voted: res.voted, score: w.score + (res.voted ? 1 : -1) }));
} catch (e) {
if (e.status === 403) setSubmitMsg('⚠️ Voten dürfen nur Discord-Member.');
if (e.status === 403) setSubmitMsg(' Voten dürfen nur Discord-Member.');
}
}
async function submitWish() {
const text = idea.trim();
if (text.length < 5) { setSubmitMsg('⚠️ Etwas mehr Text bitte.'); return; }
if (text.length < 5) { setSubmitMsg(' Etwas mehr Text bitte.'); return; }
try {
await apiPost('/api/wishes', { idea: text });
setIdea('');
setSubmitMsg(' Wunsch eingereicht — er steht jetzt auch im Discord zur Abstimmung!');
setSubmitMsg(' Wunsch eingereicht — er steht jetzt auch im Discord zur Abstimmung!');
apiGet('/api/wishes').then((d) => setWishes(d.wishes)).catch(() => {});
} catch (e) {
setSubmitMsg(e.status === 403 ? '⚠️ Einreichen dürfen nur Discord-Member.' : '⚠️ Konnte den Wunsch nicht einreichen.');
setSubmitMsg(e.status === 403 ? ' Einreichen dürfen nur Discord-Member.' : ' Konnte den Wunsch nicht einreichen.');
}
}
@@ -151,14 +152,14 @@ export default function Roadmap() {
<div className="wish-row" key={w.message_id ?? `${w.created_at}-${i}`}>
{canVote && w.message_id ? (
<button
className={`wish-vote${w.voted ? ' voted' : ''}`}
className={`wish-vote with-icon${w.voted ? ' voted' : ''}`}
title={w.voted ? 'Vote zurücknehmen' : 'Dafür stimmen'}
onClick={() => vote(w.message_id)}
>
👍 {w.score}
<IconThumbsUp size={14} /> {w.score}
</button>
) : (
<span className="wish-score">👍 {w.score}</span>
<span className="wish-score with-icon"><IconThumbsUp size={14} /> {w.score}</span>
)}
<span className="wish-idea">{w.idea}</span>
<span className="wish-author">{w.author}</span>