From 9b8c697f667f861b3d5008f60e0f02585e963dfd Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 14 May 2025 20:13:25 +0100
Subject: [PATCH] feat: my likes page and redesign profile page

---
 src/app/mii/[id]/page.tsx                 |  6 +-
 src/app/profile/[id]/page.tsx             |  8 +-
 src/app/profile/likes/page.tsx            | 48 +++++++++++
 src/app/profile/settings/page.tsx         |  2 +-
 src/components/delete-mii.tsx             |  2 +-
 src/components/mii-list/index.tsx         | 15 +++-
 src/components/profile-information.tsx    | 97 +++++++++++++----------
 src/components/profile-settings/index.tsx |  2 +-
 src/components/tutorial/scan.tsx          |  2 +-
 9 files changed, 131 insertions(+), 51 deletions(-)
 create mode 100644 src/app/profile/likes/page.tsx

diff --git a/src/app/mii/[id]/page.tsx b/src/app/mii/[id]/page.tsx
index 46d08d7..d5204cd 100644
--- a/src/app/mii/[id]/page.tsx
+++ b/src/app/mii/[id]/page.tsx
@@ -205,12 +205,12 @@ export default async function MiiPage({ params }: Props) {
 						</div>
 
 						{/* Buttons */}
-						<div className="flex 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 *:h-12 *:w-14 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:[&_svg]:scale-[1.2]">
+						<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">
 							{session && (Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && (
 								<>
 									<Link href={`/edit/${mii.id}`}>
 										<Icon icon="mdi:pencil" />
-										<span className="text-xs">Edit</span>
+										<span>Edit</span>
 									</Link>
 									<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
 								</>
@@ -218,7 +218,7 @@ export default async function MiiPage({ params }: Props) {
 
 							<Link href={`/report/mii/${mii.id}`}>
 								<Icon icon="material-symbols:flag-rounded" />
-								<span className="text-xs">Report</span>
+								<span>Report</span>
 							</Link>
 							<ScanTutorialButton />
 						</div>
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
index 76bad7d..7d4ec84 100644
--- a/src/app/profile/[id]/page.tsx
+++ b/src/app/profile/[id]/page.tsx
@@ -78,9 +78,11 @@ export default async function ProfilePage({ searchParams, params }: Props) {
 	return (
 		<div>
 			<ProfileInformation userId={user.id} />
-			<Suspense fallback={<Skeleton />}>
-				<MiiList searchParams={await searchParams} userId={user.id} />
-			</Suspense>
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
+				<Suspense fallback={<Skeleton />}>
+					<MiiList searchParams={await searchParams} userId={user.id} />
+				</Suspense>
+			</div>
 		</div>
 	);
 }
diff --git a/src/app/profile/likes/page.tsx b/src/app/profile/likes/page.tsx
new file mode 100644
index 0000000..98fa49e
--- /dev/null
+++ b/src/app/profile/likes/page.tsx
@@ -0,0 +1,48 @@
+import { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+
+import { auth } from "@/lib/auth";
+
+import ProfileInformation from "@/components/profile-information";
+import Skeleton from "@/components/mii-list/skeleton";
+import MiiList from "@/components/mii-list";
+
+interface Props {
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export const metadata: Metadata = {
+	title: "My Likes - TomodachiShare",
+	description: "View the Miis that you have liked on TomodachiShare",
+	robots: {
+		index: false,
+		follow: false,
+	},
+};
+
+export default async function ProfileSettingsPage({ searchParams }: Props) {
+	const session = await auth();
+
+	if (!session) redirect("/login");
+
+	return (
+		<div>
+			<ProfileInformation page="likes" />
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
+				<div>
+					<h2 className="text-2xl font-bold">My Likes</h2>
+					<p className="text-sm text-zinc-500">View every Mii you have liked on TomodachiShare.</p>
+				</div>
+
+				<div className="h-5 flex items-center">
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<Suspense fallback={<Skeleton />}>
+					<MiiList inLikesPage searchParams={await searchParams} />
+				</Suspense>
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx
index 0a32a2a..0ebb56b 100644
--- a/src/app/profile/settings/page.tsx
+++ b/src/app/profile/settings/page.tsx
@@ -22,7 +22,7 @@ export default async function ProfileSettingsPage() {
 
 	return (
 		<div>
-			<ProfileInformation inSettings />
+			<ProfileInformation page="settings" />
 			<ProfileSettings />
 		</div>
 	);
diff --git a/src/components/delete-mii.tsx b/src/components/delete-mii.tsx
index 18500b2..cb2f846 100644
--- a/src/components/delete-mii.tsx
+++ b/src/components/delete-mii.tsx
@@ -53,7 +53,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
 			{inMiiPage ? (
 				<button onClick={() => setIsOpen(true)} className="cursor-pointer">
 					<Icon icon="mdi:trash" />
-					<span className="text-xs">Delete</span>
+					<span>Delete</span>
 				</button>
 			) : (
 				<button onClick={() => setIsOpen(true)} title="Delete Mii" data-tooltip="Delete" className="cursor-pointer aspect-square">
diff --git a/src/components/mii-list/index.tsx b/src/components/mii-list/index.tsx
index 4aa38f9..713b304 100644
--- a/src/components/mii-list/index.tsx
+++ b/src/components/mii-list/index.tsx
@@ -18,6 +18,7 @@ import Pagination from "./pagination";
 interface Props {
 	searchParams: { [key: string]: string | string[] | undefined };
 	userId?: number; // Profiles
+	inLikesPage?: boolean; // Self-explanatory
 }
 
 const searchSchema = z.object({
@@ -47,7 +48,7 @@ const searchSchema = z.object({
 		.optional(),
 });
 
-export default async function MiiList({ searchParams, userId }: Props) {
+export default async function MiiList({ searchParams, userId, inLikesPage }: Props) {
 	const session = await auth();
 
 	const parsed = searchSchema.safeParse(searchParams);
@@ -55,7 +56,19 @@ export default async function MiiList({ searchParams, userId }: Props) {
 
 	const { q: query, sort, tags, page = 1, limit = 24 } = parsed.data;
 
+	let miiIdsLiked: number[] | undefined = undefined;
+
+	if (inLikesPage && session?.user.id) {
+		const likedMiis = await prisma.like.findMany({
+			where: { userId: Number(session.user.id) },
+			select: { miiId: true },
+		});
+		miiIdsLiked = likedMiis.map((like) => like.miiId);
+	}
+
 	const where: Prisma.MiiWhereInput = {
+		// Only show liked miis on likes page
+		...(inLikesPage && miiIdsLiked && { id: { in: miiIdsLiked } }),
 		// Searching
 		...(query && {
 			OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }],
diff --git a/src/components/profile-information.tsx b/src/components/profile-information.tsx
index 88d4b38..8d679f8 100644
--- a/src/components/profile-information.tsx
+++ b/src/components/profile-information.tsx
@@ -7,10 +7,10 @@ import { prisma } from "@/lib/prisma";
 
 interface Props {
 	userId?: number;
-	inSettings?: boolean;
+	page?: "settings" | "likes";
 }
 
-export default async function ProfileInformation({ userId, inSettings }: Props) {
+export default async function ProfileInformation({ userId, page }: Props) {
 	const session = await auth();
 
 	const id = userId ? userId : Number(session?.user.id);
@@ -19,66 +19,83 @@ export default async function ProfileInformation({ userId, inSettings }: Props)
 
 	if (!user) return null;
 
+	const isAdmin = id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID);
+	const isContributor = process.env.NEXT_PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(id.toString());
+	const isOwnProfile = Number(session?.user.id) === id;
+
 	return (
-		<div className="flex gap-4 mb-2 max-md:flex-col">
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
 			<div className="flex w-full gap-4 overflow-x-scroll">
 				{/* Profile picture */}
-				<Image
-					src={user.image ?? "/guest.webp"}
-					alt="profile picture"
-					width={128}
-					height={128}
-					className="size-32 aspect-square rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
-				/>
+				<Link href={`/profile/${user.id}`} className="size-28 aspect-square">
+					<Image
+						src={user.image ?? "/guest.webp"}
+						alt="profile picture"
+						width={128}
+						height={128}
+						className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
+					/>
+				</Link>
 				{/* User information */}
-				<div className="flex flex-col w-full relative">
-					<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
-						{user.name}
-						{id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
-							<div data-tooltip="Admin" className="font-normal text-orange-400">
-								<Icon icon="mdi:shield-moon" />
+				<div className="flex flex-col w-full relative py-3">
+					<div className="flex items-center gap-2">
+						<Link href={`/profile/${user.id}`} className="text-3xl font-extrabold break-words">
+							{user.name}
+						</Link>
+						{isAdmin && (
+							<div data-tooltip="Admin" className="text-orange-400">
+								<Icon icon="mdi:shield-moon" className="text-2xl" />
 							</div>
 						)}
-						{process.env.NEXT_PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(id.toString()) && (
-							<div data-tooltip="Contributor" className="font-normal text-orange-400">
-								<Icon icon="mingcute:group-fill" />
+						{isContributor && (
+							<div data-tooltip="Contributor" className="text-orange-400">
+								<Icon icon="mingcute:group-fill" className="text-2xl" />
 							</div>
 						)}
-					</h1>
-					<h2 className="text-lg font-semibold break-words">@{user?.username}</h2>
+					</div>
+					<h2 className="text-black/60 text-sm font-semibold break-words">@{user?.username}</h2>
 
-					<h4 className="mt-auto text-sm">
-						Liked <span className="font-bold">{likedMiis}</span> Miis
-					</h4>
-					<h4 className="text-sm" title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-						Created: {user.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
-					</h4>
+					<div className="mt-auto 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" })}
+						</h4>
+						<h4>
+							Liked <span className="font-bold">{likedMiis}</span> Miis
+						</h4>
+					</div>
 				</div>
 			</div>
 
 			{/* Buttons */}
-			<div className="flex flex-col items-end justify-end gap-1 max-md:flex-row">
-				{Number(session?.user.id) != id && (
-					<Link href={`/report/user/${id}`} className="pill button !px-4">
-						<Icon icon="material-symbols:flag-rounded" className="text-2xl mr-2" />
+			<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-90 *:hover:scale-[1.08] *:[&_span]:text-sm">
+				{!isOwnProfile && (
+					<Link href={`/report/user/${id}`}>
+						<Icon icon="material-symbols:flag-rounded" />
 						<span>Report</span>
 					</Link>
 				)}
-				{Number(session?.user.id) == id && Number(session?.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
-					<Link href="/admin" className="pill button !px-4">
-						<Icon icon="mdi:shield-moon" className="text-2xl mr-2" />
+				{isOwnProfile && isAdmin && (
+					<Link href="/admin">
+						<Icon icon="mdi:shield-moon" />
 						<span>Admin</span>
 					</Link>
 				)}
-				{!inSettings && Number(session?.user.id) == id && (
-					<Link href="/profile/settings" className="pill button !px-4">
-						<Icon icon="material-symbols:settings-rounded" className="text-2xl mr-2" />
+				{isOwnProfile && page !== "likes" && (
+					<Link href="/profile/likes">
+						<Icon icon="icon-park-solid:like" />
+						<span>My Likes</span>
+					</Link>
+				)}
+				{isOwnProfile && page !== "settings" && (
+					<Link href="/profile/settings">
+						<Icon icon="material-symbols:settings-rounded" />
 						<span>Settings</span>
 					</Link>
 				)}
-				{inSettings && (
-					<Link href={`/profile/${id}`} className="pill button !px-4">
-						<Icon icon="tabler:chevron-left" className="text-2xl mr-2" />
+				{page && (
+					<Link href={`/profile/${id}`}>
+						<Icon icon="tabler:chevron-left" />
 						<span>Back</span>
 					</Link>
 				)}
diff --git a/src/components/profile-settings/index.tsx b/src/components/profile-settings/index.tsx
index a37d919..31128a1 100644
--- a/src/components/profile-settings/index.tsx
+++ b/src/components/profile-settings/index.tsx
@@ -75,7 +75,7 @@ export default function ProfileSettings() {
 			</div>
 
 			{/* Separator */}
-			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-1">
 				<hr className="flex-grow border-zinc-300" />
 				<span>Account Info</span>
 				<hr className="flex-grow border-zinc-300" />
diff --git a/src/components/tutorial/scan.tsx b/src/components/tutorial/scan.tsx
index 5279aa7..c0b9842 100644
--- a/src/components/tutorial/scan.tsx
+++ b/src/components/tutorial/scan.tsx
@@ -38,7 +38,7 @@ export default function ScanTutorialButton() {
 		<>
 			<button type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
 				<Icon icon="fa:question-circle" />
-				<span className="text-xs">Tutorial</span>
+				<span>Tutorial</span>
 			</button>
 
 			{isOpen &&