Modul-Tab im Plugin-Raster: Filter-Reiter und Symbole
Deploy / check (push) Has been cancelled
Deploy / deploy (push) Has been cancelled

Vorbild war das MEE6-Dashboard: Kategorie-Reiter über einem Raster aus
Karten, jede mit einem eigenen Symbol. Inhaltlich war unser Modul-Tab
schon dort — es fehlten genau diese zwei Dinge.

Die Gruppen standen als Überschriften untereinander, was bei 35 Karten
eine lange Rolle ergab. Jetzt filtern Reiter mit Anzahl: Alle, die vier
Gruppen, dazu „Noch einzurichten" und „Ausgeschaltet". Die beiden letzten
sind bewusst dabei — mit genau diesen Fragen kommt man am häufigsten her.
Die Gruppe steht klein unter dem Namen, damit sie im gefilterten Raster
nicht verlorengeht.

Jede Karte hat eine Symbol-Kachel, die bei laufendem Modul in der
Markenfarbe leuchtet und sonst grau bleibt — man erkennt eine Funktion
damit am Bild statt am Lesen. Die Zuordnung lag schon in der
Funktionsseite; sie liegt jetzt in module-icons.jsx, damit beide Seiten
dieselbe benutzen.

Farbige Kachelbilder wie bei MEE6 gibt es bewusst nicht: die Strichsymbole
passen zum Rest der Oberfläche, bunte Kacheln wären ein Fremdkörper.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-31 17:22:04 +02:00
co-authored by Claude Fable 5
parent 07afa094a2
commit c6977f9c4a
4 changed files with 152 additions and 64 deletions
+4 -26
View File
@@ -5,32 +5,10 @@ import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { apiGet } from '../api.js';
import {
IconDevlog, IconCommits, IconChangelog, IconActivity, IconMessage, IconPlay,
IconLevel, IconStar, IconGallery, IconThumbsUp, IconGiveaway, IconBirthday,
IconEvents, IconGame, IconKey, IconRoles, IconApplications, IconShield,
IconArchive, IconMail, IconSupport, IconMagic, IconTeam, IconRefresh,
IconWarning, IconServer, IconMonitor, IconVoice, IconZap, IconClock,
IconSend, IconTag, IconDatabase, IconPackage, IconLock,
IconApi, IconPages, IconBrand, IconBot, IconArrowRight, IconIdea,
IconMessage, IconTeam, IconServer, IconApi, IconPages, IconBrand,
IconBot, IconArrowRight,
} from '../icons.jsx';
// Ein Symbol je Funktion — bewusst hier und nicht im Register, damit der
// Bot-Code nichts über das Frontend wissen muss.
const FEATURE_ICONS = {
devlogs: IconDevlog, commit_feed: IconCommits, releases: IconChangelog,
weekly_recap: IconActivity, devlog_threads: IconMessage, social: IconPlay,
levels: IconLevel, starboard: IconStar, gallery: IconGallery,
voting: IconThumbsUp, giveaways: IconGiveaway, birthdays: IconBirthday,
events: IconEvents, playtester: IconGame, alpha_keys: IconKey,
role_menus: IconRoles, applications: IconApplications,
moderation: IconShield, modlog: IconArchive, modmail: IconMail,
tickets: IconSupport, welcome: IconMagic, autorole: IconTeam,
sticky_roles: IconRefresh, bug_reports: IconWarning,
server_monitor: IconServer, watchdog: IconMonitor, temp_voice: IconVoice,
triggers: IconZap, reminders: IconClock, scheduled_posts: IconSend,
tags: IconTag, backups: IconDatabase, repo_backups: IconPackage,
member_gate: IconLock,
};
import { moduleIcon } from '../module-icons.jsx';
// Was kein Discord-Modul ist, sondern zum Drumherum gehört
const EXTRAS = [
@@ -91,7 +69,7 @@ export default function BotFeatures() {
<h2 className="settings-title">// {group.label}</h2>
<div className="feature-grid">
{items.map((f) => {
const Icon = FEATURE_ICONS[f.id] ?? IconIdea;
const Icon = moduleIcon(f.id);
return (
<div className="card feature-card" key={f.id}>
<span className="feature-icon"><Icon size={20} /></span>