refactor(characters): drive shared UI from active character

src/app/_components/__tests__/tailwind-components.test.tsx

@@ -48,7 +48,13 @@ describe("shared Tailwind components", () => {
 
   it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
     const html = renderToStaticMarkup(
-      <CharacterAvatar size={48} imageSize={96} className="custom-avatar" />,
+      <CharacterAvatar
+        src="/images/avatar/maya.png"
+        alt="Maya Tan"
+        size={48}
+        imageSize={96}
+        className="custom-avatar"
+      />,
     );
 
     expect(html).toContain("inline-flex");
@@ -56,7 +62,7 @@ describe("shared Tailwind components", () => {
     expect(html).toContain("width:48px");
     expect(html).toContain("height:48px");
     expect(html).toContain("size-full object-cover");
-    expect(html).toContain("%2Fimages%2Favatar%2Felio.png");
+    expect(html).toContain("%2Fimages%2Favatar%2Fmaya.png");
   });
 
   it("renders UserMessageAvatar custom and fallback images", () => {

src/app/_components/character-avatar.tsx

@@ -4,8 +4,8 @@ import Image from "next/image";
 import type { CSSProperties } from "react";
 
 export interface CharacterAvatarProps {
-  src?: string;
-  alt?: string;
+  src: string;
+  alt: string;
   className?: string;
   size?: number | string;
   imageSize?: number;
@@ -13,8 +13,8 @@ export interface CharacterAvatarProps {
 }
 
 export function CharacterAvatar({
-  src = "/images/avatar/elio.png",
-  alt = "Elio Silvestri",
+  src,
+  alt,
   className,
   size = 43,
   imageSize,

src/app/_components/core/__tests__/tailwind-components.test.tsx

@@ -79,6 +79,7 @@ describe("core Tailwind components", () => {
       <AppBottomNav
         activeItem="chat"
         variant="dark"
+        privateRoomLabel="Maya Private room"
         onChatClick={() => undefined}
         onPrivateRoomClick={() => undefined}
       />,
@@ -87,6 +88,7 @@ describe("core Tailwind components", () => {
       <AppBottomNav
         activeItem="privateRoom"
         variant="warm"
+        privateRoomLabel="Maya Private room"
         onChatClick={() => undefined}
         onPrivateRoomClick={() => undefined}
       />,
@@ -99,7 +101,7 @@ describe("core Tailwind components", () => {
     );
     expect(privateRoomHtml).toMatch(/class="[^"]*warm[^"]*"/);
     expect(privateRoomHtml).toMatch(
-      /<button[^>]*aria-current="page"[^>]*>.*?<span>Elio Private room<\/span>/,
+      /<button[^>]*aria-current="page"[^>]*>.*?<span>Maya Private room<\/span>/,
     );
     expect(chatHtml).toContain('data-analytics-key="navigation.chat"');
     expect(privateRoomHtml).toContain(

src/app/_components/core/app-bottom-nav.tsx

@@ -10,7 +10,7 @@ export type AppBottomNavVariant = "warm" | "dark";
 export interface AppBottomNavProps {
   activeItem?: AppBottomNavItem | null;
   variant?: AppBottomNavVariant;
-  privateRoomLabel?: string;
+  privateRoomLabel: string;
   onChatClick: () => void;
   onPrivateRoomClick: () => void;
 }
@@ -18,7 +18,7 @@ export interface AppBottomNavProps {
 export function AppBottomNav({
   activeItem = null,
   variant = "warm",
-  privateRoomLabel = "Elio Private room",
+  privateRoomLabel,
   onChatClick,
   onPrivateRoomClick,
 }: AppBottomNavProps) {