feat: add back likes and admin banners

backend/next.config.ts

@@ -9,7 +9,8 @@ const nextConfig: NextConfig = {
 				headers: [
 					{ key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:4321" },
 					{ key: "Access-Control-Allow-Credentials", value: "true" },
-					{ key: "Access-Control-Allow-Methods", value: "GET,POST,PATCH,DELETE,OPTIONS" },
+					{ key: "Access-Control-Allow-Methods", value: "GET,POST,DELETE,OPTIONS" },
+					{ key: "Access-Control-Allow-Headers", value: "Content-Type" },
 				],
 			},
 		];

backend/src/app/api/admin/accept-mii/route.ts

@@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { idSchema } from "@tomodachi-share/shared/schemas";
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/admin/can-submit/route.ts

@@ -1,13 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
 import { auth } from "@/lib/auth";
-import { settings } from "@/lib/settings";
+import { settings } from "../../../../lib/settings";
 
 export async function GET() {
 	return NextResponse.json({ success: true, value: settings.canSubmit });
 }
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/admin/queue/route.ts

@@ -1,13 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
 import { auth } from "@/lib/auth";
-import { settings } from "@/lib/settings";
+import { settings } from "../../../../lib/settings";
 
 export async function GET() {
 	return NextResponse.json({ success: true, value: settings.queueEnabled });
 }
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/admin/regenerate-metadata-images/route.ts

@@ -3,7 +3,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { generateMetadataImage } from "@/lib/images";
 
