refactor(ui): add shared character avatar

src/app/private-room/private-room-screen.module.css

@@ -95,18 +95,12 @@
   flex: 0 0 auto;
   place-items: center;
   border: 3px solid rgba(255, 255, 255, 0.92);
-  border-radius: 24px;
+  border-radius: 9999px;
   background: linear-gradient(145deg, #ffb36d, #ff5d95);
   box-shadow: 0 16px 34px rgba(255, 95, 128, 0.23);
   overflow: hidden;
 }
 
-.avatarFrame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .identityText {
   min-width: 0;
 }

src/app/private-room/private-room-screen.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useMemo } from "react";
-import Image from "next/image";
 import { RefreshCw, Sparkles } from "lucide-react";
 
+import { CharacterAvatar } from "@/app/_components";
 import { AppBottomNav, MobileShell } from "@/app/_components/core";
 import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
@@ -93,11 +93,11 @@ export function PrivateRoomScreen() {
 
           <div className={styles.identity}>
             <div className={styles.avatarFrame}>
-              <Image
+              <CharacterAvatar
                 src={avatarUrl}
                 alt={displayName}
-                width={72}
-                height={72}
+                size="100%"
+                imageSize={72}
                 priority
               />
             </div>