Merge 25dafcc24b into 2209a17687

also bypassCache profile url query param

backend/prisma/migrations/20260422154939_reviewed_at/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "miis" ADD COLUMN     "reviewedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;

backend/prisma/schema.prisma

@@ -89,6 +89,7 @@ model Mii {
   allowedCopying Boolean?
 
   createdAt  DateTime @default(now())
+  reviewedAt DateTime @default(now())
 
   user      User   @relation(fields: [userId], references: [id], onDelete: Cascade)
   likeCount Int    @default(0)

backend/src/app/api/mii/list/route.ts

@@ -9,7 +9,22 @@ export async function GET(request: NextRequest) {
 	const parsed = searchSchema.safeParse(Object.fromEntries(request.nextUrl.searchParams));
 	if (!parsed.success) return NextResponse.json({ error: parsed.error.issues[0].message }, { status: 400 });
 
-	const { q: query, sort, tags, exclude, platform, gender, makeup, allowCopying, quarantined, page = 1, limit = 24, parentPage, userId } = parsed.data;
+	const {
+		q: query,
+		sort,
+		tags,
+		exclude,
+		platform,
+		gender,
+		makeup,
+		allowCopying,
+		quarantined,
+		page = 1,
+		limit = 24,
+		parentPage,
+		userId,
+		timeRange,
+	} = parsed.data;
 
 	// My Likes page
 	let miiIdsLiked: number[] | undefined = undefined;
@@ -55,6 +70,12 @@ export async function GET(request: NextRequest) {
 		...(makeup && { makeup: { equals: makeup } }),
 		// Quarantined
 		...(!quarantined && !userId && { quarantined: false }),
+		// Time range
+		...(timeRange && {
+			reviewedAt: {
+				gte: new Date(Date.now() - { day: 86400000, week: 604800000, month: 2592000000, year: 31536000000 }[timeRange]),
+			},
+		}),
 	};
 
 	const select: Prisma.MiiSelect = {

backend/src/components/admin/mii-list.tsx

@@ -11,7 +11,7 @@ export default async function MiiList({ searchParams }: Props) {
 	const parsed = searchSchema.safeParse(searchParams);
 	if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
 
-	const { page = 1, limit = 24 } = parsed.data;
+	const { page = 1, limit = 100 } = parsed.data;
 
 	const skip = (page - 1) * limit;
 

backend/src/components/admin/reports.tsx

@@ -25,6 +25,7 @@ export default async function Reports({ searchParams }: { searchParams: { status
 	]);
 
 	const totalPages = Math.ceil(total / PAGE_SIZE);
+	const FRONTEND_URL = process.env.NEXT_PUBLIC_FRONTEND_URL;
 
 	const updateStatus = async (formData: FormData) => {
 		"use server";
@@ -88,21 +89,24 @@ export default async function Reports({ searchParams }: { searchParams: { status
 						<div className="grid grid-cols-4 text-xs text-zinc-600 mt-4 max-sm:grid-cols-2">
 							<div>
 								<p>Target ID</p>
-								<a href={report.reportType === "MII" ? `/mii/${report.targetId}` : `/profile/${report.targetId}`} className="text-blue-600 text-sm">
+								<a
+									href={report.reportType === "MII" ? `${FRONTEND_URL}/mii/${report.targetId}` : `${FRONTEND_URL}/profile/${report.targetId}`}
+									className="text-blue-600 text-sm"
+								>
 									{report.targetId}
 								</a>
 							</div>
 
 							<div>
 								<p>Creator ID</p>
-								<a href={`/profile/${report.creatorId}`} className="text-blue-600 text-sm">
+								<a href={`${FRONTEND_URL}/profile/${report.creatorId}`} className="text-blue-600 text-sm">
 									{report.creatorId}
 								</a>
 							</div>
 
 							<div>
 								<p>Reporter</p>
-								<a href={`/profile/${report.authorId}`} className="text-blue-600 text-sm">
+								<a href={`${FRONTEND_URL}/profile/${report.authorId}`} className="text-blue-600 text-sm">
 									{report.authorId}
 								</a>
 							</div>

frontend/src/components/mii/list/index.tsx

@@ -9,7 +9,7 @@ import { Icon } from "@iconify/react";
 import LikeButton from "../../like-button";
 import { useStore } from "@nanostores/react";
 import { session } from "../../../session";
-import Description from "../../description";
+import TimeRangeSelect from "./time-range-select";
 
 interface ApiResponse {
 	totalCount: number;
@@ -19,14 +19,14 @@ interface ApiResponse {
 
 interface Props {
 	userId?: number;
-	parentPage?: "likes" | "admin";
+	parentPage?: "likes";
+	bypassCache?: boolean;
 }
 
-export default function MiiList({ parentPage, userId }: Props) {
+export default function MiiList({ parentPage, userId, bypassCache }: Props) {
 	const [searchParams] = useSearchParams();
 	const [data, setData] = useState<ApiResponse | null>(null);
 	const [loading, setLoading] = useState(true);
-	const [acceptingAll, setAcceptingAll] = useState(false);
 	const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
 
 	const $session = useStore(session);
@@ -35,6 +35,7 @@ export default function MiiList({ parentPage, userId }: Props) {
 		const params = new URLSearchParams(searchParams.toString());
 		if (userId) params.append("userId", userId.toString());
 		if (parentPage) params.append("parentPage", parentPage);
+		if (bypassCache) params.append("bypassCache", "true");
 
 		fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${params.toString()}`, { credentials: "include" })
 			.then((res) => {
@@ -60,28 +61,6 @@ export default function MiiList({ parentPage, userId }: Props) {
 			});
 	}, [searchParams, userId, parentPage, $session]);
 
-	async function handleAcceptAll() {
-		if (!data) return;
-		setAcceptingAll(true);
-		try {
-			await Promise.all(
-				data.miis.map((mii) =>
-					fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, {
-						method: "POST",
-						credentials: "include",
-					}),
-				),
-			);
-			const params = new URLSearchParams(searchParams.toString());
-			if (userId) params.append("userId", userId.toString());
-			if (parentPage) params.append("parentPage", parentPage);
-			const res = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${params.toString()}`, { credentials: "include" });
-			if (res.ok) setData(await res.json());
-		} finally {
-			setAcceptingAll(false);
-		}
-	}
-
 	return (
 		<>
 			{loading ? (
@@ -94,19 +73,10 @@ export default function MiiList({ parentPage, userId }: Props) {
 							<span className="text-lg text-amber-700">{data.totalCount === 1 ? "Mii" : "Miis"}</span>
 						</div>
 
-						<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
+						<div className="relative flex flex-wrap items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
-							{parentPage === "admin" && data.miis.length > 0 && (
-								<button
-									onClick={handleAcceptAll}
-									disabled={acceptingAll}
-									className="pill button flex items-center gap-1.5 px-3 py-1.5 bg-green-500! border-green-600! hover:bg-green-600! disabled:opacity-60 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-xl shadow transition-colors"
-								>
-									<Icon icon="material-symbols:check-circle-rounded" className="text-base" />
-									{acceptingAll ? "Accepting…" : `Accept All`}
-								</button>
-							)}
 							<FilterMenu />
 							<SortSelect />
+							<TimeRangeSelect />
 						</div>
 					</div>
 
@@ -114,7 +84,7 @@ export default function MiiList({ parentPage, userId }: Props) {
 						{data.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 bg-red-50!" : mii.in_queue && parentPage !== "admin" ? "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 ? "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">
@@ -123,7 +93,6 @@ export default function MiiList({ parentPage, userId }: Props) {
 									</div>
 								)}
 
-								{parentPage !== "admin" ? (
 								<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
 									<img
 										src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
@@ -133,19 +102,6 @@ export default function MiiList({ parentPage, userId }: Props) {
 										className="w-full h-auto aspect-3/2 object-contain"
 									/>
 								</Link>
-								) : (
-									<div className="grid grid-cols-2 gap-1 rounded-xl bg-zinc-200">
-										{[
-											`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`,
-											mii.platform === "THREE_DS"
-												? `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=qr-code`
-												: `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=features`,
-											...Array.from({ length: mii.imageCount }, (_, i) => `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=image${i}`),
-										].map((src, i) => (
-											<img key={i} src={src} alt="mii image" className="w-full bg-zinc-200" />
-										))}
-									</div>
-								)}
 
 								<div className="p-4 flex flex-col gap-1 h-full">
 									<div className="flex justify-between">
@@ -169,8 +125,6 @@ export default function MiiList({ parentPage, userId }: Props) {
 										))}
 									</div>
 
-									{parentPage === "admin" && mii.description && <Description text={mii.description} />}
-
 									<div className="mt-auto grid grid-cols-2 items-center">
 										<LikeButton likes={mii.likeCount} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
 
@@ -188,27 +142,6 @@ export default function MiiList({ parentPage, userId }: Props) {
 												<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likeCount} />
 											</div>
 										)}
-
-										{parentPage === "admin" && (
-											<div className="flex justify-between w-full col-span-2 mt-2">
-												<div className="flex gap-1 text-3xl justify-center">
-													<button
-														onClick={async () => {
-															await fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, { method: "POST", credentials: "include" });
-														}}
-														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.likeCount} />
-													</div>
-												</div>
-
-												<span className="text-sm w-1/2 text-right">{new Date(mii.createdAt).toLocaleString("en-GB", { timeZone: "UTC" })}</span>
-											</div>
-										)}
 									</div>
 								</div>
 							</div>

frontend/src/components/mii/list/time-range-select.tsx

@@ -0,0 +1,73 @@
+import { useTransition } from "react";
+import { useSelect } from "downshift";
+import { Icon } from "@iconify/react";
+import { useNavigate, useSearchParams } from "react-router";
+
+type TimeRange = "day" | "week" | "month" | "year";
+
+const items: { value: TimeRange | "all"; label: string }[] = [
+	{ value: "all", label: "all time" },
+	{ value: "day", label: "today" },
+	{ value: "week", label: "this week" },
+	{ value: "month", label: "this month" },
+	{ value: "year", label: "this year" },
+];
+
+export default function TimeRangeSelect() {
+	const navigate = useNavigate();
+	const [searchParams] = useSearchParams();
+	const [, startTransition] = useTransition();
+
+	const currentRange = (searchParams.get("timeRange") as TimeRange) || "all";
+	const currentItem = items.find((i) => i.value === currentRange) || items[0];
+
+	const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
+		items,
+		selectedItem: currentItem,
+		itemToString: (item) => item?.label || "",
+		onSelectedItemChange: ({ selectedItem }) => {
+			if (!selectedItem) return;
+
+			const params = new URLSearchParams(searchParams);
+			params.set("page", "1");
+
+			if (selectedItem.value === "all") {
+				params.delete("timeRange");
+			} else {
+				params.set("timeRange", selectedItem.value);
+			}
+
+			startTransition(() => {
+				navigate(`?${params.toString()}`, { preventScrollReset: true });
+			});
+		},
+	});
+
+	return (
+		<div className="relative w-fit">
+			<button type="button" {...getToggleButtonProps()} aria-label="Time range dropdown" className="pill input w-full gap-1 justify-between! text-nowrap">
+				<Icon icon="mdi:clock-outline" className="size-5 mr-1" />
+				{selectedItem?.label || "all time"}
+				<Icon icon="tabler:chevron-down" className="ml-1 size-5" />
+			</button>
+
+			<ul
+				{...getMenuProps()}
+				className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
+					isOpen ? "block" : "hidden"
+				}`}
+			>
+				{isOpen &&
+					items.map((item, index) => (
+						<li
+							key={item.value}
+							{...getItemProps({ item, index })}
+							className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
+						>
+							{item.label}
+						</li>
+					))}
+			</ul>
+		</div>
+	);
+}

frontend/src/index.css

@@ -20,7 +20,7 @@
 }
 
 #root {
-	@apply antialiased flex flex-col items-center w-screen h-screen;
+	@apply antialiased flex flex-col items-center w-full min-h-screen;
 }
 
 .pill {

frontend/src/pages/mii.tsx

@@ -54,8 +54,36 @@ export default function MiiPage() {
 	if (loading || !mii) return <div className="p-6 text-center">Loading...</div>;
 	const images = [...Array.from({ length: mii.imageCount ?? 0 }, (_, index) => `${API_URL}/mii/${mii.id}/image?type=image${index}`)];
 
+	const metaTitle = `${mii.name} - TomodachiShare`;
+	const platformLabel = mii.platform === "SWITCH" ? "Switch Living the Dream" : "3DS";
+	const metaDescription = `Check out '${mii.name}', a ${platformLabel} Tomodachi Life Mii created by ${mii.user.name} on TomodachiShare with ${mii.likeCount ?? 0} likes.`;
+	const metaImage = `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=metadata`;
+	const metaImageAlt = `${mii.name}, ${mii.tags?.join(", ")} ${mii.gender} Mii character`;
+
 	return (
 		<div className="flex flex-col items-center">
+			<title>{metaTitle}</title>
+			<meta name="description" content={metaDescription} />
+			<meta name="keywords" content={["mii", "tomodachi life", "nintendo", "tomodachishare", ...mii.tags].join(", ")} />
+			<link rel="canonical" href={`${import.meta.env.VITE_BASE_URL}/mii/${mii.id}`} />
+
+			{/* Open Graph */}
+			<meta property="og:type" content="article" />
+			<meta property="og:title" content={metaTitle} />
+			<meta property="og:description" content={metaDescription} />
+			<meta property="og:image" content={metaImage} />
+			<meta property="og:image:alt" content={metaImageAlt} />
+			<meta property="article:published_time" content={new Date(mii.createdAt).toISOString()} />
+			<meta property="article:author" content={`@${mii.user.name}`} />
+
+			{/* Twitter / X */}
+			<meta name="twitter:card" content="summary_large_image" />
+			<meta name="twitter:title" content={metaTitle} />
+			<meta name="twitter:description" content={metaDescription} />
+			<meta name="twitter:image" content={metaImage} />
+			<meta name="twitter:image:alt" content={metaImageAlt} />
+			<meta name="twitter:creator" content={`@${mii.user.name}`} />
+
 			<div className="max-w-5xl w-full flex flex-col gap-4">
 				{mii.quarantined && (
 					<div className="bg-red-100 border-2 border-red-400 rounded-2xl shadow-lg p-4 flex items-center gap-3 text-red-700">

frontend/src/pages/profile/index.tsx

@@ -1,8 +1,14 @@
 import { useParams } from "react-router";
 import MiiList from "../../components/mii/list";
+import { useStore } from "@nanostores/react";
+import { session } from "../../session";
 
 export default function ProfilePage() {
 	const { id } = useParams();
+	const $session = useStore(session);
 
-	return <MiiList userId={Number(id)} />;
+	const userId = Number(id ?? $session?.user?.id);
+	const isOwnProfile = !!$session?.user?.id && userId === Number($session.user.id);
+
+	return <MiiList userId={Number(id)} bypassCache={isOwnProfile} />;
 }

frontend/src/pages/profile/layout.tsx

@@ -13,10 +13,10 @@ export default function ProfileLayout() {
 	const [loading, setLoading] = useState(true);
 	const $session = useStore(session);
 
+	const userId = Number(id ?? $session?.user?.id);
+
 	useEffect(() => {
 		if ($session === undefined) return; // session still loading
-
-		const userId = id ?? $session?.user?.id;
 		if (!userId) {
 			navigate("/404");
 			return;
@@ -44,14 +44,38 @@ export default function ProfileLayout() {
 		return <div className="p-6 text-center">Loading...</div>;
 	}
 
-	const sessionUserId = $session?.user?.id ? Number($session.user.id) : null;
+	const isAdmin = userId === Number(import.meta.env.VITE_ADMIN_USER_ID);
-	const page = location.pathname;
-	const isAdmin = sessionUserId === Number(import.meta.env.VITE_ADMIN_USER_ID);
 	const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(String(user?.id));
-	const isOwnProfile = sessionUserId === user?.id;
+	const isOwnProfile = userId === user?.id;
+
+	const joinDate = new Date(user.createdAt).toLocaleDateString("en-US", { month: "long", year: "numeric" });
+	const metaTitle = `${user.name} - TomodachiShare`;
+	const metaDescription = `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`;
+	const metaImage = user.image.startsWith("/profile")
+		? `${import.meta.env.VITE_API_URL}${user.image}`
+		: (user.image ?? `${import.meta.env.VITE_API_URL}/guest.png`);
 
 	return (
 		<div>
+			<title>{metaTitle}</title>
+			<meta name="description" content={metaDescription} />
+			<meta name="keywords" content="mii, tomodachi life, nintendo, mii creator, mii collection, profile" />
+			<link rel="canonical" href={`${import.meta.env.VITE_BASE_URL}/profile/${user.id}`} />
+
+			{/* Open Graph */}
+			<meta property="og:type" content="profile" />
+			<meta property="og:title" content={metaTitle} />
+			<meta property="og:description" content={metaDescription} />
+			<meta property="og:image" content={metaImage} />
+			<meta property="og:profile:username" content={user.name} />
+
+			{/* Twitter / X */}
+			<meta name="twitter:card" content="summary" />
+			<meta name="twitter:title" content={metaTitle} />
+			<meta name="twitter:description" content={metaDescription} />
+			<meta name="twitter:image" content={metaImage} />
+			<meta name="twitter:creator" content={user.name} />
+
 			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
 				<div className="flex w-full gap-4 overflow-x-scroll">
 					{/* Profile picture */}
@@ -110,19 +134,19 @@ export default function ProfileLayout() {
 							<span>Admin</span>
 						</a>
 					)}
-					{isOwnProfile && page !== "/profile/likes" && (
+					{isOwnProfile && location.pathname !== "/profile/likes" && (
 						<Link aria-label="Go to My Likes" to="/profile/likes">
 							<Icon icon="icon-park-solid:like" />
 							<span>My Likes</span>
 						</Link>
 					)}
-					{isOwnProfile && page !== "/profile/settings" && (
+					{isOwnProfile && location.pathname !== "/profile/settings" && (
 						<Link aria-label="Go to Settings" to="/profile/settings">
 							<Icon icon="material-symbols:settings-rounded" />
 							<span>Settings</span>
 						</Link>
 					)}
-					{(page === "/profile/likes" || page === "/profile/settings") && (
+					{(location.pathname === "/profile/likes" || location.pathname === "/profile/settings") && (
 						<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
 							<Icon icon="tabler:chevron-left" />
 							<span>Back</span>

frontend/src/pages/submit.tsx

@@ -342,49 +342,26 @@ export default function SubmitPage() {
 
 					{/* Makeup (switch only) */}
 					<div className={`w-full grid grid-cols-3 items-start ${platform === "SWITCH" ? "" : "hidden"}`}>
-						<label htmlFor="makeup" className="font-semibold py-2">
+						<label className="font-semibold py-2">Face Paint</label>
-							Face Paint
-						</label>
 
-						<div className="col-span-2 flex gap-1">
+						<div className="col-span-2 flex flex-col gap-1.5">
-							{/* Full Makeup */}
+							{[
+								{ value: "FULL", label: "Full", desc: "Most of the face/features are covered", color: "pink" },
+								{ value: "PARTIAL", label: "Partial", desc: "Small designs that don't cover features, like marks, stickers, etc.", color: "purple" },
+								{ value: "NONE", label: "None", desc: "No face paint present.", color: "gray" },
+							].map(({ value, label, desc, color }) => (
 								<button
+									key={value}
 									type="button"
-								onClick={() => setMakeup("FULL")}
+									onClick={() => setMakeup(value as MiiMakeup)}
-								aria-label="Full Face Paint"
+									className={`cursor-pointer rounded-xl text-left px-3 py-2 border-2 transition-all ${
-								data-tooltip="Face covered more than 80%"
+										makeup === value ? `bg-${color}-100 border-${color}-400 shadow-md` : "bg-white border-gray-300 hover:border-gray-400"
-								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" />
+									<div className={`font-medium text-sm ${makeup === value ? `text-${color}-500` : "text-gray-500"}`}>{label}</div>
-							</button>
+									<div className="text-xs text-gray-500 mt-0.5">{desc}</div>
-
-							{/* 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>
 
@@ -503,7 +480,7 @@ export default function SubmitPage() {
 							<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.
+								Mii editor may be inaccurate. Instructions are REALLY recommended, but you do not have to add every instruction.
 							</span>
 						</div>
 					</div>

shared/src/schemas.ts

@@ -39,6 +39,7 @@ export const idSchema = z.coerce.number({ error: "ID must be a number" }).int({
 export const searchSchema = z.object({
 	q: querySchema.optional(),
 	sort: z.enum(["likes", "newest", "oldest"], { error: "Sort must be either 'likes', 'newest', 'oldest'" }).default("newest"),
+	// todo: incorporate tagsSchema
 	tags: z
 		.string()
 		.optional()
@@ -62,7 +63,6 @@ export const searchSchema = z.object({
 	makeup: z.enum(["FULL", "PARTIAL", "NONE"], { error: "Makeup must be either 'FULL', 'PARTIAL', or 'NONE'" }).optional(),
 	allowCopying: z.coerce.boolean({ error: "Allow Copying must be either true or false" }).optional(),
 	quarantined: z.coerce.boolean({ error: "Quarantined must be either true or false" }).optional(),
-	// todo: incorporate tagsSchema
 	// Pages
 	limit: z.coerce
 		.number({ error: "Limit must be a number" })
@@ -74,6 +74,8 @@ export const searchSchema = z.object({
 	// Other
 	parentPage: z.string().optional(),
 	userId: idSchema.optional(),
+	// Time range filter
+	timeRange: z.enum(["day", "week", "month", "year"], { error: "Time range must be either 'day', 'week', 'month', or 'year'" }).optional(),
 });
 
 export const userNameSchema = z