fix: standardize public avatar thumbnails

src/app/(site)/page.tsx

@@ -10,12 +10,12 @@ import { HomeLoginForm } from "@/components/auth/home-login-form";
 import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 import { CameraWeb, db, Rooms, User, WebsiteArticles } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { captchaConfig } from "@/lib/services/captcha";
@@ -478,16 +478,10 @@ export default async function Home() {
 										className="flex flex-col items-center gap-1"
 									>
 										<div className="relative overflow-visible">
-											<Image
-												src={avatarImageUrl(u.look, {
-													headOnly: true,
-													direction: 3,
-												})}
+											<UserAvatarThumbnail
+												figure={u.look}
 												alt={u.username}
-												width={64}
-												height={78}
-												style={{ marginTop: "-8px" }}
-												unoptimized
+												options={{ direction: 3 }}
 											/>
 										</div>
 										<span
@@ -656,17 +650,11 @@ export default async function Home() {
 												"color-mix(in srgb, var(--color-primary) 5%, transparent)",
 										}}
 									>
-										<Image
-											src={avatarImageUrl(u.look, {
-												headOnly: true,
-												direction: 2,
-												size: "s",
-											})}
+										<UserAvatarThumbnail
+											figure={u.look}
 											alt={u.username}
-											width={30}
-											height={36}
+											options={{ direction: 2 }}
 											className="rounded-md"
-											unoptimized
 										/>
 										<span
 											className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight"