0c47dce508
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>
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { Button, Chip, Tooltip, Dropdown, DropdownTrigger, DropdownPopover, DropdownMenu, DropdownItem } from '@heroui/react';
|
|
import { Moon, Sun, ChevronDown, LogOut, Settings } from 'lucide-react';
|
|
import { useTheme } from '../../hooks/useTheme';
|
|
import { useApp } from '../../context/AppContext';
|
|
import { AppAvatar } from '../shared/AppAvatar';
|
|
|
|
const navLabels: Record<string, string> = {
|
|
overview: 'Übersicht',
|
|
tickets: 'Ticketsystem',
|
|
supportlogin: 'Support Login',
|
|
automod: 'Automod',
|
|
welcome: 'Willkommen',
|
|
dynamicvoice: 'Dynamic Voice',
|
|
birthday: 'Birthday',
|
|
reactionroles: 'Reaction Roles',
|
|
statuspage: 'Statuspage',
|
|
serverstats: 'Server Stats',
|
|
register: 'Registrierung',
|
|
music: 'Musik',
|
|
settings: 'Einstellungen',
|
|
modules: 'Module',
|
|
events: 'Events',
|
|
admin: 'Admin',
|
|
};
|
|
|
|
export function Header() {
|
|
const { dark, toggle } = useTheme();
|
|
const { guildName, statusMessage } = useHeaderData();
|
|
const { user, handleLogout, setSection, section } = useApp();
|
|
|
|
return (
|
|
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className="flex items-center gap-1.5 text-sm text-muted min-w-0">
|
|
<button className="hover:text-foreground transition-colors" onClick={() => setSection('overview')}>
|
|
Dashboard
|
|
</button>
|
|
{section !== 'overview' && (
|
|
<>
|
|
<span>/</span>
|
|
<span className="text-accent font-semibold truncate">{navLabels[section] || section}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{statusMessage && (
|
|
<Chip size="sm" variant="soft" color="accent" className="max-w-[220px]">
|
|
<span className="truncate">{statusMessage}</span>
|
|
</Chip>
|
|
)}
|
|
|
|
<Tooltip>
|
|
<Tooltip.Trigger>
|
|
<Button isIconOnly size="sm" variant="ghost" onPress={toggle}>
|
|
{dark ? <Sun size={16} /> : <Moon size={16} />}
|
|
</Button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content placement="bottom">{dark ? 'Helles Design' : 'Dunkles Design'}</Tooltip.Content>
|
|
</Tooltip>
|
|
|
|
<Dropdown>
|
|
<DropdownTrigger className="inline-flex h-9 items-center gap-2 rounded-3xl px-3 text-sm font-medium hover:bg-default-hover">
|
|
<AppAvatar name={user?.username} size="sm" className="size-6" />
|
|
<span className="hidden sm:inline text-sm">{user?.username}</span>
|
|
<ChevronDown size={14} />
|
|
</DropdownTrigger>
|
|
<DropdownPopover placement="bottom end">
|
|
<DropdownMenu aria-label="User Menu">
|
|
<DropdownItem key="settings" onAction={() => setSection('settings')}>
|
|
<Settings size={14} /> Einstellungen
|
|
</DropdownItem>
|
|
<DropdownItem key="logout" variant="danger" onAction={handleLogout}>
|
|
<LogOut size={14} /> Abmelden
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</DropdownPopover>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function useHeaderData() {
|
|
const { guildInfo, guilds, currentGuildId, statusMessage } = useApp();
|
|
const selectedGuild = guilds.find((g) => g.id === currentGuildId);
|
|
return {
|
|
guildName: guildInfo?.name || selectedGuild?.name || 'Dashboard',
|
|
statusMessage,
|
|
};
|
|
}
|