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

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)}
-		/>
-	);
-}