feat(me): organize personal dashboard and localize user actions

src/app/(site)/me/CopyReferralButton.tsx

@@ -1,11 +1,16 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 export default function CopyReferralButton({ value }: { value: string }) {
 	const [copied, setCopied] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const t = useTranslations("pages.myDashboard");
 
 	async function copy() {
+		setFailed(false);
+		setCopied(false);
 		const absolute =
 			typeof window !== "undefined" && value.startsWith("/")
 				? `${window.location.origin}${value}`
@@ -20,9 +25,11 @@ export default function CopyReferralButton({ value }: { value: string }) {
 			document.body.appendChild(ta);
 			ta.select();
 			try {
-				document.execCommand("copy");
+				if (!document.execCommand("copy")) throw new Error("copy-failed");
 			} catch {
-				/* give up silently */
+				setFailed(true);
+				document.body.removeChild(ta);
+				return;
 			}
 			document.body.removeChild(ta);
 		}
@@ -31,17 +38,21 @@ export default function CopyReferralButton({ value }: { value: string }) {
 	}
 
 	return (
-		<button
-			type="button"
-			onClick={copy}
-			className="rounded-xl font-bold text-sm px-5 py-2.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shrink-0"
-			style={{
-				background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
-				color: "var(--color-primary-readable, var(--color-primary))",
-				border: `2px solid color-mix(in srgb, var(--color-primary) 20%, transparent)`,
-			}}
-		>
-			{copied ? "Copied!" : "Copy link"}
-		</button>
+		<>
+			<button
+				type="button"
+				onClick={copy}
+				className="rounded-xl font-bold text-sm px-5 py-2.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shrink-0"
+				style={{
+					background:
+						"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+					color: "var(--color-primary-readable, var(--color-primary))",
+					border: `2px solid color-mix(in srgb, var(--color-primary) 20%, transparent)`,
+				}}
+			>
+				{copied ? t("copied") : t("copy")}
+			</button>
+			{failed && <p role="alert">{t("copyFailed")}</p>}
+		</>
 	);
 }

src/app/(site)/u/[username]/page.tsx

@@ -8,6 +8,7 @@ import { sendFriendRequest } from "@/actions/social";
 import Link from "@/components/link";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
 import { CurrencyIcon } from "@/components/shared/currency-icon";
+import { ProfileImage } from "@/components/shared/profile-image";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
@@ -25,7 +26,6 @@ import {
 import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
 import styles from "./profile.module.css";
-import { ProfileImage } from "./profile-image";
 
 type SearchParams = Promise<{
 	friend?: string;

src/app/(site)/u/[username]/profile-image.tsx

@@ -1,51 +0,0 @@
-"use client";
-import { useState } from "react";
-
-export function ProfileImage({
-	src,
-	alt,
-	width,
-	height,
-	fallback,
-	className,
-}: {
-	src: string;
-	alt: string;
-	width: number;
-	height: number;
-	fallback?: string;
-	className?: string;
-}) {
-	const [failedSrc, setFailedSrc] = useState<string | null>(null);
-	const failed = failedSrc === src;
-	if (failed && !fallback)
-		return (
-			<span
-				role="img"
-				aria-label={alt}
-				className={className}
-				style={{
-					width,
-					height,
-					display: "inline-grid",
-					placeItems: "center",
-					fontSize: "2rem",
-					fontWeight: 700,
-				}}
-			>
-				{alt.slice(0, 1).toUpperCase()}
-			</span>
-		);
-	return (
-		<img
-			src={failed ? fallback : src}
-			alt={alt}
-			width={width}
-			height={height}
-			className={className}
-			loading="lazy"
-			decoding="async"
-			onError={() => setFailedSrc(src)}
-		/>
-	);
-}