fix: don't show queued and quarantined miis on /random

also the repo is public again

LICENSE

@@ -629,8 +629,8 @@ to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
-    <one line to give the program's name and a brief idea of what it does.>
+		Website to discover and share Tomodachi Life Miis.
-    Copyright (C) 2024  trafficlunar
+    Copyright (C) 2026  trafficlunar
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published

prisma/migrations/20260405230714_remove_copyright_report_type/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [COPYRIGHT] on the enum `ReportReason` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "ReportReason_new" AS ENUM ('INAPPROPRIATE', 'SPAM', 'BAD_QUALITY', 'OTHER');
+ALTER TABLE "reports" ALTER COLUMN "reason" TYPE "ReportReason_new" USING ("reason"::text::"ReportReason_new");
+ALTER TYPE "ReportReason" RENAME TO "ReportReason_old";
+ALTER TYPE "ReportReason_new" RENAME TO "ReportReason";
+DROP TYPE "public"."ReportReason_old";
+COMMIT;

prisma/migrations/20260407225936_youtube_instructions/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "miis" ADD COLUMN     "youtubeId" TEXT;

prisma/schema.prisma

@@ -79,6 +79,7 @@ model Mii {
   in_queue    Boolean     @default(false)
 
   instructions Json?
+  youtubeId    String?
   gender       MiiGender?
   makeup       MiiMakeup?
 
@@ -193,7 +194,6 @@ enum ReportType {
 enum ReportReason {
   INAPPROPRIATE
   SPAM
-  COPYRIGHT
   BAD_QUALITY
   OTHER
 }

src/app/admin/page.tsx

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

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

@@ -16,6 +16,7 @@ import { generateMetadataImage, validateImage } from "@/lib/images";
 import { RateLimit } from "@/lib/rate-limit";
 import { SwitchMiiInstructions } from "@/types";
 import { minifyInstructions } from "@/lib/switch";
+import { settings } from "@/lib/settings";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 
@@ -31,6 +32,10 @@ const editSchema = z.object({
 	makeup: z.enum(MiiMakeup).optional(),
 	miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
 	miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
+	youtubeId: z
+		.string()
+		.regex(/^[a-zA-Z0-9_-]{11}$/, "Invalid YouTube video ID")
+		.optional(),
 	instructions: switchMiiInstructionsSchema,
 	image1: z.union([z.instanceof(File), z.any()]).optional(),
 	image2: z.union([z.instanceof(File), z.any()]).optional(),
@@ -42,7 +47,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 	Sentry.setUser({ id: session.user?.id, name: session.user?.name });
 
-	const rateLimit = new RateLimit(request, 2); // no grouped pathname; edit each mii 2 times a minute
+	const rateLimit = new RateLimit(request, 6); // no grouped pathname; edit each mii 2 times a minute
 	const check = await rateLimit.handle();
 	if (check) return check;
 
@@ -87,6 +92,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 		makeup: formData.get("makeup") ?? undefined,
 		miiPortraitImage: formData.get("miiPortraitImage"),
 		miiFeaturesImage: formData.get("miiFeaturesImage"),
+		youtubeId: formData.get("youtubeId"),
 		instructions: minifiedInstructions,
 		image1: formData.get("image1"),
 		image2: formData.get("image2"),
@@ -94,7 +100,8 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	});
 
 	if (!parsed.success) return rateLimit.sendResponse({ error: parsed.error.issues[0].message }, 400);
-	const { name, tags, description, quarantined, gender, makeup, miiPortraitImage, miiFeaturesImage, instructions, image1, image2, image3 } = parsed.data;
+	const { name, tags, description, quarantined, gender, makeup, miiPortraitImage, miiFeaturesImage, youtubeId, instructions, image1, image2, image3 } =
+		parsed.data;
 
 	// Validate image files
 	let wasImagesModerated = false;
@@ -132,9 +139,12 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 	if (quarantined !== undefined) updateData.quarantined = quarantined;
 	if (mii.platform === "SWITCH" && gender !== undefined) updateData.gender = gender;
 	if (makeup !== undefined) updateData.makeup = makeup;
+	if (youtubeId !== undefined) updateData.youtubeId = youtubeId;
 	if (instructions !== undefined) updateData.instructions = instructions;
 	if (images.length > 0) updateData.imageCount = images.length;
-	if (wasImagesModerated) updateData.in_queue = true;
+
+	const imagesChanged = images.length > 0 || miiPortraitImage || miiFeaturesImage;
+	if ((settings.queueEnabled && imagesChanged) || 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/report/route.ts

@@ -10,8 +10,8 @@ import { RateLimit } from "@/lib/rate-limit";
 const reportSchema = z.object({
 	id: z.coerce.number({ error: "ID must be a number" }).int({ error: "ID must be an integer" }).positive({ error: "ID must be valid" }),
 	type: z.enum(["mii", "user"], { error: "Type must be either 'mii' or 'user'" }),
-	reason: z.enum(["inappropriate", "spam", "copyright", "bad_quality", "other"], {
+	reason: z.enum(["inappropriate", "spam", "bad_quality", "other"], {
-		message: "Reason must be either 'inappropriate', 'spam', 'copyright', 'bad_quality' or 'other'",
+		message: "Reason must be either 'inappropriate', 'spam', 'bad_quality' or 'other'",
 	}),
 	notes: z.string().trim().max(256).optional(),
 });

src/app/api/submit/route.ts

@@ -37,6 +37,10 @@ const submitSchema = z
 		makeup: z.enum(MiiMakeup).default("PARTIAL"),
 		miiPortraitImage: z.union([z.instanceof(File), z.any()]).optional(),
 		miiFeaturesImage: z.union([z.instanceof(File), z.any()]).optional(),
+		youtubeId: z
+			.string()
+			.regex(/^[a-zA-Z0-9_-]{11}$/, "Invalid YouTube video ID")
+			.optional(),
 		instructions: switchMiiInstructionsSchema,
 
 		// QR code
@@ -108,6 +112,7 @@ export async function POST(request: NextRequest) {
 		makeup: formData.get("makeup") ?? undefined,
 		miiPortraitImage: formData.get("miiPortraitImage"),
 		miiFeaturesImage: formData.get("miiFeaturesImage"),
+		youtubeId: formData.get("youtubeId"),
 		instructions: minifiedInstructions,
 
 		qrBytesRaw: rawQrBytesRaw,
@@ -142,6 +147,7 @@ export async function POST(request: NextRequest) {
 		makeup,
 		miiPortraitImage,
 		miiFeaturesImage,
+		youtubeId,
 		image1,
 		image2,
 		image3,
@@ -206,6 +212,7 @@ export async function POST(request: NextRequest) {
 						allowedCopying: conversion.mii.allowCopying,
 					}
 				: {
+						youtubeId,
 						instructions: minifiedInstructions,
 						makeup: makeup ?? "PARTIAL",
 					}),

src/app/globals.css

@@ -19,21 +19,6 @@
 	}
 }
 
-body {
-	@apply bg-amber-50 text-slate-800;
-
-	--color1: var(--color-amber-50);
-	--color2: var(--color-amber-100);
-
-	background-image:
-		repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
-		repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
-	background-position:
-		0 0,
-		10px 10px;
-	background-size: 20px 20px;
-}
-
 .pill {
 	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-3xl shadow-md;
 }
@@ -126,20 +111,20 @@ input[type="range"] {
 
 /* Track */
 input[type="range"]::-webkit-slider-runnable-track {
-	@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
+	@apply h-1 bg-orange-300 rounded-full;
 }
 
 input[type="range"]::-moz-range-track {
-	@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
+	@apply h-1 bg-orange-300 rounded-full;
 }
 
 /* Thumb */
 input[type="range"]::-webkit-slider-thumb {
-	@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition -mt-1.5;
+	@apply appearance-none size-4 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition -mt-1.5;
 }
 
 input[type="range"]::-moz-range-thumb {
-	@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
+	@apply size-3.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition;
 }
 
 /* Hover */
@@ -150,3 +135,17 @@ input[type="range"]:hover::-webkit-slider-thumb {
 input[type="range"]:hover::-moz-range-thumb {
 	@apply not-disabled:bg-orange-500;
 }
+
+body {
+	@apply bg-amber-50 text-slate-800;
+
+	/* syntax highlighting is a bit broken when it's at the top so it's at the bottom */
+	background-image: url('data:image/svg+xml;utf8,\
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">\
+	<rect width="10" height="10" fill="%23fef3c6"/>\
+	<rect x="10" y="10" width="10" height="10" fill="%23fef3c6"/>\
+	<rect x="10" width="10" height="10" fill="%23fffbeb"/>\
+	<rect y="10" width="10" height="10" fill="%23fffbeb"/>\
+	</svg>');
+	background-size: 20px 20px;
+}

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 {!settings.queueEnabled && "after being auto-flagged for inappropriate images "}
+							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.
-							and is hidden from the main page.
+							<br />
+							Despite that, you can still share the Mii through the URL!
 						</p>
 					</div>
 				)}
@@ -380,7 +381,28 @@ export default async function MiiPage({ params }: Props) {
 						</div>
 
 						{/* Instructions */}
-						{mii.platform === "SWITCH" && <MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />}
+						{mii.platform === "SWITCH" && (
+							<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
+								<h2 className="text-xl font-semibold text-amber-700 flex items-center gap-2">
+									<Icon icon="fa7-solid:list" />
+									Instructions
+								</h2>
+
+								{mii.youtubeId && (
+									<iframe
+										src={`https://www.youtube-nocookie.com/embed/${mii.youtubeId}`}
+										title="YouTube video player"
+										allow="clipboard-write; encrypted-media;"
+										referrerPolicy="strict-origin-when-cross-origin"
+										allowFullScreen
+										loading="lazy"
+										className="aspect-video rounded-2xl w-full max-w-135"
+									></iframe>
+								)}
+
+								<MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />
+							</div>
+						)}
 					</div>
 				</div>
 

src/app/random/page.tsx

@@ -9,6 +9,7 @@ export default async function RandomPage() {
 
 	const randomIndex = Math.floor(Math.random() * count);
 	const randomMii = await prisma.mii.findFirst({
+		where: { in_queue: false, quarantined: false },
 		skip: randomIndex,
 		take: 1,
 		select: { id: true },

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/footer.tsx

@@ -41,19 +41,6 @@ export default function Footer() {
 						•
 					</span>
 
-					<a
-						href="https://github.com/trafficlunar/tomodachi-share"
-						target="_blank"
-						className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline inline-flex items-end gap-1"
-					>
-						<Icon icon="mdi:github" className="text-lg" />
-						Source Code
-					</a>
-
-					<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
-						•
-					</span>
-
 					<a href="https://trafficlunar.net" target="_blank" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
 						Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
 					</a>

src/components/mii/delete-mii-button.tsx

@@ -88,8 +88,8 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
 
 							<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden">
 								<Image src={`/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} />
-								<div className="p-4">
+								<div className="p-4 min-w-0">
-									<p className="text-xl font-bold line-clamp-1" title={miiName}>
+									<p className="text-xl font-bold line-clamp-3 wrap-anywhere" title={miiName}>
 										{miiName}
 									</p>
 									<LikeButton likes={likes} isLiked={true} disabled />
@@ -97,7 +97,16 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
 							</div>
 
 							<p className="text-sm text-zinc-500 my-2">Type the Mii's name below to delete:</p>
-							<input type="text" className="pill input" value={inputMiiName} onChange={(e) => setInputMiiName(e.target.value)} />
+							<input
+								type="text"
+								className="pill input"
+								value={inputMiiName}
+								onChange={(e) => setInputMiiName(e.target.value)}
+								autoCorrect="off"
+								autoComplete="off"
+								autoCapitalize="off"
+								spellCheck={false}
+							/>
 
 							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
 
@@ -108,7 +117,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
 								<SubmitButton
 									onClick={handleSubmit}
 									text="Delete"
-									disabled={inputMiiName != miiName}
+									disabled={inputMiiName.trim() != miiName}
 									className="bg-red-400! border-red-500! hover:bg-red-500! disabled:bg-red-200! disabled:border-red-300!"
 								/>
 							</div>

src/components/mii/instructions.tsx

@@ -27,6 +27,10 @@ const ORDINAL_SUFFIXES: Record<string, string> = {
 };
 const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
 
+function not(value: any) {
+	return value !== undefined && value !== null;
+}
+
 function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
 	const row = Math.floor(index / cols) + 1;
 	const col = (index % cols) + 1;
@@ -36,12 +40,12 @@ function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
 	return `${row}${rowSuffix} row, ${col}${colSuffix} column`;
 }
 
-function ColorPosition({ color }: { color: number }) {
+function ColorPosition({ color }: { color: number | undefined | null }) {
-	if (!color) return null;
+	if (color === undefined || color === null) return null;
 	if (color <= 7) {
 		return (
 			<span className="flex items-center">
-				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Color menu on left, <GridPosition index={color} cols={1} />
 			</span>
 		);
@@ -49,7 +53,7 @@ function ColorPosition({ color }: { color: number }) {
 	if (color >= 108) {
 		return (
 			<span className="flex items-center">
-				<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 				Outside color menu, <GridPosition index={color - 108} cols={2} />
 			</span>
 		);
@@ -57,7 +61,7 @@ function ColorPosition({ color }: { color: number }) {
 
 	return (
 		<span className="flex items-center">
-			<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+			<div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
 			Color menu on right, <GridPosition index={color - 8} cols={10} />
 		</span>
 	);
@@ -88,21 +92,21 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
 	const stretch = "stretch" in instructions ? instructions.stretch : undefined;
 
 	return (
-		<div className={`p-3 ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
+		<div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
 			<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
 
 			<table className="w-full">
 				<tbody>
-					{color && (
+					{not(color) && (
 						<TableCell label="Color">
 							<ColorPosition color={color} />
 						</TableCell>
 					)}
-					{height && <TableCell label="Height">{height}</TableCell>}
+					{not(height) && <TableCell label="Height">{height}</TableCell>}
-					{distance && <TableCell label="Distance">{distance}</TableCell>}
+					{not(distance) && <TableCell label="Distance">{distance}</TableCell>}
-					{rotation && <TableCell label="Rotation">{rotation}</TableCell>}
+					{not(rotation) && <TableCell label="Rotation">{rotation}</TableCell>}
-					{size && <TableCell label="Size">{size}</TableCell>}
+					{not(size) && <TableCell label="Size">{size}</TableCell>}
-					{stretch && <TableCell label="Stretch">{stretch}</TableCell>}
+					{not(stretch) && <TableCell label="Stretch">{stretch}</TableCell>}
 
 					{children}
 				</tbody>
@@ -116,15 +120,10 @@ export default function MiiInstructions({ instructions }: Props) {
 	const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
 
 	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
+		<>
-			<h2 className="text-xl font-semibold text-amber-700 flex items-center gap-2">
-				<Icon icon="fa7-solid:list" />
-				Instructions
-			</h2>
-
 			{head && (
 				<Section name="Head" instructions={head}>
-					{head.skinColor && (
+					{not(head.skinColor) && (
 						<TableCell label="Skin Color">
 							<ColorPosition color={head.skinColor} />
 						</TableCell>
@@ -133,18 +132,18 @@ export default function MiiInstructions({ instructions }: Props) {
 			)}
 			{hair && (
 				<Section name="Hair" instructions={hair}>
-					{hair.subColor && (
+					{not(hair.subColor) && (
 						<TableCell label="Sub Color">
 							<ColorPosition color={hair.subColor} />
 						</TableCell>
 					)}
-					{hair.subColor2 && (
+					{not(hair.subColor2) && (
 						<TableCell label="Sub Color (Back)">
 							<ColorPosition color={hair.subColor2} />
 						</TableCell>
 					)}
-					{hair.style && <TableCell label="Tying Style">{hair.style}</TableCell>}
+					{not(hair.style) && <TableCell label="Tying Style">{hair.style}</TableCell>}
-					{hair.isFlipped && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
+					{not(hair.isFlipped) && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
 				</Section>
 			)}
 			{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
@@ -162,18 +161,18 @@ export default function MiiInstructions({ instructions }: Props) {
 			{nose && <Section name="Nose" instructions={nose}></Section>}
 			{lips && (
 				<Section name="Lips" instructions={lips}>
-					{lips.hasLipstick && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
+					{not(lips.hasLipstick) && <TableCell label="Lipstick">{lips.hasLipstick ? "Yes" : "No"}</TableCell>}
 				</Section>
 			)}
 			{ears && <Section name="Ears" instructions={ears}></Section>}
 			{glasses && (
 				<Section name="Glasses" instructions={glasses}>
-					{glasses.ringColor && (
+					{not(glasses.ringColor) && (
 						<TableCell label="Ring Color">
 							<ColorPosition color={glasses.ringColor} />
 						</TableCell>
 					)}
-					{glasses.shadesColor && (
+					{not(glasses.shadesColor) && (
 						<TableCell label="Shades Color">
 							<ColorPosition color={glasses.shadesColor} />
 						</TableCell>
@@ -196,7 +195,7 @@ export default function MiiInstructions({ instructions }: Props) {
 			)}
 
 			{(height || weight || datingPreferences || voice || personality) && (
-				<div className="pl-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950">
+				<div className="p-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max">
 					<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
 
 					{height && (
@@ -206,7 +205,7 @@ export default function MiiInstructions({ instructions }: Props) {
 							</label>
 							<div className="relative h-5 flex justify-center items-center">
 								<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 					)}
@@ -217,7 +216,7 @@ export default function MiiInstructions({ instructions }: Props) {
 							</label>
 							<div className="relative h-5 flex justify-center items-center">
 								<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 					)}
@@ -260,6 +259,6 @@ export default function MiiInstructions({ instructions }: Props) {
 					)}
 				</div>
 			)}
-		</div>
+		</>
 	);
 }

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

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import useSWR from "swr";
 import { Prisma } from "@prisma/client";
 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) {
 	const session = useSession();
+	const router = useRouter();
+
 	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, {
 		revalidateOnFocus: false,
@@ -32,8 +35,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 bg-red-50!" : mii.in_queue && parentPage !== "admin" ? "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`,
@@ -80,11 +90,26 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
 									<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
 								</div>
 							)}
+
+							{/* Admin Controls */}
 							{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">
-										<Icon icon="material-symbols:check-rounded" />
+										<button
-									</button>
+											onClick={async () => {
+												await fetch(`/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH" });
+											}}
+											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" />
+										</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>

src/components/mii/personality-viewer.tsx

@@ -22,7 +22,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
 				const key = label.toLowerCase() as keyof typeof data;
 				return (
 					<div key={label} className="flex justify-center items-center gap-2">
-						<span className="text-sm font-semibold w-24 shrink-0">{label}</span>
+						<span className="text-sm w-24 shrink-0">{label}</span>
 						<span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
 						<div className="flex gap-0.5">
 							{Array.from({ length: 8 }).map((_, i) => {
@@ -43,7 +43,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
 										onClick={() => {
 											if (onClick) onClick(key, i);
 										}}
-										className={`size-7 rounded-lg transition-opacity duration-100 border-orange-500
+										className={`size-7 rounded-lg transition-opacity duration-100 border-black/40
                   ${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
 									></button>
 								);

src/components/mii/voice-viewer.tsx

@@ -27,13 +27,13 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
 							min={0}
 							max={50}
 							step={1}
-							value={data[label as keyof typeof data] ?? 25}
+							value={data[label.toLowerCase() as keyof typeof data] ?? 25}
 							disabled={!onChange}
 							onChange={(e) => {
-								if (onChange) onChange(e, label);
+								if (onChange) onChange(e, label.toLowerCase());
 							}}
 						/>
-						<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+						<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 					</div>
 				</div>
 			))}

src/components/report/reason-selector.tsx

@@ -12,7 +12,6 @@ interface Props {
 const reasonMap: Record<ReportReason, string> = {
 	INAPPROPRIATE: "Inappropriate content",
 	SPAM: "Spam",
-	COPYRIGHT: "Copyrighted content",
 	BAD_QUALITY: "Bad quality",
 	OTHER: "Other...",
 };

src/components/submit-form/camera.tsx

@@ -11,15 +11,13 @@ interface Props {
 	isOpen: boolean;
 	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	onCapture?: () => void;
-	setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
+	setImage?: (value: string | undefined) => void;
 	setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
 export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) {
 	const [isVisible, setIsVisible] = useState(false);
-
 	const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
-
 	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
 	const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
 

src/components/submit-form/edit-form.tsx

@@ -53,7 +53,7 @@ export default function EditForm({ mii, likes }: Props) {
 	const handleDrop = useCallback(
 		(acceptedFiles: FileWithPath[]) => {
 			if (files.length >= 3) return;
-			hasFilesChanged.current = true;
+			hasCustomImagesChanged.current = true;
 
 			setFiles((prev) => [...prev, ...acceptedFiles]);
 		},
@@ -69,10 +69,13 @@ export default function EditForm({ mii, likes }: Props) {
 	const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL");
 	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=mii`);
 	const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=features`);
-	const hasFilesChanged = useRef(false);
+	const [youtubeId, setYouTubeId] = useState(mii.youtubeId ?? "");
 	const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {}));
 
 	const [quarantined, setQuarantined] = useState(mii.quarantined);
+	const hasCustomImagesChanged = useRef(false);
+	const hasMiiPortraitChanged = useRef(false);
+	const hasMiiFeaturesChanged = useRef(false);
 
 	const handleSubmit = async () => {
 		// Validate before sending request
@@ -96,10 +99,11 @@ export default function EditForm({ mii, likes }: Props) {
 		if (makeup != mii.makeup) formData.append("makeup", makeup);
 		if (miiPortraitUri) formData.append("miiPortraitUri", miiPortraitUri);
 		if (quarantined != mii.quarantined) formData.append("quarantined", JSON.stringify(quarantined));
+		if (youtubeId != mii.youtubeId) formData.append("youtubeId", youtubeId);
 		if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
 			formData.append("instructions", JSON.stringify(instructions.current));
 
-		if (hasFilesChanged.current) {
+		if (hasCustomImagesChanged.current) {
 			files.forEach((file, index) => {
 				// image1, image2, etc.
 				formData.append(`image${index + 1}`, file);
@@ -123,11 +127,11 @@ export default function EditForm({ mii, likes }: Props) {
 			return blob;
 		}
 
-		if (miiPortraitUri) {
+		if (miiPortraitUri && hasMiiPortraitChanged.current) {
 			const blob = await getBlob(miiPortraitUri);
 			if (blob) formData.append("miiPortraitImage", blob);
 		}
-		if (miiFeaturesUri) {
+		if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
 			const blob = await getBlob(miiFeaturesUri);
 			if (blob) formData.append("miiFeaturesImage", blob);
 		}
@@ -146,6 +150,16 @@ export default function EditForm({ mii, likes }: Props) {
 		redirect(`/mii/${mii.id}`);
 	};
 
+	const handleMiiPortraitChange = (uri: string | undefined) => {
+		hasMiiPortraitChanged.current = true;
+		setMiiPortraitUri(uri);
+	};
+
+	const handleMiiFeaturesChange = (uri: string | undefined) => {
+		hasMiiFeaturesChanged.current = true;
+		setMiiFeaturesUri(uri);
+	};
+
 	// Load existing images - converts image URLs to File objects
 	useEffect(() => {
 		const loadExistingImages = async () => {
@@ -368,8 +382,8 @@ export default function EditForm({ mii, likes }: Props) {
 							</div>
 
 							<div className="flex flex-col items-center gap-2">
-								<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
+								<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={handleMiiPortraitChange} forceCrop />
-								<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
+								<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={handleMiiFeaturesChange} />
 								<SwitchSubmitTutorialButton />
 							</div>
 
@@ -382,6 +396,27 @@ export default function EditForm({ mii, likes }: Props) {
 							<hr className="grow border-zinc-300" />
 						</div>
 
+						{/* YouTube */}
+						<div className="w-full grid grid-cols-3 items-center">
+							<label htmlFor="youtube" className="font-semibold">
+								YouTube Video
+							</label>
+							<input
+								id="youtube"
+								type="text"
+								className="pill input w-full col-span-2"
+								minLength={2}
+								maxLength={64}
+								placeholder="Paste a URL or video ID..."
+								value={youtubeId}
+								onChange={(e) => {
+									const val = e.target.value;
+									const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+									setYouTubeId(match ? match[1] : val);
+								}}
+							/>
+						</div>
+
 						<MiiEditor instructions={instructions} />
 						<SwitchSubmitTutorialButton />
 					</>

src/components/submit-form/image-editor.tsx

@@ -8,7 +8,7 @@ interface Props {
 	isOpen: boolean;
 	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	image: string | undefined;
-	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+	setImage: (value: string | undefined) => void;
 }
 
 export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {

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(
@@ -54,6 +58,7 @@ export default function SubmitForm() {
 	const [platform, setPlatform] = useState<MiiPlatform>("SWITCH");
 	const [gender, setGender] = useState<MiiGender>("MALE");
 	const [makeup, setMakeup] = useState<MiiMakeup>("PARTIAL");
+	const [youtubeId, setYouTubeId] = useState("");
 	const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
 
 	const [error, setError] = useState<string | undefined>(undefined);
@@ -104,6 +109,7 @@ export default function SubmitForm() {
 			formData.append("makeup", makeup);
 			formData.append("miiPortraitImage", portraitBlob);
 			formData.append("miiFeaturesImage", featuresBlob);
+			formData.append("youtubeId", youtubeId);
 			formData.append("instructions", JSON.stringify(instructions.current));
 		}
 
@@ -192,316 +198,347 @@ 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">
-				<div>
+				{inQueueMiisCount !== 0 && (
-					<h2 className="text-2xl font-bold">Submit your Mii</h2>
+					<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">
-					<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
+						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
-				</div>
+						<p className="font-medium">
-
+							You have {inQueueMiisCount} Mii{inQueueMiisCount > 1 && "s"} pending manual review. You can view your queue on your profile.
-				{/* Separator */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
-					<hr className="grow border-zinc-300" />
-					<span>Info</span>
-					<hr className="grow border-zinc-300" />
-				</div>
-
-				{/* Platform select */}
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="name" className="font-semibold">
-						Platform
-					</label>
-					<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
-						{/* Animated indicator */}
-						{/* TODO: maybe change width as part of animation? */}
-						<div
-							className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
-								platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
-							}`}
-						></div>
-
-						{/* Switch button */}
-						<button
-							type="button"
-							onClick={() => setPlatform("SWITCH")}
-							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
-								platform === "SWITCH" && "text-slate-800!"
-							}`}
-						>
-							<Icon icon="cib:nintendo-switch" className="text-2xl" />
-							Switch
-						</button>
-
-						{/* 3DS button */}
-						<button
-							type="button"
-							onClick={() => setPlatform("THREE_DS")}
-							className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
-								platform === "THREE_DS" && "text-slate-800!"
-							}`}
-						>
-							<Icon icon="cib:nintendo-3ds" className="text-2xl" />
-							3DS
-						</button>
-					</div>
-				</div>
-
-				{/* Name */}
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="name" className="font-semibold">
-						Name
-					</label>
-					<input
-						id="name"
-						type="text"
-						className="pill input w-full col-span-2"
-						minLength={2}
-						maxLength={64}
-						placeholder="Type your mii's name here..."
-						value={name}
-						onChange={(e) => setName(e.target.value)}
-					/>
-				</div>
-
-				<div className="w-full grid grid-cols-3 items-center">
-					<label htmlFor="tags" className="font-semibold">
-						Tags
-					</label>
-					<TagSelector tags={tags} setTags={setTags} showTagLimit />
-				</div>
-
-				{/* Description */}
-				<div className="w-full grid grid-cols-3 items-start">
-					<label htmlFor="description" className="font-semibold py-2">
-						Description
-					</label>
-					<textarea
-						id="description"
-						rows={5}
-						maxLength={512}
-						placeholder="(optional) Type a description..."
-						className="pill input rounded-xl! resize-none col-span-2 text-sm"
-						value={description}
-						onChange={(e) => setDescription(e.target.value)}
-					/>
-				</div>
-
-				{/* Gender (switch only) */}
-				<div className={`w-full grid grid-cols-3 items-start z-10 ${platform === "SWITCH" ? "" : "hidden"}`}>
-					<label htmlFor="gender" className="font-semibold py-2">
-						Gender
-					</label>
-					<div className="col-span-2 flex gap-1">
-						<button
-							type="button"
-							onClick={() => setGender("MALE")}
-							aria-label="Filter for Male Miis"
-							data-tooltip="Male"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
-								gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="foundation:male" className="text-blue-400" />
-						</button>
-
-						<button
-							type="button"
-							onClick={() => setGender("FEMALE")}
-							aria-label="Filter for Female Miis"
-							data-tooltip="Female"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
-								gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="foundation:female" className="text-pink-400" />
-						</button>
-
-						<button
-							type="button"
-							onClick={() => setGender("NONBINARY")}
-							aria-label="Filter for Nonbinary Miis"
-							data-tooltip="Nonbinary"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
-								gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
-						</button>
-					</div>
-				</div>
-
-				{/* Makeup (switch only) */}
-				<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
-					<label htmlFor="makeup" className="font-semibold py-2">
-						Face Paint
-					</label>
-
-					<div className="col-span-2 flex gap-1">
-						{/* Full Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("FULL")}
-							aria-label="Full Face Paint"
-							data-tooltip="Full Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
-								makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:palette" className="text-pink-400" />
-						</button>
-
-						{/* Partial Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("PARTIAL")}
-							aria-label="Partial Face Paint"
-							data-tooltip="Partial Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
-								makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="mdi:lipstick" className="text-purple-400" />
-						</button>
-
-						{/* No Makeup */}
-						<button
-							type="button"
-							onClick={() => setMakeup("NONE")}
-							aria-label="No Face Paint"
-							data-tooltip="No Face Paint"
-							className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
-								makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
-							}`}
-						>
-							<Icon icon="codex:cross" className="text-gray-400" />
-						</button>
-					</div>
-				</div>
-
-				{/* (Switch Only) Mii Screenshots */}
-				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
-					{/* Separator */}
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>Mii Screenshots</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-4 w-full">
-						{/* Step 1 - Portrait */}
-						<div className="flex flex-col items-center gap-2 w-full">
-							<div className="flex items-center gap-2 self-start">
-								<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
-								<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
-							</div>
-							<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
-								<div data-tooltip="Your screenshot should look like this">
-									<Image
-										src="/tutorial/switch/portrait.png"
-										alt="Example portrait screenshot"
-										width={80}
-										height={80}
-										className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
-									/>
-								</div>
-								<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
-							</div>
-						</div>
-
-						{/* Step 2 - Features */}
-						<div className="flex flex-col items-center gap-2 w-full">
-							<div className="flex items-center gap-2 self-start">
-								<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
-								<span className="text-sm font-semibold text-zinc-600">
-									Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
-								</span>
-							</div>
-							<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
-								<div data-tooltip="Your features screenshot should show this">
-									<Image
-										src="/tutorial/switch/features.png"
-										alt="Example features screenshot showing the parts panel"
-										width={80}
-										height={80}
-										className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
-									/>
-								</div>
-								<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
-							</div>
-						</div>
-
-						<SwitchSubmitTutorialButton />
-					</div>
-
-					<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
-				</div>
-
-				{/* (3DS only) QR code scanning */}
-				<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>QR Code</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-2">
-						<QrUpload setQrBytesRaw={setQrBytesRaw} />
-						<span>or</span>
-
-						<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
-							<Icon icon="mdi:camera" fontSize={20} />
-							Use your camera
-						</button>
-
-						<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
-						<ThreeDsSubmitTutorialButton />
-
-						<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
-					</div>
-				</div>
-
-				{/* (Switch only) Mii instructions */}
-				<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
-					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
-						<hr className="grow border-zinc-300" />
-						<span>Mii Instructions</span>
-						<hr className="grow border-zinc-300" />
-					</div>
-
-					<div className="flex flex-col items-center gap-2">
-						<MiiEditor instructions={instructions} />
-						<SwitchSubmitTutorialButton />
-						<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
-							Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
-						</span>
-					</div>
-				</div>
-
-				{/* Custom images selector */}
-				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
-					<hr className="grow border-zinc-300" />
-					<span>Custom images</span>
-					<hr className="grow border-zinc-300" />
-				</div>
-
-				<div className="max-w-md w-full self-center flex flex-col items-center">
-					<Dropzone onDrop={handleDrop}>
-						<p className="text-center text-sm">
-							Drag and drop your images here
-							<br />
-							or click to open
 						</p>
-					</Dropzone>
+					</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>
+					</div>
 
-					<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
+					{/* Separator */}
-				</div>
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+						<hr className="grow border-zinc-300" />
+						<span>Info</span>
+						<hr className="grow border-zinc-300" />
+					</div>
 
-				<ImageList files={files} setFiles={setFiles} />
+					{/* Platform select */}
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="name" className="font-semibold">
+							Platform
+						</label>
+						<div className="relative col-span-2 grid grid-cols-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md inset-shadow-sm/10">
+							{/* Animated indicator */}
+							{/* TODO: maybe change width as part of animation? */}
+							<div
+								className={`absolute inset-0 w-1/2 bg-orange-200 rounded-4xl transition-transform duration-300 ${
+									platform === "SWITCH" ? "translate-x-0" : "translate-x-full"
+								}`}
+							></div>
 
-				<hr className="border-zinc-300 my-2" />
+							{/* Switch button */}
-				<div className="flex justify-between items-center">
+							<button
-					{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+								type="button"
+								onClick={() => setPlatform("SWITCH")}
+								className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+									platform === "SWITCH" && "text-slate-800!"
+								}`}
+							>
+								<Icon icon="cib:nintendo-switch" className="text-2xl" />
+								Switch
+							</button>
 
-					<SubmitButton onClick={handleSubmit} className="ml-auto" />
+							{/* 3DS button */}
+							<button
+								type="button"
+								onClick={() => setPlatform("THREE_DS")}
+								className={`p-2 text-slate-800/35 cursor-pointer flex justify-center items-center gap-2 z-10 transition-colors ${
+									platform === "THREE_DS" && "text-slate-800!"
+								}`}
+							>
+								<Icon icon="cib:nintendo-3ds" className="text-2xl" />
+								3DS
+							</button>
+						</div>
+					</div>
+
+					{/* Name */}
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="name" className="font-semibold">
+							Name
+						</label>
+						<input
+							id="name"
+							type="text"
+							className="pill input w-full col-span-2"
+							minLength={2}
+							maxLength={64}
+							placeholder="Type your mii's name here..."
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</div>
+
+					<div className="w-full grid grid-cols-3 items-center">
+						<label htmlFor="tags" className="font-semibold">
+							Tags
+						</label>
+						<TagSelector tags={tags} setTags={setTags} showTagLimit />
+					</div>
+
+					{/* Description */}
+					<div className="w-full grid grid-cols-3 items-start">
+						<label htmlFor="description" className="font-semibold py-2">
+							Description
+						</label>
+						<textarea
+							id="description"
+							rows={5}
+							maxLength={512}
+							placeholder="(optional) Type a description..."
+							className="pill input rounded-xl! resize-none col-span-2 text-sm"
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+					</div>
+
+					{/* Gender (switch only) */}
+					<div className={`w-full grid grid-cols-3 items-start z-20 ${platform === "SWITCH" ? "" : "hidden"}`}>
+						<label htmlFor="gender" className="font-semibold py-2">
+							Gender
+						</label>
+						<div className="col-span-2 flex gap-1">
+							<button
+								type="button"
+								onClick={() => setGender("MALE")}
+								aria-label="Filter for Male Miis"
+								data-tooltip="Male"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-blue-400! after:border-blue-400! before:border-b-blue-400!  ${
+									gender === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="foundation:male" className="text-blue-400" />
+							</button>
+
+							<button
+								type="button"
+								onClick={() => setGender("FEMALE")}
+								aria-label="Filter for Female Miis"
+								data-tooltip="Female"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
+									gender === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="foundation:female" className="text-pink-400" />
+							</button>
+
+							<button
+								type="button"
+								onClick={() => setGender("NONBINARY")}
+								aria-label="Filter for Nonbinary Miis"
+								data-tooltip="Nonbinary"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400!  ${
+									gender === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+							</button>
+						</div>
+					</div>
+
+					{/* Makeup (switch only) */}
+					<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
+						<label htmlFor="makeup" className="font-semibold py-2">
+							Face Paint
+						</label>
+
+						<div className="col-span-2 flex gap-1">
+							{/* Full Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("FULL")}
+								aria-label="Full Face Paint"
+								data-tooltip="Face covered more than 80%"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-pink-400! after:border-pink-400! before:border-b-pink-400! ${
+									makeup === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:palette" className="text-pink-400" />
+							</button>
+
+							{/* Partial Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("PARTIAL")}
+								aria-label="Partial Face Paint"
+								data-tooltip="For at least any face paint"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-purple-400! after:border-purple-400! before:border-b-purple-400! ${
+									makeup === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="mdi:lipstick" className="text-purple-400" />
+							</button>
+
+							{/* No Makeup */}
+							<button
+								type="button"
+								onClick={() => setMakeup("NONE")}
+								aria-label="No Face Paint"
+								data-tooltip="No Face Paint"
+								className={`cursor-pointer rounded-xl flex justify-center items-center size-11 text-4xl border-2 transition-all after:bg-gray-400! after:border-gray-400! before:border-b-gray-400! ${
+									makeup === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+								}`}
+							>
+								<Icon icon="codex:cross" className="text-gray-400" />
+							</button>
+						</div>
+					</div>
+
+					{/* (Switch Only) Mii Screenshots */}
+					<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
+						{/* Separator */}
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Mii Screenshots</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-4 w-full">
+							{/* Step 1 - Portrait */}
+							<div className="flex flex-col items-center gap-2 w-full">
+								<div className="flex items-center gap-2 self-start">
+									<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">1</span>
+									<span className="text-sm font-semibold text-zinc-600">Portrait screenshot</span>
+								</div>
+								<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
+									<div data-tooltip="Your screenshot should look like this">
+										<Image
+											src="/tutorial/switch/portrait.png"
+											alt="Example portrait screenshot"
+											width={80}
+											height={80}
+											className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
+										/>
+									</div>
+									<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
+								</div>
+							</div>
+
+							{/* Step 2 - Features */}
+							<div className="flex flex-col items-center gap-2 w-full">
+								<div className="flex items-center gap-2 self-start">
+									<span className="bg-orange-400 text-white text-xs font-bold rounded-full size-5 flex items-center justify-center shrink-0">2</span>
+									<span className="text-sm font-semibold text-zinc-600">
+										Features screenshot <span className="text-orange-500">(the features panel - see example)</span>
+									</span>
+								</div>
+								<div className="flex gap-3 w-full items-start max-sm:flex-col max-sm:items-center">
+									<div data-tooltip="Your features screenshot should show this">
+										<Image
+											src="/tutorial/switch/features.png"
+											alt="Example features screenshot showing the parts panel"
+											width={80}
+											height={80}
+											className="size-20 object-cover rounded-xl border-2 border-orange-300 shrink-0 opacity-70"
+										/>
+									</div>
+									<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
+								</div>
+							</div>
+
+							<SwitchSubmitTutorialButton />
+						</div>
+
+						<p className="text-xs text-zinc-400 text-center mt-2">A tutorial on how to screenshot the features is above.</p>
+					</div>
+
+					{/* (3DS only) QR code scanning */}
+					<div className={`${platform === "THREE_DS" ? "" : "hidden"}`}>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>QR Code</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-2">
+							<QrUpload setQrBytesRaw={setQrBytesRaw} />
+							<span>or</span>
+
+							<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
+								<Icon icon="mdi:camera" fontSize={20} />
+								Use your camera
+							</button>
+
+							<Camera isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+							<ThreeDsSubmitTutorialButton />
+
+							<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
+						</div>
+					</div>
+
+					{/* (Switch only) Mii instructions */}
+					<div className={`${platform === "SWITCH" ? "" : "hidden"}`}>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Mii Instructions</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col items-center gap-2">
+							{/* YouTube */}
+							<div className="w-full grid grid-cols-3 items-center">
+								<label htmlFor="youtube" className="font-semibold">
+									YouTube Video
+								</label>
+								<input
+									id="youtube"
+									type="text"
+									className="pill input w-full col-span-2"
+									minLength={2}
+									maxLength={64}
+									placeholder="Paste a URL or video ID..."
+									value={youtubeId}
+									onChange={(e) => {
+										const val = e.target.value;
+										const match = val.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+										setYouTubeId(match ? match[1] : val);
+									}}
+								/>
+							</div>
+
+							<MiiEditor instructions={instructions} />
+							<SwitchSubmitTutorialButton />
+							<span className="text-xs text-zinc-400 text-center px-32 max-sm:px-8">
+								Mii editor may be inaccurate. Instructions are recommended, but not required - you do not have to add every instruction.
+							</span>
+						</div>
+					</div>
+
+					{/* Custom images selector */}
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-6 mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Custom images</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+
+					<div className="max-w-md w-full self-center flex flex-col items-center">
+						<Dropzone onDrop={handleDrop}>
+							<p className="text-center text-sm">
+								Drag and drop your images here
+								<br />
+								or click to open
+							</p>
+						</Dropzone>
+
+						<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
+					</div>
+
+					<ImageList files={files} setFiles={setFiles} />
+
+					<hr className="border-zinc-300 my-2" />
+					<div className="flex justify-between items-center">
+						{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+						<SubmitButton onClick={handleSubmit} className="ml-auto" />
+					</div>
 				</div>
 			</div>
 		</form>

src/components/submit-form/mii-editor/tabs/misc.tsx

@@ -67,7 +67,7 @@ export default function HeadTab({ instructions }: Props) {
 										instructions.current.height = e.target.valueAsNumber;
 									}}
 								/>
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 
@@ -89,7 +89,7 @@ export default function HeadTab({ instructions }: Props) {
 										instructions.current.weight = e.target.valueAsNumber;
 									}}
 								/>
-								<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
+								<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
 							</div>
 						</div>
 
@@ -223,7 +223,6 @@ export default function HeadTab({ instructions }: Props) {
 							instructions.current.personality = updated;
 							return updated;
 						});
-						instructions.current.personality = personality;
 					}}
 				/>
 			</div>

src/components/submit-form/switch-file-upload.tsx

@@ -11,7 +11,7 @@ interface Props {
 	text: string;
 	forceCrop?: boolean;
 	image?: string | undefined;
-	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+	setImage: (value: string | undefined) => void;
 }
 
 export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {

src/lib/images.tsx

@@ -59,7 +59,9 @@ export async function validateImage(file: File): Promise<{ valid: boolean; error
 			const formData = new FormData();
 			formData.append("image", blob);
 
-			const moderationResponse = await fetch("https://api.trafficlunar.net/moderate/image", { method: "POST", body: formData });
+			const headers = new Headers();
+			headers.append("token", process.env.TOKEN ?? "");
+			const moderationResponse = await fetch("https://api.trafficlunar.net/moderate/image", { method: "POST", body: formData, headers });
 			const result = await moderationResponse.json();
 			if (result.error) {
 				return { valid: false, error: result.error };

src/lib/settings.ts

@@ -1,4 +1,4 @@
 export const settings = {
 	canSubmit: true,
-	queueEnabled: false,
+	queueEnabled: true,
 };

src/lib/switch.ts

@@ -7,7 +7,7 @@ export function minifyInstructions(instructions: Partial<SwitchMiiInstructions>)
 		for (const key in object) {
 			const value = object[key as keyof SwitchMiiInstructions];
 
-			if (!value || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
+			if (value === null || value === undefined || (typeof value === "boolean" && value === false) || (DEFAULT_ZERO_FIELDS.has(key) && value === 0)) {
 				delete object[key as keyof SwitchMiiInstructions];
 				continue;
 			}
@@ -84,115 +84,115 @@ export const COLORS: string[] = [
 	"A56B2A",
 	"D4A15A",
 	// Row 1
-	"F2F2F2",
+	"FFFFFF",
-	"E6D5C3",
+	"E6CEB2",
-	"F3E6A2",
+	"FAF79A",
-	"CDE6A1",
+	"D7FA9C",
-	"A9DFA3",
+	"BCF1A9",
-	"8ED8B0",
+	"85E5B5",
-	"8FD3E8",
+	"9FE3FE",
-	"C9C2E6",
+	"D1C5ED",
-	"F3C1CF",
+	"FEC8D6",
-	"F0A8A8",
+	"FEBFB8",
 	// Row 2
-	"D8D8D8",
+	"DBD7CE",
-	"E8C07D",
+	"E6BA79",
-	"F0D97A",
+	"F7EA9B",
-	"CDE07A",
+	"D6E683",
-	"7BC96F",
+	"97DE7E",
-	"6BC4B2",
+	"7FD4BD",
-	"5BBAD6",
+	"78C4DC",
-	"D9A7E0",
+	"EFBDFA",
-	"F7B6C2",
+	"FCACC9",
-	"F47C6C",
+	"FFA6A6",
 	// Row 3
-	"C0C0C0",
+	"BDBDBD",
-	"D9A441",
+	"CF9F4A",
-	"F4C542",
+	"FDE249",
-	"D4C86A",
+	"D5D86F",
-	"8FD14F",
+	"9EE041",
-	"58B88A",
+	"63C787",
-	"6FA8DC",
+	"85BDFA",
-	"B4A7D6",
+	"C4ADE4",
-	"F06277",
+	"FA7495",
-	"FF6F61",
+	"FF7366",
 	// Row 4
-	"A8A8A8",
+	"9B9B9B",
-	"D29B62",
+	"D09B69",
-	"F2CF75",
+	"F9DF82",
-	"D8C47A",
+	"D8CC82",
-	"8DB600",
+	"93BE0D",
-	"66C2A5",
+	"79C49D",
-	"4DA3D9",
+	"56B4F0",
-	"C27BA0",
+	"BF83CB",
-	"D35D6E",
+	"C7556E",
-	"FF4C3B",
+	"F54949",
 	// Row 5
-	"9A9A9A",
+	"797880",
-	"C77800",
+	"A96001",
-	"F4B183",
+	"FFC28B",
-	"D6BF3A",
+	"CBBF37",
-	"3FA34D",
+	"4AAD1C",
-	"4CA3A3",
+	"4FAEB0",
-	"7EA6E0",
+	"8AA6FA",
-	"B56576",
+	"A992C8",
-	"FF1744",
+	"B05380",
-	"FF2A00",
+	"EF0D0E",
 	// Row 6
-	"8A817C",
+	"786F66",
-	"B85C1E",
+	"A54D1B",
-	"FF8C00",
+	"FF960E",
-	"D2B48C",
+	"CDB987",
-	"2E8B57",
+	"34996F",
-	"2F7E8C",
+	"347E8B",
-	"2E86C1",
+	"2982D4",
-	"7D5BA6",
+	"845BB7",
-	"C2185B",
+	"C81C56",
-	"E0193A",
+	"D8530E",
 	// Row 7
-	"6E6E6E",
+	"6D6E70",
-	"95543A",
+	"8D4F40",
-	"F4A460",
+	"FFB166",
-	"B7A369",
+	"A59562",
-	"3B7A0A",
+	"427901",
-	"1F6F78",
+	"216663",
-	"3F51B5",
+	"4655A8",
-	"673AB7",
+	"6E42B1",
-	"B71C1C",
+	"991C3C",
-	"C91F3A",
+	"B63D42",
 	// Row 8
-	"3E3E3E",
+	"404040",
-	"8B5A2B",
+	"7E4500",
-	"F0986C",
+	"EF9974",
-	"9E8F2A",
+	"99922A",
-	"0B5D3B",
+	"017562",
-	"0E3A44",
+	"0C4F58",
-	"1F2A44",
+	"154166",
-	"4B2E2E",
+	"4B164E",
-	"9C1B1B",
+	"8A163D",
-	"7A3B2E",
+	"A80C0D",
 	// Row 9
-	"2E2E2E",
+	"2E2526",
-	"7A4A2A",
+	"663D2B",
-	"A86A1D",
+	"885816",
-	"6E6B2A",
+	"605F31",
-	"2F6F55",
+	"396F58",
-	"004E52",
+	"013D3B",
-	"1C2F6E",
+	"223266",
-	"3A1F4D",
+	"38263C",
-	"A52A2A",
+	"842626",
-	"8B4513",
+	"7B3B17",
 	// Row 10
 	"000000",
-	"5A2E0C",
+	"41220D",
-	"7B3F00",
+	"5F380D",
-	"5C4A00",
+	"4D3D0C",
-	"004225",
+	"0C4A35",
-	"003B44",
+	"0D2E35",
-	"0A1F44",
+	"161C40",
-	"2B1B3F",
+	"321C40",
-	"7B2D2D",
+	"722E3B",
-	"8B3A0E",
+	"5B160E",
 	// Hair tab extra colors
 	"FFD8BA",
 	"FFD5AC",