fix: standardize public avatar thumbnails

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

@@ -2,8 +2,8 @@ import { sql } from "drizzle-orm";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 
 type LeaderRow = {
 	username: string;
@@ -56,23 +56,15 @@ export default async function RadioLeaderboardPage() {
 						</thead>
 						<tbody>
 							{rows.map((row, i) => {
-								const avatar = avatarImageUrl(row.look, {
-									size: "s",
-									headOnly: true,
-								});
 								return (
 									<tr key={row.username}>
 										<td>
 											<RankBadge position={i + 1} />
 										</td>
 										<td>
-											{/* eslint-disable-next-line @next/next/no-img-element */}
-											<img
-												className="avatar"
-												src={avatar}
+											<UserAvatarThumbnail
+												figure={row.look}
 												alt={`${row.username} avatar`}
-												width={40}
-												height={40}
 											/>
 										</td>
 										<td>

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 }}>