fix: standardize public avatar thumbnails

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

@@ -9,6 +9,7 @@ import {
 	sendOfflineMessage,
 } from "@/actions/messenger";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
 	db,
@@ -17,7 +18,6 @@ import {
 	MessengerOffline,
 	User,
 } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
 
 type SearchParams = Promise<{
@@ -270,10 +270,6 @@ export default async function MessagesPage({
 					<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
 						{requests.map((req) => {
 							const from = userById.get(req.userFromId);
-							const avatar = avatarImageUrl(from?.look ?? "", {
-								size: "s",
-								headOnly: true,
-							});
 							return (
 								<div
 									key={req.id}
@@ -284,13 +280,9 @@ export default async function MessagesPage({
 										alignItems: "center",
 									}}
 								>
-									{/* eslint-disable-next-line @next/next/no-img-element */}
-									<img
-										className="avatar"
-										src={avatar}
+									<UserAvatarThumbnail
+										figure={from?.look ?? ""}
 										alt={`${from?.username ?? "User"} avatar`}
-										width={50}
-										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<p style={{ margin: 0 }}>
@@ -360,10 +352,6 @@ export default async function MessagesPage({
 					<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
 						{messages.map((msg) => {
 							const from = userById.get(msg.userFromId);
-							const avatar = avatarImageUrl(from?.look ?? "", {
-								size: "s",
-								headOnly: true,
-							});
 							const when = formatDate(new Date(msg.sendedOn * 1000));
 							return (
 								<article
@@ -375,13 +363,9 @@ export default async function MessagesPage({
 										alignItems: "flex-start",
 									}}
 								>
-									{/* eslint-disable-next-line @next/next/no-img-element */}
-									<img
-										className="avatar"
-										src={avatar}
+									<UserAvatarThumbnail
+										figure={from?.look ?? ""}
 										alt={`${from?.username ?? "User"} avatar`}
-										width={50}
-										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<p