fix: standardize public avatar thumbnails

src/app/(site)/radio/shouts/page.tsx

@@ -3,9 +3,9 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { postShout } from "@/actions/radio-shouts";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import { db, RadioShouts, User } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
 
 type SearchParams = Promise<{ posted?: string; error?: string }>;
@@ -135,12 +135,6 @@ export default async function RadioShoutsPage({
 					<div className="card-grid">
 						{shouts.map((s) => {
 							const author = authorById.get(Number(s.userId));
-							const authorAvatar = author
-								? avatarImageUrl(author.look, {
-										size: "s",
-										headOnly: true,
-									})
-								: null;
 							return (
 								<div
 									key={String(s.id)}
@@ -151,14 +145,10 @@ export default async function RadioShoutsPage({
 										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, minWidth: 0 }}>