fix: standardize public avatar thumbnails

src/components/top-header.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import type { Session } from "next-auth";
 import { getTranslations } from "next-intl/server";
 import { RoomQuickEntry } from "@/components/room-quick-entry";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { signOut } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 import {
@@ -13,7 +14,6 @@ import {
 	User,
 	UsersCurrency,
 } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
 
@@ -77,7 +77,6 @@ export async function TopHeader({ session }: { session: Session | null }) {
 		}
 	} catch {}
 
-	const avatar = avatarImageUrl(look, { headOnly: true, direction: 2 });
 	let showAdmin = false;
 	let showMod = false;
 	const ctx = await getApiAdminContext();
@@ -318,16 +317,13 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							aria-label="User menu"
 							className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden"
 						>
-							<Image
-								className="bg-no-repeat bg-center"
-								src={avatar}
+							<UserAvatarThumbnail
+								figure={look}
 								alt=""
-								width={54}
-								height={62}
-								unoptimized
+								options={{ direction: 2 }}
 							/>
 							<span
-								className="hidden sm:inline -ml-2 font-semibold"
+								className="hidden sm:inline font-semibold"
 								style={{ color: textColor }}
 							>
 								{session.user.name}
@@ -387,16 +383,10 @@ export async function TopHeader({ session }: { session: Session | null }) {
 												href="/messages"
 												className="flex items-center gap-2 rounded-lg px-2 py-1 text-xs transition-colors hover:bg-white/10"
 											>
-												<Image
-													src={avatarImageUrl(u.look, {
-														headOnly: true,
-														direction: 2,
-														size: "s",
-													})}
+												<UserAvatarThumbnail
+													figure={u.look}
 													alt=""
-													width={20}
-													height={24}
-													unoptimized
+													options={{ direction: 2 }}
 												/>
 												<span style={{ color: textColor }}>{u.username}</span>
 											</Link>