fix: separate header avatar from username

src/components/header-user-identity.test.tsx

@@ -0,0 +1,21 @@
+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-");
+	});
+});

src/components/header-user-identity.tsx

@@ -0,0 +1,25 @@
+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>
+	);
+}

src/components/shared/public-avatar-contract.test.ts

@@ -3,7 +3,7 @@ import { resolve } from "node:path";
 import { describe, expect, it } from "vitest";
 
 const compactCallSites = new Map<string, number>([
-	["src/components/top-header.tsx", 2],
+	["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/components/top-header.tsx

@@ -3,6 +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";
@@ -317,17 +318,11 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							aria-label="User menu"
 							className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden"
 						>
-							<UserAvatarThumbnail
+							<HeaderUserIdentity
 								figure={look}
-								alt=""
+								username={session.user.name ?? ""}
-								options={{ direction: 2 }}
+								textColor={textColor}
 							/>
-							<span
-								className="hidden sm:inline font-semibold"
-								style={{ color: textColor }}
-							>
-								{session.user.name}
-							</span>
 						</summary>
 						<div
 							role="menu"