fix: separate header avatar from username

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=""
-								options={{ direction: 2 }}
+								username={session.user.name ?? ""}
+								textColor={textColor}
 							/>
-							<span
-								className="hidden sm:inline font-semibold"
-								style={{ color: textColor }}
-							>
-								{session.user.name}
-							</span>
 						</summary>
 						<div
 							role="menu"