From e9b0f25d7163000f73e03de796c8b5d9a29d8439 Mon Sep 17 00:00:00 2001 From: Pepe44DEV Date: Wed, 1 Jul 2026 04:34:39 +0200 Subject: [PATCH] fix: HeroUI v3 compound API (Card.Content/Card.Header) + @heroui/styles CSS import --- frontend/package.json | 1 + frontend/src/App.tsx | 98 +++++++++++++++++++++---------------------- frontend/src/app.css | 3 ++ 3 files changed, 52 insertions(+), 50 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index f59da90..4f4a81e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@heroui/react": "^3.2.1", + "@heroui/styles": "^3.2.1", "framer-motion": "^12.23.24", "lucide-react": "^0.542.0", "react": "^19.2.0", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3071b0d..b7021c5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,8 +2,6 @@ import { Avatar, Button, Card, - CardContent, - CardHeader, Chip, Input, Spinner, @@ -504,13 +502,13 @@ function App() { className="papo-card" onPress={() => setCurrentGuildId(guild.id)} > - +
{guild.name}
ID: {guild.id}
- + ))} @@ -550,7 +548,7 @@ function App() { - +
Angemeldet als
{user?.username} @@ -567,14 +565,14 @@ function App() { > Logout - +
- +

Guild Dashboard

Komplettes HeroUI-Rework fuer dein Bot-Dashboard

@@ -596,13 +594,13 @@ function App() { {statusMessage ?
{statusMessage}
: null}
- + {section === 'overview' && (
- +
@@ -625,7 +623,7 @@ function App() { > Bot aktiv - +
@@ -644,24 +642,24 @@ function App() { /> - +

Activity

Live-Statistiken aus deinem Bot

- - + + } kind="messages" label="Messages (24h)" value={activity?.messages24h ?? 0} /> } kind="commands" label="Commands (24h)" value={activity?.commands24h ?? 0} /> } kind="automod" label="Automod (24h)" value={activity?.automod24h ?? 0} /> - + - +

Guild Logs

Neueste Ereignisse

@@ -669,13 +667,13 @@ function App() { - - + +
{logs.length ? ( logs.map((log, index) => ( - +
{(log.level || 'info').toUpperCase()} @@ -683,38 +681,38 @@ function App() { {formatDate(log.timestamp)}
{log.category ? `[${log.category}] ` : ''}{log.message || '-'}
- + )) ) : (
Keine Logs
)}
- +
- +

Schnellzugriff

Die wichtigsten Bereiche deines Dashboards

- - + + {navItems .filter((item) => !['overview', 'admin'].includes(item.key)) .slice(0, 6) .map((item) => ( setSection(item.key)}> - +
{item.icon}
{item.label}
HeroUI-Komponenten fuer den Bereich {item.label}
- + ))} - +
)} @@ -914,13 +912,13 @@ function App() {
{modules.map((module) => ( - +
{module.name}
{module.description || ''}
void toggleModule(module.key, value)} /> - + ))}
@@ -933,14 +931,14 @@ function App() {
{(events || []).map((event) => ( - +
{event.title}
{event.description || 'Keine Beschreibung'}
{formatDate(event.startsAt)}
- + ))}
@@ -973,13 +971,13 @@ function App() { function SectionCard(props: { title: string; subtitle: string; children: React.ReactNode }) { return ( - +

{props.title}

{props.subtitle}

- - {props.children} + + {props.children} ); } @@ -987,10 +985,10 @@ function SectionCard(props: { title: string; subtitle: string; children: React.R function FormCard(props: { title: string; children: React.ReactNode }) { return ( - +
{props.title}
- - {props.children} + + {props.children} ); } @@ -998,14 +996,14 @@ function FormCard(props: { title: string; children: React.ReactNode }) { function ListCard(props: { title: string; items: string[] }) { return ( - +
{props.title}
- - + +
{props.items.length ? props.items.map((item, index) =>
{item}
) :
Keine Daten
}
- + ); } @@ -1013,30 +1011,30 @@ function ListCard(props: { title: string; items: string[] }) { function InfoPanel(props: { title: string; items: Array<{ icon: React.ReactNode; label: string; value: string }>; actionLabel: string; onAction: () => void }) { return ( - +

{props.title}

Wichtige Guild-Daten auf einen Blick

- - + +
{props.items.map((item) => ( - +
{item.icon} {item.label}
{item.value}
- + ))}
- + ); } @@ -1044,7 +1042,7 @@ function InfoPanel(props: { title: string; items: Array<{ icon: React.ReactNode; function ActivityTile(props: { icon: React.ReactNode; label: string; value: number; kind: 'messages' | 'commands' | 'automod' }) { return ( - +
{props.icon}
@@ -1055,7 +1053,7 @@ function ActivityTile(props: { icon: React.ReactNode; label: string; value: numb - + ); } @@ -1072,13 +1070,13 @@ function SettingsLayout(props: { title: string; subtitle: string; children: Reac - +
Design-Richtung

Dieser Bereich nutzt jetzt dieselbe HeroUI-Oberfläche wie dein Overview-Dashboard. Die tieferen Spezial-Workflows aus dem alten Inline-Dashboard werden hier schrittweise in echte React-Komponenten überführt.

- +
diff --git a/frontend/src/app.css b/frontend/src/app.css index 3706a4c..d320f20 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,4 +1,7 @@ @import "tailwindcss"; +@import "@heroui/styles"; + +@custom-variant dark (&:is(.dark *)); :root { color-scheme: dark;