fix: standardize public avatar thumbnails

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

@@ -12,6 +12,7 @@ import {
 	OnlineBadge,
 	StatBlock,
 } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
 	CameraWeb,
@@ -477,17 +478,7 @@ export default async function ProfilePage({
 									textAlign: "center",
 								}}
 							>
-								{/* eslint-disable-next-line @next/next/no-img-element */}
-								<img
-									src={avatarImageUrl(f.look, {
-										size: "m",
-										headOnly: true,
-									})}
-									alt={f.username}
-									width={48}
-									height={48}
-									style={{ display: "block" }}
-								/>
+								<UserAvatarThumbnail figure={f.look} alt={f.username} />
 								<span
 									style={{
 										fontSize: "0.8rem",
@@ -680,12 +671,6 @@ export default async function ProfilePage({
 					<div className="grid" style={{ gap: "0.75rem" }}>
 						{guestbook.map((g) => {
 							const author = authorById.get(g.userId);
-							const authorAvatar = author
-								? avatarImageUrl(author.look, {
-										size: "s",
-										headOnly: true,
-									})
-								: null;
 							return (
 								<div
 									key={String(g.id)}
@@ -696,14 +681,10 @@ export default async function ProfilePage({
 										alignItems: "flex-start",
 									}}
 								>
-									{authorAvatar ? (
-										/* eslint-disable-next-line @next/next/no-img-element */
-										<img
-											className="avatar"
-											src={authorAvatar}
+									{author ? (
+										<UserAvatarThumbnail
+											figure={author.look}
 											alt={author?.username ?? "author"}
-											width={40}
-											height={40}
 										/>
 									) : null}
 									<div style={{ flex: 1 }}>