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

src/components/shared/profile-image.tsx

@@ -0,0 +1,51 @@
+"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)}
+		/>
+	);
+}