337 lines
11 KiB
TypeScript
337 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { Can } from "@/components/staff-context";
|
|
import { toast } from "sonner";
|
|
import { api, AdminError, type AdminReport, type ReportType } from "@/lib/api";
|
|
import { usePagedList } from "@/lib/use-paged-list";
|
|
import { ListShell, EmptyRow } from "@/components/list-shell";
|
|
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Modal } from "@/components/ui/modal";
|
|
import { RichTextarea } from "@/components/ui/rich-textarea";
|
|
import { RichText } from "@/lib/rich-text";
|
|
import { useConfirm } from "@/components/confirm";
|
|
import { cn, fmtDate } from "@/lib/utils";
|
|
import { Clamp } from "@/components/ui/clamp";
|
|
|
|
const TYPES: { key: ReportType; label: string }[] = [
|
|
{ key: "post", label: "Posts" },
|
|
{ key: "comment", label: "Comments" },
|
|
{ key: "user", label: "Accounts" },
|
|
];
|
|
|
|
export default function ReportsPage() {
|
|
const [type, setType] = useState<ReportType>("post");
|
|
const [q, setQ] = useState("");
|
|
const fetcher = useCallback(
|
|
(limit: number, offset: number) => api.reports(type, q, limit, offset),
|
|
[type, q],
|
|
);
|
|
const list = usePagedList<AdminReport>(fetcher, [type, q]);
|
|
const confirm = useConfirm();
|
|
const [resolveTarget, setResolveTarget] = useState<AdminReport | null>(null);
|
|
|
|
async function run(action: Promise<unknown>, successMsg: string) {
|
|
try {
|
|
await action;
|
|
toast.success(successMsg);
|
|
list.refresh();
|
|
} catch (err) {
|
|
toast.error(err instanceof AdminError ? err.message : "Action failed.");
|
|
}
|
|
}
|
|
|
|
// The moderation button when the target is still live. Destructive actions
|
|
// confirm first. (When the target is already removed we show "Undo" instead.)
|
|
function modButton(r: AdminReport) {
|
|
if (r.type === "post") {
|
|
return (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => run(api.hidePost(r.target_id), "Post hidden.")}
|
|
>
|
|
Hide
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={async () => {
|
|
if (
|
|
await confirm({
|
|
title: "Delete this post?",
|
|
message:
|
|
"It will be removed from the app. You can undo this.",
|
|
confirmLabel: "Delete post",
|
|
destructive: true,
|
|
})
|
|
) {
|
|
run(api.deletePost(r.target_id), "Post deleted.");
|
|
}
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
if (r.type === "comment") {
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={async () => {
|
|
if (
|
|
await confirm({
|
|
title: "Delete this comment?",
|
|
message:
|
|
"It will be removed from the thread. You can undo this.",
|
|
confirmLabel: "Delete comment",
|
|
destructive: true,
|
|
})
|
|
) {
|
|
run(api.deleteComment(r.target_id), "Comment deleted.");
|
|
}
|
|
}}
|
|
>
|
|
Delete
|
|
</Button>
|
|
);
|
|
}
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={async () => {
|
|
if (
|
|
await confirm({
|
|
title: "Suspend this account?",
|
|
message:
|
|
"They'll be signed out and unable to log in. You can undo this.",
|
|
confirmLabel: "Suspend account",
|
|
destructive: true,
|
|
})
|
|
) {
|
|
run(api.banUser(r.target_id), "Account suspended.");
|
|
}
|
|
}}
|
|
>
|
|
Ban
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// Shown when the reported content is currently removed (deleted / banned) —
|
|
// reverts the soft-deletion or ban.
|
|
function undoButton(r: AdminReport) {
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
if (r.type === "post")
|
|
run(api.restorePost(r.target_id), "Post restored.");
|
|
else if (r.type === "comment")
|
|
run(api.restoreComment(r.target_id), "Comment restored.");
|
|
else run(api.unbanUser(r.target_id), "Account restored.");
|
|
}}
|
|
>
|
|
{r.type === "user" ? "Undo ban" : "Undo delete"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
const targetLabel =
|
|
type === "user"
|
|
? "Reported account"
|
|
: type === "comment"
|
|
? "Comment"
|
|
: "Post";
|
|
|
|
return (
|
|
<ListShell
|
|
title="Reports"
|
|
total={list.total}
|
|
searchPlaceholder="Search content or reporter…"
|
|
onQueryChange={setQ}
|
|
list={list}
|
|
toolbar={
|
|
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
|
{TYPES.map((t) => (
|
|
<button
|
|
key={t.key}
|
|
onClick={() => setType(t.key)}
|
|
className={cn(
|
|
"rounded-md px-3 py-1.5 text-sm transition-colors",
|
|
type === t.key
|
|
? "bg-accent text-accent-foreground font-medium"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
}
|
|
>
|
|
<Table>
|
|
<THead>
|
|
<TR>
|
|
<TH>{targetLabel}</TH>
|
|
<TH>Reason</TH>
|
|
<TH>Reporter</TH>
|
|
<TH>Reported</TH>
|
|
<TH className="text-right">Actions</TH>
|
|
</TR>
|
|
</THead>
|
|
<tbody>
|
|
{list.items.length === 0 && !list.loading ? (
|
|
<EmptyRow cols={5} label="No reports." />
|
|
) : (
|
|
list.items.map((r) => {
|
|
const resolved = !!r.resolved_at;
|
|
return (
|
|
<TR key={r.id} className={resolved ? "opacity-70" : ""}>
|
|
<TD className="max-w-xs align-top">
|
|
{type === "user" ? (
|
|
<Clamp className="font-medium">
|
|
{r.target_text ? `@${r.target_text}` : "—"}
|
|
</Clamp>
|
|
) : (
|
|
<>
|
|
<Clamp lines={2}>{r.target_text || "—"}</Clamp>
|
|
{r.target_author_handle ? (
|
|
<Clamp className="mt-0.5 text-xs text-muted-foreground">
|
|
{`by @${r.target_author_handle}`}
|
|
</Clamp>
|
|
) : null}
|
|
</>
|
|
)}
|
|
{r.target_removed ? (
|
|
<div className="mt-1 text-[10px] font-medium uppercase tracking-wide text-destructive">
|
|
{r.type === "user" ? "Suspended" : "Removed"}
|
|
</div>
|
|
) : null}
|
|
</TD>
|
|
<TD className="max-w-xs align-top">
|
|
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
|
{r.category}
|
|
</div>
|
|
{r.reason ? (
|
|
<Clamp lines={2} className="mt-0.5">
|
|
{r.reason}
|
|
</Clamp>
|
|
) : null}
|
|
</TD>
|
|
<TD className="max-w-[12rem] align-top text-xs text-muted-foreground">
|
|
<Clamp>
|
|
{r.reporter_handle ? `@${r.reporter_handle}` : "—"}
|
|
</Clamp>
|
|
</TD>
|
|
<TD className="whitespace-nowrap align-top">
|
|
{fmtDate(r.created_at)}
|
|
</TD>
|
|
<TD className="align-top text-right">
|
|
{resolved ? (
|
|
<div className="flex flex-col items-end gap-1.5">
|
|
<span className="text-xs font-medium text-primary">
|
|
✓ Resolved
|
|
</span>
|
|
{r.resolution_note ? (
|
|
<p className="max-w-[220px] text-right text-xs text-muted-foreground">
|
|
<RichText text={r.resolution_note} />
|
|
</p>
|
|
) : null}
|
|
{r.target_removed ? undoButton(r) : null}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
{r.target_removed ? undoButton(r) : modButton(r)}
|
|
<Can perm="reports:resolve">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setResolveTarget(r)}
|
|
>
|
|
Resolve
|
|
</Button>
|
|
</Can>
|
|
</div>
|
|
)}
|
|
</TD>
|
|
</TR>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
|
|
<ResolveModal
|
|
report={resolveTarget}
|
|
onClose={() => setResolveTarget(null)}
|
|
onDone={() => {
|
|
setResolveTarget(null);
|
|
list.refresh();
|
|
}}
|
|
/>
|
|
</ListShell>
|
|
);
|
|
}
|
|
|
|
function ResolveModal({
|
|
report,
|
|
onClose,
|
|
onDone,
|
|
}: {
|
|
report: AdminReport | null;
|
|
onClose: () => void;
|
|
onDone: () => void;
|
|
}) {
|
|
const [note, setNote] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function submit() {
|
|
if (!report || note.trim() === "") return;
|
|
setBusy(true);
|
|
try {
|
|
await api.resolveReport(report.type, report.id, note.trim());
|
|
toast.success("Report resolved.");
|
|
setNote("");
|
|
onDone();
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof AdminError ? err.message : "Could not resolve.",
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={!!report} onClose={onClose} title="Resolve report">
|
|
<div className="space-y-4">
|
|
<label className="block space-y-1.5">
|
|
<span className="text-sm font-medium">Resolution note</span>
|
|
<RichTextarea
|
|
value={note}
|
|
onValueChange={setNote}
|
|
rows={4}
|
|
maxLength={2000}
|
|
placeholder="What did you do / decide? (shown in the reports table)"
|
|
/>
|
|
</label>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="ghost" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={submit} disabled={busy || note.trim() === ""}>
|
|
{busy ? "Resolving…" : "Resolve report"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|