feat: design tokens, globals CSS, fonts, navigation config
- Rewrite globals.css with dark-theme OKLCH tokens, glass utilities, ambient bg - Update root layout with Inter + JetBrains Mono fonts, theme script - Redirect / to /dashboard - Update navigation config — remove search link, add recordings - Update analysis search-panel with glass styling Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
59bce79bcd
commit
3ae0c96a13
@@ -1,83 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { BarChart3, Hash, Users } from "lucide-react";
|
||||
import { AlertCircle, Clock, Hash, Shield, Sparkles, Users } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ChannelDetailSection,
|
||||
ChannelsSection,
|
||||
StatsSection,
|
||||
UserDetailSection,
|
||||
UsersSection,
|
||||
} from "@/components/dashboard";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useStats } from "@/hooks";
|
||||
import { StatCard } from "@/components/dashboard/stat-card";
|
||||
import { LiveStream } from "@/components/dashboard/live-stream";
|
||||
import { ModQueue } from "@/components/dashboard/mod-queue";
|
||||
import { MessageTrendChart } from "@/components/dashboard/message-trend-chart";
|
||||
import { ActivityHeatmap } from "@/components/dashboard/activity-heatmap";
|
||||
import { TopChannelsChart } from "@/components/dashboard/top-channels-chart";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
|
||||
type View = "stats" | "users" | "channels" | "user-detail" | "channel-detail";
|
||||
type DashboardTab = "stats" | "live" | "activity";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [view, setView] = useState<View>("stats");
|
||||
const [guildId, setGuildId] = useState("");
|
||||
const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
|
||||
const [selectedChannelId, setSelectedChannelId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [tab, setTab] = useState<DashboardTab>("stats");
|
||||
const { data: stats, isLoading, error, refetch } = useStats();
|
||||
|
||||
const subNavTabs = [
|
||||
{ id: "stats", label: "Stats", icon: <Hash className="size-3" /> },
|
||||
{ id: "live", label: "Live", icon: <Sparkles className="size-3" /> },
|
||||
{ id: "activity", label: "Activity", icon: <Clock className="size-3" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GuildSelector value={guildId} onChange={setGuildId} />
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as DashboardTab)} />
|
||||
|
||||
<Tabs
|
||||
value={
|
||||
view === "user-detail"
|
||||
? "users"
|
||||
: view === "channel-detail"
|
||||
? "channels"
|
||||
: view
|
||||
}
|
||||
onValueChange={(v) => setView(v as View)}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="stats" onClick={() => setView("stats")}>
|
||||
<BarChart3 className="size-4" /> Stats
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" onClick={() => setView("users")}>
|
||||
<Users className="size-4" /> Users
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="channels" onClick={() => setView("channels")}>
|
||||
<Hash className="size-4" /> Channels
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
{tab === "stats" && (
|
||||
<div className="space-y-4">
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : isLoading || !stats ? (
|
||||
<LoadingSkeleton count={6} height="h-28" columns={3} />
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<StatCard label="Total Messages" value={stats.total_messages} icon={Hash} />
|
||||
<StatCard label="Today" value={stats.today_messages} icon={Clock} />
|
||||
<StatCard label="Users" value={stats.total_users} icon={Users} />
|
||||
<StatCard label="Active 24h" value={stats.active_users_24h} icon={Sparkles} />
|
||||
<StatCard label="Flagged" value={stats.total_flagged} icon={AlertCircle} variant="danger" />
|
||||
<StatCard label="Clean" value={stats.total_clean} icon={Shield} variant="success" />
|
||||
</div>
|
||||
|
||||
{view === "stats" && <StatsSection />}
|
||||
{view === "users" && (
|
||||
<UsersSection
|
||||
onSelect={(userId) => {
|
||||
setSelectedUserId(userId);
|
||||
setView("user-detail");
|
||||
}}
|
||||
/>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<MessageTrendChart />
|
||||
<TopChannelsChart />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{view === "user-detail" && selectedUserId && (
|
||||
<UserDetailSection
|
||||
userId={selectedUserId}
|
||||
onBack={() => setView("users")}
|
||||
/>
|
||||
|
||||
{tab === "live" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<LiveStream />
|
||||
<ModQueue />
|
||||
</div>
|
||||
)}
|
||||
{view === "channels" && (
|
||||
<ChannelsSection
|
||||
guildId={guildId}
|
||||
onSelect={(chId) => {
|
||||
setSelectedChannelId(chId);
|
||||
setView("channel-detail");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{view === "channel-detail" && selectedChannelId && (
|
||||
<ChannelDetailSection
|
||||
channelId={selectedChannelId}
|
||||
onBack={() => setView("channels")}
|
||||
/>
|
||||
|
||||
{tab === "activity" && (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<ActivityHeatmap />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,50 +2,89 @@
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Suspense } from "react";
|
||||
|
||||
import { Chatbot } from "@/components/chatbot/chatbot";
|
||||
import { AppHeader } from "@/components/layout/app-header";
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { TopNav } from "@/components/layout/top-nav";
|
||||
import { MobileNav } from "@/components/layout/mobile-nav";
|
||||
import { WsProvider } from "@/lib/ws/context";
|
||||
import { MascotProvider } from "@/components/mascot/mascot-context";
|
||||
import { MascotContainer } from "@/components/mascot/mascot-container";
|
||||
import { MiniPlayer } from "@/components/media/mini-player";
|
||||
import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
|
||||
import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
|
||||
import { useState } from "react";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import { useMascot } from "@/components/mascot/mascot-context";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 15_000,
|
||||
staleTime: 10_000,
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function MascotExpressionSync() {
|
||||
const ws = useWebSocket();
|
||||
const { setExpression } = useMascot();
|
||||
|
||||
useEffect(() => {
|
||||
const unsub1 = ws.on("message_created", (data: any) => {
|
||||
if (data.ai_status === "flagged" || data.ai_status === "warn") {
|
||||
setExpression("surprise");
|
||||
setTimeout(() => setExpression("idle"), 2000);
|
||||
}
|
||||
});
|
||||
|
||||
const unsub2 = ws.on("voice_active_user", () => {
|
||||
setExpression("listening");
|
||||
});
|
||||
|
||||
return () => { unsub1(); unsub2(); };
|
||||
}, [ws, setExpression]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [guildId, setGuildId] = useState("");
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<WsProvider>
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
<AppSidebar />
|
||||
<div className="flex flex-1 flex-col min-w-0">
|
||||
<AppHeader />
|
||||
<main className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
</main>
|
||||
</div>
|
||||
<MobileNav />
|
||||
</div>
|
||||
<Chatbot />
|
||||
<MediaPlayerProvider>
|
||||
<MascotProvider>
|
||||
<div className="min-h-screen bg-canvas">
|
||||
<TopNav />
|
||||
<HiddenSidebar guildId={guildId} onGuildChange={(g) => setGuildId(g ?? "")} />
|
||||
<MascotExpressionSync />
|
||||
|
||||
{/* Sub-nav space — filled per-page */}
|
||||
<div className="pt-11">
|
||||
<main className="p-4 md:p-6 pb-24 md:pb-6 max-w-[1600px] mx-auto">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<MobileNav />
|
||||
<MiniPlayer />
|
||||
<MascotContainer />
|
||||
</div>
|
||||
</MascotProvider>
|
||||
</MediaPlayerProvider>
|
||||
</WsProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Flag, Loader2, MessageSquare, RefreshCw, Search } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { ImagesGrid } from "@/components/messages/images-grid";
|
||||
import { MessageCard } from "@/components/messages/message-card";
|
||||
import { MessageDetailView } from "@/components/messages/message-detail-view";
|
||||
import { ReviewList } from "@/components/messages/review-list";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { Search, Flag, Image, Loader2, RefreshCw } from "lucide-react";
|
||||
import { MessageList } from "@/components/messages/message-list";
|
||||
import { MessageDetail } from "@/components/messages/message-detail";
|
||||
import { SearchOverlay } from "@/components/messages/search-overlay";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { GlassCard } from "@/components/glass/card";
|
||||
import { GlassPanel } from "@/components/glass/panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -25,8 +18,8 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
useGuilds,
|
||||
useImages,
|
||||
useLoadMore,
|
||||
useMessageDetail,
|
||||
@@ -38,62 +31,60 @@ import {
|
||||
useReview,
|
||||
useTextChannels,
|
||||
} from "@/hooks";
|
||||
import { messagesApi } from "@/lib/api";
|
||||
import type { MessageRecord } from "@/lib/types";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type MessagesTab = "all" | "images" | "review";
|
||||
|
||||
export default function MessagesPage() {
|
||||
const [guildId, setGuildId] = useState("");
|
||||
const [selectedChannel, setSelectedChannel] = useState("");
|
||||
const [viewTab, setViewTab] = useState<"all" | "images" | "review">("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [detailId, setDetailId] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [guildId, setGuildId] = useState(searchParams.get("guild") || "");
|
||||
const [selectedChannel, setSelectedChannel] = useState(searchParams.get("channel") || "");
|
||||
const [detailId, setDetailId] = useState<string | null>(searchParams.get("selected"));
|
||||
const [tab, setTab] = useState<MessagesTab>((searchParams.get("tab") as MessagesTab) || "all");
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
const ws = useWebSocket();
|
||||
const { data: channels = [] } = useTextChannels(guildId);
|
||||
const {
|
||||
data: messages,
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = useMessages(guildId, selectedChannel || undefined);
|
||||
const { data: cursorData } = useMessagesHasMore(
|
||||
guildId,
|
||||
selectedChannel || undefined,
|
||||
);
|
||||
const { data: messages, isLoading, error, refetch } = useMessages(guildId, selectedChannel || undefined);
|
||||
const { data: cursorData } = useMessagesHasMore(guildId, selectedChannel || undefined);
|
||||
const loadMoreMut = useLoadMore();
|
||||
const { data: images } = useImages(guildId);
|
||||
const { data: reviews } = useReview(selectedChannel || undefined);
|
||||
const reanalyzeMut = useReanalyze();
|
||||
const reanalyzeBatchMut = useReanalyzeBatch();
|
||||
|
||||
// Sync WS events into the TanStack Query cache
|
||||
useMessagesWsSync(ws, guildId);
|
||||
|
||||
// Detail dialog
|
||||
const {
|
||||
message: detailMessage,
|
||||
attachments: detailAttachments,
|
||||
loading: detailLoading,
|
||||
} = useMessageDetail(detailId);
|
||||
|
||||
// Search query (manual trigger)
|
||||
const [searchEnabled, setSearchEnabled] = useState(false);
|
||||
const { data: searchResults } = useQuery<
|
||||
MessageRecord[]
|
||||
>({
|
||||
queryKey: ["messages-search", guildId, searchQuery],
|
||||
queryFn: async () => {
|
||||
const result = await messagesApi.search(searchQuery, 50);
|
||||
return result.results;
|
||||
},
|
||||
enabled: searchEnabled && !!searchQuery && !!guildId,
|
||||
});
|
||||
useMessagesWsSync(ws, guildId);
|
||||
|
||||
const handleSearch = useCallback(() => {
|
||||
if (!searchQuery.trim()) return;
|
||||
setSearchEnabled(true);
|
||||
}, [searchQuery]);
|
||||
// Sync to URL
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (guildId) params.set("guild", guildId);
|
||||
if (selectedChannel) params.set("channel", selectedChannel);
|
||||
if (detailId) params.set("selected", detailId);
|
||||
if (tab !== "all") params.set("tab", tab);
|
||||
router.replace(`/messages?${params.toString()}`, { scroll: false });
|
||||
}, [guildId, selectedChannel, detailId, tab, router]);
|
||||
|
||||
// Global Cmd+K
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
setSearchOpen(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
}, []);
|
||||
|
||||
const handleLoadMore = useCallback(() => {
|
||||
if (!cursorData?.cursor || loadMoreMut.isPending) return;
|
||||
@@ -104,168 +95,135 @@ export default function MessagesPage() {
|
||||
});
|
||||
}, [cursorData, loadMoreMut, guildId, selectedChannel]);
|
||||
|
||||
const displayMessages = searchResults ?? messages ?? [];
|
||||
const hasMore = cursorData?.hasMore ?? false;
|
||||
const isEmpty = !isLoading && displayMessages.length === 0;
|
||||
const subNavTabs = [
|
||||
{ id: "all", label: "All" },
|
||||
{ id: "images", label: "Images", icon: <Image className="size-3" /> },
|
||||
{ id: "review", label: "Review", icon: <Flag className="size-3" /> },
|
||||
];
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GuildSelector value={guildId} onChange={setGuildId} />
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const currentMessages = messages ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GuildSelector value={guildId} onChange={setGuildId} />
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search messages…"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="animate-fade-in-up space-y-4">
|
||||
{/* Controls bar */}
|
||||
<div className="flex items-center gap-3">
|
||||
<GuildSelector value={guildId} onChange={(g) => { setGuildId(g ?? ""); setSelectedChannel(""); }} />
|
||||
{channels.length > 0 && (
|
||||
<Select
|
||||
value={selectedChannel}
|
||||
onValueChange={(v) => setSelectedChannel(v ?? "")}
|
||||
>
|
||||
<SelectTrigger className="h-9 w-full sm:w-44">
|
||||
<Select value={selectedChannel} onValueChange={(v) => setSelectedChannel(v ?? "")}>
|
||||
<SelectTrigger className="h-8 w-40 glass border-glass-border text-xs">
|
||||
<SelectValue placeholder="All channels" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">All channels</SelectItem>
|
||||
{channels.map((ch) => (
|
||||
<SelectItem key={ch.id} value={ch.id}>
|
||||
# {ch.name}
|
||||
</SelectItem>
|
||||
{channels.map((ch: any) => (
|
||||
<SelectItem key={ch.id} value={ch.id}># {ch.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => reanalyzeBatchMut.mutate(guildId)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all ml-auto"
|
||||
>
|
||||
<RefreshCw className="size-4 mr-1.5" />
|
||||
Reanalyze Errors
|
||||
<Search className="size-3.5" />
|
||||
Search
|
||||
<span className="text-[10px] text-text-secondary/30 font-mono hidden sm:inline">⌘K</span>
|
||||
</button>
|
||||
<Button variant="outline" size="sm" onClick={() => reanalyzeBatchMut.mutate(guildId)} className="h-8 text-xs">
|
||||
<RefreshCw className="size-3 mr-1" /> Reanalyze
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
value={viewTab}
|
||||
onValueChange={(v) => setViewTab(v as typeof viewTab)}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">
|
||||
All ({(searchResults ?? messages)?.length ?? 0})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="images">
|
||||
Images ({images?.length ?? 0})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="review">
|
||||
<Flag className="size-3.5 mr-1" /> Review ({reviews?.length ?? 0})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as MessagesTab)} />
|
||||
|
||||
{searchResults && (
|
||||
<p className="text-sm text-muted-foreground animate-fade-in-up">
|
||||
Found {searchResults.length} result
|
||||
{searchResults.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
{/* Split pane */}
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : isLoading ? (
|
||||
<LoadingSkeleton count={6} height="h-20" />
|
||||
) : (
|
||||
<div className="flex gap-4">
|
||||
{/* Left pane — message list */}
|
||||
<div className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}>
|
||||
{tab === "all" && (
|
||||
<>
|
||||
<MessageList messages={currentMessages} selectedId={detailId} onSelect={setDetailId} />
|
||||
{cursorData?.hasMore && (
|
||||
<div className="flex justify-center py-4">
|
||||
<Button variant="outline" size="sm" onClick={handleLoadMore} disabled={loadMoreMut.isPending} className="text-xs glass">
|
||||
{loadMoreMut.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{tab === "images" && (
|
||||
<ImageGrid items={images ?? []} onSelect={setDetailId} />
|
||||
)}
|
||||
{tab === "review" && (
|
||||
<ReviewList items={reviews ?? []} onSelect={setDetailId} onReanalyze={(id: string) => reanalyzeMut.mutate(id)} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── ALL tab ── */}
|
||||
{viewTab === "all" && (
|
||||
<div className="space-y-2 animate-fade-in-up">
|
||||
{isLoading ? (
|
||||
<LoadingSkeleton count={8} height="h-28" />
|
||||
) : isEmpty ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<Search className="size-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{searchResults
|
||||
? "No messages found matching your search."
|
||||
: "No captures yet."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{displayMessages.map((msg) => (
|
||||
<MessageCard
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
onClick={setDetailId}
|
||||
onReanalyze={(id) => reanalyzeMut.mutate(id)}
|
||||
{/* Right pane — detail */}
|
||||
{detailId && (
|
||||
<div className="hidden md:block w-1/2 lg:w-3/5 sticky top-16 self-start">
|
||||
{detailLoading ? (
|
||||
<GlassPanel dense className="flex items-center justify-center py-12">
|
||||
<Loader2 className="size-5 animate-spin text-text-secondary/60" />
|
||||
</GlassPanel>
|
||||
) : detailMessage ? (
|
||||
<MessageDetail
|
||||
message={detailMessage}
|
||||
attachments={detailAttachments}
|
||||
onBack={() => setDetailId(null)}
|
||||
/>
|
||||
))}
|
||||
{hasMore && (
|
||||
<div className="flex justify-center py-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLoadMore}
|
||||
disabled={loadMoreMut.isPending}
|
||||
>
|
||||
{loadMoreMut.isPending && (
|
||||
<Loader2 className="size-4 animate-spin mr-2" />
|
||||
)}
|
||||
{loadMoreMut.isPending ? "Loading…" : "Load more"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── IMAGES tab ── */}
|
||||
{viewTab === "images" && (
|
||||
<ImagesGrid images={images ?? []} onSelect={setDetailId} />
|
||||
{/* Search overlay */}
|
||||
<SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} onSelect={setDetailId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inline ImageGrid and ReviewList
|
||||
function ImageGrid({ items, onSelect }: { items: any[]; onSelect: (id: string) => void }) {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{items.map((item: any) => (
|
||||
<button key={item.id} type="button" onClick={() => onSelect(item.message_id)} className="glass rounded-lg overflow-hidden hover:scale-[1.02] transition-transform">
|
||||
<img src={item.uploaded_url || item.discord_url} alt="" className="w-full h-24 object-cover" loading="lazy" />
|
||||
</button>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">No images</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* ── REVIEW tab ── */}
|
||||
{viewTab === "review" && (
|
||||
<ReviewList
|
||||
reviews={reviews ?? []}
|
||||
onSelect={setDetailId}
|
||||
onReanalyze={(id) => reanalyzeMut.mutate(id)}
|
||||
/>
|
||||
function ReviewList({ items, onSelect, onReanalyze }: { items: any[]; onSelect: (id: string) => void; onReanalyze: (id: string) => void }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{items.map((item: any) => (
|
||||
<GlassCard key={item.id} variant="danger" className="p-3 cursor-pointer" onClick={() => onSelect(item.message_id)}>
|
||||
<div className="flex items-start gap-2">
|
||||
<Flag className="size-3.5 text-accent-purple mt-0.5 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-text-secondary line-clamp-2">{item.content || item.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<div className="py-12 text-center text-xs text-text-secondary/40">No flagged messages</div>
|
||||
)}
|
||||
|
||||
{/* Detail dialog */}
|
||||
<Dialog
|
||||
open={detailId !== null}
|
||||
onOpenChange={(o) => !o && setDetailId(null)}
|
||||
>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[85vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<MessageSquare className="size-4" /> Message Detail
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<ScrollArea className="max-h-[70vh] pr-1">
|
||||
{detailLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="size-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : detailMessage ? (
|
||||
<MessageDetailView
|
||||
message={detailMessage}
|
||||
attachments={detailAttachments}
|
||||
/>
|
||||
) : null}
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { RecordingList } from "@/components/recordings/recording-list";
|
||||
import { useState } from "react";
|
||||
import { RecordingCard } from "@/components/recordings/recording-card";
|
||||
import { RecordingPlayer } from "@/components/recordings/recording-player";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
import { useRecordings } from "@/hooks";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
type RecordingsTab = "library" | "stats";
|
||||
|
||||
export default function RecordingsPage() {
|
||||
const ws = useWebSocket();
|
||||
const { data: recordings, isLoading, error, refetch } = useRecordings();
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
const [tab, setTab] = useState<RecordingsTab>("library");
|
||||
|
||||
const currentTrack = playingId && recordings
|
||||
? recordings.find((r: any) => r.id === playingId)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<RecordingList ws={ws} />
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav
|
||||
tabs={[
|
||||
{ id: "library", label: "Library" },
|
||||
{ id: "stats", label: "Stats" },
|
||||
]}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as RecordingsTab)}
|
||||
/>
|
||||
|
||||
{tab === "library" && (
|
||||
<>
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : isLoading ? (
|
||||
<LoadingSkeleton count={4} height="h-28" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(recordings ?? []).map((rec: any) => (
|
||||
<RecordingCard
|
||||
key={rec.id}
|
||||
recording={rec}
|
||||
onPlay={(id) => setPlayingId(id === playingId ? null : id)}
|
||||
/>
|
||||
))}
|
||||
{(recordings ?? []).length === 0 && (
|
||||
<div className="py-12 text-center text-sm text-text-secondary/40">No recordings yet</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === "stats" && (
|
||||
<div className="py-12 text-center text-sm text-text-secondary/40">Recording stats coming soon</div>
|
||||
)}
|
||||
|
||||
<RecordingPlayer url={currentTrack?.download_url} onClose={() => setPlayingId(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,18 +2,21 @@
|
||||
|
||||
import { Moon, Server, Shield, Sun, Wifi } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { GlassCard } from "@/components/glass/card";
|
||||
import { GlassDivider } from "@/components/glass/divider";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { LoadingSkeleton } from "@/components/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useConfig } from "@/hooks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SettingsTab = "connection" | "appearance" | "config" | "about";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { status } = useWebSocket();
|
||||
const { data: config, isLoading: configLoading } = useConfig();
|
||||
const [theme, setTheme] = useState<"light" | "dark">("dark");
|
||||
const [tab, setTab] = useState<SettingsTab>("connection");
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("theme") as "light" | "dark" | null;
|
||||
@@ -28,147 +31,111 @@ export default function SettingsPage() {
|
||||
document.documentElement.classList.add(next);
|
||||
};
|
||||
|
||||
const statusCfg = {
|
||||
connected: {
|
||||
label: "Connected",
|
||||
variant: "default" as const,
|
||||
dot: "bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
|
||||
},
|
||||
connecting: {
|
||||
label: "Connecting",
|
||||
variant: "secondary" as const,
|
||||
dot: "bg-yellow-500 animate-pulse",
|
||||
},
|
||||
disconnected: {
|
||||
label: "Disconnected",
|
||||
variant: "destructive" as const,
|
||||
dot: "bg-destructive",
|
||||
},
|
||||
error: {
|
||||
label: "Error",
|
||||
variant: "destructive" as const,
|
||||
dot: "bg-destructive",
|
||||
},
|
||||
const statusDot = {
|
||||
connected: "bg-emerald-500 shadow-[0_0_8px] shadow-emerald-500/60 animate-pulse",
|
||||
connecting: "bg-accent-amber animate-pulse",
|
||||
disconnected: "bg-destructive",
|
||||
error: "bg-destructive",
|
||||
}[status];
|
||||
|
||||
const statusLabel = {
|
||||
connected: "Connected",
|
||||
connecting: "Connecting",
|
||||
disconnected: "Disconnected",
|
||||
error: "Error",
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up max-w-2xl">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Wifi className="size-4 text-primary" /> Connection
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-4 animate-fade-in-up max-w-2xl">
|
||||
<SubNav
|
||||
tabs={[
|
||||
{ id: "connection", label: "Connection", icon: <Wifi className="size-3" /> },
|
||||
{ id: "appearance", label: "Appearance", icon: <Sun className="size-3" /> },
|
||||
{ id: "config", label: "Config", icon: <Server className="size-3" /> },
|
||||
{ id: "about", label: "About", icon: <Shield className="size-3" /> },
|
||||
]}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as SettingsTab)}
|
||||
/>
|
||||
|
||||
{tab === "connection" && (
|
||||
<GlassCard variant="base">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">WebSocket</span>
|
||||
<Badge variant={statusCfg.variant} className="gap-1.5 px-2.5 py-1">
|
||||
<span className={cn("size-1.5 rounded-full", statusCfg.dot)} />
|
||||
{statusCfg.label}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
{theme === "dark" ? (
|
||||
<Moon className="size-4 text-primary" />
|
||||
) : (
|
||||
<Sun className="size-4 text-primary" />
|
||||
)}{" "}
|
||||
Appearance
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center justify-between w-full text-sm cursor-pointer"
|
||||
>
|
||||
<span>Theme</span>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{theme}
|
||||
</Badge>
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Server className="size-4 text-primary" /> Server Configuration
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{configLoading ? (
|
||||
<LoadingSkeleton count={6} height="h-6" />
|
||||
) : config ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<CfgRow
|
||||
label="Monitor Guild"
|
||||
value={config.monitorGuildId ?? "Not configured"}
|
||||
/>
|
||||
<Separator />
|
||||
<CfgRow
|
||||
label="Voice Guild"
|
||||
value={config.voiceGuildId ?? "Not configured"}
|
||||
/>
|
||||
<Separator />
|
||||
<CfgRow
|
||||
label="Voice Channel"
|
||||
value={config.voiceChannelId ?? "Not configured"}
|
||||
/>
|
||||
<Separator />
|
||||
<CfgRow
|
||||
label="AI Analysis"
|
||||
value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"}
|
||||
/>
|
||||
<Separator />
|
||||
<CfgRow
|
||||
label="Auto-Delete Flagged"
|
||||
value={config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"}
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-semibold text-text-primary">WebSocket</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn("size-2 rounded-full", statusDot)} />
|
||||
<span className="text-xs font-mono text-text-secondary">{statusLabel}</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Unable to load configuration.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Shield className="size-4 text-primary" /> About
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-sm space-y-1">
|
||||
<p>
|
||||
<span className="text-gradient font-bold">Discord Automod</span> —
|
||||
Discord Moderation Watcher
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
AI-powered message moderation, voice recording, and real-time
|
||||
monitoring for Discord communities.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{tab === "appearance" && (
|
||||
<GlassCard variant="base">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{theme === "dark" ? <Moon className="size-4 text-primary" /> : <Sun className="size-4 text-primary" />}
|
||||
<span className="text-sm font-semibold text-text-primary">Theme</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-md glass hover:glass-elevated transition-all text-xs"
|
||||
>
|
||||
<span className="font-mono">{theme}</span>
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{tab === "config" && (
|
||||
<GlassCard variant="base">
|
||||
<div className="space-y-3">
|
||||
{configLoading ? (
|
||||
<LoadingSkeleton count={6} height="h-6" />
|
||||
) : config ? (
|
||||
<>
|
||||
<ConfigRow label="Monitor Guild" value={config.monitorGuildId || "Not configured"} />
|
||||
<GlassDivider />
|
||||
<ConfigRow label="Voice Guild" value={config.voiceGuildId || "Not configured"} />
|
||||
<GlassDivider />
|
||||
<ConfigRow label="Voice Channel" value={config.voiceChannelId || "Not configured"} />
|
||||
<GlassDivider />
|
||||
<ConfigRow label="AI Analysis" value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"} />
|
||||
<GlassDivider />
|
||||
<ConfigRow label="Auto-Delete Flagged" value={config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"} />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-text-secondary/60">Unable to load config.</p>
|
||||
)}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{tab === "about" && (
|
||||
<GlassCard variant="base">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-base font-bold text-primary">Discord Automod</h2>
|
||||
<p className="text-xs text-text-secondary/80 leading-relaxed">
|
||||
AI-powered message moderation, voice recording, and real-time monitoring for Discord communities.
|
||||
</p>
|
||||
<div className="text-[10px] font-mono text-text-secondary/40 mt-4">
|
||||
v0.1.0
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CfgRow({ label, value }: { label: string; value: string }) {
|
||||
function ConfigRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
<span className="font-mono text-xs max-w-[280px] truncate text-right">
|
||||
{value}
|
||||
</span>
|
||||
<div className="flex items-center justify-between py-0.5">
|
||||
<span className="text-xs text-text-secondary">{label}</span>
|
||||
<span className="text-[11px] font-mono text-text-primary/80 max-w-[240px] truncate text-right">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
|
||||
import { MicrophoneCard } from "@/components/voice/microphone-card";
|
||||
import { VoiceConnectionCard } from "@/components/voice/voice-connection-card";
|
||||
import {
|
||||
useGuilds,
|
||||
useMicTransmit,
|
||||
useSpeakers,
|
||||
useVoiceChannels,
|
||||
useVoiceConnect,
|
||||
useVoiceDisconnect,
|
||||
useVoiceStatus,
|
||||
} from "@/hooks";
|
||||
import { VoiceConnectionCard } from "@/components/voice/connection-card";
|
||||
import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
|
||||
import { MicControl } from "@/components/voice/mic-control";
|
||||
import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import { useGuilds, useMicTransmit, useSpeakers, useVoiceChannels, useVoiceConnect, useVoiceDisconnect, useVoiceStatus } from "@/hooks";
|
||||
|
||||
type VoiceTab = "connection" | "activity";
|
||||
|
||||
export default function VoicePage() {
|
||||
const ws = useWebSocket();
|
||||
@@ -28,21 +23,14 @@ export default function VoicePage() {
|
||||
const micMut = useMicTransmit();
|
||||
const [selectedChannel, setSelectedChannel] = useState("");
|
||||
const [micActive, setMicActive] = useState(false);
|
||||
const [volume, setVolume] = useState(75);
|
||||
const [tab, setTab] = useState<VoiceTab>("connection");
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = subscribe(ws);
|
||||
return () => unsub();
|
||||
}, [ws, subscribe]);
|
||||
|
||||
const handleGuildChange = useCallback((guildId: string | null) => {
|
||||
if (!guildId) {
|
||||
setSelectedGuild("");
|
||||
setSelectedChannel("");
|
||||
return;
|
||||
}
|
||||
setSelectedGuild(guildId);
|
||||
}, []);
|
||||
|
||||
const handleMicToggle = useCallback(
|
||||
async (checked: boolean) => {
|
||||
setMicActive(checked);
|
||||
@@ -59,25 +47,44 @@ export default function VoicePage() {
|
||||
const connected = voiceStatus?.connected ?? false;
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav
|
||||
tabs={[
|
||||
{ id: "connection", label: "Connection" },
|
||||
{ id: "activity", label: "Activity" },
|
||||
]}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as VoiceTab)}
|
||||
/>
|
||||
|
||||
<VoiceConnectionCard
|
||||
selectedGuild={selectedGuild}
|
||||
onGuildChange={handleGuildChange}
|
||||
selectedChannel={selectedChannel}
|
||||
onChannelChange={(v) => setSelectedChannel(v)}
|
||||
guilds={guilds}
|
||||
voiceChannels={voiceChannels}
|
||||
connected={connected}
|
||||
activeChannelName={voiceStatus?.activeChannelName}
|
||||
connectMut={connectMut}
|
||||
disconnectMut={disconnectMut}
|
||||
/>
|
||||
<ActiveSpeakersPanel activeSpeakers={activeSpeakers} />
|
||||
<MicrophoneCard
|
||||
connected={connected}
|
||||
micActive={micActive}
|
||||
onMicToggle={handleMicToggle}
|
||||
guilds={guilds}
|
||||
voiceChannels={voiceChannels}
|
||||
selectedGuild={selectedGuild}
|
||||
selectedChannel={selectedChannel}
|
||||
onGuildChange={(g) => { setSelectedGuild(g ?? ""); setSelectedChannel(""); }}
|
||||
onChannelChange={(v) => setSelectedChannel(v ?? "")}
|
||||
onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
|
||||
onDisconnect={() => disconnectMut.mutate(undefined)}
|
||||
connecting={connectMut.isPending}
|
||||
/>
|
||||
|
||||
{tab === "connection" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<SpeakerWaveform speakers={activeSpeakers} />
|
||||
<MicControl
|
||||
connected={connected}
|
||||
active={micActive}
|
||||
onToggle={handleMicToggle}
|
||||
volume={volume}
|
||||
onVolumeChange={setVolume}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "activity" && <VoiceActivityTimeline />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user