feat: add app header, sidebar, and mobile navigation components
Deploy to VPS / deploy (push) Failing after 1m45s
Deploy to VPS / deploy (push) Failing after 1m45s
- Implemented AppHeader component with theme toggle and connection status. - Created AppSidebar component for navigation with connection status indicator. - Added MobileNav component for mobile navigation with responsive design. - Introduced shared components: DetailStat, EmptyState, ErrorState, LoadingSkeleton, and StatCard for consistent UI. - Developed hooks for async data fetching: useAsync, useConfig, useDashboard, useGuilds, useMedia, useMessages, useRecordings, and useVoice. - Added chatbot API functions for sending messages and managing chat history.
This commit is contained in:
asepharyana
@@ -2,55 +2,44 @@
|
||||
|
||||
import { Loader2, RefreshCw, Search, Sparkles } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { messagesApi } from "@/lib/api";
|
||||
import { useSearch } from "@/hooks";
|
||||
import { safeParseJsonArray } from "@/lib/format";
|
||||
import type { MessageRecord } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function AnalysisPage() {
|
||||
const { results, searching, search } = useSearch();
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState<MessageRecord[] | null>(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [searched, setSearched] = useState(false);
|
||||
|
||||
const handleSearch = useCallback(async () => {
|
||||
const handleSearch = useCallback(() => {
|
||||
if (!query.trim()) return;
|
||||
setSearching(true);
|
||||
setSearched(true);
|
||||
try {
|
||||
const result = await messagesApi.search(query, 50);
|
||||
setResults(result.results);
|
||||
} catch {
|
||||
setResults([]);
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}, [query]);
|
||||
search(query);
|
||||
}, [query, search]);
|
||||
|
||||
const handleReanalyze = useCallback(async (id: string) => {
|
||||
const { messagesApi } = await import("@/lib/api");
|
||||
try {
|
||||
await messagesApi.reanalyze(id);
|
||||
} catch {
|
||||
// ignore
|
||||
/* ignore */
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
{/* Search */}
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search message content, AI flags, analysis text…"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
@@ -64,112 +53,27 @@ export default function AnalysisPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
{searching ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-28 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<LoadingSkeleton count={5} height="h-28" />
|
||||
) : results !== null ? (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Found {results.length} result
|
||||
{results.length !== 1 ? "s" : ""}
|
||||
Found {results.length} result{results.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
|
||||
{results.length === 0 ? (
|
||||
<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">
|
||||
No messages found matching your query.
|
||||
</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={Search}
|
||||
title="No messages found matching your query."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{results.map((msg) => (
|
||||
<Card key={msg.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="size-8 shrink-0 mt-0.5">
|
||||
<AvatarImage src={msg.avatar_url ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{msg.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">
|
||||
{msg.username}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(msg.created_at).toLocaleString()}
|
||||
</span>
|
||||
{msg.ai_status && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"text-[10px] px-1.5 py-0 h-4",
|
||||
msg.ai_status === "clean" && "text-green-500",
|
||||
msg.ai_status === "flagged" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{msg.ai_status}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm leading-relaxed">{msg.content}</p>
|
||||
|
||||
{msg.ai_moderation_flags &&
|
||||
msg.ai_moderation_flags !== "[]" && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{safeParseJsonArray(msg.ai_moderation_flags).map(
|
||||
(flag) => (
|
||||
<Badge
|
||||
key={flag}
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{flag}
|
||||
</Badge>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msg.ai_analysis && (
|
||||
<p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
|
||||
<Sparkles className="size-3 inline mr-1" />
|
||||
{msg.ai_analysis}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{msg.ai_confidence != null && (
|
||||
<div className="flex items-center gap-2 max-w-40">
|
||||
<Progress
|
||||
value={msg.ai_confidence * 100}
|
||||
className="h-1.5"
|
||||
/>
|
||||
<span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
|
||||
{(msg.ai_confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={() => handleReanalyze(msg.id)}
|
||||
>
|
||||
<RefreshCw className="size-3 mr-1" />
|
||||
Reanalyze
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<SearchResultCard
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
onReanalyze={handleReanalyze}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -188,3 +92,88 @@ export default function AnalysisPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchResultCard({
|
||||
message: msg,
|
||||
onReanalyze,
|
||||
}: {
|
||||
message: MessageRecord;
|
||||
onReanalyze: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="size-8 shrink-0 mt-0.5">
|
||||
<AvatarImage src={msg.avatar_url ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{msg.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">{msg.username}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(msg.created_at).toLocaleString()}
|
||||
</span>
|
||||
{msg.ai_status && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"text-[10px] px-1.5 py-0 h-4",
|
||||
msg.ai_status === "clean" && "text-green-500",
|
||||
msg.ai_status === "flagged" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{msg.ai_status}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm leading-relaxed">{msg.content}</p>
|
||||
|
||||
{msg.ai_moderation_flags && msg.ai_moderation_flags !== "[]" && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{safeParseJsonArray(msg.ai_moderation_flags).map((flag) => (
|
||||
<Badge
|
||||
key={flag}
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{flag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msg.ai_analysis && (
|
||||
<p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
|
||||
<Sparkles className="size-3 inline mr-1" />
|
||||
{msg.ai_analysis}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{msg.ai_confidence != null && (
|
||||
<div className="flex items-center gap-2 max-w-40">
|
||||
<Progress value={msg.ai_confidence * 100} className="h-1.5" />
|
||||
<span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
|
||||
{(msg.ai_confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
onClick={() => onReanalyze(msg.id)}
|
||||
>
|
||||
<RefreshCw className="size-3 mr-1" />
|
||||
Reanalyze
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,33 +7,30 @@ import {
|
||||
ChevronRight,
|
||||
Clock,
|
||||
Hash,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
DetailStat,
|
||||
EmptyState,
|
||||
ErrorState,
|
||||
LoadingSkeleton,
|
||||
StatCard,
|
||||
} from "@/components/shared";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { dashboardApi } from "@/lib/api";
|
||||
import { useChannels, useStats, useUsers } from "@/hooks";
|
||||
import { formatNumber } from "@/lib/format";
|
||||
import type {
|
||||
DashboardChannel,
|
||||
DashboardChannelDetail,
|
||||
DashboardStats,
|
||||
DashboardUser,
|
||||
DashboardUserDetail,
|
||||
} from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import type { DashboardChannelDetail, DashboardUserDetail } from "@/lib/types";
|
||||
|
||||
type View = "stats" | "users" | "channels" | "user-detail" | "channel-detail";
|
||||
|
||||
@@ -46,60 +43,6 @@ export default function DashboardPage() {
|
||||
const [activeChannel, setActiveChannel] =
|
||||
useState<DashboardChannelDetail | null>(null);
|
||||
|
||||
// WS connection for real-time awareness
|
||||
useWebSocket();
|
||||
|
||||
const renderView = () => {
|
||||
switch (view) {
|
||||
case "stats":
|
||||
return <StatsView />;
|
||||
case "users":
|
||||
return (
|
||||
<UsersView
|
||||
onSelectUser={async (userId) => {
|
||||
try {
|
||||
const detail = await dashboardApi.getUserDetail(userId);
|
||||
setActiveUser(detail);
|
||||
setView("user-detail");
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "channels":
|
||||
return (
|
||||
<ChannelsView
|
||||
guildId={guildId}
|
||||
onSelectChannel={async (channelId) => {
|
||||
try {
|
||||
const detail = await dashboardApi.getChannelDetail(channelId);
|
||||
setActiveChannel(detail);
|
||||
setView("channel-detail");
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "user-detail":
|
||||
return activeUser ? (
|
||||
<UserDetailView user={activeUser} onBack={() => setView("users")} />
|
||||
) : (
|
||||
<UsersView onSelectUser={() => {}} />
|
||||
);
|
||||
case "channel-detail":
|
||||
return activeChannel ? (
|
||||
<ChannelDetailView
|
||||
channel={activeChannel}
|
||||
onBack={() => setView("channels")}
|
||||
/>
|
||||
) : (
|
||||
<ChannelsView guildId={guildId} onSelectChannel={() => {}} />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<GuildSelector value={guildId} onChange={setGuildId} />
|
||||
@@ -130,260 +73,221 @@ export default function DashboardPage() {
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{renderView()}
|
||||
{view === "stats" && <StatsSection />}
|
||||
{view === "users" && (
|
||||
<UsersSection
|
||||
onSelect={async (userId) => {
|
||||
try {
|
||||
const { dashboardApi } = await import("@/lib/api");
|
||||
const detail = await dashboardApi.getUserDetail(userId);
|
||||
setActiveUser(detail);
|
||||
setView("user-detail");
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{view === "channels" && (
|
||||
<ChannelsSection
|
||||
guildId={guildId}
|
||||
onSelect={async (chId) => {
|
||||
try {
|
||||
const { dashboardApi } = await import("@/lib/api");
|
||||
const detail = await dashboardApi.getChannelDetail(chId);
|
||||
setActiveChannel(detail);
|
||||
setView("channel-detail");
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{view === "user-detail" && activeUser && (
|
||||
<UserDetailView user={activeUser} onBack={() => setView("users")} />
|
||||
)}
|
||||
{view === "channel-detail" && activeChannel && (
|
||||
<ChannelDetailView
|
||||
channel={activeChannel}
|
||||
onBack={() => setView("channels")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Stats View ──────────────────────────────────
|
||||
// ── Stats Section ───────────────────────────────
|
||||
|
||||
function StatsView() {
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
function StatsSection() {
|
||||
const { stats, loading, error, refetch } = useStats();
|
||||
|
||||
const fetchStats = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await dashboardApi.getStats();
|
||||
setStats(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load stats");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
if (error) return <ErrorState message={error} onRetry={refetch} />;
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
if (error) {
|
||||
if (loading || !stats) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<AlertCircle className="size-10 text-destructive mb-3" />
|
||||
<p className="text-sm text-muted-foreground mb-4 max-w-sm">{error}</p>
|
||||
<Button variant="outline" onClick={fetchStats}>
|
||||
<RefreshCw className="size-4 mr-2" />
|
||||
Retry
|
||||
</Button>
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<LoadingSkeleton count={8} height="h-28" columns={4} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{Array.from({ length: 8 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-28 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
) : stats ? (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 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}
|
||||
variant="danger"
|
||||
icon={AlertCircle}
|
||||
/>
|
||||
<StatCard
|
||||
label="Clean"
|
||||
value={stats.total_clean}
|
||||
variant="success"
|
||||
icon={Shield}
|
||||
/>
|
||||
<StatCard
|
||||
label="Voice Recordings"
|
||||
value={stats.total_voice_recordings}
|
||||
icon={Hash}
|
||||
/>
|
||||
<StatCard
|
||||
label="AI Profiles"
|
||||
value={stats.total_profiles}
|
||||
icon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 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"
|
||||
/>
|
||||
<StatCard
|
||||
label="Voice Recordings"
|
||||
value={stats.total_voice_recordings}
|
||||
icon={Hash}
|
||||
/>
|
||||
<StatCard
|
||||
label="AI Profiles"
|
||||
value={stats.total_profiles}
|
||||
icon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Hash className="size-4 text-muted-foreground" />
|
||||
Top Channels
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats.top_channels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-6 text-center">
|
||||
No channel data yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{stats.top_channels.map((ch, _i) => {
|
||||
const maxCount = stats.top_channels[0].message_count;
|
||||
const pct =
|
||||
maxCount > 0 ? (ch.message_count / maxCount) * 100 : 0;
|
||||
return (
|
||||
<div key={ch.channel_id} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="truncate font-medium">
|
||||
#{ch.channel_name ?? ch.channel_id.slice(0, 8)}
|
||||
</span>
|
||||
<span className="text-muted-foreground tabular-nums">
|
||||
{formatNumber(ch.message_count)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={pct} className="h-1.5" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Hash className="size-4 text-muted-foreground" />
|
||||
Top Channels
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats.top_channels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-6 text-center">
|
||||
No channel data yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{stats.top_channels.map((ch) => {
|
||||
const max = stats.top_channels[0].message_count;
|
||||
const pct = max > 0 ? (ch.message_count / max) * 100 : 0;
|
||||
return (
|
||||
<div key={ch.channel_id} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="truncate font-medium">
|
||||
#{ch.channel_name ?? ch.channel_id.slice(0, 8)}
|
||||
</span>
|
||||
<span className="text-muted-foreground tabular-nums">
|
||||
{formatNumber(ch.message_count)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={pct} className="h-1.5" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Shield className="size-4 text-muted-foreground" />
|
||||
Moderation Queue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="rounded-lg bg-muted/50 p-3 text-center space-y-1.5">
|
||||
<div className="text-2xl font-bold tabular-nums">
|
||||
{stats.moderation_overview.pending}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Pending</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-yellow-500/10 p-3 text-center space-y-1.5">
|
||||
<div className="text-2xl font-bold tabular-nums text-yellow-500">
|
||||
{stats.moderation_overview.processing}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Processing
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-destructive/10 p-3 text-center space-y-1.5">
|
||||
<div className="text-2xl font-bold tabular-nums text-destructive">
|
||||
{stats.moderation_overview.error}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Errors</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Shield className="size-4 text-muted-foreground" />
|
||||
Moderation Queue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<QueueStat
|
||||
label="Pending"
|
||||
value={stats.moderation_overview.pending}
|
||||
/>
|
||||
<QueueStat
|
||||
label="Processing"
|
||||
value={stats.moderation_overview.processing}
|
||||
variant="warning"
|
||||
/>
|
||||
<QueueStat
|
||||
label="Errors"
|
||||
value={stats.moderation_overview.error}
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
function QueueStat({
|
||||
label,
|
||||
value,
|
||||
variant,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
variant?: "default" | "danger" | "success";
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
variant?: "default" | "warning" | "danger";
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p
|
||||
className={cn(
|
||||
"text-2xl font-bold tabular-nums tracking-tight",
|
||||
variant === "danger" && "text-destructive",
|
||||
variant === "success" && "text-green-500",
|
||||
)}
|
||||
>
|
||||
{formatNumber(value)}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex size-9 shrink-0 items-center justify-center rounded-lg",
|
||||
variant === "danger"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: variant === "success"
|
||||
? "bg-green-500/10 text-green-500"
|
||||
: "bg-primary/10 text-primary",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div
|
||||
className={`rounded-lg p-3 text-center space-y-1.5 ${
|
||||
variant === "danger"
|
||||
? "bg-destructive/10"
|
||||
: variant === "warning"
|
||||
? "bg-yellow-500/10"
|
||||
: "bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`text-2xl font-bold tabular-nums ${
|
||||
variant === "danger"
|
||||
? "text-destructive"
|
||||
: variant === "warning"
|
||||
? "text-yellow-500"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Users View ──────────────────────────────────
|
||||
// ── Users Section ───────────────────────────────
|
||||
|
||||
function UsersView({
|
||||
onSelectUser,
|
||||
}: {
|
||||
onSelectUser: (userId: string) => void;
|
||||
}) {
|
||||
const [users, setUsers] = useState<DashboardUser[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [_cursor, setCursor] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const fetchUsers = useCallback(async (searchQuery?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await dashboardApi.listUsers(20, undefined, searchQuery);
|
||||
setUsers(result.data);
|
||||
setCursor(result.nextCursor);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
function UsersSection({ onSelect }: { onSelect: (id: string) => void }) {
|
||||
const { users, loading, search, setSearch, refetch } = useUsers();
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [fetchUsers]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (search) fetchUsers(search);
|
||||
else fetchUsers();
|
||||
}, 300);
|
||||
const timer = setTimeout(refetch, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [search, fetchUsers]);
|
||||
}, [refetch]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search users…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@@ -392,118 +296,81 @@ function UsersView({
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-20 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<LoadingSkeleton count={6} height="h-20" columns={2} />
|
||||
) : users.length === 0 ? (
|
||||
<EmptyState icon={Users} title="No users found." />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{users.length === 0 ? (
|
||||
<div className="col-span-full flex flex-col items-center justify-center py-16 text-center">
|
||||
<Users className="size-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">No users found.</p>
|
||||
</div>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<Card
|
||||
key={user.user_id}
|
||||
className="cursor-pointer hover:bg-accent/5 transition-colors"
|
||||
onClick={() => onSelectUser(user.user_id)}
|
||||
>
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden ring-1 ring-border">
|
||||
{user.avatar_url ? (
|
||||
<Image
|
||||
src={user.avatar_url}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
(user.username ?? "?").charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{user.username ?? "Unknown"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-2">
|
||||
<span>{user.total_messages} messages</span>
|
||||
{user.flagged_count > 0 && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{user.flagged_count} flagged
|
||||
</Badge>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-muted-foreground shrink-0" />
|
||||
{users.map((user) => (
|
||||
<Card
|
||||
key={user.user_id}
|
||||
className="cursor-pointer hover:bg-accent/5 transition-colors"
|
||||
onClick={() => onSelect(user.user_id)}
|
||||
>
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden ring-1 ring-border">
|
||||
{user.avatar_url ? (
|
||||
<Image
|
||||
src={user.avatar_url}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
(user.username ?? "?").charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{user.username ?? "Unknown"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-2">
|
||||
<span>{user.total_messages} messages</span>
|
||||
{user.flagged_count > 0 && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{user.flagged_count} flagged
|
||||
</Badge>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-muted-foreground shrink-0" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Channels View ───────────────────────────────
|
||||
// ── Channels Section ────────────────────────────
|
||||
|
||||
function ChannelsView({
|
||||
onSelectChannel,
|
||||
function ChannelsSection({
|
||||
guildId,
|
||||
onSelect,
|
||||
}: {
|
||||
onSelectChannel: (channelId: string) => void;
|
||||
guildId: string;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
const [channels, setChannels] = useState<DashboardChannel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const fetchChannels = useCallback(
|
||||
async (searchQuery?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await dashboardApi.listChannels(
|
||||
20,
|
||||
searchQuery,
|
||||
guildId || undefined,
|
||||
);
|
||||
setChannels(result.data);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[guildId],
|
||||
);
|
||||
const { channels, loading, search, setSearch, refetch } =
|
||||
useChannels(guildId);
|
||||
|
||||
useEffect(() => {
|
||||
fetchChannels();
|
||||
}, [fetchChannels]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (search) fetchChannels(search);
|
||||
else fetchChannels();
|
||||
}, 300);
|
||||
const timer = setTimeout(refetch, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [search, fetchChannels]);
|
||||
}, [refetch]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search channels…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@@ -512,59 +379,48 @@ function ChannelsView({
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-20 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<LoadingSkeleton count={6} height="h-20" />
|
||||
) : channels.length === 0 ? (
|
||||
<EmptyState icon={Hash} title="No channels found." />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{channels.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<Hash className="size-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No channels found.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
channels.map((ch) => (
|
||||
<Card
|
||||
key={ch.channel_id}
|
||||
className="cursor-pointer hover:bg-accent/5 transition-colors"
|
||||
onClick={() => onSelectChannel(ch.channel_id)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash className="size-3.5 text-muted-foreground shrink-0" />
|
||||
<p className="text-sm font-medium truncate">
|
||||
{ch.channel_name ?? ch.channel_id.slice(0, 8)}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-2">
|
||||
<span>{ch.total_messages} messages</span>
|
||||
{ch.flagged_count > 0 && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{ch.flagged_count} flagged
|
||||
</Badge>
|
||||
)}
|
||||
{channels.map((ch) => (
|
||||
<Card
|
||||
key={ch.channel_id}
|
||||
className="cursor-pointer hover:bg-accent/5 transition-colors"
|
||||
onClick={() => onSelect(ch.channel_id)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash className="size-3.5 text-muted-foreground shrink-0" />
|
||||
<p className="text-sm font-medium truncate">
|
||||
{ch.channel_name ?? ch.channel_id.slice(0, 8)}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-muted-foreground shrink-0 ml-2" />
|
||||
</div>
|
||||
{ch.culture_summary && (
|
||||
<p className="text-xs text-muted-foreground/70 mt-2 italic line-clamp-2 border-t border-border/50 pt-2">
|
||||
“{ch.culture_summary}”
|
||||
<p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-2">
|
||||
<span>{ch.total_messages} messages</span>
|
||||
{ch.flagged_count > 0 && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{ch.flagged_count} flagged
|
||||
</Badge>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-muted-foreground shrink-0 ml-2" />
|
||||
</div>
|
||||
{ch.culture_summary && (
|
||||
<p className="text-xs text-muted-foreground/70 mt-2 italic line-clamp-2 border-t border-border/50 pt-2">
|
||||
“{ch.culture_summary}”
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -582,12 +438,10 @@ function UserDetailView({
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
<ArrowLeft className="size-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
<ArrowLeft className="size-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-5">
|
||||
@@ -609,7 +463,7 @@ function UserDetailView({
|
||||
<h2 className="text-lg font-semibold">
|
||||
{user.username ?? "Unknown"}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground font-mono text-xs">
|
||||
<p className="text-xs text-muted-foreground font-mono">
|
||||
{user.user_id}
|
||||
</p>
|
||||
</div>
|
||||
@@ -684,12 +538,10 @@ function ChannelDetailView({
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
<ArrowLeft className="size-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
<ArrowLeft className="size-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-5">
|
||||
@@ -698,7 +550,7 @@ function ChannelDetailView({
|
||||
<Hash className="size-5 text-muted-foreground" />
|
||||
{channel.channel_name ?? channel.channel_id.slice(0, 8)}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground font-mono mt-0.5">
|
||||
<p className="text-xs text-muted-foreground font-mono">
|
||||
{channel.channel_id}
|
||||
</p>
|
||||
</div>
|
||||
@@ -762,35 +614,3 @@ function ChannelDetailView({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Shared Components ───────────────────────────
|
||||
|
||||
function DetailStat({
|
||||
label,
|
||||
value,
|
||||
variant,
|
||||
suffix,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
variant?: "default" | "danger" | "success";
|
||||
suffix?: string;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-3">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p
|
||||
className={cn(
|
||||
"text-lg font-bold tabular-nums",
|
||||
variant === "danger" && "text-destructive",
|
||||
variant === "success" && "text-green-500",
|
||||
)}
|
||||
>
|
||||
{formatNumber(value)}
|
||||
{suffix}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,24 +2,12 @@
|
||||
|
||||
import { Suspense } from "react";
|
||||
|
||||
import { Header } from "@/components/layout/header";
|
||||
import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
|
||||
import { Sidebar } from "@/components/layout/sidebar";
|
||||
import { MascotChatbot } from "@/components/mascot/mascot-chatbot";
|
||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||
import { Chatbot } from "@/components/chatbot/chatbot";
|
||||
import { AppHeader } from "@/components/layout/app-header";
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { MobileNav } from "@/components/layout/mobile-nav";
|
||||
import { WsProvider } from "@/lib/ws/context";
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<p className="text-sm text-muted-foreground">Loading dashboard…</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
@@ -27,19 +15,25 @@ export default function DashboardLayout({
|
||||
}) {
|
||||
return (
|
||||
<WsProvider>
|
||||
<SidebarProvider defaultOpen={true}>
|
||||
<div className="flex min-h-screen bg-background">
|
||||
<Sidebar />
|
||||
<SidebarInset className="flex flex-col">
|
||||
<Header />
|
||||
<main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
|
||||
<Suspense fallback={<LoadingFallback />}>{children}</Suspense>
|
||||
</main>
|
||||
</SidebarInset>
|
||||
<MobileTabBar />
|
||||
<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>
|
||||
</SidebarProvider>
|
||||
<MascotChatbot />
|
||||
<MobileNav />
|
||||
</div>
|
||||
<Chatbot />
|
||||
</WsProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,81 +8,29 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { voiceApi } from "@/lib/api";
|
||||
import type { MediaState } from "@/lib/types";
|
||||
import { useMediaState } from "@/hooks";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export default function MediaPage() {
|
||||
const ws = useWebSocket();
|
||||
|
||||
const [mediaState, setMediaState] = useState<MediaState | null>(null);
|
||||
const { mediaState, refresh, queue, skip, stop, setVolume } = useMediaState();
|
||||
const [queueUrl, setQueueUrl] = useState("");
|
||||
|
||||
const fetchMediaStatus = useCallback(async () => {
|
||||
try {
|
||||
const state = await voiceApi.getMediaStatus();
|
||||
setMediaState(state);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMediaStatus();
|
||||
}, [fetchMediaStatus]);
|
||||
refresh();
|
||||
}, [refresh]);
|
||||
|
||||
// WS subscription
|
||||
// WS subscription for real-time media state
|
||||
useEffect(() => {
|
||||
const unsubMedia = ws.on("media_state", (state) => {
|
||||
setMediaState(state as MediaState);
|
||||
});
|
||||
const unsub = ws.on("media_state", () => refresh());
|
||||
return unsub;
|
||||
}, [ws, refresh]);
|
||||
|
||||
return () => {
|
||||
unsubMedia();
|
||||
};
|
||||
}, [ws]);
|
||||
|
||||
const handleQueueMedia = useCallback(async () => {
|
||||
const handleQueue = useCallback(() => {
|
||||
if (!queueUrl.trim()) return;
|
||||
try {
|
||||
const state = await voiceApi.mediaQueue(queueUrl.trim(), "music");
|
||||
setMediaState(state);
|
||||
setQueueUrl("");
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [queueUrl]);
|
||||
|
||||
const handleSkip = useCallback(async () => {
|
||||
try {
|
||||
const state = await voiceApi.mediaSkip();
|
||||
setMediaState(state);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleStop = useCallback(async () => {
|
||||
try {
|
||||
const state = await voiceApi.mediaStop();
|
||||
setMediaState(state);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleVolume = useCallback(
|
||||
async (value: number | readonly number[]) => {
|
||||
const vol = Array.isArray(value) ? value[0] : value;
|
||||
try {
|
||||
const state = await voiceApi.mediaVolume(vol);
|
||||
setMediaState(state);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
queue(queueUrl.trim());
|
||||
setQueueUrl("");
|
||||
}, [queueUrl, queue]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
@@ -94,23 +42,20 @@ export default function MediaPage() {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Queue URL */}
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Queue a URL (YouTube, audio file…)"
|
||||
value={queueUrl}
|
||||
onChange={(e) => setQueueUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleQueue()}
|
||||
className="flex-1 h-9"
|
||||
/>
|
||||
<Button onClick={handleQueueMedia} disabled={!queueUrl.trim()}>
|
||||
<Button onClick={handleQueue} disabled={!queueUrl.trim()}>
|
||||
<Play className="size-4 mr-1.5" />
|
||||
Queue
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Now Playing */}
|
||||
{mediaState?.current && (
|
||||
<div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
|
||||
<p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
|
||||
@@ -133,9 +78,7 @@ export default function MediaPage() {
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{mediaState.current.durationMs
|
||||
? `${Math.floor(
|
||||
mediaState.current.durationMs / 60000,
|
||||
)}:${String(
|
||||
? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
|
||||
Math.floor(
|
||||
(mediaState.current.durationMs % 60000) / 1000,
|
||||
),
|
||||
@@ -153,13 +96,12 @@ export default function MediaPage() {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleStop}>
|
||||
<Button variant="outline" size="sm" onClick={stop}>
|
||||
<Square className="size-4 mr-1" />
|
||||
Stop
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleSkip}>
|
||||
<Button variant="outline" size="sm" onClick={skip}>
|
||||
<SkipForward className="size-4 mr-1" />
|
||||
Skip
|
||||
</Button>
|
||||
@@ -169,7 +111,7 @@ export default function MediaPage() {
|
||||
className="w-24"
|
||||
defaultValue={[mediaState?.musicVolume ?? 0.5]}
|
||||
value={[mediaState?.musicVolume ?? 0.5]}
|
||||
onValueChange={handleVolume}
|
||||
onValueChange={setVolume}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
@@ -177,7 +119,6 @@ export default function MediaPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Queue */}
|
||||
{mediaState && mediaState.queue.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs text-muted-foreground font-medium">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,54 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { Download, Headphones, Trash2 } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { recordingsApi } from "@/lib/api";
|
||||
import { useRecordings } from "@/hooks";
|
||||
import { formatBytes } from "@/lib/format";
|
||||
import type { VoiceRecording } from "@/lib/types";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export default function RecordingsPage() {
|
||||
const ws = useWebSocket();
|
||||
const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchRecordings = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await recordingsApi.list(50);
|
||||
setRecordings(result.items);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
const { recordings, loading, refresh, remove, prepend } = useRecordings();
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecordings();
|
||||
}, [fetchRecordings]);
|
||||
refresh();
|
||||
}, [refresh]);
|
||||
|
||||
// WS subscription for live updates
|
||||
// WS subscription for real-time updates
|
||||
useEffect(() => {
|
||||
const unsub = ws.on("voice_recording_uploaded", (rec) => {
|
||||
setRecordings((prev) => [rec as VoiceRecording, ...prev]);
|
||||
const unsub = ws.on("voice_recording_uploaded", (data) => {
|
||||
prepend(data as import("@/lib/types").VoiceRecording);
|
||||
});
|
||||
return () => unsub();
|
||||
}, [ws]);
|
||||
|
||||
const handleDelete = useCallback(async (id: string) => {
|
||||
try {
|
||||
await recordingsApi.delete(id);
|
||||
setRecordings((prev) => prev.filter((r) => r.id !== id));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
return unsub;
|
||||
}, [ws, prepend]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
@@ -61,18 +38,9 @@ export default function RecordingsPage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-16 rounded-lg bg-muted/30 animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<LoadingSkeleton count={5} height="h-16" />
|
||||
) : recordings.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">
|
||||
No recordings yet.
|
||||
</p>
|
||||
<EmptyState icon={Headphones} title="No recordings yet." />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{recordings.map((rec) => (
|
||||
@@ -117,7 +85,7 @@ export default function RecordingsPage() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(rec.id)}
|
||||
onClick={() => remove(rec.id)}
|
||||
className="hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
|
||||
@@ -2,20 +2,17 @@
|
||||
|
||||
import { Moon, Server, Shield, Sun, Wifi } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
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 { Skeleton } from "@/components/ui/skeleton";
|
||||
import { configApi } from "@/lib/api";
|
||||
import type { AppConfig } from "@/lib/types";
|
||||
import { useConfig } from "@/hooks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { status } = useWebSocket();
|
||||
const [config, setConfig] = useState<AppConfig | null>(null);
|
||||
const [configLoading, setConfigLoading] = useState(true);
|
||||
const { config, loading: configLoading } = useConfig();
|
||||
const [theme, setTheme] = useState<"light" | "dark">("dark");
|
||||
|
||||
useEffect(() => {
|
||||
@@ -23,14 +20,6 @@ export default function SettingsPage() {
|
||||
if (stored) setTheme(stored);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
configApi
|
||||
.get()
|
||||
.then(setConfig)
|
||||
.catch(() => {})
|
||||
.finally(() => setConfigLoading(false));
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const next = theme === "dark" ? "light" : "dark";
|
||||
setTheme(next);
|
||||
@@ -64,7 +53,6 @@ export default function SettingsPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up max-w-2xl">
|
||||
{/* Connection Status */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
@@ -86,7 +74,6 @@ export default function SettingsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Appearance */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
@@ -112,7 +99,6 @@ export default function SettingsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Server Config */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
@@ -122,11 +108,7 @@ export default function SettingsPage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{configLoading ? (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-6 w-full" />
|
||||
))}
|
||||
</div>
|
||||
<LoadingSkeleton count={6} height="h-6" />
|
||||
) : config ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<ConfigRow
|
||||
@@ -162,7 +144,6 @@ export default function SettingsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* About */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
@@ -173,8 +154,8 @@ export default function SettingsPage() {
|
||||
<CardContent>
|
||||
<div className="text-sm space-y-1">
|
||||
<p>
|
||||
<span className="text-gradient font-bold">Bete</span> — Discord
|
||||
Moderation Watcher
|
||||
<span className="text-gradient font-bold">DC Automod</span> —
|
||||
Discord Moderation Watcher
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
AI-powered message moderation, voice recording, and real-time
|
||||
|
||||
@@ -21,115 +21,75 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
useGuilds,
|
||||
useSpeakers,
|
||||
useVoiceChannels,
|
||||
useVoiceStatus,
|
||||
} from "@/hooks";
|
||||
import { voiceApi } from "@/lib/api";
|
||||
import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export default function VoicePage() {
|
||||
const ws = useWebSocket();
|
||||
const { voiceStatus, refresh: refreshStatus } = useVoiceStatus();
|
||||
const { guilds } = useGuilds();
|
||||
const { channels: voiceChannels, fetch: fetchChannels } = useVoiceChannels();
|
||||
const { speakers, subscribe } = useSpeakers();
|
||||
|
||||
const [voiceStatus, setVoiceStatus] = useState<VoiceStatus | null>(null);
|
||||
const [speakers, setSpeakers] = useState<ActiveSpeaker[]>([]);
|
||||
const [guilds, setGuilds] = useState<Array<{ id: string; name: string }>>([]);
|
||||
const [voiceChannels, setVoiceChannels] = useState<
|
||||
Array<{ id: string; name: string }>
|
||||
>([]);
|
||||
const [selectedGuild, setSelectedGuild] = useState("");
|
||||
const [selectedChannel, setSelectedChannel] = useState("");
|
||||
const [voiceLoading, setVoiceLoading] = useState(false);
|
||||
const [micActive, setMicActive] = useState(false);
|
||||
const [guildsLoading, setGuildsLoading] = useState(true);
|
||||
|
||||
const fetchVoiceStatus = useCallback(async () => {
|
||||
try {
|
||||
const status = await voiceApi.getStatus();
|
||||
setVoiceStatus(status);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchGuilds = useCallback(async () => {
|
||||
setGuildsLoading(true);
|
||||
try {
|
||||
const g = await voiceApi.getGuilds();
|
||||
setGuilds(g);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setGuildsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Subscribe to WS speaker events
|
||||
useEffect(() => {
|
||||
fetchVoiceStatus();
|
||||
fetchGuilds();
|
||||
}, [fetchVoiceStatus, fetchGuilds]);
|
||||
const unsub = subscribe(ws);
|
||||
return () => unsub();
|
||||
}, [ws, subscribe]);
|
||||
|
||||
// WS subscriptions
|
||||
useEffect(() => {
|
||||
const unsubSpeaker = ws.on("voice_active_user", (user) => {
|
||||
const speaker = user as ActiveSpeaker;
|
||||
setSpeakers((prev) => {
|
||||
const existing = prev.findIndex((s) => s.userId === speaker.userId);
|
||||
if (existing >= 0) {
|
||||
const next = [...prev];
|
||||
next[existing] = speaker;
|
||||
return next;
|
||||
}
|
||||
return [...prev, speaker];
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubSpeaker();
|
||||
};
|
||||
}, [ws]);
|
||||
|
||||
const handleGuildChange = useCallback(async (guildId: string | null) => {
|
||||
if (!guildId) {
|
||||
setSelectedGuild("");
|
||||
setVoiceChannels([]);
|
||||
return;
|
||||
}
|
||||
setSelectedGuild(guildId);
|
||||
setSelectedChannel("");
|
||||
try {
|
||||
const channels = await voiceApi.getVoiceChannels(guildId);
|
||||
setVoiceChannels(channels);
|
||||
} catch {
|
||||
setVoiceChannels([]);
|
||||
}
|
||||
}, []);
|
||||
const handleGuildChange = useCallback(
|
||||
(guildId: string | null) => {
|
||||
if (!guildId) {
|
||||
setSelectedGuild("");
|
||||
setSelectedChannel("");
|
||||
return;
|
||||
}
|
||||
setSelectedGuild(guildId);
|
||||
setSelectedChannel("");
|
||||
fetchChannels(guildId);
|
||||
},
|
||||
[fetchChannels],
|
||||
);
|
||||
|
||||
const handleConnect = useCallback(async () => {
|
||||
if (!selectedGuild || !selectedChannel) return;
|
||||
setVoiceLoading(true);
|
||||
try {
|
||||
const status = await voiceApi.connect(selectedGuild, selectedChannel);
|
||||
setVoiceStatus(status);
|
||||
const _status = await voiceApi.connect(selectedGuild, selectedChannel);
|
||||
// voiceStatus will be refreshed
|
||||
setVoiceLoading(false);
|
||||
refreshStatus();
|
||||
} finally {
|
||||
setVoiceLoading(false);
|
||||
}
|
||||
}, [selectedGuild, selectedChannel]);
|
||||
}, [selectedGuild, selectedChannel, refreshStatus]);
|
||||
|
||||
const handleDisconnect = useCallback(async () => {
|
||||
setVoiceLoading(true);
|
||||
try {
|
||||
const status = await voiceApi.disconnect();
|
||||
setVoiceStatus(status);
|
||||
setSpeakers([]);
|
||||
await voiceApi.disconnect();
|
||||
refreshStatus();
|
||||
} finally {
|
||||
setVoiceLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [refreshStatus]);
|
||||
|
||||
const activeSpeakers = speakers.filter((s) => s.speaking);
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
{/* Voice Connection */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
@@ -168,17 +128,9 @@ export default function VoicePage() {
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Select
|
||||
value={selectedGuild}
|
||||
onValueChange={handleGuildChange}
|
||||
disabled={guildsLoading}
|
||||
>
|
||||
<Select value={selectedGuild} onValueChange={handleGuildChange}>
|
||||
<SelectTrigger className="flex-1 h-9">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
guildsLoading ? "Loading guilds…" : "Select guild…"
|
||||
}
|
||||
/>
|
||||
<SelectValue placeholder="Select guild…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{guilds.map((g) => (
|
||||
@@ -197,11 +149,17 @@ export default function VoicePage() {
|
||||
<SelectValue placeholder="Select channel…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{voiceChannels.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
{voiceChannels.length === 0 ? (
|
||||
<SelectItem value="_none" disabled>
|
||||
No channels loaded
|
||||
</SelectItem>
|
||||
))}
|
||||
) : (
|
||||
voiceChannels.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{voiceStatus?.connected ? (
|
||||
@@ -234,7 +192,6 @@ export default function VoicePage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Active Speakers */}
|
||||
{activeSpeakers.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -262,7 +219,6 @@ export default function VoicePage() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Microphone */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
|
||||
@@ -16,7 +16,7 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Bete — Discord Moderation Dashboard",
|
||||
title: "DC Automod — Discord Moderation Dashboard",
|
||||
description: "Live Discord monitoring and AI moderation dashboard",
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user