feat: profile about me sections

src/components/description.tsx

@@ -0,0 +1,83 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { prisma } from "@/lib/prisma";
+
+import ProfilePicture from "./profile-picture";
+
+interface Props {
+	text: string;
+	className?: string;
+}
+
+export default function Description({ text, className }: Props) {
+	return (
+		<p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}>
+			{/* Adds fancy formatting when linking to other pages on the site */}
+			{(() => {
+				const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://tomodachishare.com";
+
+				// Match both mii and profile links
+				const regex = new RegExp(`(${baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")}/(?:mii|profile)/\\d+)`, "g");
+				const parts = text.split(regex);
+
+				return parts.map(async (part, index) => {
+					const miiMatch = part.match(new RegExp(`^${baseUrl}/mii/(\\d+)$`));
+					const profileMatch = part.match(new RegExp(`^${baseUrl}/profile/(\\d+)$`));
+
+					if (miiMatch) {
+						const id = Number(miiMatch[1]);
+						const linkedMii = await prisma.mii.findUnique({
+							where: {
+								id,
+							},
+						});
+
+						if (!linkedMii) return;
+
+						return (
+							<Link
+								key={index}
+								href={`/mii/${id}`}
+								className="inline-flex items-center align-top gap-1.5 pr-2 bg-amber-100 border border-amber-400 rounded-lg mx-1 text-amber-800 text-sm -mt-2"
+							>
+								<Image src={`/mii/${id}/image?type=mii`} alt="mii" width={32} height={32} className="bg-white rounded-lg border-r border-amber-400" />
+								{linkedMii.name}
+							</Link>
+						);
+					}
+
+					if (profileMatch) {
+						const id = Number(profileMatch[1]);
+						const linkedProfile = await prisma.user.findUnique({
+							where: {
+								id,
+							},
+						});
+
+						if (!linkedProfile) return;
+
+						return (
+							<Link
+								key={index}
+								href={`/profile/${id}`}
+								className="inline-flex items-center align-top gap-1.5 pr-2 bg-orange-100 border border-orange-400 rounded-lg mx-1 text-orange-800 text-sm -mt-2"
+							>
+								<ProfilePicture
+									src={linkedProfile.image || "/guest.webp"}
+									width={32}
+									height={32}
+									className="bg-white rounded-lg border-r border-orange-400"
+								/>
+								{linkedProfile.name}
+							</Link>
+						);
+					}
+
+					// Regular text
+					return <span key={index}>{part}</span>;
+				});
+			})()}
+		</p>
+	);
+}

src/components/dropzone.tsx

