feat: better admin queue ui

This commit is contained in:
trafficlunar 2026-04-07 16:22:37 +01:00
parent f70a03abf2
commit fc7374e9b0
2 changed files with 25 additions and 6 deletions

View file

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

View file

@ -1,6 +1,7 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation";
import useSWR from "swr"; import useSWR from "swr";
import { Prisma } from "@prisma/client"; import { Prisma } from "@prisma/client";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
@ -20,6 +21,8 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function MiiGrid({ miis, userId, parentPage }: Props) { export default function MiiGrid({ miis, userId, parentPage }: Props) {
const session = useSession(); const session = useSession();
const router = useRouter();
const ids = miis.map((m) => m.id).join(","); const ids = miis.map((m) => m.id).join(",");
const { data } = useSWR<number[]>(session.data?.user && miis.length > 0 ? `/api/mii/has-liked?ids=${ids}` : null, fetcher, { const { data } = useSWR<number[]>(session.data?.user && miis.length > 0 ? `/api/mii/has-liked?ids=${ids}` : null, fetcher, {
revalidateOnFocus: false, revalidateOnFocus: false,
@ -32,7 +35,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
{miis.map((mii) => ( {miis.map((mii) => (
<div <div
key={mii.id} key={mii.id}
className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300" : mii.in_queue ? "border-zinc-400 opacity-70" : "border-zinc-300"}`} className={`flex flex-col relative bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600 ${mii.quarantined ? "border-red-300 bg-red-50!" : mii.in_queue && parentPage !== "admin" ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
> >
{mii.in_queue && ( {mii.in_queue && (
<div className="absolute top-2 left-2 z-10 bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1"> <div className="absolute top-2 left-2 z-10 bg-zinc-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm flex items-center gap-1">
@ -87,11 +90,27 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} /> <DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
</div> </div>
)} )}
{/* Admin Controls */}
{parentPage === "admin" && ( {parentPage === "admin" && (
<div className="flex gap-1 text-2xl justify-end text-zinc-400"> <div className="flex justify-between w-full col-span-2 mt-2">
<button onClick={() => fetch(`/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH" })} className="cursor-pointer"> <div className="flex gap-1 text-3xl justify-center">
<button
onClick={async () => {
await fetch(`/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH" });
router.refresh();
}}
className="cursor-pointer text-zinc-400 hover:text-green-500 transition-colors p-1 bg-white rounded-md shadow-sm border border-zinc-200 hover:border-green-500"
title="Accept Mii"
>
<Icon icon="material-symbols:check-rounded" /> <Icon icon="material-symbols:check-rounded" />
</button> </button>
<div className="text-zinc-400 hover:text-red-500 transition-colors p-1 bg-white rounded-md shadow-sm border border-zinc-200 hover:border-red-500 flex items-center justify-center">
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
</div>
</div>
<span className="text-sm w-1/2 text-right">{mii.createdAt.toLocaleString("en-GB", { timeZone: "UTC" })}</span>
</div> </div>
)} )}
</div> </div>