feat: mii deletion

src/app/components/delete-mii.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Image from "next/image";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+import LikeButton from "./like-button";
+
+interface Props {
+	miiId: number;
+	miiName: string;
+	likes: number;
+}
+
+export default function DeleteMiiButton({ miiId, miiName, likes }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const submit = async () => {
+		const response = await fetch(`/api/mii/${miiId}/delete`, { method: "DELETE" });
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		close();
+		window.location.reload(); // I would use router.refresh() here but the API data fetching breaks
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} className="cursor-pointer">
+				<Icon icon="mdi:trash" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<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 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Delete Mii</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p>
+
+							<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex">
+								<Image src={`/mii/${miiId}/mii.webp`} alt="mii image" width={128} height={128} />
+								<div className="p-4">
+									<p className="text-xl font-bold line-clamp-1" title={miiName}>
+										{miiName}
+									</p>
+									<LikeButton likes={likes} isLiked={true} disabled />
+								</div>
+							</div>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<button onClick={submit} className="pill button !bg-red-400 !border-red-500 hover:!bg-red-500">
+									Delete
+								</button>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}

src/app/components/mii-list/index.tsx

@@ -4,12 +4,15 @@ import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import useSWR from "swr";
 
+import { Icon } from "@iconify/react";
+
+import Skeleton from "./skeleton";
+import FilterSelect from "./filter-select";
 import SortSelect from "./sort-select";
 import Carousel from "../carousel";
 import LikeButton from "../like-button";
-import FilterSelect from "./filter-select";
+import DeleteMiiButton from "../delete-mii";
 import Pagination from "./pagination";
-import Skeleton from "./skeleton";
 
 interface Props {
 	isLoggedIn: boolean;
@@ -86,7 +89,7 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 								/>
 
 								<div className="p-4 flex flex-col gap-1 h-full">
-									<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis text-nowrap" title={mii.name}>
+									<Link href={`/mii/${mii.id}`} className="font-bold text-2xl line-clamp-1" title={mii.name}>
 										{mii.name}
 									</Link>
 									<div id="tags" className="flex flex-wrap gap-1">
@@ -100,10 +103,17 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 									<div className="mt-auto grid grid-cols-2 items-center">
 										<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={isLoggedIn} />
 
-										{userId == null && (
+										{!userId ? (
 											<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">
 												@{mii.user?.username}
 											</Link>
+										) : (
+											<div className="flex gap-1 text-2xl justify-end text-zinc-400">
+												<Link href={`/edit/${mii.id}`}>
+													<Icon icon="mdi:pencil" />
+												</Link>
+												<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likes} />
+											</div>
 										)}
 									</div>
 								</div>