Pepe44DEV/Papo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate dashboard to real HeroUI v3 components and neutral theme
All checks were successful
Deploy Discord Bot / deploy (push) Successful in -1m4s
Details
SonarQube / sonar (push) Successful in 1m8s
Details

Browse Source 
The frontend was built against HeroUI v2 props/classes (variant="light"/"flat",
color="primary", startContent, text-tiny, <Avatar src=/name=>) while
@heroui/react ^3.2.1 is installed, so most styling was silently ignored.
Rewrites every page/component onto the actual v3 API (variant/color enums,
Tooltip/Dropdown trigger-content structure, Avatar.Image/Fallback via a new
AppAvatar helper) and replaces the custom orange branding with HeroUI's
neutral default theme tokens. Also compacts the dashboard stat tiles, narrows
the sidebar, and swaps the activity stat grid for a single-hue comparison bar
chart.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Pepe44DEV
2026-07-02 12:34:53 +02:00
parent 6599158737
commit 0c47dce508
32 changed files with 537 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/pages/ReactionRoles.tsx
View File

@@ -13,20 +13,20 @@ export function ReactionRoles() {
<h3 className="mb-3 text-base font-semibold">Bestehende Sets ({reactionRoles.length})</h3>
<div className="space-y-3">
{reactionRoles.length ? reactionRoles.map((set, i) => (
<Card key={set.id || i} className="border border-default-100 bg-default-50/20">
<Card key={set.id || i}>
<CardContent className="flex items-center gap-3 p-4">
<div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
<div className="flex size-10 items-center justify-center rounded-xl bg-accent-soft text-accent-soft-foreground">
<Tag size={18} />
</div>
<div className="min-w-0 flex-1">
<div className="font-semibold text-small truncate">{set.title || 'Reaction Role'}</div>
<div className="text-tiny text-default-400 truncate">Channel: {set.channelId || '-'}</div>
<div className="font-semibold text-sm truncate">{set.title || 'Reaction Role'}</div>
<div className="text-xs text-muted truncate">Channel: {set.channelId || '-'}</div>
</div>
<Chip size="sm" variant="flat">{(set.entries?.length || 0)} Eintr<EFBFBD>ge</Chip>
<Chip size="sm" variant="soft">{(set.entries?.length || 0)} Einträge</Chip>
</CardContent>
</Card>
)) : (
<div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
<div className="flex flex-col items-center gap-2 py-8 text-center text-sm text-muted">
<Tag size={24} />
Keine Sets
</div>
@@ -34,7 +34,7 @@ export function ReactionRoles() {
</div>
</div>
<Card className="border border-default-100 bg-default-50/20">
<Card>
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">Neues Set</h3>
</CardHeader>
@@ -51,27 +51,27 @@ export function ReactionRoles() {
<TextField>
<Label>Channel ID</Label>
<Input
placeholder="Channel f<EFBFBD>r die Nachricht"
placeholder="Channel für die Nachricht"
value={reactionDraft.channelId}
onChange={(e) => setReactionDraft((s) => ({ ...s, channelId: e.target.value }))}
/>
</TextField>
<div>
<label className="block text-small font-medium mb-1">Eintr<EFBFBD>ge</label>
<TextField>
<Label>Einträge</Label>
<TextArea
placeholder="Emoji | Role ID | Label&#10;:emoji: | 123456789 | Rolle 1&#10;:wave: | 987654321 | Rolle 2"
minRows={6}
rows={6}
value={reactionDraft.entries}
onChange={(e) => setReactionDraft((s) => ({ ...s, entries: e.target.value }))}
/>
<p className="mt-1 text-tiny text-default-400">
<p className="mt-1 text-xs text-muted">
Pro Zeile: Emoji | Role ID | Label (optional) | Beschreibung (optional)
</p>
</div>
</TextField>
<Button color="primary" startContent={<Save size={16} />} onPress={saveReactionRole}>
Reaction Role speichern
<Button variant="primary" onPress={saveReactionRole}>
<Save size={16} /> Reaction Role speichern
</Button>
</CardContent>
</Card>