refactor(ui): add shared character avatar

src/app/_components/character-avatar.module.css

@@ -0,0 +1,15 @@
+.avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--color-avatar-border, #fbf3f5);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/app/_components/character-avatar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import type { CSSProperties } from "react";
+
+import styles from "./character-avatar.module.css";
+
+export interface CharacterAvatarProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  size?: number | string;
+  imageSize?: number;
+  priority?: boolean;
+}
+
+export function CharacterAvatar({
+  src = "/images/chat/pic-chat-elio.png",
+  alt = "Elio Silvestri",
+  className,
+  size = 43,
+  imageSize,
+  priority = false,
+}: CharacterAvatarProps) {
+  const resolvedImageSize =
+    imageSize ?? (typeof size === "number" ? size : 96);
+  const style: CSSProperties = {
+    width: size,
+    height: size,
+  };
+
+  return (
+    <span
+      className={[styles.avatar, className].filter(Boolean).join(" ")}
+      style={style}
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={resolvedImageSize}
+        height={resolvedImageSize}
+        priority={priority}
+      />
+    </span>
+  );
+}

src/app/_components/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from "./back-button";
+export * from "./character-avatar";
 export * from "./user-message-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}
+                size="100%"
-                height={72}
+                imageSize={72}
                 priority
               />
             </div>

src/app/splash/components/splash-latest-message.module.css

@@ -49,7 +49,7 @@
   height: 48px;
   place-items: center;
   border: 2px solid rgba(255, 255, 255, 0.74);
-  border-radius: 18px;
+  border-radius: 9999px;
   background: linear-gradient(145deg, #ffb36d, #ff5d95);
   box-shadow: 0 10px 24px rgba(255, 95, 128, 0.24);
   overflow: hidden;
@@ -58,7 +58,6 @@
 .avatar {
   width: 100%;
   height: 100%;
-  object-fit: cover;
 }
 
 .copy {

src/app/splash/components/splash-latest-message.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import { MessageCircle } from "lucide-react";
 
+import { CharacterAvatar } from "@/app/_components";
+
 import styles from "./splash-latest-message.module.css";
 
 export interface SplashLatestMessageProps {
@@ -26,11 +27,10 @@ export function SplashLatestMessage({
       aria-label="Open latest message from Elio"
     >
       <span className={styles.avatarWrap}>
-        <Image
+        <CharacterAvatar
-          src="/images/chat/pic-chat-elio.png"
           alt=""
-          width={42}
+          size="100%"
-          height={42}
+          imageSize={42}
           className={styles.avatar}
         />
       </span>

src/app/tip/tip-screen.module.css

@@ -121,7 +121,7 @@
   height: clamp(88px, 22.222vw, 112px);
   place-items: center;
   border: 4px solid rgba(255, 255, 255, 0.9);
-  border-radius: 30px;
+  border-radius: 9999px;
   background: linear-gradient(145deg, #ffbd7c, #ff5d91);
   box-shadow:
     0 20px 44px rgba(255, 98, 133, 0.24),
@@ -129,12 +129,6 @@
   overflow: hidden;
 }
 
-.avatarRing img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .eyebrow {
   margin: 16px 0 0;
   color: #b35d63;

src/app/tip/tip-screen.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useMemo, useRef } from "react";
-import Image from "next/image";
 import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
+import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
 import type { PayChannel } from "@/data/dto/payment";
@@ -165,11 +165,10 @@ export function TipScreen({
 
         <section className={styles.hero} aria-labelledby="tip-title">
           <div className={styles.avatarRing}>
-            <Image
+            <CharacterAvatar
-              src="/images/chat/pic-chat-elio.png"
               alt="Elio Silvestri"
-              width={88}
+              size="100%"
-              height={88}
+              imageSize={88}
               priority
             />
           </div>