MythEclipseandClaude Opus 4.8
9019e24263
- New LivePanel component combines voice bridge, media player, screen share, and recordings - Single page layout: voice controls → audio visualizer + active speakers → now playing → music/screen/recordings tabs - Reduced tabs from 6 to 4: Live, Messages, Analytics, Review - Sidebar updated with new tab structure - Default tab changed from 'voice' to 'live' - Cleaner compact layout with icon buttons and inline controls - Recordings sub-panel with user avatars, status badges, and download buttons Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { Bot, BarChart3, MessageSquare, ShieldAlert, Radio } from "lucide-react";
|
|
import type { DashboardTab } from "../../types/ui";
|
|
import { cn } from "../../lib/utils";
|
|
import { Button } from "../ui/button";
|
|
|
|
const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> = [
|
|
{ id: "live", label: "Live", icon: Radio },
|
|
{ id: "messages", label: "Messages", icon: MessageSquare },
|
|
{ id: "analytics", label: "Analytics", icon: BarChart3 },
|
|
{ id: "review", label: "Review", icon: ShieldAlert },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
activeTab: DashboardTab;
|
|
onTabChange: (tab: DashboardTab) => void;
|
|
}
|
|
|
|
export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
|
|
return (
|
|
<aside className="hidden w-72 shrink-0 border-r border-border bg-card/60 p-5 backdrop-blur md:block">
|
|
<div className="mb-8 flex items-center gap-3">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/15 text-primary">
|
|
<Bot className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold tracking-tight">Bete Watcher</div>
|
|
<div className="text-xs text-muted-foreground">Discord control center</div>
|
|
</div>
|
|
</div>
|
|
<nav className="space-y-2">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Button
|
|
key={item.id}
|
|
variant={activeTab === item.id ? "secondary" : "ghost"}
|
|
className={cn("w-full justify-start", activeTab === item.id && "bg-primary/15 text-primary")}
|
|
onClick={() => onTabChange(item.id)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|