chore(deps): update All dependencies

2026-08-10 14:00:29 +00:00
26 changed files with 244 additions and 356 deletions
@@ -1,69 +0,0 @@
-# Public Avatar Thumbnail and Currency Icon Design
-
-## Goal
-
-Make avatar and currency presentation consistent across the public site:
-
- user thumbnails in lists and compact cards show only the avatar head at a fixed 40 x 40 pixel size;
- full-body avatars remain available on profile pages and deliberately large previews;
- currency amounts use the existing graphical currency icons instead of placeholder letters such as `c`, `cr`, `du`, or `di`.
-
-## Scope
-
-The change covers public-facing pages and shared public components. It includes rankings, leaderboards, shop and badge-purchase currency rows, plus every other compact user list or card that currently renders an avatar directly.
-
-Admin-only screens are outside this visual cleanup unless they reuse a shared public component changed by this work. Profile hero avatars, the main current-user avatar, registration/login previews, and other intentionally large previews retain their full-avatar presentation.
-
-## Avatar Design
-
-Compact user representations will use one shared semantic thumbnail path rather than choosing imager options independently in each page.
-
-The thumbnail contract is:
-
- request `headOnly: true` from the avatar imager;
- render at 40 x 40 CSS and image dimensions;
- preserve pixel-art rendering and contain the image without stretching;
- prevent the thumbnail container from shrinking into adjacent text;
- use the user's actual figure and the existing avatar URL fallback behavior;
- keep useful alternative text based on the displayed username where that context is available.
-
-The existing shared avatar component will be extended with an explicit compact/head-thumbnail variant, or a narrowly focused wrapper will be added if that keeps call sites clearer. Public list and compact-card call sites will migrate to this shared contract. Large/profile call sites will remain explicit so they cannot be accidentally cropped by a global CSS rule.
-
-## Currency Design
-
-All public currency amount rows will use the existing `CurrencyIcon` component and the existing assets under `public/assets/images/icons/currency`.
-
-The mapping is:
-
- credits: `credits.png`;
- duckets: `duckets.png`;
- diamonds/crystals: `diamonds.png`.
-
-Icons will be decorative when the surrounding UI already names the currency, using an empty alternative text to avoid repeated screen-reader announcements. The numeric amount and existing pill/layout styling remain unchanged. Icon size will be fixed consistently for compact amount rows, with no textual placeholder left visible.
-
-## Migration Strategy
-
-1. Add the shared compact avatar contract and focused tests.
-2. Inventory public avatar call sites and classify each as compact thumbnail or large/profile preview.
-3. Migrate every compact call site to the shared head-only 40 x 40 rendering.
-4. Replace textual and empty CSS currency markers in public amount rows with `CurrencyIcon` and the correct currency kind.
-5. Remove CSS rules that exist only to draw obsolete letter-based or background-only markers, while retaining layout classes still used by the amount pills.
-
-This semantic migration is preferred over a global CSS crop because it sends the correct head-only request to the imager and does not risk changing profile avatars.
-
-## Verification
-
-Verification will include:
-
- automated tests for the compact avatar contract (`headOnly`, fixed dimensions, actual figure propagation);
- source/component checks ensuring public currency rows use `CurrencyIcon` with the correct mapping and no placeholder letters remain;
- the existing test, type-check, and build commands relevant to the changed files;
- visual checks at desktop and narrow widths for rankings, leaderboard, shop, badge purchase, and representative user lists/cards;
- explicit checks that profile pages and large avatar previews still render full avatars.
-
-## Non-goals
-
- changing balances or currency business logic;
- changing the avatar imager service itself;
- redesigning profile hero sections;
- modifying admin-only layouts that do not share the affected public components.
@@ -58,7 +58,7 @@
 		"react": "19.2.8",
 		"react-dom": "19.2.8",
 		"react-hook-form": "7.85.0",
-		"resend": "6.19.0",
+		"resend": "6.18.1",
 		"server-only": "0.0.1",
 		"sharp": "0.35.3",
 		"sonner": "2.0.8",
@@ -119,8 +119,8 @@ importers:
        specifier: 7.85.0
        version: 7.85.0([email protected])
      resend:
-        specifier: 6.19.0
-        version: 6.19.0
+        specifier: 6.18.1
+        version: 6.18.1
      server-only:
        specifier: 0.0.1
        version: 0.0.1
