refactor: move components directory into src

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

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

src/components/submit-form/index.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { redirect } from "next/navigation";
+
+import { useCallback, useEffect, useState } from "react";
+import { FileWithPath, useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+
+import qrcode from "qrcode-generator";
+
+import { nameSchema, tagsSchema } from "@/lib/schemas";
+import { convertQrCode } from "@/lib/qr-codes";
+import Mii from "@/lib/mii.js/mii";
+import TomodachiLifeMii from "@/lib/tomodachi-life-mii";
+
+import TagSelector from "../tag-selector";
+import ImageList from "./image-list";
+import QrUpload from "./qr-upload";
+import QrScanner from "./qr-scanner";
+import LikeButton from "../like-button";
+import Carousel from "../carousel";
+
+export default function SubmitForm() {
+	const [files, setFiles] = useState<FileWithPath[]>([]);
+
+	const handleDrop = useCallback((acceptedFiles: FileWithPath[]) => {
+		setFiles((prev) => [...prev, ...acceptedFiles]);
+	}, []);
+
+	const { getRootProps, getInputProps } = useDropzone({
+		onDrop: handleDrop,
+		maxFiles: 3,
+		accept: {
+			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp"],
+		},
+	});
+
+	const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
+	const [studioUrl, setStudioUrl] = useState<string | undefined>();
+	const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const [name, setName] = useState("");
+	const [tags, setTags] = useState<string[]>([]);
+	const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
+
+	const handleSubmit = async (event: React.FormEvent) => {
+		event.preventDefault();
+
+		// Validate before sending request
+		const nameValidation = nameSchema.safeParse(name);
+		if (!nameValidation.success) {
+			setError(nameValidation.error.errors[0].message);
+			return;
+		}
+		const tagsValidation = tagsSchema.safeParse(tags);
+		if (!tagsValidation.success) {
+			setError(tagsValidation.error.errors[0].message);
+			return;
+		}
+
+		// Send request to server
+		const formData = new FormData();
+		formData.append("name", name);
+		formData.append("tags", JSON.stringify(tags));
+		formData.append("qrBytesRaw", JSON.stringify(qrBytesRaw));
+		files.forEach((file, index) => {
+			// image1, image2, etc.
+			formData.append(`image${index + 1}`, file);
+		});
+
+		const response = await fetch("/api/submit", {
+			method: "POST",
+			body: formData,
+		});
+		const { id, error } = await response.json();
+
+		if (!response.ok) {
+			setError(error);
+			return;
+		}
+
+		redirect(`/mii/${id}`);
+	};
+
+	useEffect(() => {
+		if (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
+			let conversion: { mii: Mii; tomodachiLifeMii: TomodachiLifeMii };
+			try {
+				conversion = convertQrCode(qrBytes);
+			} catch (error) {
+				setError(error instanceof Error ? error.message : String(error));
+				return;
+			}
+
+			try {
+				setStudioUrl(conversion.mii.studioUrl({ width: 512 }));
+
+				// Generate a new QR code for aesthetic reasons
+				const byteString = String.fromCharCode(...qrBytes);
+				const generatedCode = qrcode(0, "L");
+				generatedCode.addData(byteString, "Byte");
+				generatedCode.make();
+
+				setGeneratedQrCodeUrl(generatedCode.createDataURL());
+			} catch {
+				setError("Failed to get and/or generate Mii images");
+			}
+		};
+
+		preview();
+	}, [qrBytesRaw]);
+
+	return (
+		<form onSubmit={handleSubmit} className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
+			<div className="flex justify-center">
+				<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
+					<Carousel
+						images={[studioUrl ?? "/missing.webp", generatedQrCodeUrl ?? "/missing.webp", ...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="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">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="flex-grow border-zinc-300" />
+					<span>Info</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="name" className="font-semibold">
+						Name
+					</label>
+					<input
+						name="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} />
+				</div>
+
+				{/* Separator */}
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+					<hr className="flex-grow border-zinc-300" />
+					<span>QR Code</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<div className="flex flex-col items-center gap-2">
+					<QrUpload setQrBytesRaw={setQrBytesRaw} />
+
+					<span>or</span>
+
+					<button type="button" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
+						<Icon icon="mdi:camera" fontSize={20} />
+						Use your camera
+					</button>
+
+					<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
+				</div>
+
+				{/* Separator */}
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+					<hr className="flex-grow border-zinc-300" />
+					<span>Custom images</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<div className="max-w-md w-full self-center">
+					<div
+						{...getRootProps({
+							className:
+								"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
+						})}
+					>
+						<input {...getInputProps()} />
+						<Icon icon="material-symbols:upload" fontSize={48} />
+						<p className="text-center text-sm">
+							Drag and drop your images here
+							<br />
+							or click to open
+						</p>
+					</div>
+				</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>}
+
+					<button type="submit" className="pill button w-min ml-auto">
+						Submit
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+}

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

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

src/components/submit-form/qr-scanner.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Webcam from "react-webcam";
+import jsQR from "jsqr";
+import { Icon } from "@iconify/react";
+
+import QrFinder from "./qr-finder";
+import { useSelect } from "downshift";
+
+interface Props {
+	isOpen: boolean;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
+}
+
+export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
+
+	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+	const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
+
+	const webcamRef = useRef<Webcam>(null);
+	const requestRef = useRef<number>(null);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const cameraItems = devices.map((device) => ({
+		value: device.deviceId,
+		label: device.label || `Camera ${device.deviceId.slice(-5)}`,
+	}));
+
+	const {
+		isOpen: isDropdownOpen,
+		getToggleButtonProps,
+		getMenuProps,
+		getItemProps,
+		highlightedIndex,
+		selectedItem,
+	} = useSelect({
+		items: cameraItems,
+		selectedItem: cameraItems.find((item) => item.value === selectedDeviceId) ?? null,
+		onSelectedItemChange: ({ selectedItem }) => {
+			setSelectedDeviceId(selectedItem?.value ?? null);
+		},
+	});
+
+	const scanQRCode = useCallback(() => {
+		if (!isOpen) return;
+
+		// Continue scanning in a loop
+		requestRef.current = requestAnimationFrame(scanQRCode);
+
+		const webcam = webcamRef.current;
+		const canvas = canvasRef.current;
+		if (!webcam || !canvas) return;
+
+		const video = webcam.video;
+		if (!video || video.videoWidth === 0 || video.videoHeight === 0) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = video.videoWidth;
+		canvas.height = video.videoHeight;
+		ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+
+		const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
+		const code = jsQR(imageData.data, imageData.width, imageData.height);
+		if (!code) return;
+
+		// Cancel animation frame to stop scanning
+		if (requestRef.current) {
+			cancelAnimationFrame(requestRef.current);
+		}
+
+		setQrBytesRaw(code.binaryData!);
+		setIsOpen(false);
+	}, [isOpen, setIsOpen, setQrBytesRaw]);
+
+	const requestPermission = async () => {
+		navigator.mediaDevices
+			.getUserMedia({ video: true })
+			.then(() => setPermissionGranted(true))
+			.catch(() => setPermissionGranted(false));
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	useEffect(() => {
+		if (!isOpen) return;
+		requestPermission();
+
+		navigator.mediaDevices.enumerateDevices().then((devices) => {
+			const videoDevices = devices.filter((d) => d.kind === "videoinput");
+			setDevices(videoDevices);
+			if (!selectedDeviceId && videoDevices.length > 0) {
+				setSelectedDeviceId(videoDevices[0].deviceId);
+			}
+		});
+	}, [isOpen, selectedDeviceId]);
+
+	useEffect(() => {
+		if (!isOpen && !permissionGranted) return;
+		requestRef.current = requestAnimationFrame(scanQRCode);
+	}, [isOpen, permissionGranted, scanQRCode]);
+
+	if (!isOpen) return null;
+
+	return (
+		<div className="fixed inset-0 flex items-center justify-center z-40">
+			<div
+				onClick={close}
+				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+					isVisible ? "opacity-100" : "opacity-0"
+				}`}
+			/>
+
+			<div
+				className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 ${
+					isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+				}`}
+			>
+				<div className="flex justify-between items-center mb-2">
+					<h2 className="text-xl font-bold">Scan QR Code</h2>
+					<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+						<Icon icon="material-symbols:close-rounded" />
+					</button>
+				</div>
+
+				{devices.length > 1 && (
+					<div className="mb-4 flex flex-col gap-1">
+						<label className="text-sm font-semibold">Camera:</label>
+						<div className="relative w-full">
+							{/* Toggle button to open the dropdown */}
+							<button
+								type="button"
+								{...getToggleButtonProps({}, { suppressRefError: true })}
+								className="pill input w-full !px-2 !py-0.5 !justify-between text-sm"
+							>
+								{selectedItem?.label || "Select a camera"}
+
+								<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
+							</button>
+
+							{/* Dropdown menu */}
+							<ul
+								{...getMenuProps({}, { suppressRefError: true })}
+								className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
+									isDropdownOpen ? "block" : "hidden"
+								}`}
+							>
+								{isDropdownOpen &&
+									cameraItems.map((item, index) => (
+										<li
+											key={item.value}
+											{...getItemProps({ item, index })}
+											className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
+										>
+											{item.label}
+										</li>
+									))}
+							</ul>
+						</div>
+					</div>
+				)}
+
+				<div className="relative w-full aspect-square">
+					{!permissionGranted ? (
+						<div className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border-2 border-amber-500 text-center p-8">
+							<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
+							<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
+							<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 !py-0.5 !px-2">
+								Request Permission
+							</button>
+						</div>
+					) : (
+						<>
+							<Webcam
+								ref={webcamRef}
+								audio={false}
+								videoConstraints={{
+									deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
+								}}
+								className="size-full object-cover rounded-2xl border-2 border-amber-500"
+							/>
+							<QrFinder />
+							<canvas ref={canvasRef} className="hidden" />
+						</>
+					)}
+				</div>
+
+				<div className="mt-4 flex justify-center">
+					<button type="button" onClick={close} className="pill button">
+						Cancel
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { FileWithPath, useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import jsQR from "jsqr";
+
+interface Props {
+	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
+}
+
+export default function QrUpload({ setQrBytesRaw }: Props) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const onDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			acceptedFiles.forEach((file) => {
+				// Scan QR code
+				const reader = new FileReader();
+				reader.onload = async (event) => {
+					const image = new Image();
+					image.onload = () => {
+						const canvas = canvasRef.current;
+						if (!canvas) return;
+
+						const ctx = canvas.getContext("2d");
+						if (!ctx) return;
+
+						canvas.width = image.width;
+						canvas.height = image.height;
+						ctx.drawImage(image, 0, 0, image.width, image.height);
+
+						const imageData = ctx.getImageData(0, 0, image.width, image.height);
+						const code = jsQR(imageData.data, image.width, image.height);
+						if (!code) return;
+
+						setQrBytesRaw(code.binaryData!);
+					};
+					image.src = event.target!.result as string;
+				};
+				reader.readAsDataURL(file);
+			});
+		},
+		[setQrBytesRaw]
+	);
+
+	const { getRootProps, getInputProps } = useDropzone({
+		onDrop,
+		accept: {
+			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp"],
+		},
+	});
+
+	return (
+		<div className="max-w-md w-full">
+			<div
+				{...getRootProps({
+					className:
+						"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
+				})}
+			>
+				<input {...getInputProps({ multiple: false })} />
+				<Icon icon="material-symbols:upload" fontSize={48} />
+				<p className="text-center text-sm">
+					Drag and drop your QR code image here
+					<br />
+					or click to open
+				</p>
+			</div>
+
+			<canvas ref={canvasRef} className="hidden" />
+		</div>
+	);
+}