feat: astro test

frontend/src/components/admin/banner-form.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+export default function BannerForm() {
+	const [message, setMessage] = useState("");
+
+	const onClickClear = async () => {
+		await fetch("/api/admin/banner", { method: "DELETE" });
+	};
+
+	const onClickSet = async () => {
+		await fetch("/api/admin/banner", { method: "POST", body: message });
+	};
+
+	return (
+		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex gap-2">
+			<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
+			<button type="button" className="pill button" onClick={onClickClear}>
+				Clear
+			</button>
+			<button type="submit" className="pill button" onClick={onClickSet}>
+				Set
+			</button>
+		</div>
+	);
+}

frontend/src/components/admin/banner.tsx

@@ -0,0 +1,65 @@
+// import { useSearchParams } from "next/navigation";
+// import { Suspense, useEffect, useState } from "react";
+
+// import useSWR from "swr";
+// import { Icon } from "@iconify/react";
+
+// interface ApiResponse {
+// 	message: string;
+// }
+
+// const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+// function RedirectBanner() {
+// 	const searchParams = useSearchParams();
+// 	const from = searchParams.get("from");
+// 	if (from !== "old-domain") return null;
+
+// 	return (
+// 		<div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
+// 			<Icon icon="humbleicons:link" className="text-2xl min-w-6" />
+// 			<span>We have moved URLs, welcome to tomodachishare.com!</span>
+// 		</div>
+// 	);
+// }
+
+// export default function AdminBanner() {
+// 	const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
+// 	const [shouldShow, setShouldShow] = useState(true);
+
+// 	useEffect(() => {
+// 		if (!data?.message) return;
+
+// 		// Check if the current banner text was closed by the user
+// 		const closedBanner = window.localStorage.getItem("closedBanner");
+// 		setShouldShow(data.message !== closedBanner);
+// 	}, [data]);
+
+// 	const handleClose = () => {
+// 		if (!data) return;
+
+// 		// Close banner and remember it
+// 		window.localStorage.setItem("closedBanner", data.message);
+// 		setShouldShow(false);
+// 	};
+
+// 	return (
+// 		<>
+// 			{data && data.message && shouldShow && (
+// 				<div className="relative w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between">
+// 					<div className="flex gap-2 h-full items-center w-fit">
+// 						<Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
+// 						<span>{data.message}</span>
+// 					</div>
+
+// 					<button onClick={handleClose} className="min-sm:absolute right-2 cursor-pointer p-1.5">
+// 						<Icon icon="humbleicons:times" className="text-2xl min-w-6" />
+// 					</button>
+// 				</div>
+// 			)}
+// 			<Suspense>
+// 				<RedirectBanner />
+// 			</Suspense>
+// 		</>
+// 	);
+// }

frontend/src/components/admin/control-center.tsx

@@ -0,0 +1,45 @@
+// import { settings } from "@/lib/settings";
+// import { useState } from "react";
+
+// export default function ControlCenter() {
+// 	const [canSubmit, setCanSubmit] = useState(settings.canSubmit);
+// 	const [isQueueEnabled, setIsQeueueEnabled] = useState(settings.queueEnabled);
+
+// 	const onClickSet = async () => {
+// 		await fetch("/api/admin/can-submit", { method: "PATCH", body: JSON.stringify(canSubmit) });
+// 		await fetch("/api/admin/queue", { method: "PATCH", body: JSON.stringify(isQueueEnabled) });
+// 	};
+
+// 	return (
+// 		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
+// 			<div className="flex items-center gap-2">
+// 				<input
+// 					id="submit"
+// 					type="checkbox"
+// 					className="checkbox size-6!"
+// 					placeholder="Enter banner text"
+// 					checked={canSubmit}
+// 					onChange={(e) => setCanSubmit(e.target.checked)}
+// 				/>
+// 				<label htmlFor="submit">Enable Submissions</label>
+// 			</div>
+// 			<div className="flex items-center gap-2">
+// 				<input
+// 					id="queue"
+// 					type="checkbox"
+// 					className="checkbox size-6!"
+// 					placeholder="Enter banner text"
+// 					checked={isQueueEnabled}
+// 					onChange={(e) => setIsQeueueEnabled(e.target.checked)}
+// 				/>
+// 				<label htmlFor="queue">Enable Queue</label>
+// 			</div>
+
+// 			<div className="flex gap-2 self-end">
+// 				<button type="submit" className="pill button" onClick={onClickSet}>
+// 					Set
+// 				</button>
+// 			</div>
+// 		</div>
+// 	);
+// }

frontend/src/components/admin/punishment-deletion-dialog.tsx

@@ -0,0 +1,92 @@
+import { useRouter } from "next/navigation";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Icon } from "@iconify/react";
+import SubmitButton from "../submit-button";
+
+interface Props {
+	punishmentId: number;
+}
+
+export default function PunishmentDeletionDialog({ punishmentId }: Props) {
+	const router = useRouter();
+
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const handleSubmit = async () => {
+		const response = await fetch(`/api/admin/punish?id=${punishmentId}`, { method: "DELETE" });
+
+		if (!response.ok) {
+			const data = await response.json();
+			setError(data.error);
+
+			return;
+		}
+
+		router.refresh();
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} aria-label="Delete Punishment" className="text-red-500 cursor-pointer hover:text-red-600 text-lg">
+				<Icon icon="material-symbols:close-rounded" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Punishment Deletion</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This will delete the user&lsquo;s punishment and they will be able to come back.</p>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<SubmitButton onClick={handleSubmit} />
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/admin/queue.tsx

@@ -0,0 +1,166 @@
+// import { Prisma } from "@prisma/client";
+// import { useMemo, useRef, useState } from "react";
+// import Carousel from "../carousel";
+// import Link from "next/link";
+// import { Icon } from "@iconify/react";
+
+// interface Props {
+// 	miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
+// }
+
+// type Decision = "accept" | "reject" | null;
+
+// export default function Queue({ miis }: Props) {
+// 	const [currentIndex, setCurrentIndex] = useState(4); // Current index in the miis array, not visible
+// 	const [visibleMiis, setVisibleMiis] = useState(miis.slice(0, 4));
+// 	const [decision, setDecision] = useState<Decision>(null);
+// 	const [isAnimating, setIsAnimating] = useState(false);
+
+// 	const [dragOffset, setDragOffset] = useState(0);
+// 	const dragStart = useRef<number | null>(null);
+// 	const isDragging = useRef(false);
+
+// 	const rotations = useMemo(() => {
+// 		const map: Record<string, number> = {};
+// 		miis.forEach((mii) => {
+// 			map[mii.id] = Math.random() * 15 - 5;
+// 		});
+// 		return map;
+// 	}, [miis]);
+
+// 	const handleDecision = (decision: Decision) => {
+// 		if (isAnimating) return;
+// 		setDecision(decision);
+// 		setIsAnimating(true);
+// 		setDragOffset(decision === "accept" ? -300 : 300);
+
+// 		setTimeout(() => {
+// 			setVisibleMiis((prev) => {
+// 				const newQueue = prev.slice(1); // Remove first Mii
+// 				if (miis[currentIndex]) newQueue.push(miis[currentIndex]); // Add a new Mii to the end of the list
+// 				return newQueue;
+// 			});
+// 			setCurrentIndex((prev) => prev + 1);
+// 			setDecision(null);
+// 			setIsAnimating(false);
+// 			setDragOffset(0);
+// 		}, 500);
+// 	};
+
+// 	const onDragStart = (clientX: number) => {
+// 		if (isAnimating) return;
+// 		dragStart.current = clientX;
+// 		isDragging.current = true;
+// 	};
+
+// 	const onDragMove = (clientX: number) => {
+// 		if (!isDragging.current || !dragStart.current) return;
+// 		setDragOffset(clientX - dragStart.current);
+// 	};
+
+// 	const onDragEnd = () => {
+// 		if (!isDragging.current) return;
+// 		isDragging.current = false;
+
+// 		if (dragOffset < -80) handleDecision("accept");
+// 		else if (dragOffset > 80) handleDecision("reject");
+// 		else setDragOffset(0);
+
+// 		dragStart.current = null;
+// 	};
+
+// 	return (
+// 		<div className="w-full flex justify-center items-center gap-8 relative h-100 mt-4 mb-8">
+// 			<button
+// 				onClick={() => handleDecision("accept")}
+// 				className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs"
+// 			>
+// 				<Icon icon="material-symbols:check-rounded" />
+// 			</button>
+
+// 			<div className="relative w-full max-w-96 h-96 aspect-square">
+// 				{visibleMiis.map((mii, i) => {
+// 					const isTopCard = i === 0;
+
+// 					// Calculate rotation/opacity based on drag distance
+// 					const dragRotation = isTopCard ? dragOffset / 10 : 0;
+// 					const dragOpacity = isTopCard ? 1 - Math.min(Math.abs(dragOffset) / 300, 1) : undefined;
+
+// 					return (
+// 						<div
+// 							key={mii.id}
+// 							className={`absolute inset-0 flex flex-col bg-zinc-50 rounded-3xl border-2 shadow-lg p-[0.8rem] border-zinc-300 *:select-none
+// 								${!isDragging.current ? "transition-all duration-500" : "transition-none"}
+// 								${isTopCard ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
+// 							style={{
+// 								transform: isTopCard
+// 									? `translate(${dragOffset}px, ${Math.abs(dragOffset) * 0.1}px) rotate(${rotations[mii.id] + dragRotation}deg)`
+// 									: `translateY(${i * 10}px) rotate(${rotations[mii.id]}deg)`,
+// 								zIndex: (visibleMiis.length - i) * 10,
+// 								opacity: dragOpacity,
+// 							}}
+// 							onMouseDown={(e) => isTopCard && onDragStart(e.clientX)}
+// 							onMouseMove={(e) => isTopCard && onDragMove(e.clientX)}
+// 							onMouseUp={() => isTopCard && onDragEnd()}
+// 							onMouseLeave={() => isTopCard && isDragging.current && onDragEnd()}
+// 							onTouchStart={(e) => isTopCard && onDragStart(e.touches[0].clientX)}
+// 							onTouchMove={(e) => isTopCard && onDragMove(e.touches[0].clientX)}
+// 							onTouchEnd={() => isTopCard && onDragEnd()}
+// 						>
+// 							<Carousel
+// 								images={[
+// 									`/mii/${mii.id}/image?type=mii`,
+// 									...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [`/mii/${mii.id}/image?type=features`]),
+// 									...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
+// 								]}
+// 								onlyButtons
+// 							/>
+
+// 							<div className="p-4 flex flex-col gap-1 h-full">
+// 								<div className="flex justify-between items-center">
+// 									<Link
+// 										href={`/mii/${mii.id}`}
+// 										draggable={false}
+// 										className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word"
+// 										title={mii.name}
+// 									>
+// 										{mii.name}
+// 									</Link>
+// 									<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="-mr-3 text-[1.25rem] opacity-25">
+// 										{mii.platform === "SWITCH" ? (
+// 											<Icon icon="cib:nintendo-switch" className="text-red-400" />
+// 										) : (
+// 											<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+// 										)}
+// 									</div>
+// 								</div>
+// 								<div id="tags" className="flex flex-wrap gap-1">
+// 									{mii.tags.map((tag) => (
+// 										<Link href={{ query: { tags: tag } }} draggable={false} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
+// 											{tag}
+// 										</Link>
+// 									))}
+// 								</div>
+
+// 								<div className="mt-auto grid grid-cols-2 gap-4 items-center">
+// 									<p className="text-sm">{mii.createdAt.toLocaleString("en-GB", { timeZone: "UTC" })}</p>
+
+// 									<Link href={`/profile/${mii.user.id}`} draggable={false} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
+// 										@{mii.user?.name}
+// 									</Link>
+// 								</div>
+// 							</div>
+// 						</div>
+// 					);
+// 				})}
+// 			</div>
+
+// 			<button
+// 				onClick={() => handleDecision("reject")}
+// 				className="pointer-coarse:hidden aspect-square cursor-pointer size-12 bg-zinc-50 border-2 border-zinc-300 rounded-full flex justify-center items-center text-2xl text-zinc-500 shadow-xs"
+// 			>
+// 				<Icon icon="material-symbols:close-rounded" />
+// 			</button>
+// 		</div>
+// 	);
+// }

frontend/src/components/admin/regenerate-images.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Icon } from "@iconify/react";
+import SubmitButton from "../submit-button";
+
+export default function RegenerateImagesButton() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const handleSubmit = async () => {
+		const response = await fetch("/api/admin/regenerate-metadata-images", { method: "PATCH" });
+
+		if (!response.ok) {
+			const data = await response.json();
+			setError(data.error);
+
+			return;
+		}
+
+		close();
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} className="pill button w-fit">
+				Regenerate all Mii metadata images
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Regenerate Images</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This will delete and regenerate every metadata image.</p>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<SubmitButton onClick={handleSubmit} />
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/admin/report-tabs.tsx

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

frontend/src/components/admin/reports.tsx

@@ -0,0 +1,202 @@
+// import { revalidatePath } from "next/cache";
+
+// import { Icon } from "@iconify/react";
+// import { ReportStatus } from "@prisma/client";
+
+// import { prisma } from "@/lib/prisma";
+// import ReportTabs from "./report-tabs";
+
+// const PAGE_SIZE = 20;
+
+// export default async function Reports({ searchParams }: { searchParams: { status?: string; page?: string } }) {
+// 	const status = searchParams.status as ReportStatus | undefined;
+// 	const page = Number(searchParams.page ?? 1);
+
+// 	const [reports, total] = await Promise.all([
+// 		prisma.report.findMany({
+// 			where: status ? { status } : undefined,
+// 			orderBy: { createdAt: "desc" },
+// 			skip: (page - 1) * PAGE_SIZE,
+// 			take: PAGE_SIZE,
+// 		}),
+// 		prisma.report.count({
+// 			where: status ? { status } : undefined,
+// 		}),
+// 	]);
+
+// 	const totalPages = Math.ceil(total / PAGE_SIZE);
+
+// 	const updateStatus = async (formData: FormData) => {
+// 		"use server";
+// 		const id = Number(formData.get("id"));
+// 		const status = formData.get("status") as ReportStatus;
+
+// 		await prisma.report.update({
+// 			where: { id },
+// 			data: { status },
+// 		});
+
+// 		revalidatePath("/admin");
+// 	};
+
+// 	return (
+// 		<div className="bg-orange-100 rounded-xl border-2 border-orange-400">
+// 			<ReportTabs status={status} />
+
+// 			{/* Grid */}
+// 			<div className="grid grid-cols-2 gap-2 p-2 max-lg:grid-cols-1">
+// 				{reports.map((report) => (
+// 					<div key={report.id} className="p-4 bg-white border border-orange-300 shadow-sm rounded-md">
+// 						<div className="w-full overflow-x-scroll">
+// 							<div className="flex gap-1 w-max">
+// 								<span
+// 									className={`text-xs font-semibold px-2 py-1 rounded-full border ${
+// 										report.reportType == "USER" ? "bg-red-200 text-red-800 border-red-400" : "bg-cyan-200 text-cyan-800 border-cyan-400"
+// 									}`}
+// 								>
+// 									{report.reportType}
+// 								</span>
+
+// 								<span
+// 									className={`text-xs font-semibold px-2 py-1 rounded-full border ${
+// 										report.status == "OPEN"
+// 											? "bg-orange-200 text-orange-800 border-orange-400"
+// 											: report.status == "RESOLVED"
+// 												? "bg-green-200 text-green-800 border-green-400"
+// 												: "bg-zinc-200 text-zinc-800 border-zinc-400"
+// 									}`}
+// 								>
+// 									{report.status}
+// 								</span>
+
+// 								<span className="ml-2 flex items-center gap-1 text-sm text-zinc-500">
+// 									<Icon icon="lucide:calendar" className="text-base" />
+// 									{report.createdAt.toLocaleString("en-GB", {
+// 										day: "2-digit",
+// 										month: "long",
+// 										year: "numeric",
+// 										hour: "2-digit",
+// 										minute: "2-digit",
+// 										second: "2-digit",
+// 										timeZone: "UTC",
+// 									})}{" "}
+// 									UTC
+// 								</span>
+// 							</div>
+// 						</div>
+
+// 						<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">
+// 									{report.targetId}
+// 								</a>
+// 							</div>
+
+// 							<div>
+// 								<p>Creator ID</p>
+// 								<a href={`/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">
+// 									{report.authorId}
+// 								</a>
+// 							</div>
+
+// 							<div>
+// 								<p>Reason</p>
+// 								<p className="font-medium text-black text-sm">{report.reason}</p>
+// 							</div>
+// 						</div>
+
+// 						<div className="mt-4 border border-orange-200 bg-orange-100/50 rounded-md p-2">
+// 							<p className="text-zinc-600 text-xs">Notes</p>
+// 							<p>{report.reasonNotes}</p>
+// 						</div>
+
+// 						<div className="mt-4 flex gap-4">
+// 							<form action={updateStatus}>
+// 								<input type="hidden" name="id" value={report.id} />
+// 								<input type="hidden" name="status" value={"OPEN"} />
+
+// 								<button
+// 									type="submit"
+// 									aria-label="Open"
+// 									className="cursor-pointer text-orange-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-orange-400/15"
+// 								>
+// 									<Icon icon="mdi:alert-circle" className="text-xl" />
+// 									<span className="text-sm">Open</span>
+// 								</button>
+// 							</form>
+// 							<form action={updateStatus}>
+// 								<input type="hidden" name="id" value={report.id} />
+// 								<input type="hidden" name="status" value={"RESOLVED"} />
+
+// 								<button
+// 									type="submit"
+// 									aria-label="Resolve"
+// 									className="cursor-pointer text-green-500 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-green-500/15"
+// 								>
+// 									<Icon icon="mdi:check-circle" className="text-xl" />
+// 									<span className="text-sm">Resolve</span>
+// 								</button>
+// 							</form>
+// 							<form action={updateStatus}>
+// 								<input type="hidden" name="id" value={report.id} />
+// 								<input type="hidden" name="status" value={"DISMISSED"} />
+
+// 								<button
+// 									type="submit"
+// 									aria-label="Dismiss"
+// 									className="cursor-pointer text-zinc-400 flex items-center gap-1 p-1.5 rounded-lg transition-colors hover:bg-zinc-400/15"
+// 								>
+// 									<Icon icon="mdi:close-circle" className="text-xl" />
+// 									<span className="text-sm">Dismiss</span>
+// 								</button>
+// 							</form>
+// 						</div>
+// 					</div>
+// 				))}
+// 			</div>
+
+// 			{reports.length === 0 && (
+// 				<div className="text-center py-12 text-gray-500">
+// 					<p className="text-lg font-medium">No reports to display</p>
+// 					<p className="text-sm">Reports will appear here when users submit them</p>
+// 				</div>
+// 			)}
+
+// 			{/* Pagination */}
+// 			{totalPages > 1 && (
+// 				<div className="flex justify-between items-center p-3 border-t border-orange-300">
+// 					<span className="text-sm text-orange-700">{total} total</span>
+// 					<div className="flex items-center gap-3">
+// 						{page > 1 && (
+// 							<a
+// 								href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page - 1) })}`}
+// 								className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
+// 							>
+// 								Previous
+// 							</a>
+// 						)}
+// 						<span className="text-sm text-orange-700">
+// 							Page {page} of {totalPages}
+// 						</span>
+// 						{page < totalPages && (
+// 							<a
+// 								href={`/admin?${new URLSearchParams({ ...(status && { status }), page: String(page + 1) })}`}
+// 								className="text-sm px-3 py-1 rounded-full font-medium border bg-white text-orange-700 border-orange-300 hover:bg-orange-50 transition-colors"
+// 							>
+// 								Next
+// 							</a>
+// 						)}
+// 					</div>
+// 				</div>
+// 			)}
+// 		</div>
+// 	);
+// }

frontend/src/components/admin/return-to-island.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Icon } from "@iconify/react";
+import { redirect } from "next/navigation";
+
+interface Props {
+	hasExpired: boolean;
+}
+
+export default function ReturnToIsland({ hasExpired }: Props) {
+	const [isChecked, setIsChecked] = useState(false);
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const handleClick = async () => {
+		const response = await fetch("/api/return", { method: "DELETE" });
+
+		if (!response.ok) {
+			const data = await response.json();
+			setError(data.error);
+
+			return;
+		}
+
+		redirect("/");
+	};
+
+	return (
+		<>
+			<div className="flex justify-center items-center gap-2">
+				<input
+					type="checkbox"
+					id="agreement"
+					disabled={hasExpired}
+					checked={isChecked}
+					onChange={(e) => setIsChecked(e.target.checked)}
+					className={`checkbox ${hasExpired && "text-zinc-600 bg-zinc-100! border-zinc-300!"}`}
+				/>
+				<label htmlFor="agreement" className={`${hasExpired && "text-zinc-500"}`}>
+					I Agree
+				</label>
+			</div>
+
+			<hr className="border-zinc-300 mt-3 mb-4" />
+
+			{error && <span className="text-red-400 font-bold mb-2.5">Error: {error}</span>}
+			<button disabled={!isChecked} aria-label="Travel Back Home" onClick={handleClick} className="pill button gap-2 w-fit self-center">
+				<Icon icon="ic:round-home" fontSize={24} />
+				Travel Back
+			</button>
+		</>
+	);
+}

frontend/src/components/admin/user-management.tsx

