257 lines
9.0 KiB
TypeScript
257 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { api } from "@/lib/api";
|
|
import { cn } from "@/lib/utils";
|
|
import { formatDate } from "@/lib/utils";
|
|
import { EyeOff, UserX, Undo2, Plus } from "lucide-react";
|
|
|
|
type Tab = "hidden" | "blocked";
|
|
|
|
export default function ModerationPage() {
|
|
const [tab, setTab] = useState<Tab>("hidden");
|
|
const [hiddenContent, setHiddenContent] = useState<any[]>([]);
|
|
const [blockedPubkeys, setBlockedPubkeys] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
|
|
const [hideEventId, setHideEventId] = useState("");
|
|
const [hideReason, setHideReason] = useState("");
|
|
const [blockPubkey, setBlockPubkey] = useState("");
|
|
const [blockReason, setBlockReason] = useState("");
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
const [h, b] = await Promise.all([
|
|
api.getHiddenContent(),
|
|
api.getBlockedPubkeys(),
|
|
]);
|
|
setHiddenContent(h);
|
|
setBlockedPubkeys(b);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const handleHide = async () => {
|
|
if (!hideEventId.trim()) return;
|
|
setError("");
|
|
try {
|
|
await api.hideContent(hideEventId, hideReason || undefined);
|
|
setHideEventId("");
|
|
setHideReason("");
|
|
await loadData();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const handleUnhide = async (id: string) => {
|
|
try {
|
|
await api.unhideContent(id);
|
|
await loadData();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const handleBlock = async () => {
|
|
if (!blockPubkey.trim()) return;
|
|
setError("");
|
|
try {
|
|
await api.blockPubkey(blockPubkey, blockReason || undefined);
|
|
setBlockPubkey("");
|
|
setBlockReason("");
|
|
await loadData();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
const handleUnblock = async (id: string) => {
|
|
try {
|
|
await api.unblockPubkey(id);
|
|
await loadData();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="text-on-surface/50">Loading moderation data...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-bold text-on-surface">Moderation</h1>
|
|
|
|
{error && <p className="text-error text-sm">{error}</p>}
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setTab("hidden")}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors",
|
|
tab === "hidden"
|
|
? "bg-surface-container-high text-primary"
|
|
: "bg-surface-container-low text-on-surface/60 hover:text-on-surface"
|
|
)}
|
|
>
|
|
<EyeOff size={16} />
|
|
Hidden Content
|
|
</button>
|
|
<button
|
|
onClick={() => setTab("blocked")}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors",
|
|
tab === "blocked"
|
|
? "bg-surface-container-high text-primary"
|
|
: "bg-surface-container-low text-on-surface/60 hover:text-on-surface"
|
|
)}
|
|
>
|
|
<UserX size={16} />
|
|
Blocked Pubkeys
|
|
</button>
|
|
</div>
|
|
|
|
{tab === "hidden" && (
|
|
<div className="space-y-4">
|
|
<div className="bg-surface-container-low rounded-xl p-6">
|
|
<h2 className="text-sm font-semibold text-on-surface/70 mb-3">Hide Content</h2>
|
|
<div className="flex gap-3">
|
|
<input
|
|
placeholder="Nostr event ID"
|
|
value={hideEventId}
|
|
onChange={(e) => setHideEventId(e.target.value)}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
|
|
/>
|
|
<input
|
|
placeholder="Reason (optional)"
|
|
value={hideReason}
|
|
onChange={(e) => setHideReason(e.target.value)}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
|
|
/>
|
|
<button
|
|
onClick={handleHide}
|
|
disabled={!hideEventId.trim()}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
|
|
>
|
|
<Plus size={16} />
|
|
Hide
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{hiddenContent.length === 0 ? (
|
|
<p className="text-on-surface/50 text-sm">No hidden content.</p>
|
|
) : (
|
|
hiddenContent.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="bg-surface-container-low rounded-xl p-6 flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<p className="text-on-surface font-mono text-sm">
|
|
{item.nostrEventId?.slice(0, 16)}...
|
|
</p>
|
|
{item.reason && (
|
|
<p className="text-on-surface/50 text-xs mt-1">{item.reason}</p>
|
|
)}
|
|
{item.createdAt && (
|
|
<p className="text-on-surface/40 text-xs mt-1">
|
|
{formatDate(item.createdAt)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => handleUnhide(item.id)}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-on-surface text-sm transition-colors"
|
|
>
|
|
<Undo2 size={14} />
|
|
Unhide
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{tab === "blocked" && (
|
|
<div className="space-y-4">
|
|
<div className="bg-surface-container-low rounded-xl p-6">
|
|
<h2 className="text-sm font-semibold text-on-surface/70 mb-3">Block Pubkey</h2>
|
|
<div className="flex gap-3">
|
|
<input
|
|
placeholder="Pubkey (hex)"
|
|
value={blockPubkey}
|
|
onChange={(e) => setBlockPubkey(e.target.value)}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
|
|
/>
|
|
<input
|
|
placeholder="Reason (optional)"
|
|
value={blockReason}
|
|
onChange={(e) => setBlockReason(e.target.value)}
|
|
className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
|
|
/>
|
|
<button
|
|
onClick={handleBlock}
|
|
disabled={!blockPubkey.trim()}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
|
|
>
|
|
<Plus size={16} />
|
|
Block
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{blockedPubkeys.length === 0 ? (
|
|
<p className="text-on-surface/50 text-sm">No blocked pubkeys.</p>
|
|
) : (
|
|
blockedPubkeys.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="bg-surface-container-low rounded-xl p-6 flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<p className="text-on-surface font-mono text-sm">
|
|
{item.pubkey?.slice(0, 16)}...{item.pubkey?.slice(-8)}
|
|
</p>
|
|
{item.reason && (
|
|
<p className="text-on-surface/50 text-xs mt-1">{item.reason}</p>
|
|
)}
|
|
{item.createdAt && (
|
|
<p className="text-on-surface/40 text-xs mt-1">
|
|
{formatDate(item.createdAt)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => handleUnblock(item.id)}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-on-surface text-sm transition-colors"
|
|
>
|
|
<Undo2 size={14} />
|
|
Unblock
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|