MythEclipseandClaude Opus 4.8
fed9f39bd9
- New custom SVG logo: shield with eye + GMW text
- Page title: 'GMW — Discord Moderation Watcher'
- Header: shows logo + 'GMW · {tab title}'
- Sidebar: shows logo + 'GMW v1.0' + 'Discord Moderation Watcher'
- Favicon set to logo.svg
- Removed old 'Bete Watcher' branding
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import { Wifi, WifiOff } from "lucide-react";
|
|
import type { WebSocketStatus } from "../../hooks/useDashboardSocket";
|
|
import type { DashboardTab } from "../../types/ui";
|
|
import type { VoiceStatus } from "../../types/voice";
|
|
import { Badge } from "../ui/badge";
|
|
|
|
const titles: Record<DashboardTab, string> = {
|
|
live: "Voice, Media & Recordings",
|
|
messages: "Messages & Moderation",
|
|
analytics: "Analytics & Insights",
|
|
};
|
|
|
|
const subtitles: Record<DashboardTab, string> = {
|
|
live: "Join voice channels, play media, stream audio, and browse recordings.",
|
|
messages: "Capture, analyse, and moderate Discord messages.",
|
|
analytics: "Server moderation statistics and trends.",
|
|
};
|
|
|
|
interface HeaderProps {
|
|
activeTab: DashboardTab;
|
|
wsStatus: WebSocketStatus;
|
|
voiceStatus: VoiceStatus;
|
|
}
|
|
|
|
export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
|
|
return (
|
|
<header className="sticky top-0 z-10 border-b border-border bg-background/80 px-4 py-4 backdrop-blur md:px-8">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<img src="/logo.svg" alt="GMW" className="h-9 w-9 rounded-xl" />
|
|
<div>
|
|
<h1 className="text-xl font-bold tracking-tight">
|
|
<span className="text-primary">GMW</span>
|
|
<span className="mx-2 text-muted-foreground">·</span>
|
|
{titles[activeTab]}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">{subtitles[activeTab]}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant={wsStatus === "connected" ? "success" : wsStatus === "error" ? "destructive" : "warning"}>
|
|
{wsStatus === "connected" ? <Wifi className="mr-1 h-3 w-3" /> : <WifiOff className="mr-1 h-3 w-3" />}
|
|
WebSocket {wsStatus}
|
|
</Badge>
|
|
<Badge variant={voiceStatus.connected ? "success" : "secondary"}>
|
|
Voice {voiceStatus.connected ? voiceStatus.activeChannelName || "connected" : "idle"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|