feat: better notices for queued miis

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

@@ -130,11 +130,12 @@ export default async function MiiPage({ params }: Props) {
 					</div>
 				)}
 				{mii.in_queue && (
-					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-center gap-3 text-zinc-700">
+					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600">
 						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
 						<p className="font-medium">
-							This Mii is waiting to be manually reviewed and is hidden from the main page. (This could take a few hours or a couple of days) You can still
-							share the Mii through the URL!
+							This Mii is waiting to be manually reviewed and is hidden from the main page. The review could take between a few hours and a few days.
+							<br />
+							Despite that, you can still share the Mii through the URL!
 						</p>
 					</div>
 				)}

src/app/submit/page.tsx

@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 export default async function SubmitPage() {
 	const session = await auth();
 
-	if (!session) redirect("/login");
+	if (!session || !session.user) redirect("/login");
 	const activePunishment = await prisma.punishment.findFirst({
 		where: {
 			userId: Number(session?.user?.id),
@@ -45,5 +45,7 @@ export default async function SubmitPage() {
 			</div>
 		);
 
-	return <SubmitForm />;
+	const inQueueMiisCount = await prisma.mii.count({ where: { userId: Number(session.user.id), in_queue: true } });
+
+	return <SubmitForm inQueueMiisCount={inQueueMiisCount} />;
 }

src/components/mii/list/index.tsx

@@ -37,7 +37,19 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 	}
 
 	const where: Prisma.MiiWhereInput = {
-		in_queue: parentPage === "admin",
+		// In queue logic
+		...(parentPage === "admin"
+			? { in_queue: true } // Only show queued Miis
+			: userId
+				? {
+						// Include queued Miis if user is on their profile
+						...(Number(session?.user?.id) === userId ? {} : { in_queue: false }),
+						userId,
+					}
+				: {
+						// Don't show queued Miis on main page
+						in_queue: false,
+					}),
 		// Only show liked miis on likes page
 		...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
 		// Searching
@@ -57,8 +69,6 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 		...(makeup && { makeup: { equals: makeup } }),
 		// Quarantined
 		...(!quarantined && !userId && { quarantined: false }),
-		// Profiles
-		...(userId && { userId }),
 	};
 
 	const select: Prisma.MiiSelect = {
@@ -81,6 +91,7 @@ export default async function MiiList({ searchParams, userId, parentPage }: Prop
 		makeup: true,
 		allowedCopying: true,
 		quarantined: true,
+		in_queue: true,
 		// Mii liked check
 		...(session?.user?.id && {
 			likedBy: {

src/components/mii/list/mii-grid.tsx

@@ -32,8 +32,15 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
 			{miis.map((mii) => (
 				<div
 					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" : "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" : mii.in_queue ? "border-zinc-400 opacity-70" : "border-zinc-300"}`}
 				>
+					{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">
+							<Icon icon="mdi:clock-outline" className="text-base" />
+							In Queue
+						</div>
+					)}
+
 					<Carousel
 						images={[
 							`/mii/${mii.id}/image?type=mii`,

src/components/submit-form/index.tsx

@@ -30,7 +30,11 @@ import SubmitButton from "../submit-button";
 import Dropzone from "../dropzone";
 import Image from "next/image";
 
-export default function SubmitForm() {
+interface Props {
+	inQueueMiisCount: number;
+}
+
+export default function SubmitForm({ inQueueMiisCount }: Props) {
 	const [files, setFiles] = useState<FileWithPath[]>([]);
 
 	const handleDrop = useCallback(
@@ -192,7 +196,16 @@ export default function SubmitForm() {
 				</div>
 			</div>
 
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
+			<div className="max-w-2xl">
+				{inQueueMiisCount && (
+					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600 mb-4">
+						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
+						<p className="font-medium">
+							You have {inQueueMiisCount} Mii{inQueueMiisCount > 1 && "s"} pending manual review. You can view your queue on your profile.
+						</p>
+					</div>
+				)}
+				<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 w-full">
 					<div>
 						<h2 className="text-2xl font-bold">Submit your Mii</h2>
 						<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
@@ -504,6 +517,7 @@ export default function SubmitForm() {
 						<SubmitButton onClick={handleSubmit} className="ml-auto" />
 					</div>
 				</div>
+			</div>
 		</form>
 	);
 }