@@ -32,7 +32,7 @@ export default function Dropzone({ onDrop, options, children }: Props) {
 			{...getRootProps()}
 			onDragOver={() => setIsDraggingOver(true)}
 			onDragLeave={() => setIsDraggingOver(false)}
-			className={`relative bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border-2 border-dashed border-amber-500 select-none h-full transition-all duration-200 ${
+			className={`relative bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border-2 border-dashed border-amber-500 select-none size-full transition-all duration-200 ${
 				isDraggingOver && "scale-105 brightness-90 shadow-xl"
 			}`}
 		>

src/components/profile-information.tsx

@@ -5,6 +5,7 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
 import ProfilePicture from "./profile-picture";
+import Description from "./description";
 
 interface Props {
 	userId?: number;
@@ -48,7 +49,7 @@ export default async function ProfileInformation({ userId, page }: Props) {
 					</div>
 					<h2 className="text-black/60 text-sm font-semibold wrap-break-word">@{user?.username}</h2>
 
-					<div className="mt-auto text-sm flex gap-8">
+					<div className="mt-3 text-sm flex gap-8">
 						<h4 title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
 							<span className="font-medium">Created:</span>{" "}
 							{user.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
@@ -57,6 +58,8 @@ export default async function ProfileInformation({ userId, page }: Props) {
 							Liked <span className="font-bold">{likedMiis}</span> Miis
 						</h4>
 					</div>
+
+					{user.description && <Description text={user.description} className="max-h-32!" />}
 				</div>
 			</div>
 

src/components/profile-settings/index.tsx

@@ -9,18 +9,48 @@ import { displayNameSchema, usernameSchema } from "@/lib/schemas";
 import ProfilePictureSettings from "./profile-picture";
 import SubmitDialogButton from "./submit-dialog-button";
 import DeleteAccount from "./delete-account";
+import z from "zod";
 
-export default function ProfileSettings() {
+interface Props {
+	currentDescription: string | null | undefined;
+}
+
+export default function ProfileSettings({ currentDescription }: Props) {
 	const router = useRouter();
 
+	const [description, setDescription] = useState(currentDescription);
 	const [displayName, setDisplayName] = useState("");
 	const [username, setUsername] = useState("");
 
+	const [descriptionChangeError, setDescriptionChangeError] = useState<string | undefined>(undefined);
 	const [displayNameChangeError, setDisplayNameChangeError] = useState<string | undefined>(undefined);
 	const [usernameChangeError, setUsernameChangeError] = useState<string | undefined>(undefined);
 
 	const usernameDate = dayjs().add(90, "days");
 
+	const handleSubmitDescriptionChange = async (close: () => void) => {
+		const parsed = z.string().trim().max(256).safeParse(description);
+		if (!parsed.success) {
+			setDescriptionChangeError(parsed.error.issues[0].message);
+			return;
+		}
+
+		const response = await fetch("/api/auth/about-me", {
+			method: "PATCH",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ description }),
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setDescriptionChangeError(error);
+			return;
+		}
+
+		close();
+		router.refresh();
+	};
+
 	const handleSubmitDisplayNameChange = async (close: () => void) => {
 		const parsed = displayNameSchema.safeParse(displayName);
 		if (!parsed.success) {
@@ -84,17 +114,46 @@ export default function ProfileSettings() {
 			{/* Profile Picture */}
 			<ProfilePictureSettings />
 
+			{/* Description */}
+			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+				<div className="col-span-3">
+					<label className="font-semibold">About Me</label>
+					<p className="text-sm text-zinc-500">Write about yourself on your profile</p>
+				</div>
+
+				<div className="flex justify-end gap-1 h-min col-span-2">
+					<div className="flex-1">
+						<textarea
+							rows={5}
+							maxLength={256}
+							placeholder="(optional) Type about yourself..."
+							className="pill input rounded-xl! resize-none text-sm w-full"
+							value={description || ""}
+							onChange={(e) => setDescription(e.target.value)}
+						/>
+						<p className="text-xs text-zinc-400 mt-1 text-right">{(description || "").length}/256</p>
+					</div>
+
+					<SubmitDialogButton
+						title="Confirm About Me Change"
+						description="Are you sure? You can change it again later."
+						error={descriptionChangeError}
+						onSubmit={handleSubmitDescriptionChange}
+					/>
+				</div>
+			</div>
+
 			{/* Change Name */}
-			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
-				<div>
+			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+				<div className="col-span-3">
 					<label className="font-semibold">Change Display Name</label>
 					<p className="text-sm text-zinc-500">This is a display name shown on your profile — feel free to change it anytime</p>
 				</div>
 
-				<div className="flex justify-end gap-1 h-min">
+				<div className="flex justify-end gap-1 h-min col-span-2">
 					<input
 						type="text"
-						className="pill input w-full max-w-64"
+						className="pill input flex-1"
 						placeholder="Type here..."
 						value={displayName}
 						onChange={(e) => setDisplayName(e.target.value)}
@@ -114,14 +173,14 @@ export default function ProfileSettings() {
 			</div>
 
 			{/* Change Username */}
-			<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
-				<div>
+			<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+				<div className="col-span-3">
 					<label className="font-semibold">Change Username</label>
 					<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
 				</div>
 
-				<div className="flex justify-end gap-1">
-					<div className="relative w-full max-w-64">
+				<div className="flex justify-end gap-1 col-span-2">
+					<div className="relative flex-1">
 						<input
 							type="text"
 							className="pill input w-full indent-4"

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

@@ -43,13 +43,13 @@ export default function ProfilePictureSettings() {
 	}, []);
 
 	return (
-		<div className="grid grid-cols-2">
-			<div>
+		<div className="grid grid-cols-5 gap-4 max-lg:grid-cols-1">
+			<div className="col-span-3">
 				<label className="font-semibold">Profile Picture</label>
 				<p className="text-sm text-zinc-500">Manage your profile picture. Can only be changed once every 7 days.</p>
 			</div>
 
-			<div className="flex flex-col">
+			<div className="flex flex-col col-span-2">
 				<div className="flex justify-end">
 					<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
 						<p className="text-center text-xs">