feat: better reports

related to 975d55bd

README.md

@@ -30,7 +30,10 @@ TomodachiShare is a fan-made website that lets you easily discover, upload, and
 ---
 
 <p align="center">
-  <sub align="center">
+	<sub align="center">
-    <i>Tomodachi Life and Mii characters are trademarks of Nintendo. This project is fan-made and not affiliated with Nintendo.</i>
+		TomodachiShare branding is not covered by the AGPL-3.0.<br>
+    The name and logo may not be used to suggest affiliation with or endorsement by this project.
+    <br><br>
+    Tomodachi Life and Mii characters are trademarks of Nintendo. This project is fan-made and not affiliated with Nintendo.
   </sub>
 </p>

src/app/admin/page.tsx

@@ -70,7 +70,7 @@ export default async function AdminPage({ searchParams }: Props) {
 				<hr className="grow border-zinc-300" />
 			</div>
 
-			<Reports />
+			<Reports searchParams={await searchParams} />
 
 			{/* Queue */}
 			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">

src/app/api/mii/[id]/edit/route.ts

@@ -97,28 +97,26 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	const { name, tags, description, quarantined, gender, makeup, miiPortraitImage, miiFeaturesImage, instructions, image1, image2, image3 } = parsed.data;
 
 	// Validate image files
+	let wasImagesModerated = false;
 	const images: File[] = [];
 
 	for (const img of [image1, image2, image3]) {
 		if (!img) continue;
 
-		const imageValidation = await validateImage(img);
+		const validation = await validateImage(img);
-		if (imageValidation.valid) {
+		if (!validation.valid) wasImagesModerated = true;
-			images.push(img);
+		images.push(img);
-		} else {
-			return rateLimit.sendResponse({ error: imageValidation.error }, imageValidation.status ?? 400);
-		}
 	}
 
 	// Check Mii portrait & features image (Switch)
 	if (mii.platform === "SWITCH") {
 		if (miiPortraitImage) {
 			const validation = await validateImage(miiPortraitImage);
-			if (!validation.valid) return rateLimit.sendResponse({ error: `Failed to verify portrait: ${validation.error}` }, validation.status ?? 400);
+			if (!validation.valid) wasImagesModerated = true;
 		}
 		if (miiFeaturesImage) {
 			const validation = await validateImage(miiFeaturesImage);
-			if (!validation.valid) return rateLimit.sendResponse({ error: `Failed to verify features: ${validation.error}` }, validation.status ?? 400);
+			if (!validation.valid) wasImagesModerated = true;
 		}
 	}
 
@@ -136,6 +134,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	if (makeup !== undefined) updateData.makeup = makeup;
 	if (instructions !== undefined) updateData.instructions = instructions;
 	if (images.length > 0) updateData.imageCount = images.length;
+	if (wasImagesModerated) updateData.in_queue = true;
 
 	if (Object.keys(updateData).length === 0) return rateLimit.sendResponse({ error: "Nothing was changed" }, 400);
 	const updatedMii = await prisma.mii.update({

src/app/api/submit/route.ts

@@ -159,12 +159,9 @@ export async function POST(request: NextRequest) {
 	for (const img of [image1, image2, image3]) {
 		if (!img) continue;
 
-		const imageValidation = await validateImage(img);
+		const validation = await validateImage(img);
-		if (imageValidation.valid) {
+		if (!validation.valid) wasImagesModerated = true;
-			customImages.push(img);
+		customImages.push(img);
-		} else {
-			wasImagesModerated = true;
-		}
 	}
 
 	// Check Mii portrait & features image (Switch)

src/app/mii/[id]/image/route.ts

@@ -110,6 +110,6 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 	return rateLimit.sendResponse(buffer, 200, {
 		"Content-Type": "image/png",
 		"X-Robots-Tag": "noindex, noimageindex, nofollow",
-		"Cache-Control": "public, max-age=31536000, immutable",
+		"Cache-Control": "public, max-age=60, stale-while-revalidate=30",
 	});
 }

src/app/mii/[id]/page.tsx

@@ -133,7 +133,7 @@ export default async function MiiPage({ params }: Props) {
 					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-center gap-3 text-zinc-700">
 						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
 						<p className="font-medium">
-							This Mii is waiting to be manually reviewed {!settings.queueEnabled && "due to inappropriate images "}
+							This Mii is waiting to be manually reviewed {!settings.queueEnabled && "after being auto-flagged for inappropriate images "}
 							and is hidden from the main page.
 						</p>
 					</div>

src/components/admin/report-tabs.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import { ReportStatus } from "@prisma/client";
+
+export default function ReportTabs({ status }: { status?: ReportStatus }) {
+	const router = useRouter();
+	const [isPending, startTransition] = useTransition();
+
+	return (
+		<div className={`flex gap-2 p-3 border-b border-orange-300 transition-opacity ${isPending ? "opacity-50" : ""}`}>
+			{["ALL", "OPEN", "RESOLVED", "DISMISSED"].map((s) => (
+				<button
+					key={s}
+					onClick={() =>
+						startTransition(() => {
+							router.push(s === "ALL" ? "/admin" : `/admin?status=${s}`, { scroll: false });
+						})
+					}
+					className={`text-sm px-3 py-1 rounded-full font-medium cursor-pointer border transition-colors ${
+						(s === "ALL" && !status) || s === status
+							? "bg-orange-400 text-white border-orange-400"
+							: "bg-white text-orange-700 border-orange-300 hover:bg-orange-50"
+					}`}
+				>
+					{s}
+				</button>
+			))}
+		</div>
+	);
+}

src/components/admin/reports.tsx

@@ -5,10 +5,27 @@ import { Icon } from "@iconify/react";
 import { ReportStatus } from "@prisma/client";
 
 import { prisma } from "@/lib/prisma";
+import ReportTabs from "./report-tabs";
 
-export default async function Reports() {
+const PAGE_SIZE = 20;
-	const reports = await prisma.report.findMany({ orderBy: { createdAt: "desc" } });
+
-	// TODO: add pagination
+export default async function Reports({ searchParams }: { searchParams: { status?: string; page?: string } }) {
+	const status = searchParams.status as ReportStatus | undefined;
+	const page = Number(searchParams.page ?? 1);
+
+	const [reports, total] = await Promise.all([
+		prisma.report.findMany({
+			where: status ? { status } : undefined,
+			orderBy: { createdAt: "desc" },
+			skip: (page - 1) * PAGE_SIZE,
+			take: PAGE_SIZE,
+		}),
+		prisma.report.count({
+			where: status ? { status } : undefined,
+		}),
+	]);
+
+	const totalPages = Math.ceil(total / PAGE_SIZE);
 
 	const updateStatus = async (formData: FormData) => {
 		"use server";
@@ -25,6 +42,9 @@ export default async function Reports() {
 
 	return (
 		<div className="bg-orange-100 rounded-xl border-2 border-orange-400">
+			<ReportTabs status={status} />
+
+			{/* Grid */}
 			<div className="grid grid-cols-2 gap-2 p-2 max-lg:grid-cols-1">
 				{reports.map((report) => (
 					<div key={report.id} className="p-4 bg-white border border-orange-300 shadow-sm rounded-md">
@@ -150,6 +170,34 @@ export default async function Reports() {
 					<p className="text-sm">Reports will appear here when users submit them</p>
 				</div>
 			)}
+
+			{/* Pagination */}
+			{totalPages > 1 && (
+				<div className="flex justify-between items-center p-3 border-t border-orange-300">
+					<span className="text-sm text-orange-700">{total} total</span>
+					<div className="flex items-center gap-3">
+						{page > 1 && (
+							<Link
+								href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page - 1) })}`}
+								className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
+							>
+								Previous
+							</Link>
+						)}
+						<span className="text-sm text-orange-700">
+							Page {page} of {totalPages}
+						</span>
+						{page < totalPages && (
+							<Link
+								href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page + 1) })}`}
+								className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
+							>
+								Next
+							</Link>
+						)}
+					</div>
+				</div>
+			)}
 		</div>
 	);
 }

src/lib/auth.ts

@@ -13,6 +13,14 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 		signIn: "/login",
 	},
 	callbacks: {
+		async signIn({ user }) {
+			const blacklist = process.env.BLACKLISTED_EMAILS ? process.env.BLACKLISTED_EMAILS.split(",").map((item) => item.trim().toLowerCase()) : [];
+			const email = user?.email?.toLowerCase();
+			if (!email) return false;
+			if (blacklist?.some((blocked) => email.endsWith(blocked))) return false;
+			return true;
+		},
+
 		async session({ session, user }) {
 			if (user) {
 				session.user.id = user.id;