@@ -2784,8 +2784,8 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}

-  [email protected]9.0:
-    resolution: {integrity: sha512-JnEdYnd9WyBDIzunsEZtUF8n3cBKM9SlmySaos/7wwi4sEXKG1Zz4M64VFAyk+278erX01Fq2wHQ3p7OIdPriA==}
+  [email protected]8.1:
+    resolution: {integrity: sha512-XN8XIaDdKF+ziSQ3K23ndUcyhP7U3ze2gky6SPgYkuAOq54mH4Wdhwm7QylEQ3zlz0NzdX7/l1AgmJUZbdPI/Q==}
    engines: {node: '>=20'}
    peerDependencies:
      '@react-email/render': '*'
@@ -5056,7 +5056,7 @@ snapshots:

  [email protected]: {}

-  [email protected]9.0:
+  [email protected]8.1:
    dependencies:
      postal-mime: 2.7.5
      standardwebhooks: 1.0.0
@@ -2,7 +2,6 @@ import { desc, eq } from "drizzle-orm";
 import { redirect } from "next/navigation";
 import { buyBadge } from "@/actions/draw-badge";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
-import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { auth } from "@/lib/auth";
 import { db, User, WebsiteDrawbadges } from "@/lib/db";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -194,7 +193,7 @@ export default async function DrawBadgePage({
 										<div style={{ minWidth: 0 }}>
 											<h3 style={{ margin: 0 }}>{b.badgeName}</h3>
 											<span className="currency">
-												<CurrencyIcon kind="credits" size={22} alt="" />
+												<span className="coin credits">cr</span>
 												{price.toLocaleString()}
 											</span>
 										</div>
@@ -5,9 +5,9 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { removeFriendship } from "@/actions/messenger";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import { db, MessengerFriendships, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";

 export const metadata = { title: "Friends" };

@@ -118,6 +118,10 @@ export default async function FriendsPage({
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
 						{friends.map((friend) => {
+							const avatar = avatarImageUrl(friend.look, {
+								size: "s",
+								headOnly: true,
+							});
 							const isOnline = friend.online === "1";
 							return (
 								<div
@@ -129,9 +133,13 @@ export default async function FriendsPage({
 										alignItems: "center",
 									}}
 								>
-									<UserAvatarThumbnail
-										figure={friend.look}
+									{/* eslint-disable-next-line @next/next/no-img-element */}
+									<img
+										className="avatar"
+										src={avatar}
 										alt={`${friend.username} avatar`}
+										width={50}
+										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
@@ -3,8 +3,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, Guilds, GuildsMembers, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";

 type GuildView = {
@@ -202,9 +202,14 @@ export default async function GuildPage({
 									alignItems: "center",
 								}}
 							>
-								<UserAvatarThumbnail
-									figure={m.look}
+								{/* eslint-disable-next-line @next/next/no-img-element */}
+								<img
+									className="avatar"
+									src={avatarImageUrl(m.look)}
 									alt={`${m.username} avatar`}
+									width={50}
+									height={75}
+									style={{ flex: "0 0 auto" }}
 								/>
 								<div style={{ minWidth: 0 }}>
 									<h3 style={{ margin: "0 0 0.2rem", fontSize: "1rem" }}>
@@ -2,24 +2,20 @@ import { desc, eq, inArray } from "drizzle-orm";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
-import {
-	CurrencyIcon,
-	type CurrencyKind,
-} from "@/components/shared/currency-icon";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, User, UsersCurrency, UsersSettings } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";

 export const metadata = { title: "Leaderboard" };

 // Currency type ids (see UsersCurrency in src/db/schema.ts):
 //   Credits = -1 (lives on users.credits), Duckets = 0, Diamonds = 5.
 const TABS = [
-	{ key: "credits", label: "Credits" },
-	{ key: "diamonds", label: "Diamonds" },
-	{ key: "duckets", label: "Duckets" },
-	{ key: "achievement", label: "Achievement" },
-	{ key: "respects", label: "Respects" },
-	{ key: "onlinetime", label: "Online Time" },
+	{ key: "credits", label: "Credits", coin: "credits" },
+	{ key: "diamonds", label: "Diamonds", coin: "diamonds" },
+	{ key: "duckets", label: "Duckets", coin: "duckets" },
+	{ key: "achievement", label: "Achievement", coin: "" },
+	{ key: "respects", label: "Respects", coin: "" },
+	{ key: "onlinetime", label: "Online Time", coin: "" },
 ] as const;

 type TabKey = (typeof TABS)[number]["key"];
@@ -159,6 +155,7 @@ export default async function LeaderboardPage({
 	const active: TabKey = TABS.some((tab) => tab.key === type)
 		? (type as TabKey)
 		: "credits";
+	const activeTab = TABS.find((tab) => tab.key === active) ?? TABS[0];

 	const rows = await (active === "credits"
 		? loadCreditsRows()
@@ -169,10 +166,10 @@ export default async function LeaderboardPage({
 					SETTINGS_FIELD[active as keyof typeof SETTINGS_FIELD],
 				));

-	const activeCurrency: CurrencyKind | null =
-		active === "credits" || active === "diamonds" || active === "duckets"
-			? active
-			: null;
+	const valueOnly =
+		active === "achievement" ||
+		active === "respects" ||
+		active === "onlinetime";

 	return (
 		<main style={{ display: "grid", gap: "1.5rem" }}>
@@ -209,15 +206,23 @@ export default async function LeaderboardPage({
 						</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>
-											<UserAvatarThumbnail
-												figure={row.look}
+											{/* eslint-disable-next-line @next/next/no-img-element */}
+											<img
+												className="avatar"
+												src={avatar}
 												alt={`${row.username} avatar`}
+												width={40}
+												height={40}
 											/>
 										</td>
 										<td>
@@ -229,20 +234,16 @@ export default async function LeaderboardPage({
 											</Link>
 										</td>
 										<td style={{ textAlign: "right" }}>
-											{activeCurrency ? (
+											{valueOnly ? (
+												<strong>{formatValue(active, row.value)}</strong>
+											) : (
 												<span
 													className="currency"
 													style={{ display: "inline-flex" }}
 												>
-													<CurrencyIcon
-														kind={activeCurrency}
-														size={22}
-														alt=""
-													/>
+													<span className={`coin ${activeTab.coin}`} />
 													{row.value.toLocaleString()}
 												</span>
-											) : (
-												<strong>{formatValue(active, row.value)}</strong>
 											)}
 										</td>
 									</tr>
@@ -7,10 +7,10 @@ import { LoginForm } from "@/components/auth/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 { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { captchaConfig } from "@/lib/services/captcha";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -227,11 +227,17 @@ export default async function LoginPage() {
 														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 												}}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
+												<Image
+													src={avatarImageUrl(u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
 													alt=""
-													options={{ direction: 2 }}
+													width={26}
+													height={32}
 													className="rounded-md"
+													unoptimized
 												/>
 												<span
 													className="text-[8px] font-bold truncate w-full text-center leading-tight"
@@ -292,11 +298,17 @@ export default async function LoginPage() {
 														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 												}}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
+												<Image
+													src={avatarImageUrl(u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
 													alt=""
-													options={{ direction: 2 }}
+													width={26}
+													height={32}
 													className="rounded-md"
+													unoptimized
 												/>
 												<span
 													className="text-[8px] font-bold truncate w-full text-center leading-tight"
@@ -6,7 +6,6 @@ import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";

 import { Reveal } from "@/components/motion-reveal";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
 	db,
@@ -497,10 +496,16 @@ export default async function MePage({
 											textDecoration: "none",
 										}}
 									>
-										<UserAvatarThumbnail
-											figure={friend.look}
+										<Image
+											src={avatarImageUrl(friend.look, {
+												size: "s",
+												headOnly: true,
+											})}
 											alt=""
+											width={40}
+											height={50}
 											className="rounded-lg shrink-0"
+											unoptimized
 										/>
 										<div className="min-w-0">
 											<p
@@ -9,7 +9,6 @@ import {
 	sendOfflineMessage,
 } from "@/actions/messenger";
 import { ContentCard, EmptyState } from "@/components/public/ui";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
 	db,
@@ -18,6 +17,7 @@ import {
 	MessengerOffline,
 	User,
 } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";

 type SearchParams = Promise<{
@@ -270,6 +270,10 @@ export default async function MessagesPage({
 					<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
 						{requests.map((req) => {
 							const from = userById.get(req.userFromId);
+							const avatar = avatarImageUrl(from?.look ?? "", {
+								size: "s",
+								headOnly: true,
+							});
 							return (
 								<div
 									key={req.id}
@@ -280,9 +284,13 @@ export default async function MessagesPage({
 										alignItems: "center",
 									}}
 								>
-									<UserAvatarThumbnail
-										figure={from?.look ?? ""}
+									{/* eslint-disable-next-line @next/next/no-img-element */}
+									<img
+										className="avatar"
+										src={avatar}
 										alt={`${from?.username ?? "User"} avatar`}
+										width={50}
+										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<p style={{ margin: 0 }}>
@@ -352,6 +360,10 @@ export default async function MessagesPage({
 					<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
 						{messages.map((msg) => {
 							const from = userById.get(msg.userFromId);
+							const avatar = avatarImageUrl(from?.look ?? "", {
+								size: "s",
+								headOnly: true,
+							});
 							const when = formatDate(new Date(msg.sendedOn * 1000));
 							return (
 								<article
@@ -363,9 +375,13 @@ export default async function MessagesPage({
 										alignItems: "flex-start",
 									}}
 								>
-									<UserAvatarThumbnail
-										figure={from?.look ?? ""}
+									{/* eslint-disable-next-line @next/next/no-img-element */}
+									<img
+										className="avatar"
+										src={avatar}
 										alt={`${from?.username ?? "User"} avatar`}
+										width={50}
+										height={50}
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<p
@@ -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,10 +478,16 @@ export default async function Home() {
 										className="flex flex-col items-center gap-1"
 									>
 										<div className="relative overflow-visible">
-											<UserAvatarThumbnail
-												figure={u.look}
+											<Image
+												src={avatarImageUrl(u.look, {
+													headOnly: true,
+													direction: 3,
+												})}
 												alt={u.username}
-												options={{ direction: 3 }}
+												width={64}
+												height={78}
+												style={{ marginTop: "-8px" }}
+												unoptimized
 											/>
 										</div>
 										<span
@@ -650,11 +656,17 @@ export default async function Home() {
 												"color-mix(in srgb, var(--color-primary) 5%, transparent)",
 										}}
 									>
-										<UserAvatarThumbnail
-											figure={u.look}
+										<Image
+											src={avatarImageUrl(u.look, {
+												headOnly: true,
+												direction: 2,
+												size: "s",
+											})}
 											alt={u.username}
-											options={{ direction: 2 }}
+											width={30}
+											height={36}
 											className="rounded-md"
+											unoptimized
 										/>
 										<span
 											className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight"
@@ -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,15 +56,23 @@ 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>
-											<UserAvatarThumbnail
-												figure={row.look}
+											{/* eslint-disable-next-line @next/next/no-img-element */}
+											<img
+												className="avatar"
+												src={avatar}
 												alt={`${row.username} avatar`}
+												width={40}
+												height={40}
 											/>
 										</td>
 										<td>
@@ -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,6 +135,12 @@ 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)}
@@ -145,10 +151,14 @@ export default async function RadioShoutsPage({
 										alignItems: "flex-start",
 									}}
 								>
-									{author ? (
-										<UserAvatarThumbnail
-											figure={author.look}
+									{authorAvatar ? (
+										/* eslint-disable-next-line @next/next/no-img-element */
+										<img
+											className="avatar"
+											src={authorAvatar}
 											alt={author?.username ?? "author"}
+											width={40}
+											height={40}
 										/>
 									) : null}
 									<div style={{ flex: 1, minWidth: 0 }}>
@@ -1,4 +1,5 @@
 import { desc } from "drizzle-orm";
+import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import {
@@ -7,9 +8,8 @@ import {
 	OnlineBadge,
 	RankBadge,
 } from "@/components/public/ui";
-import { CurrencyIcon } from "@/components/shared/currency-icon";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";

 export const metadata = { title: "Rankings" };

@@ -50,6 +50,9 @@ export default async function RankingsPage() {
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
 						{users.map((u, i) => {
+							const avatar = avatarImageUrl(u.look, {
+								size: "m",
+							});
 							return (
 								<div
 									key={u.username}
@@ -61,16 +64,20 @@ export default async function RankingsPage() {
 									}}
 								>
 									<RankBadge position={i + 1} />
-									<UserAvatarThumbnail
-										figure={u.look}
+									<Image
+										className="avatar"
+										src={avatar}
 										alt={`${u.username} avatar`}
+										width={50}
+										height={90}
+										unoptimized
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
 											<Link href={`/u/${u.username}`}>{u.username}</Link>
 										</h3>
 										<p className="currency" style={{ margin: "0 0 0.3rem" }}>
-											<CurrencyIcon kind="credits" size={22} alt="" />
+											<span className="coin credits">c</span>
 											{u.credits.toLocaleString()}
 										</p>
 										<OnlineBadge online={u.online === "1"} />
@@ -7,10 +7,10 @@ import { RegisterForm } from "@/components/auth/register-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 { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { captchaConfig } from "@/lib/services/captcha";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -224,11 +224,17 @@ export default async function RegisterPage() {
 														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 												}}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
+												<Image
+													src={avatarImageUrl(u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
 													alt=""
-													options={{ direction: 2 }}
+													width={26}
+													height={32}
 													className="rounded-md"
+													unoptimized
 												/>
 												<span
 													className="text-[8px] font-bold truncate w-full text-center leading-tight"
@@ -289,11 +295,16 @@ export default async function RegisterPage() {
 														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 												}}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
+												<Image
+													src={avatarImageUrl(u.look, {
+														headOnly: true,
+														direction: 2,
+													})}
 													alt=""
-													options={{ direction: 2 }}
+													width={52}
+													height={64}
 													className="rounded-md"
+													unoptimized
 												/>
 												<span
 													className="text-[10px] font-bold truncate w-full text-center leading-tight"
@@ -1,8 +1,9 @@
 import { and, eq, like } from "drizzle-orm";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, Rooms, User } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";

 export const metadata: Metadata = { title: "Search" };

@@ -133,10 +134,15 @@ export default async function SearchPage({
 										"color-mix(in srgb, var(--color-primary) 4%, transparent)",
 								}}
 							>
-								<UserAvatarThumbnail
-									figure={u.look}
+								<Image
+									src={avatarImageUrl(u.look, {
+										headOnly: true,
+										direction: 2,
+									})}
 									alt={u.username}
-									options={{ direction: 2 }}
+									width={40}
+									height={48}
+									unoptimized
 									className="rounded-lg"
 								/>
 								<span
@@ -4,7 +4,6 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { buyShopArticle } from "@/actions/shop";
 import { ContentCard, EmptyState } from "@/components/public/ui";
-import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { auth } from "@/lib/auth";
 import { db, WebsiteShopArticles, WebsiteShopCategories } from "@/lib/db";
 import { excerpt } from "@/lib/format";
@@ -278,19 +277,19 @@ export default async function ShopPage({
 								>
 									{a.credits ? (
 										<span className="currency">
-											<CurrencyIcon kind="credits" size={22} alt="" />
+											<span className="coin credits">cr</span>
 											{a.credits.toLocaleString()}
 										</span>
 									) : null}
 									{a.duckets ? (
 										<span className="currency">
-											<CurrencyIcon kind="duckets" size={22} alt="" />
+											<span className="coin duckets">du</span>
 											{a.duckets.toLocaleString()}
 										</span>
 									) : null}
 									{a.diamonds ? (
 										<span className="currency">
-											<CurrencyIcon kind="diamonds" size={22} alt="" />
+											<span className="coin diamonds">di</span>
 											{a.diamonds.toLocaleString()}
 										</span>
 									) : null}
@@ -12,7 +12,6 @@ import {
 	OnlineBadge,
 	StatBlock,
 } from "@/components/public/ui";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { auth } from "@/lib/auth";
 import {
 	CameraWeb,
@@ -478,7 +477,17 @@ export default async function ProfilePage({
 									textAlign: "center",
 								}}
 							>
-								<UserAvatarThumbnail figure={f.look} alt={f.username} />
+								{/* 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" }}
+								/>
 								<span
 									style={{
 										fontSize: "0.8rem",
@@ -671,6 +680,12 @@ 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)}
@@ -681,10 +696,14 @@ export default async function ProfilePage({
 										alignItems: "flex-start",
 									}}
 								>
-									{author ? (
-										<UserAvatarThumbnail
-											figure={author.look}
+									{authorAvatar ? (
+										/* eslint-disable-next-line @next/next/no-img-element */
+										<img
+											className="avatar"
+											src={authorAvatar}
 											alt={author?.username ?? "author"}
+											width={40}
+											height={40}
 										/>
 									) : null}
 									<div style={{ flex: 1 }}>
@@ -620,6 +620,15 @@ tbody tr:hover {
 	border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
 	color: var(--color-pill-text-readable, var(--color-text-readable));
 }
+.currency .coin {
+	width: 22px;
+	height: 22px;
+	border-radius: 999px;
+	display: grid;
+	place-items: center;
+	color: #fff;
+	font-size: 0.7rem;
+}
 .nav-credit-icon {
 	background: #e9b124 url("/assets/images/icons/currency/credits.png") center
 		no-repeat;
@@ -1,21 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { HeaderUserIdentity } from "./header-user-identity";
-
-describe("HeaderUserIdentity", () => {
-	it("keeps the 40px head separated from the username", () => {
-		const html = renderToStaticMarkup(
-			<HeaderUserIdentity
-				figure="hd-180-1.hr-828-45"
-				username="Life"
-				textColor="#ffffff"
-			/>,
-		);
-
-		expect(html).toContain("gap-2");
-		expect(html).toContain('width="40"');
-		expect(html).toContain('height="40"');
-		expect(html).toContain(">Life</span>");
-		expect(html).not.toContain("-ml-");
-	});
-});
@@ -1,25 +0,0 @@
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
-
-interface HeaderUserIdentityProps {
-	figure: string;
-	username: string;
-	textColor: string;
-}
-
-export function HeaderUserIdentity({
-	figure,
-	username,
-	textColor,
-}: HeaderUserIdentityProps) {
-	return (
-		<span className="flex items-center gap-2">
-			<UserAvatarThumbnail figure={figure} alt="" options={{ direction: 2 }} />
-			<span
-				className="hidden sm:inline font-semibold"
-				style={{ color: textColor }}
-			>
-				{username}
-			</span>
-		</span>
-	);
-}
@@ -1,46 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { describe, expect, it } from "vitest";
-
-const compactCallSites = new Map<string, number>([
-	["src/components/top-header.tsx", 1],
-	["src/app/(site)/friends/page.tsx", 1],
-	["src/app/(site)/guilds/[id]/page.tsx", 1],
-	["src/app/(site)/leaderboard/page.tsx", 1],
-	["src/app/(site)/login/page.tsx", 2],
-	["src/app/(site)/me/page.tsx", 1],
-	["src/app/(site)/messages/page.tsx", 2],
-	["src/app/(site)/page.tsx", 2],
-	["src/app/(site)/radio/leaderboard/page.tsx", 1],
-	["src/app/(site)/radio/shouts/page.tsx", 1],
-	["src/app/(site)/rankings/page.tsx", 1],
-	["src/app/(site)/register/page.tsx", 2],
-	["src/app/(site)/search/page.tsx", 1],
-	["src/app/(site)/u/[username]/page.tsx", 2],
-]);
-
-function source(path: string): string {
-	return readFileSync(resolve(process.cwd(), path), "utf8");
-}
-
-describe("public avatar presentation contract", () => {
-	it.each([...compactCallSites])(
-		"uses the shared thumbnail in %s",
-		(path, expectedCount) => {
-			const matches = source(path).match(/<UserAvatarThumbnail\b/g) ?? [];
-			expect(matches).toHaveLength(expectedCount);
-		},
-	);
-
-	it("preserves explicit full-avatar previews", () => {
-		expect(source("src/app/(site)/me/page.tsx")).toContain(
-			"avatarImageUrl(user.look",
-		);
-		expect(source("src/app/(site)/settings/page.tsx")).toContain(
-			"avatarImageUrl(user.look",
-		);
-		expect(source("src/app/(site)/u/[username]/page.tsx")).toContain(
-			"avatarImageUrl(user.look",
-		);
-	});
-});
@@ -1,42 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { CurrencyIcon } from "./currency-icon";
-
-const publicCurrencyFiles = [
-	"src/app/(site)/rankings/page.tsx",
-	"src/app/(site)/leaderboard/page.tsx",
-	"src/app/(site)/shop/page.tsx",
-	"src/app/(site)/draw-badge/page.tsx",
-];
-
-function source(path: string): string {
-	return readFileSync(resolve(process.cwd(), path), "utf8");
-}
-
-describe("public currency presentation contract", () => {
-	it.each([
-		["credits", "/assets/images/icons/currency/credits.png"],
-		["duckets", "/assets/images/icons/currency/duckets.png"],
-		["diamonds", "/assets/images/icons/currency/diamonds.png"],
-	] as const)("renders the %s asset", (kind, expectedSrc) => {
-		const html = renderToStaticMarkup(
-			<CurrencyIcon kind={kind} size={22} alt="" />,
-		);
-		expect(html).toContain(expectedSrc);
-		expect(html).toContain('width="22"');
-		expect(html).toContain('height="22"');
-		expect(html).toContain('alt=""');
-	});
-
-	it.each(publicCurrencyFiles)("removes placeholder coins from %s", (path) => {
-		const contents = source(path);
-		expect(contents).not.toMatch(/className=(?:"coin|\{`coin)/);
-		expect(contents).toContain("<CurrencyIcon");
-	});
-
-	it("removes the obsolete coin CSS contract", () => {
-		expect(source("src/app/globals.css")).not.toContain(".currency .coin");
-	});
-});
@@ -1,24 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { UserAvatarThumbnail } from "./user-avatar-thumbnail";
-
-describe("UserAvatarThumbnail", () => {
-	it("renders the supplied figure as a fixed head-only thumbnail", () => {
-		const html = renderToStaticMarkup(
-			<UserAvatarThumbnail
-				figure="hd-180-1.hr-828-45"
-				alt="Life avatar"
-				options={{ direction: 3 }}
-			/>,
-		);
-
-		expect(html).toContain("figure=hd-180-1.hr-828-45");
-		expect(html).toContain("headonly=1");
-		expect(html).toContain("size=l");
-		expect(html).toContain("direction=3");
-		expect(html).toContain('width="40"');
-		expect(html).toContain('height="40"');
-		expect(html).toContain('alt="Life avatar"');
-		expect(html).toContain("shrink-0");
-	});
-});
@@ -1,27 +0,0 @@
-import { AvatarImage } from "@/components/shared/avatar-image";
-import type { AvatarOptions } from "@/lib/imager";
-
-export interface UserAvatarThumbnailProps {
-	figure: string;
-	alt: string;
-	options?: Omit<AvatarOptions, "headOnly" | "size">;
-	className?: string;
-}
-
-export function UserAvatarThumbnail({
-	figure,
-	alt,
-	options,
-	className = "",
-}: UserAvatarThumbnailProps) {
-	return (
-		<AvatarImage
-			figure={figure}
-			options={{ ...options, headOnly: true, size: "l" }}
-			width={40}
-			height={40}
-			alt={alt}
-			className={`shrink-0 ${className}`.trim()}
-		/>
-	);
-}
@@ -3,9 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import type { Session } from "next-auth";
 import { getTranslations } from "next-intl/server";
-import { HeaderUserIdentity } from "@/components/header-user-identity";
 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 {
@@ -15,6 +13,7 @@ import {
 	User,
 	UsersCurrency,
 } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";

@@ -78,6 +77,7 @@ 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,11 +318,20 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							aria-label="User menu"
 							className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden"
 						>
-							<HeaderUserIdentity
-								figure={look}
-								username={session.user.name ?? ""}
-								textColor={textColor}
+							<Image
+								className="bg-no-repeat bg-center"
+								src={avatar}
+								alt=""
+								width={54}
+								height={62}
+								unoptimized
 							/>
+							<span
+								className="hidden sm:inline -ml-2 font-semibold"
+								style={{ color: textColor }}
+							>
+								{session.user.name}
+							</span>
 						</summary>
 						<div
 							role="menu"
@@ -378,10 +387,16 @@ 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"
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
+												<Image
+													src={avatarImageUrl(u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
 													alt=""
-													options={{ direction: 2 }}
+													width={20}
+													height={24}
+													unoptimized
 												/>
 												<span style={{ color: textColor }}>{u.username}</span>
 											</Link>