fix: standardize public avatar thumbnails

src/app/(site)/friends/page.tsx

@@ -5,9 +5,9 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { removeFriendship } from "@/actions/messenger";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import { db, MessengerFriendships, User } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 
 export const metadata = { title: "Friends" };
 
@@ -118,10 +118,6 @@ export default async function FriendsPage({
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
 						{friends.map((friend) => {
-							const avatar = avatarImageUrl(friend.look, {
-								size: "s",
-								headOnly: true,
-							});
 							const isOnline = friend.online === "1";
 							return (
 								<div
@@ -133,13 +129,9 @@ export default async function FriendsPage({
 										alignItems: "center",
 									}}
 								>
-									{/* eslint-disable-next-line @next/next/no-img-element */}
-									<img
-										className="avatar"
-										src={avatar}
+									<UserAvatarThumbnail
+										figure={friend.look}
 										alt={`${friend.username} avatar`}
-										width={50}
-										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>