-export async function PATCH() {
+export async function POST() {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/auth/about-me/route.ts

@@ -6,7 +6,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { RateLimit } from "@/lib/rate-limit";
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/auth/delete/route.ts

@@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { RateLimit } from "@/lib/rate-limit";
 
-export async function DELETE(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/auth/name/route.ts

@@ -6,7 +6,7 @@ import { prisma } from "@/lib/prisma";
 import { userNameSchema } from "@tomodachi-share/shared/schemas";
 import { RateLimit } from "@/lib/rate-limit";
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session || !session.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/auth/picture/route.ts

@@ -17,7 +17,7 @@ const formDataSchema = z.object({
 	image: z.union([z.instanceof(File), z.any()]).optional(),
 });
 
-export async function PATCH(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/mii/[id]/delete/route.ts

@@ -10,7 +10,7 @@ import { RateLimit } from "@/lib/rate-limit";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 
-export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

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

@@ -14,7 +14,7 @@ import { idSchema, nameSchema, switchMiiInstructionsSchema, tagsSchema } from "@
 import { generateMetadataImage, validateImage } from "@/lib/images";
 import { RateLimit } from "@/lib/rate-limit";
 import { minifyInstructions, SwitchMiiInstructions } from "@tomodachi-share/shared";
-import { settings } from "@/lib/settings";
+import { settings } from "../../../../../lib/settings";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 
@@ -41,7 +41,7 @@ const editSchema = z.object({
 	image3: z.union([z.instanceof(File), z.any()]).optional(),
 });
 
-export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/mii/[id]/like/route.ts

@@ -5,7 +5,7 @@ import { prisma } from "@/lib/prisma";
 import { idSchema } from "@tomodachi-share/shared/schemas";
 import { RateLimit } from "@/lib/rate-limit";
 
-export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

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

@@ -89,6 +89,10 @@ export async function GET(request: NextRequest) {
 		_count: {
 			select: { likedBy: true },
 		},
+		// Admin
+		...(parentPage === "admin" && {
+			description: true,
+		}),
 	};
 
 	let totalCount: number;

backend/src/app/api/return/route.ts

@@ -4,7 +4,7 @@ import { auth } from "@/lib/auth";
 import { RateLimit } from "@/lib/rate-limit";
 import { prisma } from "@/lib/prisma";
 
-export async function DELETE(request: NextRequest) {
+export async function POST(request: NextRequest) {
 	const session = await auth();
 	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 

backend/src/app/api/submit/route.ts

@@ -18,7 +18,7 @@ import Mii from "../../../../../shared/src/mii.js/mii";
 import { convertQrCode, minifyInstructions, ThreeDsTomodachiLifeMii } from "@tomodachi-share/shared";
 
 import { SwitchMiiInstructions } from "@tomodachi-share/shared";
-import { settings } from "@/lib/settings";
+import { settings } from "../../../lib/settings";
 
 const uploadsDirectory = path.join(process.cwd(), "uploads", "mii");
 

backend/src/app/out/page.tsx

@@ -1,72 +0,0 @@
-import { Metadata } from "next";
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { Icon } from "@iconify/react";
-
-export const metadata: Metadata = {
-	title: "Leaving TomodachiShare",
-	description: "Warning: You are leaving TomodachiShare, proceed with caution",
-};
-
-interface Props {
-	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}
-
-export default async function LinkOutPage({ searchParams }: Props) {
-	const url = (await searchParams).url;
-	if (!url || Array.isArray(url)) redirect("/");
-
-	let parsed: URL;
-	try {
-		parsed = new URL(url);
-	} catch {
-		redirect("/"); // redirect if URL is invalid
-	}
-
-	// Next.js doesn't allow attacks like these but you can never be too safe
-	if (!["http:", "https:"].includes(parsed.protocol)) redirect("/");
-
-	const isSafe = Array.from(SAFE_LINKS).some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
-	if (isSafe) redirect(url);
-
-	return (
-		<div className="grow flex items-center justify-center">
-			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg py-8 px-6 max-w-md w-full text-center flex flex-col items-center">
-				<h2 className="text-3xl font-black flex items-center gap-2 mb-1">
-					<Icon icon="mingcute:alert-fill" className="text-5xl" />
-					Warning
-				</h2>
-				<p>You're attempting to leave TomodachiShare island! The destination website is potentially dangerous.</p>
-
-				<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 break-all w-full mt-4">
-					<code className="font-mono text-sm">{url}</code>
-				</div>
-
-				<div className="flex justify-center gap-2">
-					<Link href="/" className="pill button gap-2 mt-8 w-fit self-center bg-zinc-100! border-zinc-300! hover:bg-zinc-300!">
-						<Icon icon="ic:round-home" fontSize={24} />
-						Travel Back
-					</Link>
-					<Link href={url} target="_blank" rel="noopener noreferrer" className="pill button gap-2 mt-8 w-fit self-center">
-						<Icon icon="ic:round-open-in-new" fontSize={21} />
-						Continue
-					</Link>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-const SAFE_LINKS = new Set([
-	"tomodachishare.com",
-	"trafficlunar.net",
-	"youtube.com",
-	"youtu.be",
-	"twitter.com",
-	"x.com",
-	"reddit.com",
-	"tiktok.com",
-	"tumblr.com",
-	"instagram.com",
-	"wikipedia.org",
-]);

backend/src/lib/auth.ts

@@ -18,6 +18,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 				sameSite: "none",
 				path: "/",
 				secure: true,
+				domain: process.env.NODE_ENV === "production" ? ".tomodachishare.com" : "localhost",
 			},
 		},
 	},

backend/src/lib/images.tsx

@@ -190,7 +190,7 @@ export async function generateMetadataImage(mii: Mii, author: string): Promise<{
 
 				{/* Watermark */}
 				<div tw="absolute bottom-0 right-0 flex items-center">
-					<img src={`${process.env.NEXT_PUBLIC_BASE_URL}/logo.svg`} height={32} />
+					<img src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/logo.svg`} height={32} />
 					{/* I tried using text-orange-400 but it wasn't correct..? */}
 					<span tw="ml-2 font-black text-xl" style={{ color: "#FF8904" }}>
 						TomodachiShare

frontend/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130.734" height="105.615" viewBox="0 0 34.59 27.944"><rect width="32.208" height="25.562" x="1.191" y="1.191" rx="1.874" fill="#f8f8f8" stroke="#ff8904" stroke-width="2.381" paint-order="stroke fill markers"/><rect width="29.369" height="22.49" x="2.611" y="2.727" rx=".966" fill="#c8c8c8" paint-order="stroke fill markers"/><g fill="#fef3c6"><rect width="13.371" height="20.989" x="17.918" y="3.478" rx=".423" paint-order="stroke fill markers"/><rect width="13.371" height="20.989" x="3.301" y="3.478" rx=".423" paint-order="stroke fill markers"/></g><g fill="#ff8904"><use href="#B" paint-order="stroke fill markers"/><circle cx="9.986" cy="13.076" r="5.512" paint-order="stroke fill markers"/><use href="#B" x="14.204" y="-0.093" paint-order="stroke fill markers"/><circle cx="24.191" cy="12.983" r="5.512" paint-order="stroke fill markers"/></g><g fill="none" stroke="#c8c8c8" stroke-linejoin="round"><rect width="13.791" height="20.704" x="17.295" y="3.62" ry="1.146" rx="1.095" stroke-width="1.786" paint-order="stroke fill markers"/><rect width="13.366" height="21.167" x="3.301" y="3.389" ry="1.146" rx="1.095" stroke-width="1.323" paint-order="stroke fill markers"/></g><defs ><path id="B" d="M15.03 24.516c0-2.307-.961-4.439-2.522-5.592s-3.483-1.153-5.044 0-2.522 3.285-2.522 5.592h5.044z"/></defs></svg>

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

@@ -2,13 +2,14 @@ import { useState } from "react";
 
 export default function BannerForm() {
 	const [message, setMessage] = useState("");
+	const API_URL = import.meta.env.VITE_API_URL;
 
 	const onClickClear = async () => {
-		await fetch("/api/admin/banner", { method: "DELETE" });
+		await fetch(`${API_URL}/api/admin/banner`, { method: "DELETE", credentials: "include" }); // TODO
 	};
 
 	const onClickSet = async () => {
-		await fetch("/api/admin/banner", { method: "POST", body: message });
+		await fetch(`${API_URL}/api/admin/banner`, { method: "POST", body: message, credentials: "include" });
 	};
 
 	return (

frontend/src/components/admin/banner.tsx

@@ -1,65 +1,68 @@
-// import { useSearchParams } from "next/navigation";
-// import { Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { Icon } from "@iconify/react";
+import { useSearchParams } from "react-router";
 
-// import useSWR from "swr";
-// import { Icon } from "@iconify/react";
+interface ApiResponse {
+	message: string;
+}
 
-// interface ApiResponse {
-// 	message: string;
-// }
+function RedirectBanner() {
+	const [searchParams] = useSearchParams();
+	const from = searchParams.get("from");
+	if (from !== "old-domain") return null;
 
-// const fetcher = (url: string) => fetch(url).then((res) => res.json());
+	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>
+	);
+}
 
-// function RedirectBanner() {
-// 	const searchParams = useSearchParams();
-// 	const from = searchParams.get("from");
-// 	if (from !== "old-domain") return null;
+export default function AdminBanner() {
+	const [message, setMessage] = useState<string | null>(null);
+	const [shouldShow, setShouldShow] = useState(false);
 
-// 	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>
-// 	);
-// }
+	useEffect(() => {
+		fetch(`${import.meta.env.VITE_API_URL}/api/admin/banner`)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to get admin banner");
+				return res.json() as Promise<ApiResponse>;
+			})
+			.then((data) => {
+				if (!data.message) return;
+				const closedBanner = localStorage.getItem("closedBanner");
+				setMessage(data.message);
+				setShouldShow(data.message !== closedBanner);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}, []);
 
-// export default function AdminBanner() {
-// 	const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
-// 	const [shouldShow, setShouldShow] = useState(true);
+	const handleClose = () => {
+		if (!message) return;
 
-// 	useEffect(() => {
-// 		if (!data?.message) return;
+		// Close banner and remember it
+		localStorage.setItem("closedBanner", message);
+		setShouldShow(false);
+	};
 
-// 		// Check if the current banner text was closed by the user
-// 		const closedBanner = window.localStorage.getItem("closedBanner");
-// 		setShouldShow(data.message !== closedBanner);
-// 	}, [data]);
+	return (
+		<>
+			{shouldShow && message && (
+				<div className="relative w-full min-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>{message}</span>
+					</div>
 
-// 	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>
-// 		</>
-// 	);
-// }
+					<button onClick={handleClose} className="sm:absolute right-2 cursor-pointer p-1.5">
+						<Icon icon="humbleicons:times" className="text-2xl min-w-6" />
+					</button>
+				</div>
+			)}
+			<RedirectBanner />
+		</>
+	);
+}

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

@@ -6,8 +6,8 @@
 // 	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) });
+// 		await fetch("/api/admin/can-submit", { method: "POST", body: JSON.stringify(canSubmit) });
+// 		await fetch("/api/admin/queue", { method: "POST", body: JSON.stringify(isQueueEnabled) });
 // 	};
 
 // 	return (

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

@@ -11,7 +11,7 @@ export default function RegenerateImagesButton() {
 	const [error, setError] = useState<string | undefined>(undefined);
 
 	const handleSubmit = async () => {
-		const response = await fetch("/api/admin/regenerate-metadata-images", { method: "PATCH" });
+		const response = await fetch("/api/admin/regenerate-metadata-images", { method: "POST" });
 
 		if (!response.ok) {
 			const data = await response.json();

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

@@ -11,7 +11,7 @@
 // 	const [error, setError] = useState<string | undefined>(undefined);
 
 // 	const handleClick = async () => {
-// 		const response = await fetch("/api/return", { method: "DELETE" });
+// 		const response = await fetch("/api/return", { method: "POST" });
 
 // 		if (!response.ok) {
 // 			const data = await response.json();

frontend/src/components/header-profile.tsx

@@ -1,61 +0,0 @@
-import { Icon } from "@iconify/react";
-import { useEffect } from "react";
-import { useStore } from "@nanostores/react";
-import { session } from "../session";
-import { Link } from "react-router";
-
-export default function HeaderProfile() {
-	const API_BASE_URL = import.meta.env.VITE_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>
-					<Link to={"/login"} className="pill button h-full">
-						Login
-					</Link>
-				</li>
-			) : (
-				<>
-					<li title="Your profile">
-						<Link
-							to={`/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>
-						</Link>
-					</li>
-					<li title="Logout">
-						<Link to={`${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} />
-						</Link>
-					</li>
-				</>
-			)}
-		</>
-	);
-}

frontend/src/components/header.tsx

@@ -1,9 +1,27 @@
 import { Icon } from "@iconify/react";
 import SearchBar from "./search-bar";
-import HeaderProfile from "./header-profile";
 import { Link } from "react-router";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
+import { useEffect } from "react";
 
 export default function Header() {
+	const $session = useStore(session);
+
+	useEffect(() => {
+		fetch(`${import.meta.env.VITE_API_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 (
 		<header className="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">
 			<Link
@@ -35,7 +53,47 @@ export default function Header() {
 						Submit
 					</Link>
 				</li>
-				<HeaderProfile />
+				{!$session?.user ? (
+					<li>
+						<Link to={"/login"} className="pill button h-full">
+							Login
+						</Link>
+					</li>
+				) : (
+					<>
+						<li title="Your profile">
+							<Link
+								to={`/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.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${$session.user.image}` : $session.user.image}
+									onError={(e) => {
+										e.currentTarget.onerror = null; // Prevent infinite loops
+										e.currentTarget.src = "/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>
+							</Link>
+						</li>
+						<li title="Logout">
+							<Link
+								to={`${import.meta.env.VITE_API_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} />
+							</Link>
+						</li>
+					</>
+				)}
 			</ul>
 		</header>
 	);

frontend/src/components/like-button.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { Icon, loadIcons } from "@iconify/react";
 import { abbreviateNumber } from "../lib/abbreviation";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
+import { useNavigate } from "react-router";
 
 interface Props {
 	likes: number;
@@ -11,33 +14,41 @@ interface Props {
 	big?: boolean;
 }
 
-export default function LikeButton({ likes, isLiked, disabled, abbreviate, big }: Props) {
+export default function LikeButton({ likes, miiId, isLiked, disabled, abbreviate, big }: Props) {
+	const $session = useStore(session);
+	const navigate = useNavigate();
 	const [isLikedState, setIsLikedState] = useState(isLiked);
-	const [likesState] = useState(likes);
-	const [isAnimating] = useState(false);
+	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);
-		// }
+		if (disabled || !miiId) return;
+		if ($session === undefined) return;
+		if ($session === null) {
+			navigate("/login");
+			return;
+		}
+
+		const prevLiked = isLikedState;
+		const prevLikes = likesState;
+		setIsLikedState(!prevLiked);
+		setLikesState(prevLiked ? likesState - 1 : likesState + 1);
+
+		// Trigger animation
+		if (!prevLiked) {
+			setIsAnimating(true);
+			setTimeout(() => setIsAnimating(false), 1000);
+		}
+
+		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/like`, { method: "POST", credentials: "include" });
+		if (response.ok) {
+			const { liked, count } = await response.json();
+			setIsLikedState(liked);
+			setLikesState(count);
+		} else {
+			setIsLikedState(prevLiked);
+			setLikesState(prevLikes);
+		}
 	};
 
 	// Preload like button icons

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

@@ -1,16 +1,18 @@
 import { Icon } from "@iconify/react";
 import DeleteMiiButton from "./delete-mii-button";
 import { Link } from "react-router";
+import { useStore } from "@nanostores/react";
+import { session } from "../../session";
 
 interface Props {
 	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;
+	const $session = useStore(session);
+	if ($session === undefined) return null;
+	if ($session === null) return null;
+	if (Number($session?.user?.id) !== mii.userId && Number($session?.user?.id) !== Number(import.meta.env.VITE_ADMIN_USER_ID)) return null;
 
 	return (
 		<>

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

@@ -22,7 +22,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
 	const [inputMiiName, setInputMiiName] = useState("");
 
 	const handleSubmit = async () => {
-		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/delete`, { method: "DELETE", credentials: "include" });
+		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/${miiId}/delete`, { method: "POST", credentials: "include" });
 		if (!response.ok) {
 			const { error } = await response.json();
 			setError(error);

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

@@ -9,7 +9,7 @@ import { Icon } from "@iconify/react";
 import LikeButton from "../../like-button";
 import { useStore } from "@nanostores/react";
 import { session } from "../../../session";
-import Carousel from "../../carousel";
+import Description from "../../description";
 
 interface ApiResponse {
 	totalCount: number;
@@ -26,6 +26,8 @@ export default function MiiList({ parentPage, userId }: Props) {
 	const [searchParams] = useSearchParams();
 	const [data, setData] = useState<ApiResponse | null>(null);
 	const [loading, setLoading] = useState(true);
+	const [acceptingAll, setAcceptingAll] = useState(false);
+	const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
 
 	const $session = useStore(session);
 
@@ -39,15 +41,46 @@ export default function MiiList({ parentPage, userId }: Props) {
 				if (!res.ok) throw new Error("Failed to fetch Miis");
 				return res.json();
 			})
-			.then((data) => {
+			.then(async (data) => {
 				setData(data);
 				setLoading(false);
+
+				if ($session === undefined || $session === null || !data.miis.length) return;
+				const ids = data.miis.map((m: any) => m.id).join(",");
+				fetch(`${import.meta.env.VITE_API_URL}/api/mii/has-liked?ids=${ids}`, { credentials: "include" })
+					.then((res) => (res.ok ? res.json() : []))
+					.then((likedIds: number[]) => setLikedIds(new Set(likedIds)))
+					.catch((err) => {
+						console.error("Error fetching likes:", err);
+					});
 			})
 			.catch((err) => {
 				console.error(err);
 				setLoading(false);
 			});
-	}, [searchParams, userId, parentPage]);
+	}, [searchParams, userId, parentPage, $session]);
+
+	async function handleAcceptAll() {
+		if (!data) return;
+		setAcceptingAll(true);
+		try {
+			await Promise.all(
+				data.miis.map((mii) =>
+					fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, {
+						method: "POST",
+						credentials: "include",
+					}),
+				),
+			);
+			const params = new URLSearchParams(searchParams.toString());
+			if (userId) params.append("userId", userId.toString());
+			if (parentPage) params.append("parentPage", parentPage);
+			const res = await fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${params.toString()}`, { credentials: "include" });
+			if (res.ok) setData(await res.json());
+		} finally {
+			setAcceptingAll(false);
+		}
+	}
 
 	return (
 		<>
@@ -62,6 +95,16 @@ export default function MiiList({ parentPage, userId }: Props) {
 						</div>
 
 						<div className="relative flex items-center justify-end gap-2 w-full md:max-w-2/3 max-md:justify-center">
+							{parentPage === "admin" && data.miis.length > 0 && (
+								<button
+									onClick={handleAcceptAll}
+									disabled={acceptingAll}
+									className="pill button flex items-center gap-1.5 px-3 py-1.5 bg-green-500! border-green-600! hover:bg-green-600! disabled:opacity-60 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-xl shadow transition-colors"
+								>
+									<Icon icon="material-symbols:check-circle-rounded" className="text-base" />
+									{acceptingAll ? "Accepting…" : `Accept All`}
+								</button>
+							)}
 							<FilterMenu />
 							<SortSelect />
 						</div>
@@ -80,7 +123,8 @@ export default function MiiList({ parentPage, userId }: Props) {
 									</div>
 								)}
 
-								{parentPage !== "admin" ? <Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
+								{parentPage !== "admin" ? (
+									<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
 										<img
 											src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
 											width={240}
@@ -88,13 +132,20 @@ export default function MiiList({ parentPage, userId }: Props) {
 											alt="mii image"
 											className="w-full h-auto aspect-3/2 object-contain"
 										/>
-								</Link> : <Carousel
-									images={[
+									</Link>
+								) : (
+									<div className="grid grid-cols-2 gap-1 rounded-xl bg-zinc-200">
+										{[
 											`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`,
-										...(mii.platform === "THREE_DS" ? [`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=qr-code`] : [`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=features`]),
-										...Array.from({ length: mii.imageCount }, (_, index) => `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=image${index}`),
-									]}
-								/>}
+											mii.platform === "THREE_DS"
+												? `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=qr-code`
+												: `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=features`,
+											...Array.from({ length: mii.imageCount }, (_, i) => `${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=image${i}`),
+										].map((src, i) => (
+											<img key={i} src={src} alt="mii image" className="w-full bg-zinc-200" />
+										))}
+									</div>
+								)}
 
 								<div className="p-4 flex flex-col gap-1 h-full">
 									<div className="flex justify-between">
@@ -109,6 +160,7 @@ export default function MiiList({ parentPage, userId }: Props) {
 											)}
 										</div>
 									</div>
+
 									<div id="tags" className="flex flex-wrap gap-1">
 										{mii.tags.map((tag: string) => (
 											<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
@@ -117,8 +169,10 @@ export default function MiiList({ parentPage, userId }: Props) {
 										))}
 									</div>
 
+									{parentPage === "admin" && mii.description && <Description text={mii.description} />}
+
 									<div className="mt-auto grid grid-cols-2 items-center">
-										<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
+										<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={likedIds.has(mii.id)} abbreviate />
 
 										{!userId && (
 											<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
@@ -135,13 +189,12 @@ export default function MiiList({ parentPage, userId }: Props) {
 											</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(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, { method: "PATCH", credentials: "include" });
+															await fetch(`${import.meta.env.VITE_API_URL}/api/admin/accept-mii?id=${mii.id}`, { method: "POST", credentials: "include" });
 														}}
 														className="cursor-pointer text-zinc-400 hover:text-green-500 transition-colors p-1 bg-white rounded-md shadow-sm border border-zinc-200 hover:border-green-500"
 														title="Accept Mii"

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

@@ -12,7 +12,7 @@ export default function DeleteAccount() {
 	const [error, setError] = useState<string | undefined>(undefined);
 
 	const handleSubmit = async () => {
-		const response = await fetch("/api/auth/delete", { method: "DELETE" });
+		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/delete`, { method: "POST", credentials: "include" });
 		if (!response.ok) {
 			const { error } = await response.json();
 			setError(error);

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

@@ -28,7 +28,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
 		}
 
 		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/about-me`, {
-			method: "PATCH",
+			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			body: JSON.stringify({ description }),
 			credentials: "include",
@@ -52,7 +52,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
 		}
 
 		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/name`, {
-			method: "PATCH",
+			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			body: JSON.stringify({ name }),
 			credentials: "include",

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

@@ -20,7 +20,7 @@ export default function ProfilePictureSettings() {
 		if (newPicture) formData.append("image", newPicture);
 
 		const response = await fetch(`${import.meta.env.VITE_API_URL}/api/auth/picture`, {
-			method: "PATCH",
+			method: "POST",
 			body: formData,
 			credentials: "include",
 		});

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

@@ -1,456 +0,0 @@
-// 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/index.tsx

@@ -1,529 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { type FileWithPath } from "react-dropzone";
-import { Icon } from "@iconify/react";
-
-import qrcode from "qrcode-generator";
-
-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";
-import type { MiiPlatform, MiiGender, MiiMakeup } from "@tomodachi-share/shared";
-import { useNavigate } from "react-router";
-
-export default function SubmitForm() {
-	const navigate = useNavigate();
-	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.VITE_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;
-		}
-
-		navigate(`/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/layout.tsx

@@ -1,3 +1,4 @@
+import AdminBanner from "./components/admin/banner";
 import Footer from "./components/footer";
 import Header from "./components/header";
 import { useEffect } from "react";
@@ -27,7 +28,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
 		<>
 			<Header />
-			{/* <AdminBanner /> */}
+			<AdminBanner />
 			<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
 			<Footer />
 		</>

frontend/src/main.tsx

@@ -21,6 +21,7 @@ import ProfileLikesPage from "./pages/profile/likes.tsx";
 import ReportMiiPage from "./pages/report/mii.tsx";
 import ReportUserPage from "./pages/report/user.tsx";
 import AdminPage from "./pages/admin.tsx";
+import EditMiiPage from "./pages/edit.tsx";
 
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
@@ -30,6 +31,7 @@ createRoot(document.getElementById("root")!).render(
 					<Routes>
 						<Route path="/" element={<IndexPage />} />
 						<Route path="/mii/:id" element={<MiiPage />} />
+						<Route path="/edit/:id" element={<EditMiiPage />} />
 						<Route path="/profile" element={<ProfileLayout />}>
 							<Route path=":id" element={<ProfilePage />} />
 							<Route path="likes" element={<ProfileLikesPage />} />

frontend/src/pages/admin.tsx

@@ -2,10 +2,16 @@ import { useStore } from "@nanostores/react";
 import MiiList from "../components/mii/list";
 import { session } from "../session";
 import { Navigate } from "react-router";
+import BannerForm from "../components/admin/banner-form";
 
 export default function AdminPage() {
 	const $session = useStore(session);
 	if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
-	if ($session === null || ($session && Number($session?.user?.id) !== 1)) return <Navigate to="/404" replace />;
-	return <MiiList parentPage="admin" />;
+	if ($session === null || Number($session?.user?.id) != import.meta.env.VITE_ADMIN_USER_ID) return <Navigate to="/404" replace />;
+	return (
+		<>
+			<BannerForm />
+			<MiiList parentPage="admin" />
+		</>
+	);
 }

frontend/src/pages/edit.tsx

@@ -0,0 +1,474 @@
+import { useStore } from "@nanostores/react";
+import { Navigate, useNavigate, useParams } from "react-router";
+import { session } from "../session";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+
+import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
+import { type MiiGender, type MiiMakeup, type SwitchMiiInstructions, deepMerge, defaultInstructions, minifyInstructions } from "@tomodachi-share/shared";
+import Carousel from "../components/carousel";
+import LikeButton from "../components/like-button";
+import TagSelector from "../components/tag-selector";
+import { Icon } from "@iconify/react";
+import SwitchFileUpload from "../components/submit-form/switch-file-upload";
+import SwitchSubmitTutorialButton from "../components/tutorial/switch-submit";
+import MiiEditor from "../components/submit-form/mii-editor";
+import ImageList from "../components/submit-form/image-list";
+import Dropzone from "../components/dropzone";
+import SubmitButton from "../components/submit-button";
+
+export default function EditMiiPage() {
+	const { id } = useParams();
+	const navigate = useNavigate();
+	const $session = useStore(session);
+	const [mii, setMii] = useState<any>(null);
+	const [loading, setLoading] = useState(true);
+
+	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("");
+	const [tags, setTags] = useState<string[]>([]);
+	const [description, setDescription] = useState("");
+	const [gender, setGender] = useState<MiiGender>("MALE");
+	const [makeup, setMakeup] = useState<MiiMakeup>("PARTIAL");
+	const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(undefined);
+	const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(undefined);
+	const [youtubeId, setYouTubeId] = useState("");
+	const instructions = useRef<SwitchMiiInstructions>(defaultInstructions);
+
+	const [quarantined, setQuarantined] = useState(false);
+	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(`${import.meta.env.VITE_API_URL}/api/mii/${mii.id}/edit`, {
+			method: "POST",
+			body: formData,
+			credentials: "include",
+		});
+		const { error } = await response.json();
+
+		if (!response.ok) {
+			setError(error);
+			return;
+		}
+
+		navigate(`/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(() => {
+		if (!mii) return;
+		const loadExistingImages = async () => {
+			try {
+				const existing = await Promise.all(
+					Array.from({ length: mii.imageCount }, async (_, index) => {
+						const path = `${API_URL}/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, mii?.id, mii?.imageCount]);
+
+	const API_URL = import.meta.env.VITE_API_URL;
+
+	useEffect(() => {
+		fetch(`${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);
+				setName(data.name);
+				setTags(data.tags);
+				setDescription(data.description);
+				setGender(data.gender ?? "MALE");
+				setMakeup(data.makeup ?? "PARTIAL");
+				setMiiPortraitUri(`${API_URL}/mii/${data.id}/image?type=mii`);
+				setMiiFeaturesUri(`${API_URL}/mii/${data.id}/image?type=features`);
+				setYouTubeId(data.youtubeId ?? "");
+				setQuarantined(data.quarantined);
+				instructions.current = deepMerge(defaultInstructions, (data.instructions as object) ?? {});
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.error(err);
+				setLoading(false);
+				navigate("/404");
+			});
+	}, [id]);
+
+	if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
+	if ($session === null) return <Navigate to="/" replace />;
+	if (loading || !mii) return <div className="p-6 text-center">Loading...</div>;
+	if (Number($session?.user?.id) !== mii.userId && Number($session?.user?.id) !== Number(import.meta.env.VITE_ADMIN_USER_ID))
+		// Check ownership
+		return <Navigate to="/" replace />;
+
+	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 ?? `${API_URL}/mii/${mii.id}/image?type=mii`,
+							...(mii.platform === "THREE_DS"
+								? [`${API_URL}/mii/${mii.id}/image?type=qr-code`]
+								: [miiFeaturesUri ?? `${API_URL}/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: string) => (
+								<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} 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?.user?.id == import.meta.env.VITE_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/pages/mii.tsx

@@ -10,12 +10,17 @@ import MiiInstructions from "../components/mii/instructions";
 import { Icon } from "@iconify/react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router";
+import AuthorButtons from "../components/mii/author-buttons";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
 
 export default function MiiPage() {
 	const { id } = useParams();
 	const navigate = useNavigate();
+	const $session = useStore(session);
 	const [mii, setMii] = useState<any>(null);
 	const [loading, setLoading] = useState(true);
+	const [isLiked, setIsLiked] = useState(false);
 
 	const API_URL = import.meta.env.VITE_API_URL;
 
@@ -28,6 +33,14 @@ export default function MiiPage() {
 			.then((data) => {
 				setMii(data);
 				setLoading(false);
+
+				if ($session === null || $session === undefined) return;
+				fetch(`${API_URL}/api/mii/has-liked?ids=${data.id}`, { credentials: "include" })
+					.then((res) => (res.ok ? res.json() : []))
+					.then((likedIds: number[]) => setIsLiked(likedIds.length > 0))
+					.catch((err) => {
+						console.error("Error liking:", err);
+					});
 			})
 			.catch((err) => {
 				console.error(err);
@@ -36,10 +49,7 @@ export default function MiiPage() {
 			});
 	}, [id]);
 
-	if (loading || !mii) {
-		return <div className="p-6 text-center">Loading...</div>;
-	}
-
+	if (loading || !mii) return <div className="p-6 text-center">Loading...</div>;
 	const images = [...Array.from({ length: mii.imageCount ?? 0 }, (_, index) => `${API_URL}/mii/${mii.id}/image?type=image${index}`)];
 
 	return (
@@ -254,7 +264,7 @@ export default function MiiPage() {
 								{/* 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={false} big />
+								<LikeButton likes={mii._count?.likedBy ?? 0} miiId={mii.id} isLiked={isLiked} 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">
@@ -291,7 +301,7 @@ export default function MiiPage() {
 
 						{/* 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} /> */}
+							<AuthorButtons mii={mii} />
 
 							<ShareMiiButton miiId={mii.id} />
 							<Link aria-label="Report Mii" to={`/report/mii/${mii.id}`}>

frontend/src/pages/profile/layout.tsx

@@ -15,14 +15,13 @@ export default function ProfileLayout() {
 
 	useEffect(() => {
 		if ($session === undefined) return; // session still loading
-		if ($session === null) {
-			// not logged in
+
+		const userId = id ?? $session?.user?.id;
+		if (!userId) {
 			navigate("/404");
 			return;
 		}
 
-		const userId = id ? id : $session.user!.id;
-
 		fetch(`${import.meta.env.VITE_API_URL}/api/profile/${userId}/info`)
 			.then((res) => {
 				if (!res.ok) throw new Error("Failed to fetch profile");

frontend/src/pages/submit.tsx

@@ -1,11 +1,542 @@
 import { useStore } from "@nanostores/react";
-import SubmitForm from "../components/submit-form";
+import { Navigate, useNavigate } from "react-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { FileWithPath } from "react-dropzone";
+import { Icon } from "@iconify/react";
+
+import {
+	convertQrCode,
+	defaultInstructions,
+	ThreeDsTomodachiLifeMii,
+	type MiiGender,
+	type MiiMakeup,
+	type MiiPlatform,
+	type SwitchMiiInstructions,
+} from "@tomodachi-share/shared";
+import { nameSchema, tagsSchema } from "@tomodachi-share/shared/schemas";
+import type { Mii } from "@tomodachi-share/shared/miijs";
+
+import Carousel from "../components/carousel";
+import LikeButton from "../components/like-button";
+import TagSelector from "../components/tag-selector";
+import SwitchFileUpload from "../components/submit-form/switch-file-upload";
+import SwitchSubmitTutorialButton from "../components/tutorial/switch-submit";
+import QrUpload from "../components/submit-form/qr-upload";
+import Camera from "../components/submit-form/camera";
+import ThreeDsScanTutorialButton from "../components/tutorial/3ds-scan";
+import Dropzone from "../components/dropzone";
+import ImageList from "../components/submit-form/image-list";
+import SubmitButton from "../components/submit-button";
+import MiiEditor from "../components/submit-form/mii-editor";
+
 import { session } from "../session";
-import { Navigate } from "react-router";
+import qrcode from "qrcode-generator";
 
 export default function SubmitPage() {
+	const navigate = useNavigate();
 	const $session = useStore(session);
+	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.VITE_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;
+		}
+
+		navigate(`/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]);
+
 	if ($session === undefined) return <div className="p-6 text-center">Loading...</div>;
 	if ($session === null) return <Navigate to="/login" replace />;
-	return <SubmitForm />;
+
+	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} />
+							<ThreeDsScanTutorialButton />
+
+							<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>
+	);
 }

shared/src/index.ts

@@ -2,4 +2,5 @@ export * from "./constants";
 export * from "./qr-codes";
 export * from "./switch";
 export * from "./three-ds-tomodachi-life-mii";
+export * from "./utils";
 export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform, ReportReason } from "./types";