@@ -0,0 +1,316 @@
+// WARNING: this code is quite trash
+
+import { useState } from "react";
+
+import { Icon } from "@iconify/react";
+import { Prisma, PunishmentType } from "@prisma/client";
+
+import ProfilePicture from "../profile-picture";
+import SubmitButton from "../submit-button";
+import PunishmentDeletionDialog from "./punishment-deletion-dialog";
+
+interface ApiResponse {
+	success: boolean;
+	name: string;
+	image: string;
+	createdAt: string;
+	punishments: Prisma.PunishmentGetPayload<{
+		include: {
+			violatingMiis: true;
+		};
+	}>[];
+}
+
+interface MiiList {
+	id: number;
+	reason: string;
+}
+
+export default function Punishments() {
+	const [userId, setUserId] = useState(-1);
+	const [user, setUser] = useState<ApiResponse | undefined>();
+
+	const [type, setType] = useState<PunishmentType>("WARNING");
+	const [duration, setDuration] = useState(1);
+	const [notes, setNotes] = useState("");
+	const [reasons, setReasons] = useState("");
+
+	const [miiList, setMiiList] = useState<MiiList[]>([]);
+	const [newMii, setNewMii] = useState<MiiList>({
+		id: 0,
+		reason: "",
+	});
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const addMiiToList = () => {
+		if (newMii.id && newMii.reason) {
+			setMiiList([...miiList, { ...newMii, id: Number(newMii.id) }]);
+			setNewMii({ id: 0, reason: "" });
+		}
+	};
+
+	const removeMiiFromList = (index: number) => {
+		setMiiList(miiList.filter((_, i) => i !== index));
+	};
+
+	const handleLookup = async () => {
+		const response = await fetch(`/api/admin/lookup?id=${userId}`);
+		const data = await response.json();
+		setUser(data);
+	};
+
+	const handleSubmit = async () => {
+		const response = await fetch(`/api/admin/punish?id=${userId}`, {
+			method: "POST",
+			body: JSON.stringify({
+				type,
+				duration,
+				notes,
+				reasons: reasons.split(","),
+				miiReasons: miiList,
+			}),
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+		}
+
+		// Set all inputs to empty/default
+		setType("WARNING");
+		setDuration(1);
+		setNotes("");
+		setReasons("");
+		setMiiList([]);
+		setNewMii({ id: 0, reason: "" });
+		setError("");
+
+		await handleLookup();
+	};
+
+	return (
+		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 gap-2">
+			<div className="flex justify-center items-center gap-2">
+				<input
+					type="number"
+					placeholder="Enter user ID to lookup..."
+					name="user-id"
+					value={userId !== -1 ? userId : ""}
+					onChange={(e) => setUserId(Number(e.target.value))}
+					className="pill input w-full max-w-lg"
+				/>
+				<button onClick={handleLookup} className="pill button">
+					Lookup User
+				</button>
+			</div>
+
+			{user && (
+				<div className="grid grid-cols-2 gap-2 mt-2 max-lg:grid-cols-1">
+					<div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm">
+						<div className="flex gap-1">
+							<ProfilePicture src={user.image} width={96} height={96} className="rounded-full border-2 border-orange-400" />
+							<div className="p-2 flex flex-col">
+								<p className="text-xl font-bold">{user.name}</p>
+								<p className="text-black/60 text-sm font-medium">@{user.name}</p>
+								<p className="text-sm mt-auto">
+									<span className="font-medium">Created:</span>{" "}
+									{new Date(user.createdAt).toLocaleString("en-GB", {
+										day: "2-digit",
+										month: "long",
+										year: "numeric",
+										hour: "2-digit",
+										minute: "2-digit",
+										second: "2-digit",
+										timeZone: "UTC",
+									})}{" "}
+									UTC
+								</p>
+							</div>
+						</div>
+
+						<hr className="border-zinc-300 my-3" />
+
+						<div className="flex flex-col gap-2">
+							{user.punishments.length === 0 ? (
+								<p className="text-center text-zinc-500 my-2">No punishments found.</p>
+							) : (
+								<>
+									{user.punishments.map((punishment) => (
+										<div
+											key={punishment.id}
+											className={`border rounded-lg p-3 space-y-1 ${
+												punishment.type === "WARNING"
+													? "bg-yellow-50 border-yellow-400"
+													: punishment.type === "TEMP_EXILE"
+														? "bg-orange-100 border-orange-200"
+														: "bg-red-50 border-red-200"
+											}`}
+										>
+											<div className="flex items-center justify-between mb-2">
+												<span
+													className={`border px-2 py-1 rounded text-xs font-semibold ${
+														punishment.type === "WARNING"
+															? "bg-yellow-200 text-yellow-800 border-yellow-500"
+															: punishment.type === "TEMP_EXILE"
+																? "bg-orange-200 text-orange-800 border-orange-500"
+																: "bg-red-200 text-red-800 border-red-500"
+													}`}
+												>
+													{punishment.type}
+												</span>
+
+												<div className="flex items-center gap-2">
+													<span className="text-sm text-zinc-600">
+														{new Date(punishment.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
+													</span>
+													<PunishmentDeletionDialog punishmentId={punishment.id} />
+												</div>
+											</div>
+											<p className="text-sm text-zinc-600">
+												<strong>Notes:</strong> {punishment.notes}
+											</p>
+											{punishment.type !== "WARNING" && (
+												<p className="text-sm text-zinc-600">
+													<strong>Expires:</strong>{" "}
+													{punishment.expiresAt
+														? new Date(punishment.expiresAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
+														: "Never"}
+												</p>
+											)}
+											{punishment.type !== "PERM_EXILE" && (
+												<p className="text-sm text-zinc-600">
+													<strong>Returned:</strong> {JSON.stringify(punishment.returned)}
+												</p>
+											)}
+											<p className="text-sm text-zinc-600">
+												<strong>Reasons:</strong>
+											</p>
+											<ul className="ml-8 list-disc text-sm text-zinc-600">
+												{punishment.reasons.map((reason, index) => (
+													<li key={index}>{reason}</li>
+												))}
+											</ul>
+											<p className="text-sm text-zinc-600">
+												<strong>Mii Reasons:</strong>
+											</p>
+											<ul className="ml-8 list-disc text-sm text-zinc-600">
+												{punishment.violatingMiis.map((mii) => (
+													<li key={mii.miiId}>
+														{mii.miiId}: {mii.reason}
+													</li>
+												))}
+											</ul>
+										</div>
+									))}
+								</>
+							)}
+						</div>
+					</div>
+
+					<div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm flex flex-col gap-1">
+						{/* Punishment type */}
+						<p className="text-sm">Punishment Type</p>
+						<select name="punishment-type" value={type} onChange={(e) => setType(e.target.value as PunishmentType)} className="pill input">
+							<option value="WARNING">Warning</option>
+							<option value="TEMP_EXILE">Temporary Exile</option>
+							<option value="PERM_EXILE">Permanent Exile</option>
+						</select>
+
+						{/* Punishment duration */}
+						{type === "TEMP_EXILE" && (
+							<>
+								<p className="text-sm">Duration</p>
+								<select name="punishment-duration" value={duration} onChange={(e) => setDuration(Number(e.target.value))} className="pill input">
+									<option value="1">1 Day</option>
+									<option value="7">7 Days</option>
+									<option value="30">30 Days</option>
+								</select>
+							</>
+						)}
+
+						{/* Punishment notes */}
+						<p className="text-sm">Notes</p>
+						<textarea
+							rows={2}
+							maxLength={256}
+							placeholder="Type notes here for the punishment..."
+							className="pill input rounded-xl! resize-none"
+							value={notes}
+							onChange={(e) => setNotes(e.target.value)}
+						/>
+
+						{/* Punishment profile-related reasons */}
+						<p className="text-sm">Profile-related reasons (split by comma)</p>
+						<textarea
+							rows={2}
+							maxLength={256}
+							placeholder="Type profile-related reasons here for the punishment..."
+							className="pill input rounded-xl! resize-none"
+							value={reasons}
+							onChange={(e) => setReasons(e.target.value)}
+						/>
+
+						{/* Punishment mii-related reasons */}
+						<p className="text-sm">Mii-related reasons</p>
+						<div className="bg-orange-100 border border-orange-300 rounded-lg p-4">
+							{/* Add Mii Form */}
+							<div className="flex gap-2">
+								<input
+									type="number"
+									placeholder="Mii ID"
+									className="pill input w-24 text-sm"
+									value={newMii.id}
+									onChange={(e) => setNewMii({ ...newMii, id: Number(e.target.value) })}
+								/>
+								<input
+									type="text"
+									placeholder="Reason for this Mii..."
+									className="pill input flex-1 text-sm"
+									value={newMii.reason}
+									onChange={(e) => setNewMii({ ...newMii, reason: e.target.value })}
+								/>
+								<button type="button" aria-label="Add Mii" onClick={addMiiToList} className="pill button aspect-square p-2.5!">
+									<Icon icon="ic:baseline-plus" className="size-4" />
+								</button>
+							</div>
+
+							{/* Mii List */}
+							{miiList.length > 0 && (
+								<div className="mt-2 space-y-1">
+									<p className="text-sm font-medium text-black/50">Violating Miis ({miiList.length})</p>
+									{miiList.map((mii, index) => (
+										<div key={index} className="bg-white border border-orange-200 rounded-md p-3 flex items-center justify-between">
+											<div className="flex-1">
+												<div className="flex items-center gap-2">
+													<span className="bg-orange-200 text-orange-800 border border-orange-400 px-2 py-1 rounded text-xs font-semibold">ID: {mii.id}</span>
+													<span className="text-sm text-gray-500">{mii.reason}</span>
+												</div>
+											</div>
+											<button
+												type="button"
+												aria-label="Remove Mii"
+												onClick={() => removeMiiFromList(index)}
+												className="cursor-pointer text-red-500 hover:text-red-700 transition-colors"
+											>
+												<Icon icon="iconamoon:trash" className="size-4" />
+											</button>
+										</div>
+									))}
+								</div>
+							)}
+
+							{miiList.length === 0 && <p className="text-center text-zinc-500 text-sm my-4">No Miis added yet</p>}
+						</div>
+
+						<div className="flex justify-between items-center mt-2">
+							{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+							<SubmitButton onClick={handleSubmit} className="ml-auto" />
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/components/carousel.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+import ImageViewer from "./image-viewer";
+
+interface Props {
+	images: string[];
+	className?: string;
+}
+
+export default function Carousel({ images, className }: Props) {
+	const [emblaRef, emblaApi] = useEmblaCarousel({ duration: 15 });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+	const [isFocused, setIsFocused] = useState(false);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		emblaApi.reInit();
+		setScrollSnaps(emblaApi.scrollSnapList());
+		setSelectedIndex(0);
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [images, emblaApi]);
+
+	// Handle keyboard events
+	useEffect(() => {
+		if (!isFocused || !emblaApi) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "ArrowLeft") emblaApi.scrollPrev();
+			else if (event.key === "ArrowRight") emblaApi.scrollNext();
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [isFocused, emblaApi]);
+
+	return (
+		<div className="relative w-full h-fit" tabIndex={0} onMouseEnter={() => setIsFocused(true)} onMouseLeave={() => setIsFocused(false)}>
+			<div className={`overflow-hidden rounded-xl bg-zinc-300 ${className ?? ""}`} ref={emblaRef}>
+				<div className="flex">
+					{images.map((src, index) => (
+						<div key={index} className="shrink-0 w-full">
+							<ImageViewer src={src} alt="mii image" width={240} height={160} className="w-full h-auto aspect-3/2 object-contain" images={images} />
+						</div>
+					))}
+				</div>
+			</div>
+
+			{images.length > 1 && (
+				<>
+					<button
+						type="button"
+						aria-label="Scroll Carousel Left"
+						onClick={() => emblaApi?.scrollPrev()}
+						disabled={!emblaApi?.canScrollPrev()}
+						className={`absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
+							emblaApi?.canScrollPrev() ? "opacity-100 cursor-pointer" : "opacity-50"
+						}`}
+					>
+						<Icon icon="ic:round-chevron-left" />
+					</button>
+					<button
+						type="button"
+						aria-label="Scroll Carousel Right"
+						onClick={() => emblaApi?.scrollNext()}
+						disabled={!emblaApi?.canScrollNext()}
+						className={`absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
+							emblaApi?.canScrollNext() ? "opacity-100 cursor-pointer" : "opacity-50"
+						}`}
+					>
+						<Icon icon="ic:round-chevron-right" />
+					</button>
+				</>
+			)}
+
+			<div className="flex justify-center p-2 gap-2 absolute right-0">
+				{scrollSnaps.map((_, index) => (
+					<button
+						key={index}
+						type="button"
+						aria-label={`Go to ${index} in Carousel`}
+						onClick={() => emblaApi?.scrollTo(index)}
+						className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}

frontend/src/components/description.tsx

@@ -0,0 +1,42 @@
+import { Icon } from "@iconify/react";
+
+interface Props {
+	text: string;
+	className?: string;
+}
+
+// Adds fancy formatting to links
+export default function Description({ text, className }: Props) {
+	const urlRegex = /(https?:\/\/[^\s]+)/g;
+	const parts = text.split(urlRegex);
+
+	return (
+		<p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}>
+			{parts.map(async (part, index) => {
+				try {
+					// Check if it's a URL
+					if (!urlRegex.test(part)) throw new Error("Not a URL");
+					const url = new URL(part);
+
+					return (
+						<a
+							key={index}
+							href={`/out?url=${encodeURIComponent(part)}`}
+							target="_blank"
+							className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
+							title={`Go to ${url.hostname}`}
+						>
+							{url.hostname}
+							{url.pathname !== "/" ? url.pathname : ""}
+							{url.search}
+							<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+						</a>
+					);
+				} catch {
+					// Normal text/Invalid URL fallback
+					return <span key={index}>{part}</span>;
+				}
+			})}
+		</p>
+	);
+}

frontend/src/components/dropzone.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode, useState } from "react";
+import { type DropzoneOptions, type FileWithPath, useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	onDrop: (acceptedFiles: FileWithPath[]) => void;
+	options?: DropzoneOptions;
+	children?: ReactNode;
+}
+
+export default function Dropzone({ onDrop, options, children }: Props) {
+	const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+	const handleDrop = (acceptedFiles: FileWithPath[]) => {
+		setIsDraggingOver(false);
+		onDrop(acceptedFiles);
+	};
+
+	const { getRootProps, getInputProps } = useDropzone({
+		onDrop: handleDrop,
+		maxFiles: 3,
+		accept: {
+			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".png", ".heic"],
+		},
+		...options,
+	});
+
+	return (
+		<div
+			{...getRootProps()}
+			onDragOver={() => setIsDraggingOver(true)}
+			onDragLeave={() => setIsDraggingOver(false)}
+			className={`relative bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border-2 border-dashed border-amber-500 select-none size-full transition-all duration-200 ${
+				isDraggingOver && "scale-105 brightness-90 shadow-xl"
+			}`}
+		>
+			{/* Used to transition from border-dashed to border-solid */}
+			<div
+				className={`absolute inset-0 rounded-[10px] outline-2 outline-amber-500 transition-opacity duration-300 ${
+					isDraggingOver ? "opacity-100" : "opacity-0"
+				}`}
+			></div>
+
+			<input {...getInputProps({ multiple: options?.maxFiles ? options.maxFiles > 1 : false })} />
+			<Icon icon="material-symbols:upload" fontSize={48} />
+			{children}
+		</div>
+	);
+}

frontend/src/components/footer.astro

@@ -0,0 +1,43 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
+<footer class="mt-auto">
+	<div class="max-w-4xl mx-auto px-4 py-4">
+		{/* Main disclaimer */}
+		<div class="text-center mb-2">
+			<p class="text-sm text-zinc-600 font-medium">TomodachiShare is not affiliated with Nintendo</p>
+		</div>
+
+		{/* Links section */}
+		<div class="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
+			<a href="/terms-of-service" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline"> Terms of Service </a>
+
+			<span class="text-zinc-400 hidden sm:inline" aria-hidden="true">•</span>
+
+			<a href="/privacy" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline"> Privacy Policy </a>
+
+			<span class="text-zinc-400 hidden sm:inline" aria-hidden="true">•</span>
+
+			<a
+				href="https://discord.gg/48cXBFKvWQ"
+				target="_blank"
+				class="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
+			>
+				<Icon name="ic:baseline-discord" class="text-lg" />
+				Discord
+			</a>
+
+			<span class="text-zinc-400 hidden sm:inline" aria-hidden="true"> • </span>
+
+			<a href="https://trafficlunar.net" target="_blank" class="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
+				Made by <span class="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
+			</a>
+		</div>
+
+		{/* Copyright */}
+		<div class="text-center mt-4 mb-4">
+			<p class="text-xs text-zinc-400">© {new Date().getFullYear()} TomodachiShare. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

frontend/src/components/header-profile.tsx

@@ -0,0 +1,60 @@
+import { Icon } from "@iconify/react";
+import { useEffect } from "react";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
+
+export default function HeaderProfile() {
+	const API_BASE_URL = import.meta.env.PUBLIC_API_URL;
+	const $session = useStore(session);
+
+	useEffect(() => {
+		fetch(`${API_BASE_URL}/api/auth/session`, { credentials: "include" })
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to get session");
+				return res.json();
+			})
+			.then((data) => {
+				session.set(data);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}, []);
+
+	return (
+		<>
+			{!$session?.user ? (
+				<li>
+					<a href={"/login"} className="pill button h-full">
+						Login
+					</a>
+				</li>
+			) : (
+				<>
+					<li title="Your profile">
+						<a
+							href={`/profile/${$session?.user?.id}`}
+							aria-label="Go to profile"
+							className="pill button gap-2! p-0! h-full max-w-64"
+							data-tooltip="Your Profile"
+						>
+							<img
+								src={$session?.user?.image ?? "/guest.png"}
+								alt="profile picture"
+								width={40}
+								height={40}
+								className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
+							/>
+							<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
+						</a>
+					</li>
+					<li title="Logout">
+						<a href={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
+							<Icon icon="ic:round-logout" fontSize={24} />
+						</a>
+					</li>
+				</>
+			)}
+		</>
+	);
+}

frontend/src/components/header.astro

@@ -0,0 +1,35 @@
+---
+import { Icon } from "astro-icon/components";
+import SearchBar from "./search-bar";
+import HeaderProfile from "./header-profile";
+---
+
+<header
+	class="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1"
+>
+	<a href={"/"} aria-label="Go to Home Page" class="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2">
+		<img src="/logo.svg" width={56} height={45} alt="logo" />
+		TomodachiShare
+	</a>
+
+	<div class="flex justify-center max-lg:justify-end max-md:justify-center">
+		<SearchBar client:only />
+	</div>
+
+	<ul class="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
+		<li title="Random Mii">
+			<a
+				href={`${import.meta.env.PUBLIC_API_URL}/random`}
+				aria-label="Go to Random Link"
+				class="pill button p-0! h-full aspect-square"
+				data-tooltip="Go to a Random Mii"
+			>
+				<Icon name="mdi:dice-3" size={28} />
+			</a>
+		</li>
+		<li>
+			<a href={"/submit"} class="pill button h-full"> Submit </a>
+		</li>
+		<HeaderProfile client:only />
+	</ul>
+</header>

frontend/src/components/image-viewer.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	src: string;
+	alt: string;
+	width: number;
+	height: number;
+	className?: string;
+	images?: string[];
+}
+
+export default function ImageViewer({ src, alt, width, height, className, images = [] }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+
+		// Keep order of images whilst opening at src prop
+		const index = images.indexOf(src);
+		if (index !== -1) {
+			emblaApi.scrollTo(index, true);
+			setSelectedIndex(index);
+		}
+
+		setScrollSnaps(emblaApi.scrollSnapList());
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi, images, src]);
+
+	// Handle keyboard events
+	useEffect(() => {
+		if (!isOpen || !emblaApi) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "ArrowLeft") emblaApi.scrollPrev();
+			else if (event.key === "ArrowRight") emblaApi.scrollNext();
+			else if (event.key === "Escape") close();
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [isOpen, emblaApi]);
+
+	const imagesMap = images.length === 0 ? [src] : images;
+
+	return (
+		<>
+			{/* not inserting pixelated image-rendering here because i thought it looked a bit weird */}
+			<img src={src} alt={alt} width={width} height={height} loading="lazy" onClick={() => setIsOpen(true)} className={`cursor-pointer ${className}`} />
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`absolute inset-0 backdrop-brightness-40 backdrop-contrast-125 backdrop-blur-sm transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+						/>
+
+						<button
+							type="button"
+							aria-label="Close"
+							onClick={close}
+							className={`pill button p-2! size-11 aspect-square text-2xl absolute top-4 right-4 shrink-0 ${isVisible ? "opacity-100" : "opacity-0"}`}
+						>
+							<Icon icon="material-symbols:close-rounded" />
+						</button>
+
+						<div
+							className={`overflow-hidden max-w-4xl h-[75vh] max-md:h-[55vh] transition-discrete duration-300 ${isVisible ? "scale-100 opacity-100" : "scale-90 opacity-0"}`}
+							ref={emblaRef}
+						>
+							<div className="flex h-full">
+								{imagesMap.map((image, index) => (
+									<div key={index} className="flex-[0_0_100%] h-full flex items-center px-4">
+										<img
+											src={image}
+											alt={alt}
+											width={896}
+											height={896}
+											loading={Math.abs(index - selectedIndex) <= 1 ? "eager" : "lazy"}
+											className="max-w-full max-h-full object-contain drop-shadow-lg"
+											style={{ imageRendering: image.includes("qr-code") ? "pixelated" : "auto" }}
+										/>
+									</div>
+								))}
+							</div>
+						</div>
+
+						{images.length > 1 && (
+							<>
+								{/* Carousel counter */}
+								<div
+									className={`flex justify-center gap-2 bg-orange-300 w-15 font-semibold text-sm py-1 rounded-full border-2 border-orange-400 absolute top-4 left-4 transition-opacity duration-300 ${
+										isVisible ? "opacity-100" : "opacity-0"
+									}`}
+								>
+									{selectedIndex + 1} / {images.length}
+								</div>
+
+								{/* Carousel buttons */}
+								{/* Prev button */}
+								<button
+									type="button"
+									aria-label="Scroll Carousel Left"
+									onClick={() => emblaApi?.scrollPrev()}
+									className={`absolute left-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+								>
+									<Icon icon="ic:round-chevron-left" />
+								</button>
+								{/* Next button */}
+								<button
+									type="button"
+									aria-label="Scroll Carousel Right"
+									onClick={() => emblaApi?.scrollNext()}
+									className={`absolute right-2 top-1/2 -translate-y-1/2 pill button p-0.5! aspect-square text-4xl transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+								>
+									<Icon icon="ic:round-chevron-right" />
+								</button>
+
+								{/* Carousel snaps */}
+								<div
+									className={`flex justify-center gap-2 bg-orange-300 p-2.5 rounded-full border-2 border-orange-400 absolute left-1/2 -translate-x-1/2 bottom-4 transition-opacity duration-300 ${
+										isVisible ? "opacity-100" : "opacity-0"
+									}`}
+								>
+									{scrollSnaps.map((_, index) => (
+										<button
+											key={index}
+											aria-label={`Go to ${index} in Carousel`}
+											onClick={() => emblaApi?.scrollTo(index)}
+											className={`size-2 cursor-pointer rounded-full transition-all duration-300 ${index === selectedIndex ? "bg-slate-800 w-8" : "bg-slate-800/30"}`}
+										/>
+									))}
+								</div>
+							</>
+						)}
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/like-button.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { Icon, loadIcons } from "@iconify/react";
+import { abbreviateNumber } from "../lib/abbreviation";
+
+interface Props {
+	likes: number;
+	miiId?: number | undefined;
+	isLiked: boolean;
+	disabled?: boolean;
+	abbreviate?: boolean;
+	big?: boolean;
+}
+
+export default function LikeButton({ likes, isLiked, miiId, disabled, abbreviate, big }: Props) {
+	const [isLikedState, setIsLikedState] = useState(isLiked);
+	const [likesState, setLikesState] = useState(likes);
+	const [isAnimating, setIsAnimating] = useState(false);
+
+	const onClick = async () => {
+		// if (disabled) return;
+		// if (!session.data?.user) {
+		// 	router.push("/login");
+		// 	return;
+		// }
+		// setIsLikedState(!isLikedState);
+		// setLikesState(isLikedState ? likesState - 1 : likesState + 1);
+		// // Trigger animation
+		// if (!isLikedState) {
+		// 	setIsAnimating(true);
+		// 	setTimeout(() => setIsAnimating(false), 1000); // match animation duration
+		// }
+		// const response = await fetch(`/api/mii/${miiId}/like`, { method: "PATCH" });
+		// if (response.ok) {
+		// 	const { liked, count } = await response.json();
+		// 	setIsLikedState(liked);
+		// 	setLikesState(count);
+		// } else {
+		// 	setIsLikedState(isLikedState);
+		// 	setLikesState(likesState);
+		// }
+	};
+
+	// Preload like button icons
+	useEffect(() => {
+		loadIcons(["icon-park-solid:like", "icon-park-outline:like"]);
+	}, []);
+
+	useEffect(() => {
+		setIsLikedState(isLiked);
+	}, [isLiked]);
+
+	return (
+		<button
+			onClick={onClick}
+			aria-label="Like"
+			className={`flex items-center gap-2 text-red-400 ${disabled ? "" : "cursor-pointer"} ${big ? "text-3xl" : "text-xl"}`}
+		>
+			<div className="relative">
+				<Icon icon={isLikedState ? "icon-park-solid:like" : "icon-park-outline:like"} className={`${isAnimating ? "animate-like " : ""}`} />
+				<div
+					className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-6 rounded-full bg-red-400/0 ${
+						isAnimating ? "bg-red-400/40 animate-ping" : ""
+					}`}
+				></div>
+			</div>
+
+			<span>{abbreviate ? abbreviateNumber(likesState) : likesState}</span>
+		</button>
+	);
+}

frontend/src/components/mii/author-buttons.tsx

@@ -0,0 +1,24 @@
+import { Icon } from "@iconify/react";
+import DeleteMiiButton from "./delete-mii-button";
+import type { Mii } from "@tomodachi-share/backend";
+
+interface Props {
+	mii: Mii | any;
+}
+
+export default function AuthorButtons({ mii }: Props) {
+	// const session = useSession();
+
+	// if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID)))
+	// 	return null;
+
+	return (
+		<>
+			<a aria-label="Edit Mii" href={`/edit/${mii.id}`}>
+				<Icon icon="mdi:pencil" />
+				<span>Edit</span>
+			</a>
+			<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
+		</>
+	);
+}

frontend/src/components/mii/dating-preferences.tsx

@@ -0,0 +1,35 @@
+import { type ChangeEvent } from "react";
+import { MiiGender } from "@tomodachi-share/backend";
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+
+interface Props {
+	data: SwitchMiiInstructions["datingPreferences"];
+	onChecked?: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>, gender: MiiGender) => void;
+}
+
+const DATING_PREFERENCES = ["Male", "Female", "Nonbinary"];
+
+export default function DatingPreferencesViewer({ data, onChecked }: Props) {
+	return (
+		<div className="flex flex-col gap-1.5">
+			{DATING_PREFERENCES.map((gender) => {
+				const genderEnum = gender.toUpperCase() as MiiGender;
+
+				return (
+					<div key={gender} className="flex gap-1.5">
+						<input
+							type="checkbox"
+							id={gender}
+							className="checkbox"
+							checked={data.includes(genderEnum)}
+							{...(onChecked ? { onChange: (e: ChangeEvent<HTMLInputElement>) => onChecked(e, genderEnum) } : { readOnly: true })}
+						/>
+						<label htmlFor={gender} className="text-sm select-none">
+							{gender}
+						</label>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

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

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+import LikeButton from "../like-button";
+import SubmitButton from "../submit-button";
+
+interface Props {
+	miiId: number;
+	miiName: string;
+	likes: number;
+	inMiiPage?: boolean;
+}
+
+export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+	const [inputMiiName, setInputMiiName] = useState("");
+
+	const handleSubmit = async () => {
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/mii/${miiId}/delete`, { method: "DELETE", credentials: "include" });
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		close();
+		window.location.reload(); // I would use router.refresh() here but the Mii list doesn't update
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			{inMiiPage ? (
+				<button onClick={() => setIsOpen(true)} aria-label="Delete Mii" className="cursor-pointer">
+					<Icon icon="mdi:trash" />
+					<span>Delete</span>
+				</button>
+			) : (
+				<button onClick={() => setIsOpen(true)} aria-label="Delete Mii" title="Delete Mii" data-tooltip="Delete" className="cursor-pointer aspect-square">
+					<Icon icon="mdi:trash" />
+				</button>
+			)}
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Delete Mii</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p>
+
+							<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden">
+								<img src={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} />
+								<div className="p-4 min-w-0">
+									<p className="text-xl font-bold line-clamp-3 wrap-anywhere" title={miiName}>
+										{miiName}
+									</p>
+									<LikeButton likes={likes} isLiked={true} disabled />
+								</div>
+							</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)}
+								autoCorrect="off"
+								autoComplete="off"
+								autoCapitalize="off"
+								spellCheck={false}
+							/>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<SubmitButton
+									onClick={handleSubmit}
+									text="Delete"
+									disabled={inputMiiName.trim() != miiName}
+									className="bg-red-400! border-red-500! hover:bg-red-500! disabled:bg-red-200! disabled:border-red-300!"
+								/>
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/mii/instructions.tsx

@@ -0,0 +1,254 @@
+import type { ReactNode } from "react";
+import DatingPreferencesViewer from "./dating-preferences";
+import PersonalityViewer from "./personality-viewer";
+
+import { type SwitchMiiInstructions, COLORS } from "@tomodachi-share/shared";
+
+interface Props {
+	instructions: Partial<SwitchMiiInstructions>;
+}
+
+interface SectionProps {
+	name: string;
+	instructions: Partial<SwitchMiiInstructions[keyof SwitchMiiInstructions]>;
+	children?: ReactNode;
+	isSubSection?: boolean;
+}
+
+const ORDINAL_SUFFIXES: Record<string, string> = {
+	one: "st",
+	two: "nd",
+	few: "rd",
+	other: "th",
+};
+const ordinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
+
+function not(value: any) {
+	return value !== undefined && value !== null;
+}
+
+function numberValue(value: number, cutoff: number = 25) {
+	return value === cutoff ? "0" : value > cutoff ? `+${value - cutoff}` : `${value - cutoff}`;
+}
+
+function GridPosition({ index, cols = 5 }: { index: number; cols?: number }) {
+	const row = Math.floor(index / cols) + 1;
+	const col = (index % cols) + 1;
+	const rowSuffix = ORDINAL_SUFFIXES[ordinalRules.select(row)];
+	const colSuffix = ORDINAL_SUFFIXES[ordinalRules.select(col)];
+
+	return `${row}${rowSuffix} row, ${col}${colSuffix} column`;
+}
+
+function ColorPosition({ color }: { color: number | undefined | 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 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+				Color menu on left, <GridPosition index={color} cols={1} />
+			</span>
+		);
+	}
+	if (color >= 108) {
+		return (
+			<span className="flex items-center">
+				<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>
+		);
+	}
+
+	return (
+		<span className="flex items-center">
+			<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>
+	);
+}
+
+interface TableCellProps {
+	label: string;
+	children: React.ReactNode;
+}
+
+function TableCell({ label, children }: TableCellProps) {
+	return (
+		<tr className={"border-b border-orange-300/50 last:border-0"}>
+			<td className={"py-0.5 pr-6 text-amber-700 font-semibold w-30 text-sm"}>{label}</td>
+			<td className={"py-0.5 text-amber-950"}>{children}</td>
+		</tr>
+	);
+}
+
+function Section({ name, instructions, children, isSubSection }: SectionProps) {
+	if (typeof instructions !== "object" || !instructions) return null;
+
+	const color = "color" in instructions ? instructions.color : undefined;
+	const height = "height" in instructions ? instructions.height : undefined;
+	const distance = "distance" in instructions ? instructions.distance : undefined;
+	const rotation = "rotation" in instructions ? instructions.rotation : undefined;
+	const size = "size" in instructions ? instructions.size : undefined;
+	const stretch = "stretch" in instructions ? instructions.stretch : undefined;
+
+	return (
+		<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>
+					{not(color) && (
+						<TableCell label="Color">
+							<ColorPosition color={color} />
+						</TableCell>
+					)}
+					{not(height) && <TableCell label="Height">{numberValue(height!, 0)}</TableCell>}
+					{not(distance) && <TableCell label="Distance">{numberValue(distance!, 0)}</TableCell>}
+					{not(rotation) && <TableCell label="Rotation">{numberValue(rotation!, 0)}</TableCell>}
+					{not(size) && <TableCell label="Size">{numberValue(size!, 0)}</TableCell>}
+					{not(stretch) && <TableCell label="Stretch">{numberValue(stretch!, 0)}</TableCell>}
+
+					{children}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default function MiiInstructions({ instructions }: Props) {
+	if (Object.keys(instructions).length === 0) return null;
+	const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
+
+	return (
+		<>
+			{head && (
+				<Section name="Head" instructions={head}>
+					{not(head.skinColor) && (
+						<TableCell label="Skin Color">
+							<ColorPosition color={head.skinColor} />
+						</TableCell>
+					)}
+				</Section>
+			)}
+			{hair && (
+				<Section name="Hair" instructions={hair}>
+					{not(hair.subColor) && (
+						<TableCell label="Sub Color">
+							<ColorPosition color={hair.subColor} />
+						</TableCell>
+					)}
+					{not(hair.subColor2) && (
+						<TableCell label="Sub Color (Back)">
+							<ColorPosition color={hair.subColor2} />
+						</TableCell>
+					)}
+					{not(hair.style) && <TableCell label="Tying Style">{hair.style}</TableCell>}
+					{not(hair.isFlipped) && <TableCell label="Flipped">{hair.isFlipped ? "Yes" : "No"}</TableCell>}
+				</Section>
+			)}
+			{eyebrows && <Section name="Eyebrows" instructions={eyebrows}></Section>}
+			{eyes && (
+				<Section name="Eyes" instructions={eyes}>
+					<Section isSubSection name="Tab 1" instructions={eyes.main} />
+					<Section isSubSection name="Tab 2" instructions={eyes.eyelashesTop} />
+					<Section isSubSection name="Tab 3" instructions={eyes.eyelashesBottom} />
+					<Section isSubSection name="Tab 4" instructions={eyes.eyelidTop} />
+					<Section isSubSection name="Tab 5" instructions={eyes.eyelidBottom} />
+					<Section isSubSection name="Tab 6" instructions={eyes.eyeliner} />
+					<Section isSubSection name="Tab 7" instructions={eyes.pupil} />
+				</Section>
+			)}
+			{nose && <Section name="Nose" instructions={nose}></Section>}
+			{lips && (
+				<Section name="Lips" instructions={lips}>
+					{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}>
+					{not(glasses.ringColor) && (
+						<TableCell label="Ring Color">
+							<ColorPosition color={glasses.ringColor} />
+						</TableCell>
+					)}
+					{not(glasses.shadesColor) && (
+						<TableCell label="Shades Color">
+							<ColorPosition color={glasses.shadesColor} />
+						</TableCell>
+					)}
+				</Section>
+			)}
+			{other && (
+				<Section name="Other" instructions={other}>
+					<Section isSubSection name="Tab 1" instructions={other.wrinkles1} />
+					<Section isSubSection name="Tab 2" instructions={other.wrinkles2} />
+					<Section isSubSection name="Tab 3" instructions={other.beard} />
+					<Section isSubSection name="Tab 4" instructions={other.moustache}>
+						{other.moustache && other.moustache.isFlipped && <TableCell label="Flipped">{other.moustache.isFlipped ? "Yes" : "No"}</TableCell>}
+					</Section>
+					<Section isSubSection name="Tab 5" instructions={other.goatee} />
+					<Section isSubSection name="Tab 6" instructions={other.mole} />
+					<Section isSubSection name="Tab 7" instructions={other.eyeShadow} />
+					<Section isSubSection name="Tab 8" instructions={other.blush} />
+				</Section>
+			)}
+
+			{(height || weight || datingPreferences || voice || personality) && (
+				<div className="p-3 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>
+
+					<table className="w-full">
+						<tbody>
+							{not(height) && <TableCell label="Height">{numberValue(height!, 64)}</TableCell>}
+							{not(weight) && <TableCell label="Weight">{numberValue(weight!, 64)}</TableCell>}
+						</tbody>
+					</table>
+					{birthday && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4>
+							<table className="w-full">
+								<tbody>
+									{not(birthday.day) && <TableCell label="Day">{birthday.day}</TableCell>}
+									{not(birthday.month) && <TableCell label="Month">{birthday.month}</TableCell>}
+									{not(birthday.age) && <TableCell label="Age">{birthday.age}</TableCell>}
+									{not(birthday.dontAge) && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>}
+								</tbody>
+							</table>
+						</div>
+					)}
+					{voice && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Voice</h4>
+							<table className="w-full">
+								<tbody>
+									{not(voice.speed) && <TableCell label="Speed">{numberValue(voice.speed!, 25)}</TableCell>}
+									{not(voice.pitch) && <TableCell label="Pitch">{numberValue(voice.pitch!, 25)}</TableCell>}
+									{not(voice.depth) && <TableCell label="Depth">{numberValue(voice.depth!, 25)}</TableCell>}
+									{not(voice.delivery) && <TableCell label="Delivery">{numberValue(voice.delivery!, 25)}</TableCell>}
+									{not(voice.tone) && <TableCell label="Tone">{voice.tone}</TableCell>}
+								</tbody>
+							</table>
+						</div>
+					)}
+					{datingPreferences && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Dating Preferences</h4>
+							<div className="w-min">
+								<DatingPreferencesViewer data={datingPreferences} />
+							</div>
+						</div>
+					)}
+					{personality && (
+						<div className="pl-2 not-nth-2:mt-4">
+							<h4 className="font-semibold text-xl text-amber-800 mb-1">Personality</h4>
+							<div className="w-min">
+								<PersonalityViewer data={personality} />
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+		</>
+	);
+}

frontend/src/components/mii/list/filter-menu.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useMemo, useState } from "react";
+import { Icon } from "@iconify/react";
+
+import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/backend";
+
+import PlatformSelect from "./platform-select";
+import TagFilter from "./tag-filter";
+import GenderSelect from "./gender-select";
+import OtherFilters from "./other-filters";
+import MakeupSelect from "./makeup-select";
+
+export default function FilterMenu() {
+	const searchParams = new URLSearchParams(window.location.search);
+
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+	const gender = (searchParams.get("gender") as MiiGender) || undefined;
+	const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined;
+	const rawTags = searchParams.get("tags") || "";
+	const rawExclude = searchParams.get("exclude") || "";
+	const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
+
+	const tags = useMemo(
+		() =>
+			rawTags
+				? rawTags
+						.split(",")
+						.map((tag) => tag.trim())
+						.filter((tag) => tag.length > 0)
+				: [],
+		[rawTags],
+	);
+	const exclude = useMemo(
+		() =>
+			rawExclude
+				? rawExclude
+						.split(",")
+						.map((tag) => tag.trim())
+						.filter((tag) => tag.length > 0)
+				: [],
+		[rawExclude],
+	);
+
+	const [filterCount, setFilterCount] = useState(tags.length);
+
+	// Filter menu button handler
+	const handleClick = () => {
+		if (!isOpen) {
+			setIsOpen(true);
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		} else {
+			setIsVisible(false);
+			setTimeout(() => {
+				setIsOpen(false);
+			}, 200);
+		}
+	};
+
+	// Count all active filters
+	useEffect(() => {
+		let count = tags.length + exclude.length;
+		if (platform) count++;
+		if (gender) count++;
+		if (allowCopying) count++;
+		if (makeup) count++;
+
+		setFilterCount(count);
+	}, [tags, exclude, platform, gender, allowCopying, makeup]);
+
+	return (
+		<div className="relative">
+			<button className="pill button gap-2" onClick={handleClick}>
+				<Icon icon="mdi:filter" className="text-xl" />
+				Filter
+				<span className="w-5">({filterCount})</span>
+			</button>
+
+			{isOpen && (
+				<div
+					className={`absolute w-80 left-0 top-full mt-8 z-40 flex flex-col items-center bg-orange-50
+						border-2 border-amber-500 rounded-2xl shadow-lg p-4 transition-discrete duration-200 ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`}
+				>
+					{/* Arrow */}
+					<div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div>
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Platform</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<PlatformSelect />
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
+						<hr className="grow border-zinc-300" />
+						<span>Gender</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<GenderSelect />
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Tags Include</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<TagFilter />
+
+					<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
+						<hr className="grow border-zinc-300" />
+						<span>Tags Exclude</span>
+						<hr className="grow border-zinc-300" />
+					</div>
+					<TagFilter isExclude />
+
+					{platform !== "THREE_DS" && (
+						<>
+							<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
+								<hr className="grow border-zinc-300" />
+								<span>Face Paint</span>
+								<hr className="grow border-zinc-300" />
+							</div>
+							<MakeupSelect />
+						</>
+					)}
+
+					<OtherFilters />
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/components/mii/list/gender-select.tsx

@@ -0,0 +1,72 @@
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import type { MiiGender, MiiPlatform } from "@tomodachi-share/backend";
+
+export default function GenderSelect() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
+	const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+
+	const handleClick = (gender: MiiGender) => {
+		const filter = selected === gender ? null : gender;
+		setSelected(filter);
+
+		const params = new URLSearchParams(searchParams);
+		params.set("page", "1");
+
+		if (filter) {
+			params.set("gender", filter);
+		} else {
+			params.delete("gender");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`, { scroll: false });
+			window.location.href = `?${params.toString()}`;
+		});
+	};
+
+	return (
+		<div className="flex gap-0.5 w-fit">
+			<button
+				onClick={() => handleClick("MALE")}
+				aria-label="Filter for Male Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+					selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div>
+				<Icon icon="foundation:male" className="text-blue-400" />
+			</button>
+
+			<button
+				onClick={() => handleClick("FEMALE")}
+				aria-label="Filter for Female Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+					selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div>
+				<Icon icon="foundation:female" className="text-pink-400" />
+			</button>
+
+			{platform !== "THREE_DS" && (
+				<button
+					onClick={() => handleClick("NONBINARY")}
+					aria-label="Filter for Nonbinary Miis"
+					data-tooltip-span
+					className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+						selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+					}`}
+				>
+					<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div>
+					<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+				</button>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,198 @@
+import crypto from "crypto";
+import seedrandom from "seedrandom";
+
+import { searchSchema } from "@tomodachi-share/shared/schemas";
+
+import SortSelect from "./sort-select";
+import Pagination from "./pagination";
+import FilterMenu from "./filter-menu";
+import MiiGrid from "./mii-grid";
+
+interface Props {
+	searchParams: URLSearchParams;
+	userId?: number; // Profiles
+	parentPage?: "likes" | "admin";
+}
+
+export default async function MiiList({ searchParams, userId, parentPage }: Props) {
+	const session = await auth();
+	const parsed = searchSchema.safeParse(searchParams);
+	if (!parsed.success) return <h1>{parsed.error.issues[0].message}</h1>;
+
+	const { q: query, sort, tags, exclude, platform, gender, makeup, allowCopying, quarantined, page = 1, limit = 24, seed } = parsed.data;
+
+	// My Likes page
+	let miiIdsLiked: number[] | undefined = undefined;
+
+	if (parentPage === "likes" && session?.user?.id) {
+		const likedMiis = await prisma.like.findMany({
+			where: { userId: Number(session.user.id) },
+			select: { miiId: true },
+		});
+		miiIdsLiked = likedMiis.map((like) => like.miiId);
+	}
+
+	const where: Prisma.MiiWhereInput = {
+		// 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
+		...(query && {
+			OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }, { description: { contains: query, mode: "insensitive" } }],
+		}),
+		// Tag filtering
+		...(tags && tags.length > 0 && { tags: { hasEvery: tags } }),
+		...(exclude && exclude.length > 0 && { NOT: { tags: { hasSome: exclude } } }),
+		// Platform
+		...(platform && { platform: { equals: platform } }),
+		// Gender
+		...(gender && { gender: { equals: gender } }),
+		// Allow Copying
+		...(allowCopying && { allowedCopying: true }),
+		// Makeup
+		...(makeup && { makeup: { equals: makeup } }),
+		// Quarantined
+		...(!quarantined && !userId && { quarantined: false }),
+	};
+
+	const select: Prisma.MiiSelect = {
+		id: true,
+		// Don't show when userId is specified
+		...(!userId && {
+			user: {
+				select: {
+					id: true,
+					name: true,
+				},
+			},
+		}),
+		platform: true,
+		name: true,
+		imageCount: true,
+		tags: true,
+		createdAt: true,
+		gender: true,
+		makeup: true,
+		allowedCopying: true,
+		quarantined: true,
+		in_queue: true,
+		// Mii liked check
+		...(session?.user?.id && {
+			likedBy: {
+				where: { userId: Number(session.user.id) },
+				select: { userId: true },
+			},
+		}),
+		// Like count
+		_count: {
+			select: { likedBy: true },
+		},
+	};
+
+	const skip = (page - 1) * limit;
+
+	let totalCount: number;
+	let filteredCount: number;
+	let miis: Prisma.MiiGetPayload<{ select: typeof select }>[];
+
+	if (sort === "random") {
+		// Get all IDs that match the where conditions
+		const matchingIds = await prisma.mii.findMany({
+			where,
+			select: { id: true },
+		});
+
+		totalCount = matchingIds.length;
+		filteredCount = Math.max(0, Math.min(limit, totalCount - skip));
+
+		if (matchingIds.length === 0) return;
+
+		// Use seed for consistent random results
+		const randomSeed = seed || crypto.randomInt(0, 1_000_000_000);
+		const rng = seedrandom(randomSeed.toString());
+
+		// Randomize all IDs using the Durstenfeld algorithm
+		for (let i = matchingIds.length - 1; i > 0; i--) {
+			const j = Math.floor(rng() * (i + 1));
+			[matchingIds[i], matchingIds[j]] = [matchingIds[j], matchingIds[i]];
+		}
+
+		// Convert to number[] array
+		const selectedIds = matchingIds.slice(skip, skip + limit).map((i) => i.id);
+
+		miis = await prisma.mii.findMany({
+			where: {
+				id: { in: selectedIds },
+			},
+			select,
+		});
+	} else {
+		// Sorting by likes, newest, or oldest
+		let orderBy: Prisma.MiiOrderByWithRelationInput[];
+
+		if (sort === "likes") {
+			orderBy = [{ likedBy: { _count: "desc" } }, { name: "asc" }];
+		} else if (sort === "oldest") {
+			orderBy = [{ createdAt: "asc" }, { name: "asc" }];
+		} else {
+			// default to newest
+			orderBy = [{ createdAt: "desc" }, { name: "asc" }];
+		}
+
+		[totalCount, filteredCount, miis] = await Promise.all([
+			prisma.mii.count({ where: { ...where, userId } }),
+			prisma.mii.count({ where, skip, take: limit }),
+			prisma.mii.findMany({
+				where,
+				orderBy,
+				select,
+				skip: (page - 1) * limit,
+				take: limit,
+			}),
+		]);
+	}
+
+	const lastPage = Math.ceil(totalCount / limit);
+
+	return (
+		<div className="w-full">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-md:flex-col">
+				<div className="flex items-center gap-2">
+					{totalCount == filteredCount ? (
+						<>
+							<span className="text-2xl font-bold text-amber-900">{totalCount}</span>
+							<span className="text-lg text-amber-700">{totalCount === 1 ? "Mii" : "Miis"}</span>
+						</>
+					) : (
+						<>
+							<span className="text-2xl font-bold text-amber-900">{filteredCount}</span>
+							<span className="text-sm text-amber-700">of</span>
+							<span className="text-lg font-semibold text-amber-800">{totalCount}</span>
+							<span className="text-lg text-amber-700">Miis</span>
+						</>
+					)}
+				</div>
+
+				<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
+					<FilterMenu />
+					<SortSelect />
+				</div>
+			</div>
+
+			<MiiGrid miis={miis} userId={userId} parentPage={parentPage} />
+			<Pagination lastPage={lastPage} />
+		</div>
+	);
+}

frontend/src/components/mii/list/makeup-select.tsx

@@ -0,0 +1,72 @@
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import { type MiiMakeup } from "@tomodachi-share/backend";
+
+export default function MakeupSelect() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null);
+
+	const handleClick = (makeup: MiiMakeup) => {
+		const filter = selected === makeup ? null : makeup;
+		setSelected(filter);
+
+		const params = new URLSearchParams(searchParams);
+		params.set("page", "1");
+
+		if (filter) {
+			params.set("makeup", filter);
+		} else {
+			params.delete("makeup");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`, { scroll: false });
+			window.location.href = `?${params.toString()}`;
+		});
+	};
+
+	return (
+		<div className="flex gap-0.5 w-fit">
+			{/* Full Makeup */}
+			<button
+				onClick={() => handleClick("FULL")}
+				aria-label="Filter for Full Face Paint"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+					selected === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Full Face Paint</div>
+				<Icon icon="mdi:palette" className="text-pink-400" />
+			</button>
+
+			{/* Partial Makeup */}
+			<button
+				onClick={() => handleClick("PARTIAL")}
+				aria-label="Filter for Partial Face Paint"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+					selected === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Partial Face Paint</div>
+				<Icon icon="mdi:lipstick" className="text-purple-400" />
+			</button>
+
+			{/* No Makeup */}
+			<button
+				onClick={() => handleClick("NONE")}
+				aria-label="Filter for No Face Paint"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
+					selected === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-gray-400! border-gray-400! before:border-b-gray-400!">No Face Paint</div>
+				<Icon icon="codex:cross" className="text-gray-400" />
+			</button>
+		</div>
+	);
+}

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

@@ -0,0 +1,110 @@
+import { Icon } from "@iconify/react";
+
+import LikeButton from "../../like-button";
+import DeleteMiiButton from "../delete-mii-button";
+import Carousel from "../../carousel";
+import ImageViewer from "../../image-viewer";
+
+interface Props {
+	// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
+	miis: any[];
+	userId?: number;
+	parentPage?: string;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function MiiGrid({ miis, userId, parentPage }: Props) {
+	const likedIds = new Set([]);
+
+	return (
+		<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
+			{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"}`}
+				>
+					{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>
+					)}
+
+					<a href={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
+						<img
+							src={`${import.meta.env.PUBLIC_API_URL}/mii/${mii.id}/image?type=mii`}
+							width={240}
+							height={160}
+							alt="mii image"
+							className="w-full h-auto aspect-3/2 object-contain"
+						/>
+					</a>
+
+					<div className="p-4 flex flex-col gap-1 h-full">
+						<div className="flex justify-between">
+							<a href={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
+								{mii.name}
+							</a>
+							<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
+								{mii.platform === "SWITCH" ? (
+									<Icon icon="cib:nintendo-switch" className="text-red-400" />
+								) : (
+									<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+								)}
+							</div>
+						</div>
+						<div id="tags" className="flex flex-wrap gap-1">
+							{mii.tags.map((tag: string) => (
+								<a href={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
+									{tag}
+								</a>
+							))}
+						</div>
+
+						<div className="mt-auto grid grid-cols-2 items-center">
+							<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
+
+							{!userId && (
+								<a href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
+									@{mii.user?.name}
+								</a>
+							)}
+
+							{/* {userId && Number(session.data?.user?.id) == userId && (
+								<div className="flex gap-1 text-2xl justify-end text-zinc-400">
+									<a href={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
+										<Icon icon="mdi:pencil" />
+									</a>
+									<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
+								</div>
+							)} */}
+
+							{/* Admin Controls */}
+							{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(`/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">{new Date(mii.createdAt).toLocaleString("en-GB", { timeZone: "UTC" })}</span>
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/components/mii/list/other-filters.tsx

@@ -0,0 +1,79 @@
+import { type MiiPlatform } from "@tomodachi-share/backend";
+import { type ChangeEvent, useState, useTransition } from "react";
+
+export default function OtherFilters() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+	const [allowCopying, setAllowCopying] = useState<boolean>((searchParams.get("allowCopying") as unknown as boolean) ?? false);
+	const [quarantined, setQuarantined] = useState<boolean>((searchParams.get("quarantined") as unknown as boolean) ?? false);
+
+	const handleChangeAllowCopying = (e: ChangeEvent<HTMLInputElement>) => {
+		setAllowCopying(e.target.checked);
+
+		const params = new URLSearchParams(searchParams);
+		params.set("page", "1");
+
+		if (!allowCopying) {
+			params.set("allowCopying", "true");
+		} else {
+			params.delete("allowCopying");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`, { scroll: false });
+			window.location.href = `?${params.toString()}`;
+		});
+	};
+
+	const handleChangeQuarantined = (e: ChangeEvent<HTMLInputElement>) => {
+		setQuarantined(e.target.checked);
+
+		const params = new URLSearchParams(searchParams);
+		params.set("page", "1");
+
+		if (!quarantined) {
+			params.set("quarantined", "true");
+		} else {
+			params.delete("quarantined");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`, { scroll: false });
+			window.location.href = `?${params.toString()}`;
+		});
+	};
+
+	const showAllowCopying = platform !== "SWITCH";
+	const showQuarantined = !location.pathname.startsWith("/profile");
+
+	if (!showAllowCopying && !showQuarantined) return null;
+
+	return (
+		<>
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
+				<hr className="grow border-zinc-300" />
+				<span>Other</span>
+				<hr className="grow border-zinc-300" />
+			</div>
+
+			{showAllowCopying && (
+				<div className="flex justify-between items-center w-full mb-1">
+					<label htmlFor="allowCopying" className="text-sm">
+						Allow Copying
+					</label>
+					<input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
+				</div>
+			)}
+			{showQuarantined && (
+				<div className="flex justify-between items-center w-full">
+					<label htmlFor="quarantined" className="text-sm">
+						Show Controversial Miis
+					</label>
+					<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={handleChangeQuarantined} />
+				</div>
+			)}
+		</>
+	);
+}

frontend/src/components/mii/list/platform-select.tsx

@@ -0,0 +1,55 @@
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import type { MiiPlatform } from "@tomodachi-share/backend";
+
+export default function PlatformSelect() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
+
+	const handleClick = (platform: MiiPlatform) => {
+		const filter = selected === platform ? null : platform;
+		setSelected(filter);
+
+		const params = new URLSearchParams(searchParams);
+		if (filter) {
+			params.set("platform", filter);
+		} else {
+			params.delete("platform");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`);
+			window.location.href = `?${params.toString()}`;
+		});
+	};
+
+	return (
+		<div className="grid grid-cols-2 gap-0.5 w-fit">
+			<button
+				onClick={() => handleClick("THREE_DS")}
+				aria-label="Filter for 3DS Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
+					selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div>
+				<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
+			</button>
+
+			<button
+				onClick={() => handleClick("SWITCH")}
+				aria-label="Filter for Switch Miis"
+				data-tooltip-span
+				className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
+					selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
+				}`}
+			>
+				<div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div>
+				<Icon icon="cib:nintendo-switch" className="text-red-400" />
+			</button>
+		</div>
+	);
+}

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

@@ -0,0 +1,53 @@
+import FilterSelect from "./tag-filter";
+import SortSelect from "./sort-select";
+import Pagination from "../../pagination";
+
+export default function Skeleton() {
+	return (
+		<div className="w-full animate-pulse">
+			<div className="flex justify-between items-end mb-2 max-[32rem]:flex-col max-[32rem]:items-center">
+				<p className="text-lg">
+					<span className="font-extrabold">???</span> Miis
+				</p>
+
+				<div className="flex gap-2 pointer-events-none">
+					<FilterSelect />
+					<SortSelect />
+				</div>
+			</div>
+
+			<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[30rem]:grid-cols-1">
+				{[...Array(24)].map((_, index) => (
+					<div key={index} className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
+						{/* Carousel Skeleton */}
+						<div className="relative rounded-xl bg-zinc-300 border-2 border-zinc-300 mb-1">
+							<div className="aspect-3/2"></div>
+						</div>
+
+						{/* Content */}
+						<div className="p-4 flex flex-col gap-1 h-full">
+							{/* Name */}
+							<div className="h-7 bg-zinc-300 rounded w-2/3 mb-0.5" />
+
+							{/* Tags */}
+							<div className="flex flex-wrap gap-1">
+								<div className="px-4 py-2 bg-orange-200 rounded-full w-14 h-6" />
+								<div className="px-4 py-2 bg-orange-200 rounded-full w-10 h-6" />
+							</div>
+
+							{/* Bottom row */}
+							<div className="mt-0.5 grid grid-cols-2 items-center">
+								<div className="h-6 w-12 bg-red-200 rounded" />
+								<div className="h-4 w-24 bg-zinc-200 rounded justify-self-end" />
+							</div>
+						</div>
+					</div>
+				))}
+			</div>
+
+			<div className="pointer-events-none">
+				<Pagination lastPage={10} />
+			</div>
+		</div>
+	);
+}

frontend/src/components/mii/list/sort-select.tsx

@@ -0,0 +1,61 @@
+import { useTransition } from "react";
+import { useSelect } from "downshift";
+import { Icon } from "@iconify/react";
+
+type Sort = "likes" | "newest" | "oldest" | "random";
+
+const items = ["likes", "newest", "oldest", "random"];
+
+export default function SortSelect() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const currentSort = (searchParams.get("sort") as Sort) || "newest";
+
+	const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
+		items,
+		selectedItem: currentSort,
+		onSelectedItemChange: ({ selectedItem }) => {
+			if (!selectedItem) return;
+
+			const params = new URLSearchParams(searchParams);
+			params.set("page", "1");
+			params.set("sort", selectedItem);
+
+			if (selectedItem == "random") {
+				params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString());
+			}
+
+			startTransition(() => {
+				// router.push(`?${params.toString()}`, { scroll: false });
+				window.location.href = `?${params.toString()}`;
+			});
+		},
+	});
+
+	return (
+		<div className="relative w-fit">
+			{/* Toggle button to open the dropdown */}
+			<button type="button" {...getToggleButtonProps()} aria-label="Sort dropdown" className="pill input w-full gap-1 justify-between! text-nowrap">
+				<span>Sort by </span>
+				{selectedItem || "Select a way to sort"}
+				<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
+			</button>
+
+			{/* Dropdown menu */}
+			<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} {...getItemProps({ item, index })} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}>
+							{item}
+						</li>
+					))}
+			</ul>
+		</div>
+	);
+}

frontend/src/components/mii/list/tag-filter.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState, useTransition } from "react";
+import TagSelector from "../../tag-selector";
+
+interface Props {
+	isExclude?: boolean;
+}
+
+export default function TagFilter({ isExclude }: Props) {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [, startTransition] = useTransition();
+
+	const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
+	const preexistingTags = useMemo(
+		() =>
+			rawTags
+				? rawTags
+						.split(",")
+						.map((tag) => tag.trim())
+						.filter((tag) => tag.length > 0)
+				: [],
+		[rawTags],
+	);
+
+	const [tags, setTags] = useState<string[]>(preexistingTags);
+
+	// Sync state if the URL tags change (e.g. via navigation)
+	useEffect(() => {
+		setTags(preexistingTags);
+	}, [preexistingTags]);
+
+	// Redirect automatically on tags change
+	useEffect(() => {
+		const urlTags = preexistingTags.join(",");
+		const stateTags = tags.join(",");
+
+		if (urlTags === stateTags) return;
+
+		const params = new URLSearchParams(searchParams);
+		params.set("page", "1");
+
+		if (tags.length > 0) {
+			params.set(isExclude ? "exclude" : "tags", stateTags);
+		} else {
+			params.delete(isExclude ? "exclude" : "tags");
+		}
+
+		startTransition(() => {
+			// router.push(`?${params.toString()}`, { scroll: false });
+			window.location.href = `?${params.toString()}`;
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [tags]);
+
+	return (
+		<div className="w-72">
+			<TagSelector tags={tags} setTags={setTags} isExclude={isExclude} />
+		</div>
+	);
+}

frontend/src/components/mii/personality-viewer.tsx

@@ -0,0 +1,56 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+
+interface Props {
+	data: SwitchMiiInstructions["personality"];
+	onClick?: (key: string, i: number) => void;
+}
+
+const PERSONALITY_SETTINGS: { label: string; left: string; right: string }[] = [
+	{ label: "Movement", left: "Slow", right: "Quick" },
+	{ label: "Speech", left: "Polite", right: "Honest" },
+	{ label: "Energy", left: "Flat", right: "Varied" },
+	{ label: "Thinking", left: "Serious", right: "Chill" },
+	{ label: "Overall", left: "Normal", right: "Quirky" },
+];
+
+export default function PersonalityViewer({ data, onClick }: Props) {
+	return (
+		<div className="flex flex-col gap-1.5 mb-3">
+			{PERSONALITY_SETTINGS.map(({ label, left, right }) => {
+				const key = label.toLowerCase() as keyof typeof data;
+				return (
+					<div key={label} className="flex justify-center items-center gap-2">
+						<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) => {
+								const colors = [
+									"bg-green-400",
+									"bg-green-300",
+									"bg-emerald-200",
+									"bg-teal-200",
+									"bg-orange-200",
+									"bg-orange-300",
+									"bg-orange-400",
+									"bg-orange-500",
+								];
+								return (
+									<button
+										key={i}
+										type="button"
+										onClick={() => {
+											if (onClick) onClick(key, i);
+										}}
+										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>
+								);
+							})}
+						</div>
+						<span className="text-sm text-zinc-500 w-12 shrink-0">{right}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

frontend/src/components/mii/share-mii-button.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	miiId: number;
+}
+
+export default function ShareMiiButton({ miiId }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [hasCopiedUrl, setHasCopiedUrl] = useState(false);
+	const [hasCopiedImage, setHasCopiedImage] = useState(false);
+
+	const url = `${import.meta.env.PUBLIC_BASE_URL}/mii/${miiId}`;
+
+	const handleCopyUrl = async () => {
+		await navigator.clipboard.writeText(url);
+
+		setHasCopiedUrl(true);
+
+		// Reset to trigger exit animation
+		setTimeout(() => {
+			setHasCopiedUrl(false);
+		}, 750);
+	};
+
+	const handleCopyImage = async () => {
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`);
+		const blob = await response.blob();
+
+		await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+
+		setHasCopiedImage(true);
+
+		// Reset to trigger exit animation
+		setTimeout(() => {
+			setHasCopiedImage(false);
+		}, 750);
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} aria-label="Share" className="cursor-pointer">
+				<Icon icon="material-symbols:share" />
+				<span>Share</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Share Mii</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<div className="relative">
+								<input type="text" disabled className="pill input w-full text-sm" value={url} />
+
+								{/* Copy button */}
+								<button className="absolute! top-2.5 right-2.5 cursor-pointer" data-tooltip={hasCopiedUrl ? "Copied!" : "Copy URL"} onClick={handleCopyUrl}>
+									<div className="relative text-xl">
+										{/* Copy icon */}
+										<Icon
+											icon="solar:copy-bold"
+											className={`text-zinc-400 transition-all duration-300 ${
+												hasCopiedUrl ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"
+											}`}
+										/>
+
+										{/* Check icon */}
+										<Icon
+											icon="heroicons-solid:check"
+											className={`absolute inset-0 text-green-600 transition-all duration-300 ${
+												hasCopiedUrl ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
+											}`}
+										/>
+									</div>
+								</button>
+							</div>
+
+							{/* Separator */}
+							<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-4">
+								<hr className="grow border-zinc-300" />
+								<span>or</span>
+								<hr className="grow border-zinc-300" />
+							</div>
+
+							<div className="flex justify-center items-center p-4 w-full bg-orange-100 border border-orange-400 rounded-lg">
+								<img
+									src={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`}
+									alt="mii 'metadata' image"
+									width={248}
+									height={248}
+									className="drop-shadow-md"
+								/>
+							</div>
+
+							<div className="flex justify-end gap-2 mt-4">
+								<div className="flex gap-2 w-full">
+									{/* Save button */}
+									<a
+										href={`${import.meta.env.PUBLIC_API_URL}/mii/${miiId}/image?type=metadata`}
+										className="pill button p-0! aspect-square size-11 cursor-pointer text-xl"
+										aria-label="Save Image"
+										data-tooltip="Save Image"
+										download={"hello.png"}
+									>
+										<Icon icon="material-symbols:save-rounded" />
+									</a>
+
+									{/* Copy button */}
+									<button
+										className="pill button p-0! aspect-square size-11 cursor-pointer"
+										aria-label="Copy Image"
+										data-tooltip={hasCopiedImage ? "Copied!" : "Copy Image"}
+										onClick={handleCopyImage}
+									>
+										<div className="relative text-xl">
+											{/* Copy icon */}
+											<Icon
+												icon="solar:copy-bold"
+												className={` transition-all duration-300 ${hasCopiedImage ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"}`}
+											/>
+
+											{/* Check icon */}
+											<Icon
+												icon="heroicons-solid:check"
+												className={`absolute inset-0 text-black/60 transition-all duration-300 ${
+													hasCopiedImage ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
+												}`}
+											/>
+										</div>
+									</button>
+								</div>
+
+								<button onClick={close} className="pill button">
+									Close
+								</button>
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/mii/voice-viewer.tsx

@@ -0,0 +1,41 @@
+import type { SwitchMiiInstructions } from "@tomodachi-share/shared";
+import EnhancedSlider from "../submit-form/mii-editor/enhanced-slider";
+
+interface Props {
+	data: SwitchMiiInstructions["voice"];
+	onChange: (value: number, label: string) => void;
+	onClickTone: (i: number) => void;
+}
+
+const VOICE_SETTINGS = ["Speed", "Pitch", "Depth", "Delivery"];
+
+export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
+	return (
+		<div className="flex flex-col">
+			{VOICE_SETTINGS.map((label) => {
+				const value = data[label.toLowerCase() as keyof typeof data] ?? 25;
+				return <EnhancedSlider key={label} label={label} value={value} onChange={(v) => onChange?.(v, label.toLowerCase())} min={0} max={50} mid={25} />;
+			})}
+
+			<div className="flex gap-3 mt-2">
+				<label htmlFor="delivery" className="text-sm w-14">
+					Tone
+				</label>
+				<div className="grid grid-cols-6 gap-1 min-w-50">
+					{Array.from({ length: 6 }).map((_, i) => (
+						<button
+							type="button"
+							key={i}
+							onClick={() => {
+								if (onClickTone) onClickTone(i + 1);
+							}}
+							className={`transition-colors duration-100 rounded-xl hover:bg-orange-300 cursor-pointer ${data.tone === i + 1 ? "bg-orange-400!" : ""}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/pages/index.tsx

@@ -0,0 +1,76 @@
+import { Suspense, useEffect, useState } from "react";
+import FilterMenu from "../mii/list/filter-menu";
+import SortSelect from "../mii/list/sort-select";
+import MiiGrid from "../mii/list/mii-grid";
+import Pagination from "../pagination";
+import { type Mii } from "@tomodachi-share/backend";
+import Skeleton from "../mii/list/skeleton";
+
+interface ApiResponse {
+	totalCount: number;
+	filteredCount: number;
+	miis: Mii[];
+	lastPage: number;
+}
+
+export default function IndexPage() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [data, setData] = useState<ApiResponse>();
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetch(`${import.meta.env.PUBLIC_API_URL}/api/mii/list?${searchParams.toString()}`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch Miis");
+				return res.json();
+			})
+			.then((data) => {
+				setData(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+			});
+	}, []);
+
+	return (
+		<>
+			<h1 className="sr-only">
+				{searchParams.get("tags") ? `Miis tagged with '${searchParams.get("tags")}' - TomodachiShare` : "TomodachiShare - index mii list"}
+			</h1>
+
+			<Suspense fallback={<Skeleton />}>
+				{!loading && (
+					<div className="w-full">
+						<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex justify-between items-center gap-2 mb-2 max-md:flex-col">
+							<div className="flex items-center gap-2">
+								{data.totalCount == data.filteredCount ? (
+									<>
+										<span className="text-2xl font-bold text-amber-900">{data.totalCount}</span>
+										<span className="text-lg text-amber-700">{data.totalCount === 1 ? "Mii" : "Miis"}</span>
+									</>
+								) : (
+									<>
+										<span className="text-2xl font-bold text-amber-900">{data.filteredCount}</span>
+										<span className="text-sm text-amber-700">of</span>
+										<span className="text-lg font-semibold text-amber-800">{data.totalCount}</span>
+										<span className="text-lg text-amber-700">Miis</span>
+									</>
+								)}
+							</div>
+
+							<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
+								<FilterMenu />
+								<SortSelect />
+							</div>
+						</div>
+
+						<MiiGrid miis={data.miis} />
+						<Pagination lastPage={data.lastPage} />
+					</div>
+				)}
+			</Suspense>
+		</>
+	);
+}

frontend/src/components/pages/mii.tsx

@@ -0,0 +1,367 @@
+import type { SwitchMiiInstructions } from "@tomodachi-share/shared";
+
+import ImageViewer from "../image-viewer";
+import LikeButton from "../like-button";
+import Description from "../description";
+import AuthorButtons from "../mii/author-buttons";
+import ShareMiiButton from "../mii/share-mii-button";
+import ThreeDsScanTutorialButton from "../tutorial/3ds-scan";
+import SwitchAddMiiTutorialButton from "../tutorial/switch-add-mii";
+import MiiInstructions from "../mii/instructions";
+import type { Mii } from "@tomodachi-share/backend";
+import { Icon } from "@iconify/react";
+import { useEffect, useState } from "react";
+
+interface Props {
+	id: string;
+}
+
+export default function MiiPage({ id }: Props) {
+	const [mii, setMii] = useState<Mii | any>(null);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetch(`${import.meta.env.PUBLIC_API_URL}/api/mii/${id}/info`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch Miis");
+				return res.json();
+			})
+			.then((data) => {
+				setMii(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+				window.location.href = "/404";
+			});
+	}, []);
+
+	if (loading || !mii) {
+		return <div className="p-6 text-center">Loading...</div>;
+	}
+
+	const API_BASE_URL = import.meta.env.PUBLIC_API_URL;
+	const images = [...Array.from({ length: mii.imageCount }, (_, index) => `${API_BASE_URL}/mii/${mii.id}/image?type=image${index}`)];
+
+	return (
+		<div className="flex flex-col items-center">
+			<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">
+						<Icon icon="material-symbols:warning-rounded" className="text-2xl shrink-0" />
+						<p className="font-medium">This Mii is flagged as controversial and only appears when the filter is enabled</p>
+					</div>
+				)}
+				{mii.in_queue && (
+					<div className="bg-zinc-50 border-2 border-zinc-400 rounded-2xl shadow-lg p-4 flex items-start gap-3 text-zinc-600">
+						<Icon icon="material-symbols:timer" className="text-2xl shrink-0" />
+						<p className="font-medium">
+							This Mii is waiting to be manually reviewed and is hidden from the main page. The review could take between a few hours and a few days.
+							<br />
+							Despite that, you can still share the Mii through the URL!
+						</p>
+					</div>
+				)}
+				<div className="relative grid grid-cols-3 gap-4 max-md:grid-cols-1">
+					<div className="bg-amber-50 rounded-3xl border-2 border-amber-500 shadow-lg p-4 h-min flex flex-col items-center max-w-md w-full max-md:place-self-center max-md:row-start-2">
+						{/* Mii Image */}
+						<div className="bg-linear-to-b from-amber-100 to-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center">
+							<ImageViewer
+								src={`${API_BASE_URL}/mii/${mii.id}/image?type=mii`}
+								alt="mii headshot"
+								width={250}
+								height={250}
+								className="drop-shadow-lg hover:scale-105 transition-transform w-full max-h-96 object-contain"
+							/>
+						</div>
+						{/* QR Code */}
+						{mii.platform === "THREE_DS" ? (
+							<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
+								<ImageViewer
+									src={`${API_BASE_URL}/mii/${mii.id}/image?type=qr-code`}
+									alt="mii qr code"
+									width={128}
+									height={128}
+									className="border-2 border-amber-300 rounded-lg hover:brightness-90 transition-all"
+								/>
+							</div>
+						) : (
+							<ImageViewer
+								src={`${API_BASE_URL}/mii/${mii.id}/image?type=features`}
+								alt="mii features"
+								width={300}
+								height={300}
+								className="rounded-lg hover:brightness-90 mb-4 transition-all"
+							/>
+						)}
+						<hr className="w-full border-t-2 border-t-amber-400" />
+
+						{/* Mii Info */}
+						{mii.platform === "THREE_DS" && (
+							<ul className="text-sm w-full p-2 *:flex *:justify-between *:items-center *:my-1">
+								<li>
+									Name:{" "}
+									<span className="text-right font-medium">
+										{mii.firstName} {mii.lastName}
+									</span>
+								</li>
+								<li>
+									From: <span className="text-right font-medium">{mii.islandName} Island</span>
+								</li>
+								<li>
+									Allowed Copying: <input type="checkbox" checked={mii.allowedCopying ?? false} disabled className="checkbox cursor-auto!" />
+								</li>
+							</ul>
+						)}
+
+						{/* Mii Platform */}
+						<div className={`flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 w-full ${mii.platform !== "THREE_DS" && "mt-2"}`}>
+							<hr className="grow border-zinc-300" />
+							<span>Platform</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div data-tooltip-span title={mii.platform} className="grid grid-cols-2 gap-2 mb-2">
+							<div
+								className={`tooltip mt-1! ${
+									mii.platform === "THREE_DS" ? "bg-sky-400! border-sky-400! before:border-b-sky-400!" : "bg-red-400! border-red-400! before:border-b-red-400!"
+								}`}
+							>
+								{mii.platform === "THREE_DS" ? "3DS" : "Switch"}
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-3xl border-2 shadow-sm ${
+									mii.platform === "THREE_DS" ? "bg-sky-100 border-sky-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="cib:nintendo-3ds" className="text-sky-500" />
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-3xl border-2 shadow-sm ${
+									mii.platform === "SWITCH" ? "bg-red-100 border-red-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="cib:nintendo-switch" className="text-red-400" />
+							</div>
+						</div>
+
+						{/* Mii Gender */}
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 w-full">
+							<hr className="grow border-zinc-300" />
+							<span>Gender</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div data-tooltip-span title={mii.gender ?? "NULL"} className="flex gap-1">
+							<div
+								className={`tooltip mt-1! ${
+									mii.gender === "MALE"
+										? "bg-blue-400! border-blue-400! before:border-b-blue-400!"
+										: mii.gender === "FEMALE"
+											? "bg-pink-400! border-pink-400! before:border-b-pink-400!"
+											: "bg-purple-400! border-purple-400! before:border-b-purple-400!"
+								}`}
+							>
+								{mii.gender === "MALE" ? "Male" : mii.gender === "FEMALE" ? "Female" : "Nonbinary"}
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+									mii.gender === "MALE" ? "bg-blue-100 border-blue-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="foundation:male" className="text-blue-400" />
+							</div>
+
+							<div
+								className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+									mii.gender === "FEMALE" ? "bg-pink-100 border-pink-400" : "bg-white border-gray-300"
+								}`}
+							>
+								<Icon icon="foundation:female" className="text-pink-400" />
+							</div>
+
+							{mii.platform !== "THREE_DS" && (
+								<div
+									className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+										mii.gender === "NONBINARY" ? "bg-purple-100 border-purple-400" : "bg-white border-gray-300"
+									}`}
+								>
+									<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
+								</div>
+							)}
+						</div>
+
+						{/* Makeup */}
+						{mii.platform === "SWITCH" && (
+							<>
+								<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2 mt-2 w-full">
+									<hr className="grow border-zinc-300" />
+									<span>Makeup</span>
+									<hr className="grow border-zinc-300" />
+								</div>
+
+								<div data-tooltip-span title={mii.makeup ?? "NULL"} className="flex gap-1">
+									{/* Tooltip */}
+									<div
+										className={`tooltip mt-1! ${
+											mii.makeup === "FULL"
+												? "bg-pink-400! border-pink-400! before:border-b-pink-400!"
+												: mii.makeup === "PARTIAL"
+													? "bg-purple-400! border-purple-400! before:border-b-purple-400!"
+													: "bg-gray-400! border-gray-400! before:border-b-gray-400!"
+										}`}
+									>
+										{mii.makeup === "FULL" ? "Full Makeup" : mii.makeup === "PARTIAL" ? "Partial Makeup" : "No Makeup"}
+									</div>
+
+									{/* Full Makeup */}
+									<div
+										className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+											mii.makeup === "FULL" ? "bg-pink-100 border-pink-400" : "bg-white border-gray-300"
+										}`}
+									>
+										<Icon icon="mdi:palette" className="text-pink-400" />
+									</div>
+
+									{/* Partial Makeup */}
+									<div
+										className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+											mii.makeup === "PARTIAL" ? "bg-purple-100 border-purple-400" : "bg-white border-gray-300"
+										}`}
+									>
+										<Icon icon="mdi:lipstick" className="text-purple-400" />
+									</div>
+
+									{/* No Makeup */}
+									<div
+										className={`rounded-xl flex justify-center items-center size-13 text-5xl border-2 shadow-sm ${
+											mii.makeup === "NONE" ? "bg-gray-200 border-gray-400" : "bg-white border-gray-300"
+										}`}
+									>
+										<Icon icon="codex:cross" className="text-gray-400" />
+									</div>
+								</div>
+							</>
+						)}
+					</div>
+
+					<div className="col-span-2 flex flex-col gap-4 max-md:col-span-1">
+						{/* Information */}
+						<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-1">
+							<div className="flex justify-between items-start">
+								{/* Submission name */}
+								<h1 className="text-4xl font-extrabold wrap-break-word whitespace-break-spaces text-amber-700 flex-1 min-w-0">{mii.name}</h1>
+								{/* Like button */}
+								<LikeButton likes={mii._count.likedBy ?? 0} miiId={mii.id} isLiked={(mii.likedBy ?? []).length > 0} big />
+							</div>
+							{/* Tags */}
+							<div id="tags" className="flex flex-wrap gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
+								{mii.tags.map((tag: string) => (
+									<a href={`/tags=${tag}`}>{tag}</a>
+								))}
+							</div>
+
+							{/* Author and Created date */}
+							<div className="mt-2">
+								<a href={`/profile/${mii.userId}`} className="text-lg wrap-break-word">
+									By <span className="font-bold">{mii.user.name}</span>
+								</a>
+								<h4 className="text-sm">
+									Created:{" "}
+									{new Date(mii.createdAt).toLocaleString("en-GB", {
+										day: "2-digit",
+										month: "long",
+										year: "numeric",
+										hour: "2-digit",
+										minute: "2-digit",
+										second: "2-digit",
+										timeZone: "UTC",
+									})}{" "}
+									UTC
+								</h4>
+							</div>
+
+							{/* Description */}
+							{mii.description && <Description text={mii.description} className="ml-2" />}
+						</div>
+
+						{/* Buttons */}
+						<div className="flex gap-3 w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:size-12 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-xs">
+							<AuthorButtons mii={mii} />
+
+							<ShareMiiButton miiId={mii.id} />
+							<a aria-label="Report Mii" href={`${import.meta.env.PUBLIC_API_URL}/report/mii/${mii.id}`}>
+								<Icon icon="material-symbols:flag-rounded" />
+								<span>Report</span>
+							</a>
+							{mii.platform === "THREE_DS" ? <ThreeDsScanTutorialButton /> : <SwitchAddMiiTutorialButton />}
+						</div>
+
+						{/* Instructions */}
+						{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"
+									/>
+								)}
+
+								<MiiInstructions instructions={mii.instructions as Partial<SwitchMiiInstructions>} />
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Images */}
+				<div className="bg-amber-50 rounded-3xl border-2 border-amber-500 shadow-lg p-4 flex flex-col">
+					<h2 className="text-xl font-semibold text-amber-700 mb-3 flex items-center gap-2">
+						<Icon icon="material-symbols:photo-library" />
+						Gallery
+					</h2>
+
+					{images.length > 0 ? (
+						<div className="grid grid-cols-3 gap-2 w-full max-md:grid-cols-2 max-[24rem]:grid-cols-1">
+							{images.map((src) => (
+								<div className="relative aspect-3/2 rounded-xl bg-black/65 border-2 border-amber-400 shadow-md overflow-hidden transition hover:shadow-lg shadow-black/30">
+									<img
+										src={src}
+										alt="mii screenshot background blur"
+										width={256}
+										height={170}
+										className="absolute size-full blur-sm contrast-150 brightness-[0.65] object-cover"
+									/>
+
+									<ImageViewer
+										src={src}
+										alt="mii screenshot"
+										width={256}
+										height={170}
+										className="aspect-3/2 w-full object-contain hover:scale-105 duration-300 transition-transform relative z-10"
+										images={images}
+									/>
+								</div>
+							))}
+						</div>
+					) : (
+						<p className="indent-7.5 text-black/50">There is nothing here...</p>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/pages/profile.tsx

@@ -0,0 +1,42 @@
+import type { User } from "@tomodachi-share/backend";
+import { useEffect, useState } from "react";
+import ProfileInformation from "../profile-information";
+
+interface Props {
+	id: string;
+}
+
+export default function ProfilePage({ id }: Props) {
+	const [user, setUser] = useState<User | any>(null);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetch(`${import.meta.env.PUBLIC_API_URL}/api/profile/${id}/info`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch profile");
+				return res.json();
+			})
+			.then((data) => {
+				setUser(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+				window.location.href = "/404";
+			});
+	}, []);
+
+	if (loading || !user) {
+		return <div className="p-6 text-center">Loading...</div>;
+	}
+
+	return (
+		<div>
+			<ProfileInformation user={user} />
+			{/* <Suspense fallback={<Skeleton />}>
+				<MiiList searchParams={await searchParams} userId={user.id} />
+			</Suspense> */}
+		</div>
+	);
+}

frontend/src/components/pagination.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useMemo } from "react";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	lastPage: number;
+}
+
+export default function Pagination({ lastPage }: Props) {
+	const searchParams = new URLSearchParams(location.search);
+	const page = Number(searchParams.get("page") ?? 1);
+
+	const createPageUrl = useCallback(
+		(pageNumber: number) => {
+			const params = new URLSearchParams(searchParams);
+			params.set("page", pageNumber.toString());
+			return `${location.pathname}?${params.toString()}`;
+		},
+		[searchParams, location.pathname],
+	);
+
+	const numbers = useMemo(() => {
+		const result = [];
+
+		// Always show 5 pages, centering around the current page when possible
+		const start = Math.max(1, Math.min(page - 2, lastPage - 4));
+		const end = Math.min(lastPage, start + 4);
+
+		for (let i = start; i <= end; i++) result.push(i);
+
+		return result;
+	}, [page, lastPage]);
+
+	return (
+		<div className="flex justify-center items-center w-full mt-8">
+			{/* Go to first page */}
+			<a
+				href={page === 1 ? "#" : createPageUrl(1)}
+				aria-label="Go to First Page"
+				aria-disabled={page === 1}
+				tabIndex={page === 1 ? -1 : undefined}
+				className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
+			>
+				<Icon icon="stash:chevron-double-left" />
+			</a>
+
+			{/* Previous page */}
+			<a
+				href={page === 1 ? "#" : createPageUrl(page - 1)}
+				aria-label="Go to Previous Page"
+				aria-disabled={page === 1}
+				tabIndex={page === 1 ? -1 : undefined}
+				className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
+			>
+				<Icon icon="stash:chevron-left" />
+			</a>
+
+			{/* Page numbers */}
+			<div className="flex mx-2">
+				{numbers.map((number) => (
+					<a
+						key={number}
+						href={createPageUrl(number)}
+						aria-label={`Go to Page ${number}`}
+						aria-current={number === page ? "page" : undefined}
+						className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
+					>
+						{number}
+					</a>
+				))}
+			</div>
+
+			{/* Next page */}
+			<a
+				href={page >= lastPage ? "#" : createPageUrl(page + 1)}
+				aria-label="Go to Next Page"
+				aria-disabled={page >= lastPage}
+				tabIndex={page >= lastPage ? -1 : undefined}
+				className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
+			>
+				<Icon icon="stash:chevron-right" />
+			</a>
+
+			{/* Go to last page */}
+			<a
+				href={page >= lastPage ? "#" : createPageUrl(lastPage)}
+				aria-label="Go to Last Page"
+				aria-disabled={page >= lastPage}
+				tabIndex={page >= lastPage ? -1 : undefined}
+				className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
+			>
+				<Icon icon="stash:chevron-double-right" />
+			</a>
+		</div>
+	);
+}

frontend/src/components/profile-information.tsx

@@ -0,0 +1,93 @@
+import { Icon } from "@iconify/react";
+
+import Description from "./description";
+import { type User } from "@tomodachi-share/backend";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
+
+interface Props {
+	user?: User | any;
+	page?: "settings" | "likes";
+}
+
+export default function ProfileInformation({ user, page }: Props) {
+	const $session = useStore(session);
+
+	const isAdmin = (!user ? $session.user.id : user.id) === Number(import.meta.env.PUBLIC_ADMIN_USER_ID);
+	const isContributor = import.meta.env.PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(user.id);
+	const isOwnProfile = !user || $session?.user?.id === user.id;
+
+	return (
+		<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 */}
+				<a href={`/profile/${user.id}`} className="size-28 aspect-square">
+					<image src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
+				</a>
+				{/* User information */}
+				<div className="flex flex-col w-full relative py-3">
+					<div className="flex items-center gap-2">
+						<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
+						{isAdmin && (
+							<div data-tooltip="Admin" className="text-orange-400">
+								<Icon icon="mdi:shield-moon" className="text-2xl" />
+							</div>
+						)}
+						{isContributor && (
+							<div data-tooltip="Contributor" className="text-orange-400">
+								<Icon icon="mingcute:group-fill" className="text-2xl" />
+							</div>
+						)}
+					</div>
+					<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
+
+					<div className="mt-3 text-sm flex gap-8">
+						<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
+							<span className="font-medium">Created:</span>{" "}
+							{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
+						</h4>
+						<h4>
+							Liked <span className="font-bold">{user._count.likes}</span> Miis
+						</h4>
+					</div>
+
+					{user.description && <Description text={user.description} className="max-h-32!" />}
+				</div>
+			</div>
+
+			{/* Buttons */}
+			<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
+				{!isOwnProfile && (
+					<a aria-label="Report User" href={`${import.meta.env.PUBLIC_API_URL}/report/user/${user.id}`}>
+						<Icon icon="material-symbols:flag-rounded" />
+						<span>Report</span>
+					</a>
+				)}
+				{isOwnProfile && isAdmin && (
+					<a aria-label="Go to Admin" href="/admin">
+						<Icon icon="mdi:shield-moon" />
+						<span>Admin</span>
+					</a>
+				)}
+				{/* {isOwnProfile && page !== "likes" && (
+					<a aria-label="Go to My Likes" href="/profile/likes">
+						<Icon icon="icon-park-solid:like" />
+						<span>My Likes</span>
+					</a>
+				)} */}
+				{isOwnProfile && page !== "settings" && (
+					<a aria-label="Go to Settings" href="/profile/settings">
+						<Icon icon="material-symbols:settings-rounded" />
+						<span>Settings</span>
+					</a>
+				)}
+				{page && (
+					<a aria-label="Go Back to Profile" href={`/profile/${user.id}`}>
+						<Icon icon="tabler:chevron-left" />
+						<span>Back</span>
+					</a>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/src/components/profile-settings/delete-account.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import SubmitButton from "../submit-button";
+
+export default function DeleteAccount() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const handleSubmit = async () => {
+		const response = await fetch("/api/auth/delete", { method: "DELETE" });
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		window.location.href = "/404";
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
+				Delete Account
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Delete Account</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.</p>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" />
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/profile-settings/index.tsx

@@ -0,0 +1,156 @@
+import { useState } from "react";
+
+import { userNameSchema } from "@tomodachi-share/shared/schemas";
+
+import ProfilePictureSettings from "./profile-picture";
+import SubmitDialogButton from "./submit-dialog-button";
+import DeleteAccount from "./delete-account";
+import z from "zod";
+
+interface Props {
+	currentDescription: string | null | undefined;
+}
+
+export default function ProfileSettings({ currentDescription }: Props) {
+	const [description, setDescription] = useState(currentDescription);
+	const [name, setName] = useState("");
+
+	const [descriptionChangeError, setDescriptionChangeError] = useState<string | undefined>(undefined);
+	const [nameChangeError, setNameChangeError] = useState<string | undefined>(undefined);
+
+	const handleSubmitDescriptionChange = async (close: () => void) => {
+		const parsed = z.string().trim().max(256).safeParse(description);
+		if (!parsed.success) {
+			setDescriptionChangeError(parsed.error.issues[0].message);
+			return;
+		}
+
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/about-me`, {
+			method: "PATCH",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ description }),
+			credentials: "include",
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setDescriptionChangeError(error);
+			return;
+		}
+
+		close();
+		window.location.reload();
+	};
+
+	const handleSubmitNameChange = async (close: () => void) => {
+		const parsed = userNameSchema.safeParse(name);
+		if (!parsed.success) {
+			setNameChangeError(parsed.error.issues[0].message);
+			return;
+		}
+
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/name`, {
+			method: "PATCH",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ name }),
+			credentials: "include",
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setNameChangeError(error);
+			return;
+		}
+
+		close();
+		window.location.reload();
+	};
+
+	return (
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
+			<div>
+				<h2 className="text-2xl font-bold">Profile Settings</h2>
+				<p className="text-sm text-zinc-500">Update your profile picture, description, name, etc.</p>
+			</div>
+
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-1">
+				<hr className="grow border-zinc-300" />
+				<span>Account Info</span>
+				<hr className="grow border-zinc-300" />
+			</div>
+
+			{/* Profile Picture */}
+			<ProfilePictureSettings />
+
+			{/* Description */}
+			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+				<div className="col-span-3">
+					<label className="font-semibold">About Me</label>
+					<p className="text-sm text-zinc-500">Write about yourself on your profile</p>
+				</div>
+
+				<div className="flex justify-end gap-1 h-min col-span-2">
+					<div className="flex-1">
+						<textarea
+							rows={5}
+							maxLength={256}
+							placeholder="(optional) Type about yourself..."
+							className="pill input rounded-xl! resize-none text-sm w-full"
+							value={description || ""}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+						<p className="text-xs text-zinc-400 mt-1 text-right">{(description || "").length}/256</p>
+					</div>
+
+					<SubmitDialogButton
+						title="Confirm About Me Change"
+						description="Are you sure? You can change it again later."
+						error={descriptionChangeError}
+						onSubmit={handleSubmitDescriptionChange}
+					/>
+				</div>
+			</div>
+
+			{/* Change Name */}
+			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+				<div className="col-span-3">
+					<label className="font-semibold">Change Name</label>
+					<p className="text-sm text-zinc-500">This is your name shown on your profile and miis — feel free to change it anytime</p>
+				</div>
+
+				<div className="flex justify-end gap-1 h-min col-span-2">
+					<input type="text" className="pill input flex-1" placeholder="Type here..." maxLength={64} value={name} onChange={(e) => setName(e.target.value)} />
+					<SubmitDialogButton
+						title="Confirm Name Change"
+						description="Are you sure? You can change it again later."
+						error={nameChangeError}
+						onSubmit={handleSubmitNameChange}
+					>
+						<div className="bg-orange-100 rounded-xl border-2 border-amber-500 mt-4 px-2 py-1">
+							<p className="font-semibold">New name:</p>
+							<p className="indent-4">&apos;{name}&apos;</p>
+						</div>
+					</SubmitDialogButton>
+				</div>
+			</div>
+
+			{/* Separator */}
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+				<hr className="grow border-zinc-300" />
+				<span>Danger Zone</span>
+				<hr className="grow border-zinc-300" />
+			</div>
+
+			{/* Delete Account */}
+			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
+				<div>
+					<label className="font-semibold">Delete Account</label>
+					<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
+				</div>
+
+				<DeleteAccount />
+			</div>
+		</div>
+	);
+}

frontend/src/components/profile-settings/profile-picture.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+
+import { Icon } from "@iconify/react";
+import dayjs from "dayjs";
+
+import SubmitDialogButton from "./submit-dialog-button";
+import Dropzone from "../dropzone";
+
+export default function ProfilePictureSettings() {
+	const [error, setError] = useState<string | undefined>(undefined);
+	const [newPicture, setNewPicture] = useState<FileWithPath | undefined>();
+
+	const changeDate = dayjs().add(7, "days");
+
+	const handleSubmit = async (close: () => void) => {
+		const formData = new FormData();
+		if (newPicture) formData.append("image", newPicture);
+
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/auth/picture`, {
+			method: "PATCH",
+			body: formData,
+			credentials: "include",
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		close();
+		location.reload();
+	};
+
+	const handleDrop = useCallback((acceptedFiles: FileWithPath[]) => {
+		if (!acceptedFiles[0]) return;
+		setNewPicture(acceptedFiles[0]);
+	}, []);
+
+	return (
+		<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+			<div className="col-span-3">
+				<label className="font-semibold">Profile Picture</label>
+				<p className="text-sm text-zinc-500">Manage your profile picture. Can only be changed once every 7 days.</p>
+			</div>
+
+			<div className="flex flex-col col-span-2">
+				<div className="flex justify-end">
+					<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+						<p className="text-center text-xs">
+							Drag and drop your profile picture here
+							<br />
+							or click to open
+						</p>
+
+						<img
+							src={newPicture ? URL.createObjectURL(newPicture) : "/guest.png"}
+							alt="new profile picture"
+							width={96}
+							height={96}
+							className="rounded-full aspect-square border-2 border-amber-500 object-cover"
+						/>
+					</Dropzone>
+				</div>
+
+				<div className="flex justify-end gap-1 mt-2">
+					{newPicture && (
+						<button
+							data-tooltip="Delete Picture"
+							aria-label="Delete Picture"
+							onClick={() => setNewPicture(undefined)}
+							className="pill button aspect-square p-1! text-2xl bg-red-400! border-red-500!"
+						>
+							<Icon icon="mdi:trash-outline" />
+						</button>
+					)}
+					<SubmitDialogButton
+						title="Confirm Profile Picture Change"
+						description="Are you sure? Your profile picture can only be changed every 7 days."
+						error={error}
+						onSubmit={handleSubmit}
+					>
+						<p className="text-sm text-zinc-500 mt-2">
+							After submitting, you can change it again on {changeDate.toDate().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
+							.
+						</p>
+
+						<div className="bg-orange-100 rounded-xl border-2 border-amber-500 mt-4 px-2 py-1 flex items-center">
+							<p className="font-semibold mb-2">New profile picture:</p>
+							<img
+								src={newPicture ? URL.createObjectURL(newPicture) : "/guest.png"}
+								alt="new profile picture"
+								width={128}
+								height={128}
+								className="rounded-full aspect-square border-2 border-amber-500 ml-auto object-cover"
+							/>
+						</div>
+					</SubmitDialogButton>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/profile-settings/submit-dialog-button.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import SubmitButton from "../submit-button";
+
+interface Props {
+	title: string;
+	description: string;
+	onSubmit: (close: () => void) => void;
+	error?: string;
+	children?: React.ReactNode;
+}
+
+export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const submit = () => {
+		onSubmit(close);
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} aria-label="Open Submit Dialog" className="pill button size-11 p-1! text-2xl">
+				<Icon icon="material-symbols:check-rounded" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">{title}</h2>
+								<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">{description}</p>
+
+							{children}
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<SubmitButton onClick={submit} />
+							</div>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/provider.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { ProgressProvider } from "@bprogress/react";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+	// Calculate header height
+	useEffect(() => {
+		const header = document.querySelector("header");
+		if (!header) return;
+
+		const updateHeaderHeight = () => {
+			document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
+		};
+
+		const resizeObserver = new ResizeObserver(updateHeaderHeight);
+		resizeObserver.observe(header);
+		window.addEventListener("resize", updateHeaderHeight);
+
+		updateHeaderHeight();
+
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", updateHeaderHeight);
+		};
+	}, []);
+
+	return (
+		<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
+			{children}
+		</ProgressProvider>
+	);
+}

frontend/src/components/search-bar.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Icon } from "@iconify/react";
+import { querySchema } from "@tomodachi-share/shared/schemas";
+
+export default function SearchBar() {
+	const searchParams = new URLSearchParams(window.location.search);
+	const [query, setQuery] = useState(searchParams.get("q") || "");
+
+	const handleSearch = () => {
+		const result = querySchema.safeParse(query);
+		if (!result.success) {
+			// router.push("/", { scroll: false });
+			window.location.href = "/";
+			return;
+		}
+
+		// Clone current search params and add query param
+		const params = new URLSearchParams(searchParams.toString());
+		params.set("q", query);
+		params.set("page", "1");
+
+		// router.push(`/?${params.toString()}`, { scroll: false });
+		window.location.href = `/?${params.toString()}`;
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (event.key === "Enter") handleSearch();
+	};
+
+	return (
+		<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md">
+			<input
+				type="text"
+				placeholder="Search..."
+				value={query}
+				onChange={(e) => setQuery(e.target.value)}
+				onKeyDown={handleKeyDown}
+				className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40"
+			/>
+			<button
+				onClick={handleSearch}
+				aria-label="Search"
+				data-tooltip="Search"
+				className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl"
+			>
+				<Icon icon="ic:baseline-search" />
+			</button>
+		</div>
+	);
+}

frontend/src/components/submit-button.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	onClick: () => void | Promise<void>;
+	disabled?: boolean;
+	text?: string;
+	className?: string;
+}
+
+export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleClick = async (event: React.FormEvent) => {
+		event.preventDefault();
+
+		setIsLoading(true);
+		try {
+			await onClick();
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
+			{text}
+			{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
+		</button>
+	);
+}

frontend/src/components/submit-form/camera.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import jsQR from "jsqr";
+import { Icon } from "@iconify/react";
+
+import QrFinder from "./qr-finder";
+import { useSelect } from "downshift";
+
+interface Props {
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	onCapture?: () => void;
+	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);
+
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const streamRef = useRef<MediaStream | null>(null);
+	const requestRef = useRef<number>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const cameraItems = devices.map((device) => ({
+		value: device.deviceId,
+		label: device.label || `Camera ${devices.indexOf(device) + 1}`,
+	}));
+
+	const {
+		isOpen: isDropdownOpen,
+		getToggleButtonProps,
+		getMenuProps,
+		getItemProps,
+		highlightedIndex,
+		selectedItem,
+	} = useSelect({
+		items: cameraItems,
+		selectedItem: cameraItems.find((item) => item.value === selectedDeviceId) ?? null,
+		onSelectedItemChange: ({ selectedItem }) => {
+			setSelectedDeviceId(selectedItem?.value ?? null);
+		},
+	});
+
+	const takePicture = useCallback(() => {
+		if (!isOpen) return;
+
+		// Continue scanning in a loop
+		if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
+
+		const video = videoRef.current;
+		const canvas = canvasRef.current;
+		if (!video || video.videoWidth === 0 || video.videoHeight === 0 || !canvas) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = video.videoWidth;
+		canvas.height = video.videoHeight;
+		ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+
+		if (setImage) {
+			setImage(canvas.toDataURL());
+			if (onCapture) onCapture();
+			close();
+			return;
+		}
+		if (!setQrBytesRaw) return;
+
+		const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
+		const code = jsQR(imageData.data, imageData.width, imageData.height);
+		if (!code || !code.binaryData) return;
+
+		// Cancel animation frame to stop scanning
+		if (requestRef.current) {
+			cancelAnimationFrame(requestRef.current);
+			requestRef.current = null;
+		}
+
+		setQrBytesRaw(code.binaryData);
+		close();
+	}, [isOpen, setIsOpen, setQrBytesRaw]);
+
+	const requestPermission = () => {
+		if (!navigator.mediaDevices) return;
+
+		navigator.mediaDevices
+			.getUserMedia({ video: true, audio: false })
+			.then((stream) => {
+				// immediately stop this temp stream
+				stream.getTracks().forEach((track) => track.stop());
+				setPermissionGranted(true);
+			})
+			.catch((err) => {
+				setPermissionGranted(false);
+				console.error("An error occurred trying to access the camera", err);
+			});
+	};
+
+	const stopCamera = () => {
+		if (requestRef.current) {
+			cancelAnimationFrame(requestRef.current);
+			requestRef.current = null;
+		}
+		if (videoRef.current) {
+			videoRef.current.pause();
+			videoRef.current.srcObject = null;
+		}
+		if (streamRef.current) {
+			streamRef.current.getTracks().forEach((track) => track.stop());
+			streamRef.current = null;
+		}
+	};
+
+	const close = () => {
+		stopCamera();
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+			requestPermission();
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!isOpen || !permissionGranted) return;
+
+		navigator.mediaDevices
+			.enumerateDevices()
+			.then((devices) => {
+				const videoDevices = devices.filter((d) => d.kind === "videoinput");
+				setDevices(videoDevices);
+
+				const targetDeviceId = selectedDeviceId || videoDevices[0]?.deviceId;
+				if (!targetDeviceId) return;
+				setSelectedDeviceId(targetDeviceId);
+
+				// start camera stream
+				return navigator.mediaDevices.getUserMedia({
+					video: { deviceId: targetDeviceId },
+					audio: false,
+				});
+			})
+			.then((stream) => {
+				if (!stream || !videoRef.current) return;
+				streamRef.current = stream;
+				videoRef.current.srcObject = stream;
+				videoRef.current.play();
+			})
+			.catch((err) => console.error("Camera error", err));
+
+		if (setQrBytesRaw) requestRef.current = requestAnimationFrame(takePicture);
+
+		// cleanup
+		return () => {
+			stopCamera();
+		};
+	}, [isOpen, permissionGranted, selectedDeviceId]);
+
+	return (
+		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
+			<div
+				onClick={close}
+				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+			/>
+
+			<div
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2">
+					<h2 className="text-xl font-bold">{setQrBytesRaw ? "Scan QR Code" : "Take Picture"}</h2>
+					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				<div className={`mb-4 flex flex-col gap-1 ${devices.length <= 1 ? "hidden" : ""}`}>
+					<label className="text-sm font-semibold">Camera:</label>
+					<div className="relative w-full">
+						{/* Toggle button to open the dropdown */}
+						<button
+							type="button"
+							aria-label="Select camera dropdown"
+							{...getToggleButtonProps({}, { suppressRefError: true })}
+							className="pill input w-full px-2! py-0.5! justify-between! text-sm"
+						>
+							{selectedItem?.label || "Select a camera"}
+
+							<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
+						</button>
+
+						{/* Dropdown menu */}
+						<ul
+							{...getMenuProps({}, { suppressRefError: true })}
+							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 ${
+								isDropdownOpen ? "block" : "hidden"
+							}`}
+						>
+							{isDropdownOpen &&
+								cameraItems.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>
+				</div>
+
+				<div className={`relative w-full ${setQrBytesRaw ? "aspect-square" : ""}`}>
+					{!permissionGranted && (
+						<div className="absolute inset-0 z-20 flex flex-col items-center justify-center rounded-2xl bg-amber-50 border-2 border-amber-500 text-center p-8">
+							<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
+							<p className="text-gray-600">Please allow camera access in your browser settings to {setQrBytesRaw ? "scan QR codes" : "take pictures"}</p>
+							<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 py-0.5! px-2!">
+								Request Permission
+							</button>
+						</div>
+					)}
+
+					<div className="rounded-2xl border-2 border-amber-500 max-h-96 flex justify-center items-center overflow-hidden">
+						<img src="/loading.svg" alt="loading indicator" width={256} height={256} className="absolute" />
+						<video ref={videoRef} className={`size-full z-10 ${setQrBytesRaw ? "object-cover aspect-square" : ""}`} />
+					</div>
+					{setQrBytesRaw && <QrFinder />}
+					<canvas ref={canvasRef} className="hidden" />
+				</div>
+
+				<div className="mt-4 flex justify-center gap-2">
+					<button type="button" onClick={close} className="pill button">
+						Cancel
+					</button>
+					{setImage && (
+						<button type="button" onClick={takePicture} className="pill button">
+							Take Picture
+						</button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,456 @@
+// import { redirect } from "next/navigation";
+
+// import { useCallback, useEffect, useRef, useState } from "react";
+// import { FileWithPath } from "react-dropzone";
+// import { Mii, MiiGender, MiiMakeup } from "@prisma/client";
+// import { useSession } from "next-auth/react";
+
+// import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
+// import { defaultInstructions, minifyInstructions } from "@/lib/switch";
+// import { SwitchMiiInstructions } from "@tomodachi-share/shared";
+
+// import TagSelector from "../tag-selector";
+// import ImageList from "./image-list";
+// import LikeButton from "../like-button";
+// import Carousel from "../carousel";
+// import SubmitButton from "../submit-button";
+// import Dropzone from "../dropzone";
+// import MiiEditor from "./mii-editor";
+// import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
+// import { Icon } from "@iconify/react";
+// import SwitchFileUpload from "./switch-file-upload";
+
+// interface Props {
+// 	mii: Mii;
+// 	likes: number;
+// }
+
+// function deepMerge<T>(target: T, source: Partial<T>): T {
+// 	const output = structuredClone(target);
+
+// 	if (typeof source !== "object" || source === null) return output;
+
+// 	for (const key in source) {
+// 		const sourceValue = source[key];
+// 		const targetValue = (output as any)[key];
+
+// 		if (typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue)) {
+// 			(output as any)[key] = deepMerge(targetValue, sourceValue);
+// 		} else {
+// 			(output as any)[key] = sourceValue;
+// 		}
+// 	}
+
+// 	return output;
+// }
+
+// export default function EditForm({ mii, likes }: Props) {
+// 	const session = useSession();
+// 	const [files, setFiles] = useState<FileWithPath[]>([]);
+
+// 	const handleFilesChange: React.Dispatch<React.SetStateAction<FileWithPath[]>> = (updater) => {
+// 		hasCustomImagesChanged.current = true;
+// 		setFiles(updater);
+// 	};
+
+// 	const handleDrop = useCallback(
+// 		(acceptedFiles: FileWithPath[]) => {
+// 			if (files.length >= 3) return;
+// 			hasCustomImagesChanged.current = true;
+
+// 			setFiles((prev) => [...prev, ...acceptedFiles]);
+// 		},
+// 		[files.length],
+// 	);
+
+// 	const [error, setError] = useState<string | undefined>(undefined);
+
+// 	const [name, setName] = useState(mii.name);
+// 	const [tags, setTags] = useState(mii.tags);
+// 	const [description, setDescription] = useState(mii.description);
+// 	const [gender, setGender] = useState<MiiGender>(mii.gender ?? "MALE");
+// 	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 [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
+// 		const nameValidation = nameSchema.safeParse(name);
+// 		if (!nameValidation.success) {
+// 			setError(nameValidation.error.issues[0].message);
+// 			return;
+// 		}
+// 		const tagsValidation = tagsSchema.safeParse(tags);
+// 		if (!tagsValidation.success) {
+// 			setError(tagsValidation.error.issues[0].message);
+// 			return;
+// 		}
+
+// 		// Send request to server
+// 		const formData = new FormData();
+// 		if (name != mii.name) formData.append("name", name);
+// 		if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
+// 		if (description && description != mii.description) formData.append("description", description);
+// 		if (gender != mii.gender) formData.append("gender", gender);
+// 		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 (hasCustomImagesChanged.current) {
+// 			files.forEach((file, index) => {
+// 				// image1, image2, etc.
+// 				formData.append(`image${index + 1}`, file);
+// 			});
+// 		}
+
+// 		// Switch pictures
+// 		async function getBlob(uri: string): Promise<Blob | null> {
+// 			const response = await fetch(uri);
+// 			if (!response.ok) {
+// 				setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
+// 				return null;
+// 			}
+
+// 			const blob = await response.blob();
+// 			if (!blob.type.startsWith("image/")) {
+// 				setError("Invalid image file found");
+// 				return null;
+// 			}
+
+// 			return blob;
+// 		}
+
+// 		if (miiPortraitUri && hasMiiPortraitChanged.current) {
+// 			const blob = await getBlob(miiPortraitUri);
+// 			if (blob) formData.append("miiPortraitImage", blob);
+// 		}
+// 		if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
+// 			const blob = await getBlob(miiFeaturesUri);
+// 			if (blob) formData.append("miiFeaturesImage", blob);
+// 		}
+
+// 		const response = await fetch(`/api/mii/${mii.id}/edit`, {
+// 			method: "PATCH",
+// 			body: formData,
+// 		});
+// 		const { error } = await response.json();
+
+// 		if (!response.ok) {
+// 			setError(error);
+// 			return;
+// 		}
+
+// 		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 () => {
+// 			try {
+// 				const existing = await Promise.all(
+// 					Array.from({ length: mii.imageCount }, async (_, index) => {
+// 						const path = `/mii/${mii.id}/image?type=image${index}`;
+// 						const response = await fetch(path);
+// 						const blob = await response.blob();
+
+// 						return Object.assign(new File([blob], `image${index}.png`, { type: "image/png" }), { path });
+// 					}),
+// 				);
+
+// 				setFiles(existing);
+// 			} catch (error) {
+// 				console.error("Error loading existing images:", error);
+// 			}
+// 		};
+
+// 		loadExistingImages();
+// 	}, [mii.id, mii.imageCount]);
+
+// 	return (
+// 		<div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
+// 			<div className="flex justify-center">
+// 				<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
+// 					<Carousel
+// 						images={[
+// 							miiPortraitUri ?? `/mii/${mii.id}/image?type=mii`,
+// 							...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : [miiFeaturesUri ?? `/mii/${mii.id}/image?type=features`]),
+// 							...files.map((file) => URL.createObjectURL(file)),
+// 						]}
+// 					/>
+
+// 					<div className="p-4 flex flex-col gap-1 h-full">
+// 						<h1 className="font-bold text-2xl line-clamp-1" title={name}>
+// 							{name || "Mii name"}
+// 						</h1>
+// 						<div id="tags" className="flex flex-wrap gap-1">
+// 							{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
+// 							{tags.map((tag) => (
+// 								<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
+// 									{tag}
+// 								</span>
+// 							))}
+// 						</div>
+
+// 						<div className="mt-auto">
+// 							<LikeButton likes={likes} isLiked={false} abbreviate disabled />
+// 						</div>
+// 					</div>
+// 				</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>
+// 					<h2 className="text-2xl font-bold">Edit your Mii</h2>
+// 					<p className="text-sm text-zinc-500">Make changes to your existing Mii.</p>
+// 				</div>
+
+// 				{/* 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>
+
+// 				<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>
+
+// 				<div className="w-full grid grid-cols-3 items-start">
+// 					<label htmlFor="reason-note" className="font-semibold py-2">
+// 						Description
+// 					</label>
+// 					<textarea
+// 						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>
+
+// 				{session.data?.user?.id == import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID && (
+// 					<>
+// 						<div className="w-full grid grid-cols-3 items-center">
+// 							<label htmlFor="quarantined" className="font-semibold py-2">
+// 								Quarantined
+// 							</label>
+
+// 							<div className="col-span-2 flex gap-1">
+// 								<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={(e) => setQuarantined(e.target.checked)} />
+// 							</div>
+// 						</div>
+// 					</>
+// 				)}
+
+// 				{/* Makeup/Images/Instructions (Switch only) */}
+// 				{mii.platform === "SWITCH" && (
+// 					<>
+// 						<div className="w-full grid grid-cols-3 items-start z-20">
+// 							<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>
+
+// 						<div className="w-full grid grid-cols-3 items-start">
+// 							<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 Portrait */}
+// 						<div>
+// 							{/* 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 Portrait</span>
+// 								<hr className="grow border-zinc-300" />
+// 							</div>
+
+// 							<div className="flex flex-col items-center gap-2">
+// 								<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={handleMiiFeaturesChange} />
+// 								<SwitchSubmitTutorialButton />
+// 							</div>
+
+// 							<p className="text-xs text-zinc-400 text-center mt-2">You must upload a screenshot of the features, check tutorial on how.</p>
+// 						</div>
+
+// 						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
+// 							<hr className="grow border-zinc-300" />
+// 							<span>Instructions</span>
+// 							<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 />
+// 					</>
+// 				)}
+
+// 				{/* Separator */}
+// 				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8">
+// 					<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">
+// 					<Dropzone onDrop={handleDrop}>
+// 						<p className="text-center text-sm">
+// 							Drag and drop your images here
+// 							<br />
+// 							or click to open
+// 						</p>
+// 					</Dropzone>
+// 				</div>
+
+// 				<ImageList files={files} setFiles={handleFilesChange} />
+
+// 				<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} text="Edit" className="ml-auto" />
+// 				</div>
+// 			</div>
+// 		</div>
+// 	);
+// }

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

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactCrop, { type Crop } from "react-image-crop";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	image: string | undefined;
+	setImage: (value: string | undefined) => void;
+}
+
+export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [crop, setCrop] = useState<Crop>();
+
+	const imageRef = useRef<HTMLImageElement>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const applyCrop = useCallback(() => {
+		if (!imageRef.current || !canvasRef.current || !crop) return;
+
+		const image = imageRef.current;
+		const canvas = canvasRef.current;
+
+		if (!crop.width || !crop.height || image.naturalWidth === 0 || image.naturalHeight === 0) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const scaleX = image.naturalWidth / image.width;
+		const scaleY = image.naturalHeight / image.height;
+
+		canvas.width = crop.width * scaleX;
+		canvas.height = crop.height * scaleY;
+
+		ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
+
+		setImage(canvas.toDataURL());
+		setCrop(undefined);
+	}, [crop, setImage]);
+
+	const rotate = () => {
+		if (!imageRef.current || !canvasRef.current) return;
+
+		const image = imageRef.current;
+		const canvas = canvasRef.current;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = image.naturalHeight;
+		canvas.height = image.naturalWidth;
+
+		ctx.translate(canvas.width / 2, canvas.height / 2);
+		ctx.rotate(Math.PI / 2);
+		ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
+
+		setImage(canvas.toDataURL());
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<div className={`fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40 ${!isOpen ? "hidden" : ""}`}>
+			<div
+				onClick={close}
+				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+			/>
+
+			<div
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2">
+					<h2 className="text-xl font-bold">Edit Image</h2>
+					<button type="button" aria-label="Close" onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				<div className="relative w-full flex justify-center">
+					<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
+						<img ref={imageRef} src={image} />
+					</ReactCrop>
+					<canvas ref={canvasRef} className="hidden" />
+				</div>
+
+				<div className="mt-4 flex justify-center gap-2">
+					<button type="button" onClick={close} className="pill button">
+						Done
+					</button>
+					<button type="button" onClick={applyCrop} className="pill button">
+						Crop
+					</button>
+					<button type="button" onClick={rotate} className="pill button">
+						Rotate
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/submit-form/image-list.tsx

@@ -0,0 +1,73 @@
+import { type FileWithPath } from "react-dropzone";
+import { DragDropContext, Draggable, Droppable, type DropResult } from "@hello-pangea/dnd";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	files: readonly FileWithPath[];
+	setFiles: React.Dispatch<React.SetStateAction<FileWithPath[]>>;
+}
+
+export default function ImageList({ files, setFiles }: Props) {
+	const handleDelete = (index: number) => {
+		const newFiles = [...files];
+		newFiles.splice(index, 1);
+		setFiles(newFiles);
+	};
+
+	const handleDragEnd = (result: DropResult) => {
+		if (!result.destination) return;
+
+		const items = Array.from(files);
+		const [reorderedItem] = items.splice(result.source.index, 1);
+		items.splice(result.destination.index, 0, reorderedItem);
+
+		setFiles(items);
+	};
+
+	return (
+		<DragDropContext onDragEnd={handleDragEnd}>
+			<Droppable droppableId="imageDroppable">
+				{(provided) => (
+					<div ref={provided.innerRef} {...provided.droppableProps} className="flex flex-col px-12 max-lg:px-0 max-md:px-12 max-[32rem]:px-0">
+						{files.map((file, index) => (
+							<Draggable key={file.name} draggableId={file.name} index={index}>
+								{(provided) => (
+									<div
+										ref={provided.innerRef}
+										{...provided.draggableProps}
+										className="w-full p-4 rounded-xl bg-orange-100 border-2 border-amber-500 flex gap-2 shadow-md my-1"
+									>
+										<img
+											src={URL.createObjectURL(file)}
+											alt={file.name}
+											width={96}
+											height={96}
+											className="aspect-3/2 object-contain w-24 rounded-md bg-orange-300 border-2 border-orange-400"
+										/>
+										<div className="flex flex-col justify-center w-full min-w-0">
+											<span className="font-semibold overflow-hidden text-ellipsis">{file.name}</span>
+											<button
+												onClick={() => handleDelete(index)}
+												className="pill button text-xs w-min px-3! py-1! bg-red-300! border-red-400! hover:bg-red-400!"
+											>
+												Delete
+											</button>
+										</div>
+
+										<div
+											{...provided.dragHandleProps}
+											className="h-full w-11 px-1 cursor-grab flex items-center justify-center rounded transition-colors hover:bg-black/10"
+										>
+											<Icon icon="tabler:grip-horizontal" className="size-6 text-black/50" />
+										</div>
+									</div>
+								)}
+							</Draggable>
+						))}
+						{provided.placeholder}
+					</div>
+				)}
+			</Droppable>
+		</DragDropContext>
+	);
+}

frontend/src/components/submit-form/index.tsx

@@ -0,0 +1,527 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+import { Icon } from "@iconify/react";
+
+import qrcode from "qrcode-generator";
+import { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/backend";
+
+import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
+import { defaultInstructions, type SwitchMiiInstructions, ThreeDsTomodachiLifeMii, convertQrCode } from "@tomodachi-share/shared";
+import { Mii } from "@tomodachi-share/shared/miijs";
+
+import TagSelector from "../tag-selector";
+import ImageList from "./image-list";
+import SwitchFileUpload from "./switch-file-upload";
+import QrUpload from "./qr-upload";
+import Camera from "./camera";
+import ThreeDsSubmitTutorialButton from "../tutorial/3ds-submit";
+import MiiEditor from "./mii-editor";
+import SwitchSubmitTutorialButton from "../tutorial/switch-submit";
+import LikeButton from "../like-button";
+import Carousel from "../carousel";
+import SubmitButton from "../submit-button";
+import Dropzone from "../dropzone";
+
+export default function SubmitForm() {
+	const [files, setFiles] = useState<FileWithPath[]>([]);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			if (files.length >= 3) return;
+			setFiles((prev) => [...prev, ...acceptedFiles]);
+		},
+		[files.length],
+	);
+
+	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
+	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>();
+	const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>();
+	const [generatedQrCodeUri, setGeneratedQrCodeUri] = useState<string | undefined>();
+
+	const [name, setName] = useState("");
+	const [tags, setTags] = useState<string[]>([]);
+	const [description, setDescription] = useState("");
+	const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
+
+	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);
+
+	const handleSubmit = async () => {
+		// Validate before sending request
+		const nameValidation = nameSchema.safeParse(name);
+		if (!nameValidation.success) {
+			setError(nameValidation.error.issues[0].message);
+			return;
+		}
+		const tagsValidation = tagsSchema.safeParse(tags);
+		if (!tagsValidation.success) {
+			setError(tagsValidation.error.issues[0].message);
+			return;
+		}
+
+		// Send request to server
+		const formData = new FormData();
+		formData.append("platform", platform);
+		formData.append("name", name);
+		formData.append("tags", JSON.stringify(tags));
+		formData.append("description", description);
+		formData.append("youtubeId", youtubeId);
+		files.forEach((file, index) => {
+			// image1, image2, etc.
+			formData.append(`image${index + 1}`, file);
+		});
+
+		if (platform === "THREE_DS") {
+			formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
+		} else if (platform === "SWITCH") {
+			const portraitResponse = await fetch(miiPortraitUri!);
+			const featuresResponse = await fetch(miiFeaturesUri!);
+
+			if (!portraitResponse.ok || !featuresResponse.ok) {
+				setError("Failed to get Mii portrait/features screenshot. Did you upload one?");
+				return;
+			}
+
+			const portraitBlob = await portraitResponse.blob();
+			const featuresBlob = await featuresResponse.blob();
+			if (!portraitBlob.type.startsWith("image/") || !featuresBlob.type.startsWith("image/")) {
+				setError("Invalid image file found");
+				return;
+			}
+
+			formData.append("gender", gender);
+			formData.append("makeup", makeup);
+			formData.append("miiPortraitImage", portraitBlob);
+			formData.append("miiFeaturesImage", featuresBlob);
+			formData.append("instructions", JSON.stringify(instructions.current));
+		}
+
+		const response = await fetch(`${import.meta.env.PUBLIC_API_URL}/api/submit`, {
+			method: "POST",
+			body: formData,
+			credentials: "include",
+		});
+		const { id, error } = await response.json();
+
+		if (!response.ok) {
+			setError(String(error)); // app can crash if error message is not a string
+			return;
+		}
+
+		window.location.href = `/mii/${id}`;
+	};
+
+	useEffect(() => {
+		if (platform === "SWITCH" || qrBytesRaw.length == 0) return;
+		const qrBytes = new Uint8Array(qrBytesRaw);
+
+		const preview = async () => {
+			setError("");
+
+			// Validate QR code size
+			if (qrBytesRaw.length !== 372) {
+				setError("QR code size is not a valid Tomodachi Life QR code");
+				return;
+			}
+
+			// Convert QR code to JS (3DS)
+			let conversion: { mii: Mii; tomodachiLifeMii: ThreeDsTomodachiLifeMii };
+			try {
+				conversion = convertQrCode(qrBytes);
+				setMiiPortraitUri(conversion.mii.studioUrl({ width: 512 }));
+			} catch (error) {
+				setError(error instanceof Error ? error.message : String(error));
+				return;
+			}
+
+			// Generate a new QR code for aesthetic reasons
+			try {
+				const byteString = String.fromCharCode(...qrBytes);
+				const generatedCode = qrcode(0, "L");
+				generatedCode.addData(byteString, "Byte");
+				generatedCode.make();
+
+				setGeneratedQrCodeUri(generatedCode.createDataURL());
+			} catch {
+				setError("Failed to regenerate QR code");
+			}
+		};
+
+		preview();
+	}, [qrBytesRaw, platform]);
+
+	return (
+		<div className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
+			<div className="flex justify-center">
+				<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
+					<Carousel
+						images={[
+							miiPortraitUri ?? "/loading.svg",
+							...(platform === "THREE_DS" ? [generatedQrCodeUri ?? "/loading.svg"] : [miiFeaturesUri ?? "/loading.svg"]),
+							...files.map((file) => URL.createObjectURL(file)),
+						]}
+					/>
+
+					<div className="p-4 flex flex-col gap-1 h-full">
+						<h1 className="font-bold text-2xl line-clamp-1" title={name}>
+							{name || "Mii name"}
+						</h1>
+						<div id="tags" className="flex flex-wrap gap-1">
+							{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
+							{tags.map((tag) => (
+								<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
+									{tag}
+								</span>
+							))}
+						</div>
+
+						<div className="mt-auto">
+							<LikeButton likes={0} isLiked={false} disabled />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="w-full max-w-2xl">
+				<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>
+
+					{/* 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-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">
+										<img
+											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">
+										<img
+											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>
+		</div>
+	);
+}

frontend/src/components/submit-form/mii-editor/color-picker.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import { Icon } from "@iconify/react";
+import { COLORS } from "@tomodachi-share/shared";
+
+interface Props {
+	disabled?: boolean;
+	color: number;
+	setColor: (color: number) => void;
+	tab?: "hair" | "eyes" | "lips" | "glasses" | "eyeliner";
+}
+
+export default function ColorPicker({ disabled, color, setColor, tab = "hair" }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const getExtraSlice = () => {
+		switch (tab) {
+			case "hair":
+				return { start: 0, end: 8 };
+			case "eyes":
+				return { start: 122, end: 128 };
+			case "lips":
+				return { start: 128, end: 133 };
+			case "glasses":
+				return { start: 133, end: 139 };
+			case "eyeliner":
+				return { start: 139, end: 152 };
+			default:
+				return { start: 108, end: 122 };
+		}
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					if (isOpen) {
+						close();
+					} else {
+						setIsOpen(true);
+					}
+				}}
+				disabled={disabled}
+				className={`w-20 flex gap-1.5 mb-2 p-2 rounded-xl shadow ${disabled ? "bg-zinc-300 opacity-50 cursor-not-allowed" : "bg-zinc-100 cursor-pointer"}`}
+			>
+				<Icon icon={"material-symbols:palette"} className="text-xl" />
+				<div className="grow rounded" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
+			</button>
+
+			{isOpen && (
+				<div
+					className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto flex
+						 ${isVisible ? "opacity-100" : "opacity-0"}`}
+					style={{
+						transition: isVisible
+							? "transform 500ms cubic-bezier(0.34, 1.28, 0.64, 1), opacity 300ms"
+							: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
+					}}
+				>
+					<div className="w-max flex items-center justify-center grow shrink-0">
+						<div className="mr-8 flex flex-col gap-0.5">
+							{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
+								const actualIndex = i + getExtraSlice().start;
+								return (
+									<button
+										type="button"
+										key={actualIndex}
+										onClick={() => setColor(actualIndex)}
+										className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === actualIndex ? "ring-2 z-10" : ""}`}
+										style={{
+											backgroundColor: `#${c}`,
+											opacity: isVisible ? 1 : 0,
+											transform: isVisible ? "scale(1)" : "scale(0.7)",
+											transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
+											// stagger by column then row for a wave effect
+											transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
+										}}
+									></button>
+								);
+							})}
+						</div>
+
+						<div className="grid grid-cols-10 gap-0.5 overflow-x-auto">
+							{COLORS.slice(8, 108).map((c, i) => (
+								<button
+									type="button"
+									key={i + 8}
+									onClick={() => setColor(i + 8)}
+									className={`size-7.5 cursor-pointer rounded-md ring-orange-500 ring-offset-2 ${color === i + 8 ? "ring-2 z-10" : ""}`}
+									style={{
+										backgroundColor: `#${c}`,
+										opacity: isVisible ? 1 : 0,
+										transform: isVisible ? "scale(1)" : "scale(0.7)",
+										transition: `opacity 250ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1)`,
+										transitionDelay: isVisible ? `${120 + (i % 10) * 18 + Math.floor(i / 10) * 10}ms` : "0ms",
+									}}
+								></button>
+							))}
+						</div>
+
+						<button type="button" onClick={close} className="h-4/5 w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
+							<Icon icon={"tabler:chevron-right"} className="text-4xl" />
+						</button>
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/enhanced-slider.tsx

@@ -0,0 +1,78 @@
+import { Icon } from "@iconify/react";
+
+interface SliderProps {
+	label: string;
+	value: number;
+	onChange: (value: number) => void;
+	min?: number;
+	max?: number;
+	mid?: number;
+	step?: number;
+	className?: string;
+}
+
+export default function EnhancedSlider({ label, value, onChange, min = 0, max = 128, mid = 64, step = 1, className = "" }: SliderProps) {
+	const handleChange = (newValue: number) => {
+		const clampedValue = Math.min(max, Math.max(min, newValue));
+		onChange(clampedValue);
+	};
+
+	const nudge = (direction: number) => {
+		const newValue = value + direction * step;
+		handleChange(newValue);
+	};
+
+	const displayValue = value - mid;
+	const displayText = displayValue > 0 ? `+${displayValue}` : displayValue.toString();
+	const percentage = ((value - min) / (max - min)) * 100;
+
+	return (
+		<div className={`w-full ${className}`}>
+			<div className="flex justify-between items-center my-1 relative">
+				<h3 className="text-sm font-semibold">{label}</h3>
+				<span className="absolute left-1/2 transform -translate-x-1/2 text-xs font-bold text-orange-600 bg-orange-50 border-2 border-orange-400 px-2 py-1 rounded-full shadow-sm">
+					{displayText}
+				</span>
+			</div>
+			<div className="flex items-center gap-2">
+				<button
+					type="button"
+					onClick={() => nudge(-1)}
+					disabled={value <= min}
+					className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50"
+					aria-label={`Decrease ${label}`}
+				>
+					<Icon icon="mdi:chevron-left" width="16" height="16" />
+				</button>
+
+				<div className="relative flex-1 h-8 flex items-center">
+					{/* Tick mark at center */}
+					<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-0.5 h-3 bg-orange-400 rounded z-10 opacity-60"></div>
+
+					<input
+						type="range"
+						min={min}
+						max={max}
+						step={step}
+						value={value}
+						onChange={(e) => handleChange(e.target.valueAsNumber)}
+						className="w-full px-0.5 h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer focus:outline-0"
+						style={{
+							background: `linear-gradient(to right, #fb923c 0%, #fb923c ${percentage}%, #fed7aa ${percentage}%, #fed7aa 100%)`,
+						}}
+					/>
+				</div>
+
+				<button
+					type="button"
+					onClick={() => nudge(1)}
+					disabled={value >= max}
+					className="bg-orange-50 border-2 border-orange-400 text-orange-400 font-bold size-7 rounded-lg cursor-pointer flex items-center justify-center shrink-0 transition-transform not-disabled:active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orange-50"
+					aria-label={`Increase ${label}`}
+				>
+					<Icon icon="mdi:chevron-right" width="16" height="16" />
+				</button>
+			</div>
+		</div>
+	);
+}

frontend/src/components/submit-form/mii-editor/index.tsx

@@ -0,0 +1,80 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+
+import HeadTab from "./tabs/head";
+import HairTab from "./tabs/hair";
+import EyebrowsTab from "./tabs/eyebrows";
+import EyesTab from "./tabs/eyes";
+import NoseTab from "./tabs/nose";
+import LipsTab from "./tabs/lips";
+import EarsTab from "./tabs/ears";
+import GlassesTab from "./tabs/glasses";
+import OtherTab from "./tabs/other";
+import MiscTab from "./tabs/misc";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc";
+
+export const TAB_ICONS: Record<Tab, string> = {
+	head: "mingcute:head-fill",
+	hair: "mingcute:hair-fill",
+	eyebrows: "material-symbols:eyebrow",
+	eyes: "mdi:eye",
+	nose: "mingcute:nose-fill",
+	lips: "material-symbols-light:lips",
+	ears: "ion:ear",
+	glasses: "solar:glasses-bold",
+	other: "mdi:sparkles",
+	misc: "material-symbols:settings",
+};
+
+export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
+	head: HeadTab,
+	hair: HairTab,
+	eyebrows: EyebrowsTab,
+	eyes: EyesTab,
+	nose: NoseTab,
+	lips: LipsTab,
+	ears: EarsTab,
+	glasses: GlassesTab,
+	other: OtherTab,
+	misc: MiscTab,
+};
+
+export default function MiiEditor({ instructions }: Props) {
+	const [tab, setTab] = useState<Tab>("head");
+
+	return (
+		<>
+			<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
+				<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
+					{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
+						<button
+							key={t}
+							type="button"
+							onClick={() => setTab(t)}
+							className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
+						>
+							{/* ml because of border on left causing icons to look miscentered */}
+							<Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
+						</button>
+					))}
+				</div>
+
+				{/* Keep all tabs loaded to avoid flickering */}
+				{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
+					const TabComponent = TAB_COMPONENTS[t];
+					return (
+						<div key={t} className={t === tab ? "grow relative p-3" : "hidden"}>
+							<TabComponent instructions={instructions} />
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/number-inputs.tsx

@@ -0,0 +1,92 @@
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+
+interface Props {
+	target: { height?: number; distance?: number; rotation?: number; size?: number; stretch?: number } | any;
+}
+
+export default function NumberInputs({ target }: Props) {
+	const [values, setValues] = useState<Record<string, number>>({
+		height: target?.height ?? 0,
+		distance: target?.distance ?? 0,
+		rotation: target?.rotation ?? 0,
+		size: target?.size ?? 0,
+		stretch: target?.stretch ?? 0,
+	});
+
+	if (!target) return null;
+
+	return (
+		<div className="grid grid-cols-2 gap-x-4 h-min w-fit">
+			{["Height", "Distance", "Rotation", "Size", "Stretch"].map(
+				(label) =>
+					target[label.toLowerCase()] !== undefined && (
+						<NumberField
+							key={label}
+							label={label}
+							value={values[label.toLowerCase()]}
+							onChange={(value) => {
+								const field = label.toLowerCase();
+								setValues((prev) => ({ ...prev, [field]: value }));
+								target[field] = value;
+							}}
+						/>
+					),
+			)}
+		</div>
+	);
+}
+
+interface NumberFieldProps {
+	label: string;
+	value: number;
+	onChange: (value: number) => void;
+}
+
+function NumberField({ label, value, onChange }: NumberFieldProps) {
+	const MIN = -100;
+	const MAX = 100;
+
+	const decrement = () => onChange(Math.max(MIN, value - 1));
+	const increment = () => onChange(Math.min(MAX, value + 1));
+
+	return (
+		<div>
+			<label htmlFor={label} className="text-xs">
+				{label}
+			</label>
+			<div className="pill input text-sm py-1! px-2! w-full flex items-center gap-1">
+				<button
+					type="button"
+					onClick={decrement}
+					disabled={value <= MIN}
+					className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30"
+					aria-label={`Decrease ${label}`}
+				>
+					<Icon icon="mdi:minus" width="16" height="16" />
+				</button>
+				<input
+					type="number"
+					id={label}
+					min={MIN}
+					max={MAX}
+					value={value}
+					onChange={(e) => {
+						const val = Math.min(MAX, Math.max(MIN, Number(e.target.value)));
+						onChange(val);
+					}}
+					className="w-full text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+				/>
+				<button
+					type="button"
+					onClick={increment}
+					disabled={value >= MAX}
+					className="cursor-pointer flex items-center justify-center shrink-0 disabled:opacity-30"
+					aria-label={`Increase ${label}`}
+				>
+					<Icon icon="mdi:plus" width="16" height="16" />
+				</button>
+			</div>
+		</div>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/ears.tsx

@@ -0,0 +1,18 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import NumberInputs from "../number-inputs";
+
+interface EarsProps {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EarsTab({ instructions }: EarsProps) {
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Ears</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<NumberInputs target={instructions.current.ears} />
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/eyebrows.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function EyebrowsTab({ instructions }: Props) {
+	const [color, setColor] = useState(instructions.current.eyebrows.color ?? 3);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Eyebrows</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.eyebrows.color = i;
+					}}
+				/>
+				<NumberInputs target={instructions.current.eyebrows} />
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/eyes.tsx

@@ -0,0 +1,67 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["eyes"]; colorsDisabled?: boolean }[] = [
+	{ name: "main" },
+	{ name: "eyelashesTop", colorsDisabled: true },
+	{ name: "eyelashesBottom", colorsDisabled: true },
+	{ name: "eyelidTop", colorsDisabled: true },
+	{ name: "eyelidBottom", colorsDisabled: true },
+	{ name: "eyeliner" },
+	{ name: "pupil", colorsDisabled: true },
+];
+
+export default function EyesTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+	const [colors, setColors] = useState<number[]>(() =>
+		TABS.map((t) => {
+			const entry = instructions.current.eyes[t.name] ?? {};
+			const color = entry && "color" in entry ? entry.color : null;
+			return color ?? 122;
+		}),
+	);
+
+	const currentTab = TABS[tab];
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		if (!currentTab.colorsDisabled) (instructions.current.eyes[currentTab.name] as { color: number }).color = value;
+	};
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Eyes</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<div className="rounded-2xl bg-orange-200">
+					{TABS.map((_, i) => (
+						<button
+							key={i}
+							type="button"
+							onClick={() => setTab(i)}
+							className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker disabled={currentTab.colorsDisabled} color={colors[tab]} setColor={setColor} tab={tab === 5 ? "eyeliner" : "eyes"} />
+				<NumberInputs key={tab} target={instructions.current.eyes[currentTab.name]} />
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/glasses.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function GlassesTab({ instructions }: Props) {
+	const [ringColor, setRingColor] = useState(instructions.current.glasses.ringColor ?? 133);
+	const [shadesColor, setShadesColor] = useState(instructions.current.glasses.shadesColor ?? 133);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Glasses</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={ringColor}
+					setColor={(i) => {
+						setRingColor(i);
+						instructions.current.glasses.ringColor = i;
+					}}
+					tab="glasses"
+				/>
+				<ColorPicker
+					color={shadesColor}
+					setColor={(i) => {
+						setShadesColor(i);
+						instructions.current.glasses.shadesColor = i;
+					}}
+					tab="glasses"
+				/>
+				<NumberInputs target={instructions.current.glasses} />
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/hair.tsx

@@ -0,0 +1,129 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+type Tab = "sets" | "bangs" | "back";
+
+export default function HairTab({ instructions }: Props) {
+	const [tab, setTab] = useState<Tab>("sets");
+	const [color, setColor] = useState(instructions.current.hair.color ?? 3);
+	const [subColor, setSubColor] = useState<number | null>(instructions.current.hair.subColor);
+	const [subColor2, setSubColor2] = useState<number | null>(instructions.current.hair.subColor2);
+	const [style, setStyle] = useState<number | null>(instructions.current.hair.style);
+	const [isFlipped, setIsFlipped] = useState(instructions.current.hair.isFlipped);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Hair</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<button
+					type="button"
+					onClick={() => setTab("sets")}
+					className={`px-3 py-1 rounded-2xl bg-orange-200 mr-1 cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "sets" ? "bg-orange-300!" : "orange-200"}`}
+				>
+					Sets
+				</button>
+
+				<div className="rounded-2xl bg-orange-200 flex">
+					<button
+						type="button"
+						onClick={() => setTab("bangs")}
+						className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "bangs" ? "bg-orange-300!" : "orange-200"}`}
+					>
+						Bangs
+					</button>
+					<button
+						type="button"
+						onClick={() => setTab("back")}
+						className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === "back" ? "bg-orange-300!" : "orange-200"}`}
+					>
+						Back
+					</button>
+				</div>
+			</div>
+
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.hair.color = i;
+					}}
+				/>
+
+				<div className="flex gap-1.5 items-center mb-2">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={tab === "back" ? subColor2 !== null : subColor !== null}
+						onChange={(e) => {
+							if (tab === "back") {
+								setSubColor2(e.target.checked ? 0 : null);
+								instructions.current.hair.subColor2 = e.target.checked ? 0 : null;
+							} else {
+								setSubColor(e.target.checked ? 0 : null);
+								instructions.current.hair.subColor = e.target.checked ? 0 : null;
+							}
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Sub color
+					</label>
+				</div>
+
+				<ColorPicker
+					disabled={tab === "back" ? subColor2 === null : subColor === null}
+					color={tab === "back" ? (subColor2 ?? 0) : (subColor ?? 0)}
+					setColor={(i) => {
+						if (tab === "back") {
+							setSubColor2(i);
+							instructions.current.hair.subColor2 = i;
+						} else {
+							setSubColor(i);
+							instructions.current.hair.subColor = i;
+						}
+					}}
+				/>
+
+				<p className="text-sm mb-1">Tying style</p>
+				<div className="grid grid-cols-3 gap-0.5">
+					{Array.from({ length: 3 }).map((_, i) => (
+						<button
+							type="button"
+							key={i}
+							onClick={() => {
+								setStyle(i + 1);
+								instructions.current.hair.style = i + 1;
+							}}
+							className={`size-full aspect-square cursor-pointer hover:bg-orange-300 transition-colors duration-100 rounded-lg ${style === i + 1 ? "bg-orange-400!" : ""}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+
+				<div className="flex gap-1.5 items-center mt-4">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={isFlipped}
+						onChange={(e) => {
+							setIsFlipped(e.target.checked);
+							instructions.current.hair.isFlipped = e.target.checked;
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Flip
+					</label>
+				</div>
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/head.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const COLORS = ["FFD8BA", "FFD5AC", "FEC1A4", "FEC68F", "FEB089", "FEBA6B", "F39866", "E89854", "E37E3F", "B45627", "914220", "59371F", "662D16", "392D1E"];
+
+export default function HeadTab({ instructions }: Props) {
+	const [color, setColor] = useState(instructions.current.head.skinColor ?? 109);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Head</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.head.skinColor = i;
+					}}
+				/>
+
+				<div className="grid grid-cols-7 gap-1">
+					{COLORS.map((hex, i) => (
+						<button
+							type="button"
+							key={i + 108}
+							onClick={() => {
+								setColor(i + 108);
+								instructions.current.head.skinColor = i + 108;
+							}}
+							className={`size-9 rounded-lg cursor-pointer ring-offset-2 ring-orange-500 ${color === i + 108 ? "ring-2" : ""}`}
+							style={{ backgroundColor: `#${hex}` }}
+						></button>
+					))}
+				</div>
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/lips.tsx

@@ -0,0 +1,47 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+import { useState } from "react";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function LipsTab({ instructions }: Props) {
+	const [color, setColor] = useState(instructions.current.lips.color ?? 128);
+	const [hasLipstick, setHasLipstick] = useState(instructions.current.lips.hasLipstick);
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Lips</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<ColorPicker
+					color={color}
+					setColor={(i) => {
+						setColor(i);
+						instructions.current.lips.color = i;
+					}}
+					tab="lips"
+				/>
+				<NumberInputs target={instructions.current.lips} />
+
+				<div className="flex gap-1.5 items-center mt-4">
+					<input
+						type="checkbox"
+						id="subcolor"
+						className="checkbox"
+						checked={hasLipstick}
+						onChange={(e) => {
+							setHasLipstick(e.target.checked);
+							instructions.current.lips.hasLipstick = e.target.checked;
+						}}
+					/>
+					<label htmlFor="subcolor" className="text-xs">
+						Lipstick
+					</label>
+				</div>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,214 @@
+import { useState } from "react";
+import { MiiGender } from "@tomodachi-share/backend";
+import type { SwitchMiiInstructions } from "@tomodachi-share/shared";
+import EnhancedSlider from "../enhanced-slider";
+import DatingPreferencesViewer from "../../../mii/dating-preferences";
+import VoiceViewer from "../../../mii/voice-viewer";
+import PersonalityViewer from "../../../mii/personality-viewer";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function MiscTab({ instructions }: Props) {
+	const [height, setHeight] = useState(instructions.current.height ?? 64);
+	const [weight, setWeight] = useState(instructions.current.weight ?? 64);
+	const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
+	const [voice, setVoice] = useState({
+		speed: instructions.current.voice.speed ?? 25,
+		pitch: instructions.current.voice.pitch ?? 25,
+		depth: instructions.current.voice.depth ?? 25,
+		delivery: instructions.current.voice.delivery ?? 25,
+		tone: instructions.current.voice.tone ?? 0,
+	});
+	const [birthday, setBirthday] = useState({
+		day: instructions.current.birthday.day ?? (null as number | null),
+		month: instructions.current.birthday.month ?? (null as number | null),
+		age: instructions.current.birthday.age ?? (null as number | null),
+		dontAge: instructions.current.birthday.dontAge,
+	});
+	const [personality, setPersonality] = useState({
+		movement: instructions.current.personality.movement ?? -1,
+		speech: instructions.current.personality.speech ?? -1,
+		energy: instructions.current.personality.energy ?? -1,
+		thinking: instructions.current.personality.thinking ?? -1,
+		overall: instructions.current.personality.overall ?? -1,
+	});
+
+	return (
+		<>
+			<h1 className="font-bold text-xl">Misc</h1>
+
+			<div className="grow h-full overflow-y-auto pb-3">
+				<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+					<div>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
+							<hr className="grow border-zinc-300" />
+							<span>Body</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col">
+							<EnhancedSlider
+								label="Height"
+								value={height}
+								onChange={(v) => {
+									setHeight(v);
+									instructions.current.height = v;
+								}}
+								min={0}
+								max={128}
+								mid={64}
+							/>
+						</div>
+
+						<div className="flex flex-col">
+							<EnhancedSlider
+								label="Weight"
+								value={weight}
+								onChange={(v) => {
+									setWeight(v);
+									instructions.current.weight = v;
+								}}
+								min={0}
+								max={128}
+								mid={64}
+							/>
+						</div>
+
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Dating Preferences</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="flex flex-col gap-1.5">
+							<DatingPreferencesViewer
+								data={datingPreferences}
+								onChecked={(e, gender) => {
+									setDatingPreferences((prev) => {
+										const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender);
+										instructions.current.datingPreferences = updated;
+										return updated;
+									});
+								}}
+							/>
+						</div>
+					</div>
+
+					<div>
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
+							<hr className="grow border-zinc-300" />
+							<span>Voice</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<VoiceViewer
+							data={voice}
+							onChange={(v, label) => {
+								setVoice((p) => ({ ...p, [label]: v }));
+								instructions.current.voice[label as keyof typeof voice] = v;
+							}}
+							onClickTone={(i) => {
+								setVoice((p) => ({ ...p, tone: i }));
+								instructions.current.voice.tone = i;
+							}}
+						/>
+
+						<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
+							<hr className="grow border-zinc-300" />
+							<span>Birthday</span>
+							<hr className="grow border-zinc-300" />
+						</div>
+
+						<div className="grid grid-cols-3 gap-2">
+							<div>
+								<label htmlFor="day" className="text-xs">
+									Day
+								</label>
+								<input
+									type="number"
+									id="day"
+									min={1}
+									max={31}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.day ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
+										instructions.current.birthday.day = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div>
+								<label htmlFor="month" className="text-xs">
+									Month
+								</label>
+								<input
+									type="number"
+									id="month"
+									min={1}
+									max={12}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.month ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
+										instructions.current.birthday.month = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div>
+								<label htmlFor="age" className="text-xs">
+									Age
+								</label>
+								<input
+									type="number"
+									id="age"
+									min={1}
+									max={1000}
+									className="pill input text-sm py-1! px-3! w-full"
+									value={birthday.age ?? undefined}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
+										instructions.current.birthday.age = e.target.valueAsNumber;
+									}}
+								/>
+							</div>
+							<div className="flex gap-1.5 col-span-2">
+								<input
+									type="checkbox"
+									id="dontAge"
+									className="checkbox"
+									checked={birthday.dontAge}
+									onChange={(e) => {
+										setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
+										instructions.current.birthday.dontAge = e.target.checked;
+									}}
+								/>
+								<label htmlFor="dontAge" className="text-sm select-none">
+									Don't Age
+								</label>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2">
+					<hr className="grow border-zinc-300" />
+					<span>Personality</span>
+					<hr className="grow border-zinc-300" />
+				</div>
+
+				<PersonalityViewer
+					data={personality}
+					onClick={(key, i) => {
+						setPersonality((p) => {
+							const updated = { ...p, [key]: i };
+							instructions.current.personality = updated;
+							return updated;
+						});
+					}}
+				/>
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/nose.tsx

@@ -0,0 +1,18 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+export default function NoseTab({ instructions }: Props) {
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Nose</h1>
+
+			<div className="size-full flex flex-col justify-center items-center">
+				<NumberInputs target={instructions.current.nose} />
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/mii-editor/tabs/other.tsx

@@ -0,0 +1,91 @@
+import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
+import { useState } from "react";
+import ColorPicker from "../color-picker";
+import NumberInputs from "../number-inputs";
+
+interface Props {
+	instructions: React.RefObject<SwitchMiiInstructions>;
+}
+
+const TABS: { name: keyof SwitchMiiInstructions["other"]; defaultColor?: number }[] = [
+	{ name: "wrinkles1" },
+	{ name: "wrinkles2" },
+	{ name: "beard" },
+	{ name: "moustache" },
+	{ name: "goatee" },
+	{ name: "mole" },
+	{ name: "eyeShadow", defaultColor: 139 },
+	{ name: "blush" },
+];
+
+export default function OtherTab({ instructions }: Props) {
+	const [tab, setTab] = useState(0);
+	const [isFlipped, setIsFlipped] = useState(false);
+
+	const [colors, setColors] = useState<number[]>(() =>
+		TABS.map((t) => {
+			const entry = instructions.current.other[t.name] ?? {};
+			const color = entry && "color" in entry ? entry.color : null;
+			return color ?? t.defaultColor ?? 0;
+		}),
+	);
+
+	const currentTab = TABS[tab];
+
+	const setColor = (value: number) => {
+		setColors((prev) => {
+			const copy = [...prev];
+			copy[tab] = value;
+			return copy;
+		});
+
+		const target = instructions.current.other[currentTab.name];
+		if ("color" in target) {
+			target.color = value;
+		}
+	};
+
+	return (
+		<>
+			<h1 className="absolute font-bold text-xl">Other</h1>
+
+			<div className="absolute right-3 z-10 flex justify-end">
+				<div className="rounded-2xl bg-orange-200">
+					{TABS.map((_, i) => (
+						<button
+							key={i}
+							type="button"
+							onClick={() => setTab(i)}
+							className={`px-3 py-1 rounded-2xl cursor-pointer hover:bg-orange-300/50 transition-colors duration-75 ${tab === i ? "bg-orange-300!" : "orange-200"}`}
+						>
+							{i + 1}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="absolute inset-0 flex flex-col justify-center items-center">
+				<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} tab={tab === 6 ? "eyeliner" : "hair"} />
+				<NumberInputs key={tab} target={instructions.current.other[currentTab.name]} />
+
+				{tab === 3 && (
+					<div className="flex gap-1.5 items-center mt-4">
+						<input
+							type="checkbox"
+							id="subcolor"
+							className="checkbox"
+							checked={isFlipped}
+							onChange={(e) => {
+								setIsFlipped(e.target.checked);
+								instructions.current.other.moustache.isFlipped = e.target.checked;
+							}}
+						/>
+						<label htmlFor="subcolor" className="text-xs">
+							Flip
+						</label>
+					</div>
+				)}
+			</div>
+		</>
+	);
+}

frontend/src/components/submit-form/qr-finder.tsx

@@ -0,0 +1,20 @@
+export default function QrFinder() {
+	return (
+		<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none size-72 z-10">
+			{/* Top-left corner */}
+			<div className="absolute top-0 left-0 size-6 border-t-3 border-l-3 border-amber-500 rounded-tl-lg" />
+
+			{/* Top-right corner */}
+			<div className="absolute top-0 right-0 size-6 border-t-3 border-r-3 border-amber-500 rounded-tr-lg" />
+
+			{/* Bottom-left corner */}
+			<div className="absolute bottom-0 left-0 size-6 border-b-3 border-l-3 border-amber-500 rounded-bl-lg" />
+
+			{/* Bottom-right corner */}
+			<div className="absolute bottom-0 right-0 size-6 border-b-3 border-r-3 border-amber-500 rounded-br-lg" />
+
+			{/* Center point */}
+			<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-5 bg-amber-500/70 rounded-full" />
+		</div>
+	);
+}

frontend/src/components/submit-form/qr-upload.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+import jsQR from "jsqr";
+import Dropzone from "../dropzone";
+
+interface Props {
+	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
+}
+
+export default function QrUpload({ setQrBytesRaw }: Props) {
+	const [hasImage, setHasImage] = useState(false);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			const file = acceptedFiles[0];
+
+			// Scan QR code
+			const reader = new FileReader();
+			reader.onload = async (event) => {
+				const image = new Image();
+				image.onload = () => {
+					const canvas = canvasRef.current;
+					if (!canvas) return;
+
+					const ctx = canvas.getContext("2d");
+					if (!ctx) return;
+
+					canvas.width = image.width;
+					canvas.height = image.height;
+					ctx.drawImage(image, 0, 0, image.width, image.height);
+
+					const imageData = ctx.getImageData(0, 0, image.width, image.height);
+					const code = jsQR(imageData.data, image.width, image.height);
+					if (!code) return;
+
+					setQrBytesRaw(code.binaryData!);
+					setHasImage(true);
+				};
+				image.src = event.target!.result as string;
+			};
+			reader.readAsDataURL(file);
+		},
+		[setQrBytesRaw],
+	);
+
+	return (
+		<div className="max-w-md w-full">
+			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+				<p className="text-center text-sm">
+					{!hasImage ? (
+						<>
+							Drag and drop your QR code image here
+							<br />
+							or click to open
+						</>
+					) : (
+						"Uploaded!"
+					)}
+				</p>
+			</Dropzone>
+
+			{/* Canvas is used to scan the QR code */}
+			<canvas ref={canvasRef} className="hidden" />
+		</div>
+	);
+}

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

@@ -0,0 +1,73 @@
+import { useCallback, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import Dropzone from "../dropzone";
+import Camera from "./camera";
+import ImageEditorPortrait from "./image-editor";
+
+interface Props {
+	text: string;
+	forceCrop?: boolean;
+	image?: string | undefined;
+	setImage: (value: string | undefined) => void;
+}
+
+export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
+	const [isCameraOpen, setIsCameraOpen] = useState(false);
+	const [isCropOpen, setIsCropOpen] = useState(false);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			const file = acceptedFiles[0];
+			// Convert to Data URI
+			const reader = new FileReader();
+			reader.onload = async (event) => {
+				setImage(event.target!.result as string);
+				if (forceCrop) setIsCropOpen(true);
+			};
+			reader.readAsDataURL(file);
+		},
+		[setImage],
+	);
+
+	return (
+		<div className="max-w-md w-full flex flex-col items-center gap-2">
+			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+				<p className="text-center text-sm">
+					{!image ? (
+						<>
+							Drag and drop {text}
+							<br />
+							or click to open
+						</>
+					) : (
+						"Uploaded!"
+					)}
+				</p>
+			</Dropzone>
+
+			<span>or</span>
+
+			<div className="flex gap-2 max-sm:flex-col">
+				<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
+					<Icon icon="mdi:camera" fontSize={20} />
+					Use your camera
+				</button>
+				<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
+					<Icon icon="mdi:image-edit" fontSize={20} />
+					Edit Image
+				</button>
+			</div>
+
+			<Camera
+				isOpen={isCameraOpen}
+				setIsOpen={setIsCameraOpen}
+				setImage={setImage}
+				onCapture={() => {
+					if (forceCrop) setIsCropOpen(true);
+				}}
+			/>
+			<ImageEditorPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
+		</div>
+	);
+}

frontend/src/components/tag-selector.tsx

@@ -0,0 +1,186 @@
+import React, { useState, useRef } from "react";
+import { useCombobox } from "downshift";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	tags: string[];
+	setTags: React.Dispatch<React.SetStateAction<string[]>>;
+	showTagLimit?: boolean;
+	isExclude?: boolean;
+}
+
+const tagRegex = /^[a-z0-9-_]*$/;
+const predefinedTags = ["anime", "art", "cartoon", "celebrity", "games", "history", "meme", "movie", "oc", "tv"];
+
+export default function TagSelector({ tags, setTags, showTagLimit, isExclude }: Props) {
+	const [inputValue, setInputValue] = useState<string>("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const getFilteredItems = (): string[] =>
+		predefinedTags.filter((item) => item.toLowerCase().includes(inputValue?.toLowerCase() || "")).filter((item) => !tags.includes(item));
+
+	const filteredItems = getFilteredItems();
+	const isMaxItemsSelected = tags.length >= 8;
+	const hasSelectedItems = tags.length > 0;
+
+	const addTag = (tag: string) => {
+		if (!tags.includes(tag) && tags.length < 8 && tag.length <= 20) {
+			setTags([...tags, tag]);
+		}
+	};
+
+	const removeTag = (tag: string) => {
+		setTags(tags.filter((t) => t !== tag));
+	};
+
+	const { isOpen, openMenu, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex } = useCombobox<string>({
+		inputValue,
+		items: filteredItems,
+		selectedItem: null,
+		onInputValueChange: ({ inputValue }) => {
+			const newValue = inputValue || "";
+			if (newValue && !tagRegex.test(newValue)) return;
+			setInputValue(newValue);
+		},
+		onSelectedItemChange: ({ type, selectedItem }) => {
+			if (type === useCombobox.stateChangeTypes.ItemClick && selectedItem) {
+				addTag(selectedItem);
+				setInputValue("");
+			}
+		},
+		stateReducer: (_, { type, changes }) => {
+			// Prevent input from being filled when item is selected
+			if (type === useCombobox.stateChangeTypes.ItemClick) {
+				return {
+					...changes,
+					inputValue: "",
+				};
+			}
+			return changes;
+		},
+	});
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === "Enter" && inputValue && !tags.includes(inputValue)) {
+			addTag(inputValue);
+			setInputValue("");
+		} else if (event.key === "Backspace" && inputValue === "") {
+			// Spill onto last tag
+			const lastTag = tags[tags.length - 1];
+			setInputValue(lastTag);
+			removeTag(lastTag);
+		}
+	};
+
+	const handleContainerClick = () => {
+		if (!isMaxItemsSelected) {
+			inputRef.current?.focus();
+			openMenu();
+		}
+	};
+
+	return (
+		<div className="col-span-2 relative">
+			<div
+				className={`relative justify-between! pill input focus-within:ring-[3px] ring-orange-400/50 cursor-text transition ${
+					tags.length > 0 ? "py-1.5! px-2!" : ""
+				}`}
+				onClick={handleContainerClick}
+			>
+				{/* Tags */}
+				<div className="flex flex-wrap gap-1.5 w-full">
+					{tags.map((tag) => (
+						<span key={tag} className={`py-1 px-3 rounded-2xl flex items-center gap-1 text-sm ${isExclude ? "bg-red-300" : "bg-orange-300"}`}>
+							{tag}
+							<button
+								type="button"
+								aria-label="Delete Tag"
+								className="text-slate-800 cursor-pointer"
+								onClick={(e) => {
+									e.stopPropagation();
+									removeTag(tag);
+								}}
+							>
+								<Icon icon="mdi:close" className="text-xs" />
+							</button>
+						</span>
+					))}
+
+					{/* Input */}
+					<input
+						{...getInputProps({
+							ref: inputRef,
+							onKeyDown: handleKeyDown,
+							disabled: isMaxItemsSelected,
+							placeholder: tags.length > 0 ? "" : "Type or select a tag...",
+							maxLength: 20,
+							className: "w-full flex-1 outline-none placeholder:text-black/40",
+						})}
+					/>
+				</div>
+
+				{/* Control buttons */}
+				<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+					{hasSelectedItems && (
+						<button type="button" aria-label="Remove All Tags" className="text-black cursor-pointer" onClick={() => setTags([])}>
+							<Icon icon="mdi:close" />
+						</button>
+					)}
+
+					<button
+						type="button"
+						aria-label="Toggle Tag Dropdown"
+						{...getToggleButtonProps()}
+						disabled={isMaxItemsSelected}
+						className="text-black cursor-pointer text-xl disabled:text-black/35"
+					>
+						<Icon icon="mdi:chevron-down" />
+					</button>
+				</div>
+
+				{/* Dropdown menu */}
+				{!isMaxItemsSelected && (
+					<ul
+						{...getMenuProps()}
+						onClick={(e) => e.stopPropagation()}
+						className={`absolute right-0 top-full mt-2 z-50 w-80 bg-orange-200/45 backdrop-blur-md border-2 border-orange-400 rounded-lg shadow-lg shadow-black/25 max-h-60 overflow-y-auto ${
+							isOpen ? "block" : "hidden"
+						}`}
+					>
+						{filteredItems.map((item, index) => (
+							<li
+								key={item}
+								{...getItemProps({ item, index })}
+								className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
+							>
+								{item}
+							</li>
+						))}
+						{inputValue && !filteredItems.includes(inputValue) && (
+							<li
+								className="px-4 py-1 cursor-pointer text-sm bg-black/15"
+								onClick={() => {
+									addTag(inputValue);
+									setInputValue("");
+								}}
+							>
+								Add &quot;{inputValue}&quot;
+							</li>
+						)}
+					</ul>
+				)}
+			</div>
+
+			{/* Tag limit message */}
+			{showTagLimit && (
+				<div className="mt-1.5 text-xs min-h-4">
+					{isMaxItemsSelected ? (
+						<span className="text-red-400 font-medium">Maximum of 8 tags reached. Remove a tag to add more.</span>
+					) : (
+						<span className="text-black/60">{tags.length}/8 tags</span>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

frontend/src/components/tutorial/3ds-scan.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function ThreeDsScanTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step2.png",
+									},
+									{
+										text: "3. Press 'Scan QR Code'",
+										imageSrc: "/tutorial/3ds/adding-mii/step3.png",
+									},
+									{
+										text: "4. Click on the QR code below the Mii's image",
+										imageSrc: "/tutorial/3ds/adding-mii/step4.png",
+									},
+									{
+										text: "5. Scan with your 3DS",
+										imageSrc: "/tutorial/3ds/adding-mii/step5.png",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/tutorial/3ds-submit.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Tutorial from ".";
+
+export default function SubmitTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
+				How to?
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Allow Copying",
+								thumbnail: "/tutorial/3ds/allow-copying/thumbnail.png",
+								hint: "Suggested!",
+								steps: [
+									{ type: "start" },
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'Mii List'",
+										imageSrc: "/tutorial/3ds/allow-copying/step2.png",
+									},
+									{
+										text: "3. Select and edit the Mii you wish to submit",
+										imageSrc: "/tutorial/3ds/allow-copying/step3.png",
+									},
+									{
+										text: "4. Click 'Other Settings' in the information screen",
+										imageSrc: "/tutorial/3ds/allow-copying/step4.png",
+									},
+									{
+										text: "5. Click on 'Don't Allow' under the 'Copying' text",
+										imageSrc: "/tutorial/3ds/allow-copying/step5.png",
+									},
+									{
+										text: "6. Press 'Allow'",
+										imageSrc: "/tutorial/3ds/allow-copying/step6.png",
+									},
+									{
+										text: "7. Confirm the edits to the Mii",
+										imageSrc: "/tutorial/3ds/allow-copying/step7.png",
+									},
+									{ type: "finish" },
+								],
+							},
+							{
+								title: "Create QR Code",
+								thumbnail: "/tutorial/3ds/create-qr-code/thumbnail.png",
+								steps: [
+									{ type: "start" },
+									{
+										text: "1. Enter the town hall",
+										imageSrc: "/tutorial/3ds/step1.png",
+									},
+									{
+										text: "2. Go into 'QR Code'",
+										imageSrc: "/tutorial/3ds/create-qr-code/step2.png",
+									},
+									{
+										text: "3. Press 'Create QR Code'",
+										imageSrc: "/tutorial/3ds/create-qr-code/step3.png",
+									},
+									{
+										text: "4. Select and press 'OK' on the Mii you wish to submit",
+										imageSrc: "/tutorial/3ds/create-qr-code/step4.png",
+									},
+									{
+										text: "5. Pick any option; it doesn't matter since the QR code regenerates upon submission.",
+										imageSrc: "/tutorial/3ds/create-qr-code/step5.png",
+									},
+									{
+										text: "6. Exit the tutorial; Upload the QR code (scan with camera or upload file through SD card).",
+										imageSrc: "/tutorial/3ds/create-qr-code/step6.png",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/tutorial/index.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { Icon } from "@iconify/react";
+import confetti from "canvas-confetti";
+
+interface Slide {
+	// step is never used, undefined is assumed as a step
+	type?: "start" | "step" | "finish";
+	text?: string;
+	imageSrc?: string;
+}
+
+interface Tutorial {
+	title: string;
+	thumbnail?: string;
+	hint?: string;
+	steps: Slide[];
+}
+
+interface Props {
+	tutorials: Tutorial[];
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function Tutorial({ tutorials, isOpen, setIsOpen }: Props) {
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 15 });
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	// Build index map
+	const slides: Array<Slide & { tutorialTitle: string }> = [];
+	const startSlides: Record<string, number> = {};
+
+	tutorials.forEach((tutorial) => {
+		tutorial.steps.forEach((slide) => {
+			if (slide.type === "start") {
+				startSlides[tutorial.title] = slides.length;
+			}
+			slides.push({ ...slide, tutorialTitle: tutorial.title });
+		});
+	});
+
+	const currentSlide = slides[selectedIndex];
+	const isStartingPage = currentSlide?.type === "start";
+
+	useEffect(() => {
+		if (currentSlide.type !== "finish") return;
+
+		const defaults = { startVelocity: 30, spread: 360, ticks: 120, zIndex: 50 };
+		const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+		setTimeout(() => {
+			confetti({
+				...defaults,
+				particleCount: 500,
+				origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+			});
+			confetti({
+				...defaults,
+				particleCount: 500,
+				origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+			});
+		}, 300);
+	}, [currentSlide]);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+			setSelectedIndex(0);
+		}, 300);
+	};
+
+	const goToTutorial = (tutorialTitle: string) => {
+		if (!emblaApi) return;
+		const index = startSlides[tutorialTitle];
+
+		// Jump to next starting slide then transition to actual tutorial
+		emblaApi.scrollTo(index, true);
+		emblaApi.scrollTo(index + 1);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!emblaApi) return;
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
+	return (
+		<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
+			<div
+				onClick={close}
+				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`}
+			/>
+
+			<div
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg w-full max-w-xl h-120 transition-discrete duration-300 flex flex-col ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2 p-6 pb-0">
+					<h2 className="text-xl font-bold">Tutorial</h2>
+					<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				<div className="flex flex-col min-h-0 h-full">
+					<div className="overflow-hidden h-full" ref={emblaRef}>
+						<div className="flex h-full">
+							{slides.map((slide, index) => (
+								<div key={index} className={`shrink-0 flex flex-col w-full px-6 ${slide.type === "start" && "py-6"}`}>
+									{slide.type === "start" ? (
+										<>
+											{/* Separator */}
+											<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-2">
+												<hr className="grow border-zinc-300" />
+												<span>Pick a tutorial</span>
+												<hr className="grow border-zinc-300" />
+											</div>
+
+											<div className="grid grid-cols-2 gap-4 h-full">
+												{tutorials.map((tutorial, tutorialIndex) => (
+													<button
+														key={tutorialIndex}
+														onClick={() => goToTutorial(tutorial.title)}
+														aria-label={tutorial.title + " tutorial"}
+														className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
+													>
+														<img
+															src={tutorial.thumbnail!}
+															alt="tutorial thumbnail"
+															width={128}
+															height={128}
+															className="rounded-lg border-2 border-zinc-300 object-cover"
+														/>
+														<p className="mt-2">{tutorial.title}</p>
+														{/* Set opacity to 0 to keep height the same with other tutorials */}
+														<p className={`text-[0.65rem] text-zinc-400 ${!tutorial.hint && "opacity-0"}`}>{tutorial.hint || "placeholder"}</p>
+													</button>
+												))}
+											</div>
+										</>
+									) : slide.type === "finish" ? (
+										<div className="h-full flex flex-col justify-center items-center">
+											<Icon icon="fxemoji:partypopper" className="text-9xl" />
+											<h1 className="font-medium text-xl mt-6 animate-bounce">Yatta! You did it!</h1>
+										</div>
+									) : (
+										<>
+											<p className="text-sm text-zinc-500 mb-2 text-center">{slide.text}</p>
+
+											<img
+												src={slide.imageSrc ?? "/missing.svg"}
+												alt="step image"
+												width={396}
+												height={320}
+												loading="eager"
+												className="rounded-lg w-full h-full object-contain bg-black flex-1"
+											/>
+										</>
+									)}
+								</div>
+							))}
+						</div>
+					</div>
+
+					{/* Arrows */}
+					<div className={`flex justify-between items-center mt-2 px-6 pb-6 transition-opacity duration-300 ${isStartingPage && "opacity-0"}`}>
+						<button
+							onClick={() => emblaApi?.scrollPrev()}
+							disabled={isStartingPage}
+							className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`}
+							aria-label="Scroll Carousel Left"
+						>
+							<Icon icon="tabler:chevron-left" />
+						</button>
+
+						{/* Only show tutorial name on step slides */}
+						<span className={`text-sm transition-opacity duration-300 ${(currentSlide.type === "finish" || currentSlide.type === "start") && "opacity-0"}`}>
+							{currentSlide?.tutorialTitle}
+						</span>
+
+						<button
+							onClick={() => emblaApi?.scrollNext()}
+							disabled={isStartingPage}
+							className={`pill button p-1! aspect-square text-2xl ${isStartingPage && "cursor-auto!"}`}
+							aria-label="Scroll Carousel Right"
+						>
+							<Icon icon="tabler:chevron-right" />
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/tutorial/switch-add-mii.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import Tutorial from ".";
+
+export default function SwitchAddMiiTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
+				<Icon icon="fa:question-circle" />
+				<span>Tutorial</span>
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Adding Mii",
+								steps: [
+									{
+										text: "1. Press X to open the menu, then select 'Add a Mii'",
+										imageSrc: "/tutorial/switch/adding-mii/step1.jpg",
+									},
+									{
+										text: "2. Press 'From scratch' and choose the Male template",
+										imageSrc: "/tutorial/switch/adding-mii/step2.jpg",
+									},
+									{
+										text: "3. Click on the features image on this page to zoom it in and add all features on the mii editor",
+										imageSrc: "/tutorial/switch/adding-mii/step3.png",
+									},
+									{
+										text: "4. If the author added instructions, follow them (not all instructions will be there, check next slide for more)",
+										imageSrc: "/tutorial/switch/adding-mii/step4.jpg",
+									},
+									{
+										text: "5. For instructions like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
+										imageSrc: "/tutorial/switch/step4.jpg",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/components/tutorial/switch-submit.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import Tutorial from ".";
+
+export default function SwitchSubmitTutorialButton() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={() => setIsOpen(true)} className="text-sm text-orange-400 cursor-pointer underline-offset-2 hover:underline">
+				How to?
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<Tutorial
+						tutorials={[
+							{
+								title: "Submitting",
+								steps: [
+									{
+										text: "1. Press X to open the menu, then select 'Residents'",
+										imageSrc: "/tutorial/switch/submitting/step1.jpg",
+									},
+									{
+										text: "2. Find the Mii you want to submit and edit it",
+										imageSrc: "/tutorial/switch/submitting/step2.jpg",
+									},
+									{
+										text: "3. Press Y to open the features list, then take a screenshot and upload to this submit form",
+										imageSrc: "/tutorial/switch/submitting/step3.jpg",
+									},
+									{
+										text: "4. Adding Mii colors and settings is recommended. All instructions are optional; for values like height or distance, use the number of button clicks (positive for buttons on right, negative for buttons on left)",
+										imageSrc: "/tutorial/switch/step4.jpg",
+									},
+									{ type: "finish" },
+								],
+							},
+						]}
+						isOpen={isOpen}
+						setIsOpen={setIsOpen}
+					/>,
+					document.body,
+				)}
+		</>
+	);
+}

frontend/src/layout.astro

@@ -0,0 +1,91 @@
+---
+import "./styles/global.css";
+import "react-image-crop/dist/ReactCrop.css";
+
+import Header from "./components/header.astro";
+import Footer from "./components/footer.astro";
+// import AdminBanner from "./components/admin/banner";
+import Providers from "./components/provider";
+import { Font } from "astro:assets";
+// import SessionWrapper from "./components/SessionWrapper";
+
+const baseUrl = import.meta.env.PUBLIC_BASE_URL;
+
+const jsonLd = {
+	"@context": "https://schema.org",
+	"@type": "WebSite",
+	name: "TomodachiShare",
+	url: "https://tomodachishare.com",
+	description: "Discover and share Mii residents for your Tomodachi Life island!",
+	inLanguage: "en",
+	publisher: {
+		"@type": "Organization",
+		name: "TomodachiShare",
+		url: "https://tomodachishare.com",
+		logo: {
+			"@type": "ImageObject",
+			url: "https://tomodachishare.com/logo.png",
+		},
+		sameAs: ["https://trafficlunar.net", "https://twitter.com/trafficlunr", "https://bsky.app/profile/trafficlunar.net"],
+	},
+	potentialAction: {
+		"@type": "SearchAction",
+		target: "https://tomodachishare.com/?q={search_term_string}",
+		"query-input": "required name=search_term_string",
+	},
+};
+---
+
+<html lang="en">
+	<head>
+		<Font cssVariable="--font-lexend" />
+
+		<meta charset="UTF-8" />
+
+		<!-- SEO -->
+		<title>TomodachiShare - home for Tomodachi Life Miis!</title>
+		<meta name="description" content="Discover and share Mii residents for your Tomodachi Life island!" />
+		<meta name="keywords" content="mii, tomodachi life, nintendo, tomodachishare, tomodachi-share, mii creator, mii collection" />
+		<meta name="robots" content="index, follow" />
+
+		<!-- OpenGraph -->
+		<meta property="og:site_name" content="TomodachiShare" />
+		<meta property="og:title" content="TomodachiShare" />
+		<meta property="og:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
+		<meta property="og:image" content="/preview.png" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content={baseUrl} />
+
+		<!-- Twitter -->
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content="TomodachiShare - Discover and Share Your Mii Residents" />
+		<meta name="twitter:description" content="Discover and share Mii residents for your Tomodachi Life island!" />
+		<meta name="twitter:image" content="/preview.png" />
+		<meta name="twitter:creator" content="@trafficlunr" />
+
+		<!-- JSON-LD -->
+		<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd).replace(/</g, "\\u003c")} />
+
+		<!-- Analytics -->
+		{
+			import.meta.env.PROD && (
+				<script is:inline defer src="https://analytics.trafficlunar.net/script.js" data-website-id="bc530384-9b7d-471a-b2e3-f9859da50c24" />
+			)
+		}
+	</head>
+
+	<body class="font-[Lexend] antialiased flex flex-col items-center min-h-screen">
+		<Providers client:load>
+			<!-- <SessionWrapper client:load> -->
+			<Header />
+			<!-- <AdminBanner client:load /> -->
+
+			<main class="px-4 py-8 max-w-7xl w-full grow flex flex-col">
+				<slot />
+			</main>
+
+			<Footer />
+			<!-- </SessionWrapper> -->
+		</Providers>
+	</body>
+</html>

frontend/src/lib/abbreviation.ts

@@ -0,0 +1,11 @@
+export function abbreviateNumber(number: number): string {
+	if (number < 1000) return number.toString();
+
+	const units = ["", "K", "M", "B", "T"]; // very unlikely to go into thousands, let alone millions, but you never know
+	// update: it went into thousands
+	const order = Math.floor(Math.log10(number) / 3);
+	const unit = units[order] || "";
+	const scaled = number / Math.pow(10, order * 3);
+
+	return `${scaled.toFixed(scaled < 10 ? 1 : 0)}${unit}`;
+}

frontend/src/pages/404.astro

@@ -0,0 +1,17 @@
+---
+import { Icon } from "astro-icon/components";
+import Layout from "../layout.astro";
+---
+
+<Layout>
+	<div class="grow flex items-center justify-center">
+		<div class="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
+			<h2 class="text-7xl font-black">404</h2>
+			<p>Page not found - you swam off the island!</p>
+			<a href="/" class="pill button gap-2 mt-8 w-fit self-center">
+				<Icon name="ic:round-home" size={24} />
+				Travel Back
+			</a>
+		</div>
+	</div>
+</Layout>

frontend/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import Layout from "../layout.astro";
+import IndexPage from "../components/pages/index";
+---
+
+<Layout>
+	<!-- <Suspense fallback={<Skeleton />}> -->
+	<!-- <MiiList searchParams={Astro.url.searchParams} /> -->
+	<!-- </Suspense> -->
+	<IndexPage client:only />
+</Layout>

frontend/src/pages/login.astro

@@ -0,0 +1,54 @@
+---
+import Layout from "../layout.astro";
+import { Icon } from "astro-icon/components";
+
+const API_BASE_URL = import.meta.env.PUBLIC_API_URL;
+---
+
+<Layout>
+	<div class="grow flex items-center justify-center">
+		<div class="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-10 py-12 max-w-md text-center">
+			<h1 class="text-3xl font-bold mb-4">Welcome to TomodachiShare!</h1>
+
+			<div class="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-8">
+				<hr class="grow border-zinc-300" />
+				<span>Choose your login method</span>
+				<hr class="grow border-zinc-300" />
+			</div>
+
+			<div class="flex flex-col items-center gap-2">
+				<a
+					href={`${API_BASE_URL}/api/auth/signin/discord`}
+					aria-label="Login with Discord"
+					class="pill button gap-2 px-3! bg-indigo-400! border-indigo-500! hover:bg-indigo-500!"
+				>
+					<Icon name="ic:baseline-discord" size={32} />
+					Login with Discord
+				</a>
+				<a
+					href={`${API_BASE_URL}/api/auth/signin/github`}
+					aria-label="Login with GitHub"
+					class="pill button gap-2 px-3! bg-zinc-700! border-zinc-800! hover:bg-zinc-800! text-white"
+				>
+					<Icon name="mdi:github" size={32} />
+					Login with GitHub
+				</a>
+				<a
+					href={`${API_BASE_URL}/api/auth/signin/google`}
+					aria-label="Login with Google"
+					class="pill button gap-2 px-3! bg-white! border-gray-300! hover:bg-gray-100! text-black! flex items-center"
+				>
+					<Icon name="material-icon-theme:google" size={32} />
+					Login with Google
+				</a>
+			</div>
+
+			<p class="mt-8 text-xs text-zinc-400">
+				By signing up, you agree to the{" "}
+				<a href="/terms-of-service" class="underline hover:text-zinc-600">Terms of Service</a>{" "}
+				and{" "}
+				<a href="/privacy" class="underline hover:text-zinc-600">Privacy Policy</a>.
+			</p>
+		</div>
+	</div>
+</Layout>

frontend/src/pages/mii/[id].astro

@@ -0,0 +1,12 @@
+---
+import MiiPage from "../../components/pages/mii";
+import Layout from "../../layout.astro";
+
+const { id } = Astro.params;
+
+export const prerender = false;
+---
+
+<Layout>
+	<MiiPage client:load id={id} />
+</Layout>

frontend/src/pages/privacy.astro

@@ -0,0 +1,104 @@
+---
+import Layout from "../layout.astro";
+---
+
+<Layout>
+	<div class="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
+		<h1 class="text-2xl font-bold">Privacy Policy</h1>
+		<h2 class="font-light">
+			<strong class="font-medium">Effective Date:</strong> 13 April 2026
+		</h2>
+
+		<hr class="border-black/20 mt-1 mb-4" />
+
+		<p>By using this website, you confirm that you understand and agree to this Privacy Policy.</p>
+		<p class="mt-1">
+			If you have any questions or concerns, please contact me at:{" "}
+			<a href="mailto:hello@trafficlunar.net" class="text-blue-700"> hello@trafficlunar.net </a>
+			.
+		</p>
+
+		<ul class="list-decimal ml-5 marker:text-xl marker:font-semibold">
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Information We Collect</h3>
+
+				<section>
+					<p class="mb-2">The following types of information are stored when you use this website:</p>
+					<ul class="list-disc list-inside">
+						<li>
+							<strong>Account Information:</strong> When you sign up or log in using Discord or Github, your name, e-mail, and profile picture are collected. Your
+							authentication tokens may also be temporarily stored to maintain your login session.
+						</li>
+						<li>
+							<strong>Miis:</strong> We store any Miis you submit, including associated images (such as a picture of your Mii, QR codes, and custom images).
+						</li>
+						<li>
+							<strong>Interaction Data:</strong> The Miis you like.
+						</li>
+					</ul>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Use of Cookies</h3>
+
+				<section>
+					<p class="mb-2">Cookies are necessary for user sessions and authentication. We do not use cookies for tracking or advertising purposes.</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Analytics</h3>
+
+				<section>
+					<p class="mb-2">
+						We use{" "}
+						<a href="https://umami.is/" class="text-blue-700"> Umami </a>{" "}
+						to collect anonymous data about how users interact with the site. Umami is fully GDPR-compliant, and no personally identifiable information is collected
+						through this service.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Data Sharing</h3>
+
+				<section>
+					<p class="mb-2">
+						We do not sell your personal data to third parties. Your data may be sent anonymously to self-hosted third-party services or trusted third-party
+						tools (such as analytics) but these services are used solely to keep the site functional.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Your Rights</h3>
+
+				<section>
+					<p class="mb-2">As a user, you have the right to:</p>
+					<ul class="list-disc list-inside indent-4">
+						<li>Access the personal data we hold about you.</li>
+						<li>Request corrections to any inaccurate or incomplete information.</li>
+						<li>Request the deletion of your personal data.</li>
+					</ul>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Data Deletion</h3>
+
+				<section>
+					<p class="mb-2">
+						Your data, including your Miis, will be retained for as long as you have an account on the site. You may request that your data be deleted at any
+						time by going to your profile page, clicking the settings icon, and clicking the &apos;Delete Account&apos; button. Upon clicking, your data will be
+						promptly removed from our servers.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Changes to this Privacy Policy</h3>
+
+				<section>
+					<p class="mb-2">
+						This Privacy Policy may be updated from time to time. We encourage you to review this policy periodically to stay informed about your privacy.
+					</p>
+				</section>
+			</li>
+		</ul>
+	</div>
+</Layout>

frontend/src/pages/profile/[id].astro

@@ -0,0 +1,12 @@
+---
+import ProfilePage from "../../components/pages/profile";
+import Layout from "../../layout.astro";
+
+const { id } = Astro.params;
+
+export const prerender = false;
+---
+
+<Layout>
+	<ProfilePage client:only id={id} />
+</Layout>

frontend/src/pages/profile/settings.astro

@@ -0,0 +1,9 @@
+---
+import ProfileSettings from "../../components/profile-settings";
+import Layout from "../../layout.astro";
+---
+
+<Layout>
+	<!-- <ProfileInformation client:only page="settings" /> -->
+	<ProfileSettings client:only currentDescription={null} />
+</Layout>

frontend/src/pages/submit.astro

@@ -0,0 +1,8 @@
+---
+import SubmitForm from "../components/submit-form";
+import Layout from "../layout.astro";
+---
+
+<Layout>
+	<SubmitForm client:load />
+</Layout>

frontend/src/pages/terms-of-service.astro

@@ -0,0 +1,133 @@
+---
+import Layout from "../layout.astro";
+---
+
+<Layout>
+	<div class="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
+		<h1 class="text-2xl font-bold">Terms of Service</h1>
+		<h2 class="font-light">
+			<strong class="font-medium">Effective Date:</strong> March 26, 2026
+		</h2>
+
+		<hr class="border-black/20 mt-1 mb-4" />
+
+		<p>
+			By registering for, or using this service, you confirm that you understand and agree to the terms below. If you do not agree to these terms, you should
+			not use the service.
+		</p>
+		<p class="mt-1">
+			If you have any questions or concerns, please contact me at:{" "}
+			<a href="mailto:hello@trafficlunar.net" class="text-blue-700"> hello@trafficlunar.net </a>
+			.
+		</p>
+
+		<ul class="list-decimal ml-5 marker:text-xl marker:font-semibold">
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Usage Policy</h3>
+
+				<section>
+					<p class="mb-2">As a user of this site, you must abide by these guidelines:</p>
+					<ul class="list-disc list-inside indent-4">
+						<li>Nothing that would interfere with or gain unauthorized access to the website or its systems.</li>
+						<li>Nothing that is against the law in the United Kingdom.</li>
+						<li>No NSFW, violent, gory, or inappropriate Miis or images.</li>
+						<li>No spam.</li>
+						<li>No impersonation of others.</li>
+						<li>No malware, malicious links, or phishing content.</li>
+						<li>No harassment, hate speech, threats, or bullying towards others.</li>
+						<li>Miis must be high quality: for example, not following all instructions on the submit form correctly.</li>
+						<li>Avoid using inappropriate language. Profanity may be automatically censored.</li>
+						<li>No use of automated scripts, bots, or scrapers to access or interact with the site.</li>
+					</ul>
+					<p class="mt-2">
+						If you find anybody or a Mii breaking these rules, please report it by going to their page and clicking the &quot;Report&quot; button.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Termination</h3>
+
+				<section>
+					<p class="mb-2">
+						We reserve the right to suspend or terminate your access to the site at any time if you violate these Terms of Service or engage in any activities
+						that disrupt the functionality of the site.
+					</p>
+					<p>
+						To request deletion of your account and personal data, please refer to the{" "}
+						<a href="/privacy" class="text-blue-700"> Privacy Policy </a>{" "}
+						(see &quot;Data Deletion&quot;) or email me at{" "}
+						<a href="mailto:hello@trafficlunar.net" class="text-blue-700"> hello@trafficlunar.net </a>
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Eligibility</h3>
+				<section>
+					<p class="mb-2">By using this service, you confirm that you are at least 13 years old or have the consent of a parent or guardian.</p>
+				</section>
+			</li>
+
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Liability</h3>
+
+				<section>
+					<p class="mb-2">
+						This service is provided &quot;as is&quot; and without any warranties. We are not responsible for any user-generated content or the actions of users
+						on the site. You use the site at your own risk.
+					</p>
+					<p>
+						We do not guarantee continuous or secure access to the service and are not liable for any damages resulting from interruptions, loss of data, or
+						unauthorized access.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">DMCA & Copyright</h3>
+
+				<section>
+					<p class="mb-2">
+						If you believe that content uploaded to this site infringes on your copyright, you may submit a DMCA takedown request by emailing{" "}
+						<a href="mailto:hello@trafficlunar.net" class="text-blue-700"> hello@trafficlunar.net </a>{" "}
+						or by reporting the Mii on its page.
+					</p>
+					<p class="mb-2">Please include:</p>
+					<ul class="list-disc list-inside indent-4">
+						<li>Your name and contact information</li>
+						<li>A description of the copyrighted work</li>
+						<li>A link to the allegedly infringing material</li>
+						<li>A statement that you have a good faith belief that the use is not authorized</li>
+						<li>
+							A statement that the information in the notice is accurate and, under penalty of perjury, that you are authorized to act on behalf of the
+							copyright owner
+						</li>
+						<li>Your electronic or physical signature</li>
+					</ul>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Nintendo Disclaimer</h3>
+
+				<section>
+					<p class="mb-2">
+						This site is not affiliated with, endorsed by, or associated with Nintendo in any way. &quot;Mii&quot; and all related character designs are
+						trademarks of Nintendo Co., Ltd.
+					</p>
+					<p>
+						All Mii-related content is shared by users under the assumption that it does not violate any third-party rights. If you believe your rights have
+						been infringed, please see the DMCA section above.
+					</p>
+				</section>
+			</li>
+			<li>
+				<h3 class="text-xl font-semibold mt-6 mb-2">Changes to this Terms of Service</h3>
+
+				<section>
+					<p class="mb-2">
+						This Terms of Service may be updated from time to time. We encourage you to review the terms periodically to stay informed about the use of the
+						site. We may notify users via a site banner or other means if changes are made to the Terms of Service.
+					</p>
+				</section>
+			</li>
+		</ul>
+	</div>
+</Layout>

frontend/src/session.ts

@@ -0,0 +1,11 @@
+import { atom } from "nanostores";
+
+interface SessionData {
+	user?: {
+		id: string;
+		image: string;
+		name: string;
+	};
+}
+
+export const session = atom<SessionData | null>(null);

frontend/src/styles/global.css

@@ -0,0 +1,149 @@
+@import "tailwindcss";
+
+@theme {
+	--animate-like: like 0.5s ease;
+
+	@keyframes like {
+		0% {
+			transform: scale(1);
+		}
+		30% {
+			transform: scale(1.25);
+		}
+		60% {
+			transform: scale(0.95);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+}
+
+.pill {
+	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-3xl shadow-md;
+}
+
+.button {
+	@apply hover:bg-orange-400 transition cursor-pointer;
+}
+
+.button:disabled {
+	@apply text-zinc-600 bg-zinc-100! border-zinc-300! cursor-auto;
+}
+
+.input {
+	@apply bg-orange-200! outline-0 focus:ring-[3px] ring-orange-400/50 transition placeholder:text-black/40;
+}
+
+.input:disabled {
+	@apply text-zinc-600 bg-zinc-100! border-zinc-300!;
+}
+
+.checkbox {
+	@apply flex items-center justify-center appearance-none size-5 bg-orange-300 border-2 border-orange-400 rounded-md cursor-pointer checked:bg-orange-400;
+}
+
+.checkbox::after {
+	@apply hidden size-4 bg-cover bg-no-repeat content-[''];
+	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
+}
+
+.checkbox:checked::after {
+	@apply block;
+}
+
+.checkbox-alt {
+	@apply relative appearance-none bg-zinc-400 rounded-2xl h-5 w-8.5 cursor-pointer transition-all
+                    after:transition-all after:bg-zinc-100 after:rounded-full after:h-3.5 after:absolute after:w-3.5
+                    after:left-[3px] after:top-[3px] hover:bg-zinc-500 checked:bg-orange-400 checked:after:left-[16px]
+                    checked:hover:bg-orange-500 ml-auto;
+}
+
+[data-tooltip] {
+	@apply relative z-10;
+}
+
+[data-tooltip]::before {
+	@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-orange-400 opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
+}
+
+[data-tooltip]::after {
+	@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-orange-400 border border-orange-400 rounded-md text-sm text-white opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
+}
+
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after {
+	@apply opacity-100 scale-100;
+}
+
+/* Fallback Tooltips */
+[data-tooltip-span] {
+	@apply relative;
+}
+
+[data-tooltip-span] > .tooltip {
+	@apply absolute left-1/2 top-full mt-2 px-2 py-1 bg-orange-400 border border-orange-400 rounded-md text-sm text-white whitespace-nowrap select-none pointer-events-none shadow-md opacity-0 scale-75 transition-all duration-200 ease-out origin-top -translate-x-1/2 z-999999;
+}
+
+[data-tooltip-span] > .tooltip::before {
+	@apply content-[''] absolute left-1/2 -translate-x-1/2 -top-2 border-4 border-transparent border-b-orange-400;
+}
+
+[data-tooltip-span]:hover > .tooltip {
+	@apply opacity-100 scale-100;
+}
+
+/* Scrollbar */
+/* Firefox */
+* {
+	scrollbar-color: #ff8903 transparent;
+}
+
+/* Chrome, and Safari */
+*::-webkit-scrollbar-track {
+	background: #ff8903;
+}
+
+/* Range input */
+input[type="range"] {
+	@apply appearance-none bg-transparent not-disabled:cursor-pointer;
+}
+
+/* Track */
+input[type="range"]::-webkit-slider-runnable-track {
+	@apply h-1 bg-orange-300 rounded-full;
+}
+
+input[type="range"]::-moz-range-track {
+	@apply h-1 bg-orange-300 rounded-full;
+}
+
+/* Thumb */
+input[type="range"]::-webkit-slider-thumb,
+input[type="range"]::-moz-range-thumb {
+	@apply appearance-none size-4.5 bg-orange-400 border-2 border-orange-600 rounded-full shadow-md transition;
+}
+
+/* Hover */
+input[type="range"]:hover::-webkit-slider-thumb {
+	@apply not-disabled:bg-orange-500;
+}
+
+input[type="range"]:hover::-moz-range-thumb {
+	@apply not-disabled:bg-orange-500;
+}
+
+body {
+	@apply bg-amber-50 text-slate-800;
+	font-family: var(--font-lexend);
+
+	/* 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;
+}