feat(profile)!: replace sidebar and add avatar navigation

Rename the global Sidebar route, UI, assets, analytics, and payment return context to Profile. Add accessible message-avatar navigation and preserve the source character across auth and logout flows.

BREAKING CHANGE: /sidebar has been removed; use /profile instead.

docs/backend/FRONTEND_PAYMENT_API.md

@@ -224,7 +224,7 @@ payChannel = ezpay
 subscriptionType = vip | topup | tip
 giftCategory（仅 Tip，可空）
 giftPlanId（仅 Tip，可空）
-returnTo = chat | private-room | sidebar（可选）
+returnTo = chat | private-room | profile（可选）
 characterSlug（可选）
 createdAt
 ```

e2e/fixtures/helpers/auth.ts

@@ -11,7 +11,7 @@ export const splashStartChatButtonName = "Start Chatting";
 export const defaultCharacterSlug = "elio";
 export const defaultCharacterSplashPath = `/characters/${defaultCharacterSlug}/splash`;
 export const defaultCharacterChatPath = `/characters/${defaultCharacterSlug}/chat`;
-export const defaultCharacterSidebarPath = `/sidebar?returnTo=%2Fcharacters%2F${defaultCharacterSlug}%2Fchat`;
+export const defaultCharacterProfilePath = `/profile?returnTo=%2Fcharacters%2F${defaultCharacterSlug}%2Fchat`;
 export const defaultCharacterChatUrl = new RegExp(
   `/characters/${defaultCharacterSlug}/chat(?:\\?.*)?$`,
 );

e2e/fixtures/helpers/chat.ts

@@ -27,7 +27,7 @@ export async function enterChatFromSplash(page: Page, options: { expectedUrl?: R
   await expect(startChatButton).toBeVisible({ timeout });
   await expect(startChatButton).toBeEnabled();
   for (let attempt = 0; attempt < 3; attempt += 1) {
-    await startChatButton.click();
+    await startChatButton.click({ timeout: 3_000 }).catch(() => {});
     try { await expect(page).toHaveURL(expectedUrl, { timeout: 3_000 }); return; } catch { await page.waitForTimeout(500); }
   }
   await expect(page).toHaveURL(expectedUrl, { timeout });

e2e/specs/mock/auth/email-login-from-other-options.spec.ts

@@ -31,5 +31,5 @@ test("user can email login from other sign-in options and return to chat", async
   expect(["desktop", "android"]).toContain(loginRequest?.postDataJSON().platform);
 
   await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
-  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
 });

e2e/specs/mock/auth/logout-from-profile.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 import { mockCoreApis } from "@e2e/fixtures/api-mocks";
 import {
   clearBrowserState,
-  defaultCharacterSidebarPath,
+  defaultCharacterProfilePath,
   defaultCharacterSplashPath,
   defaultCharacterChatUrl,
   enterChatFromSplash,
@@ -17,7 +17,7 @@ test.beforeEach(async ({ baseURL, context, page }) => {
   await mockCoreApis(page);
 });
 
-test("user can log out from the sidebar after email login", async ({
+test("user can log out from the profile after email login", async ({
   page,
 }) => {
   await enterChatFromSplash(page);
@@ -27,11 +27,11 @@ test("user can log out from the sidebar after email login", async ({
   await expect(page).toHaveURL(/\/auth(?:\?.*)?$/);
   await switchToEmailSignIn(page);
   await submitEmailLogin(page, { expectedUrl: defaultCharacterChatUrl });
-  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
 
-  await page.getByRole("button", { name: "Menu" }).click();
+  await page.getByRole("button", { name: "Profile" }).click();
   await expect(page).toHaveURL(
-    new RegExp(defaultCharacterSidebarPath.replace("?", "\\?") + "$"),
+    new RegExp(defaultCharacterProfilePath.replace("?", "\\?") + "$"),
   );
 
   const logoutRequestPromise = page.waitForRequest("**/api/auth/logout");

e2e/specs/mock/chat/chat-avatar-navigation.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test, type Page } from "@playwright/test";
+
+import { mockCoreApis } from "@e2e/fixtures/api-mocks";
+import {
+  clearBrowserState,
+  defaultCharacterProfilePath,
+  dismissChatInterruptions,
+  enterChatFromSplash,
+  submitEmailLogin,
+  switchToEmailSignIn,
+} from "@e2e/fixtures/test-helpers";
+
+const characters = [
+  { slug: "elio", displayName: "Elio Silvestri" },
+  { slug: "maya", displayName: "Maya Tan" },
+  { slug: "nayeli", displayName: "Nayeli Cervantes" },
+] as const;
+
+test.beforeEach(async ({ baseURL, context, page }) => {
+  await clearBrowserState(context, page, baseURL);
+  await mockCoreApis(page);
+});
+
+test("guest user avatar returns to Profile after sign-in", async ({
+  page,
+}) => {
+  await enterChatFromSplash(page, { timeout: 30_000 });
+  await sendMessage(page, "Open my profile");
+
+  await page.getByRole("button", { name: "Open profile" }).click();
+
+  await expect(page).toHaveURL(/\/auth\?redirect=/);
+  expect(new URL(page.url()).searchParams.get("redirect")).toBe(
+    defaultCharacterProfilePath,
+  );
+  await switchToEmailSignIn(page);
+  await submitEmailLogin(page, {
+    expectedUrl: new RegExp(
+      `${defaultCharacterProfilePath.replace("?", "\\?")}$`,
+    ),
+  });
+});
+
+for (const character of characters) {
+  test(`${character.displayName} avatar opens the matching Private Room`, async ({
+    page,
+  }) => {
+    await enterCharacterChat(page, character.slug);
+    await sendMessage(page, `Hello ${character.displayName}`);
+
+    await page
+      .getByRole("button", {
+        name: `Open ${character.displayName}'s private room`,
+      })
+      .last()
+      .click();
+
+    await expect(page).toHaveURL(
+      new RegExp(`/characters/${character.slug}/private-room(?:\\?.*)?$`),
+    );
+  });
+}
+
+async function enterCharacterChat(page: Page, characterSlug: string) {
+  const chatPath = `/characters/${characterSlug}/chat`;
+
+  await page.goto(`/characters/${characterSlug}/splash`);
+  await page.getByRole("button", { name: "Start Chatting" }).click();
+  await expect(page).toHaveURL(new RegExp(`${chatPath}(?:\\?.*)?$`));
+  await dismissChatInterruptions(page);
+  await expect(page.getByRole("textbox", { name: "Message" })).toBeEnabled({
+    timeout: 20_000,
+  });
+}
+
+async function sendMessage(page: Page, message: string) {
+  await dismissChatInterruptions(page);
+  const messageInput = page.getByRole("textbox", { name: "Message" });
+
+  await expect(messageInput).toBeEnabled({ timeout: 20_000 });
+  await messageInput.fill(message);
+  await messageInput.press("Enter");
+  await expect(page.getByRole("button", { name: "Open profile" })).toBeVisible({
+    timeout: 10_000,
+  });
+}

e2e/specs/real/email-login-from-other-options.spec.ts

@@ -42,7 +42,7 @@ test.describe("pre-release email login smoke", () => {
       urlTimeout: 20_000,
     });
 
-    await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
     await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
   });
 });

package.json

@@ -25,7 +25,7 @@
     "test:e2e:chrome": "PLAYWRIGHT_USE_SYSTEM_CHROME=1 playwright test --project=mock-chromium",
     "test:e2e:headed": "playwright test --project=mock-chromium --headed",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:mobile-smoke": "playwright test --project=mock-mobile-chrome e2e/specs/mock/auth/email-login-from-other-options.spec.ts e2e/specs/mock/auth/logout-from-sidebar.spec.ts e2e/specs/mock/chat/chat-send-token-refresh-retry.spec.ts e2e/specs/mock/unlock-message/image-unlock-insufficient-credits.spec.ts",
+    "test:e2e:mobile-smoke": "playwright test --project=mock-mobile-chrome e2e/specs/mock/auth/email-login-from-other-options.spec.ts e2e/specs/mock/auth/logout-from-profile.spec.ts e2e/specs/mock/chat/chat-send-token-refresh-retry.spec.ts e2e/specs/mock/unlock-message/image-unlock-insufficient-credits.spec.ts",
     "test:e2e:real": "E2E_REAL_BACKEND=1 PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL:-https://frontend-test.banlv-ai.com} E2E_API_BASE_URL=${E2E_API_BASE_URL:-https://proapi.banlv-ai.com} playwright test --project=real-backend",
     "test:e2e:prod": "E2E_REAL_BACKEND=1 PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL:-https://cozsweet.com} E2E_API_BASE_URL=${E2E_API_BASE_URL:-https://proapi.banlv-ai.com} playwright test --project=prod-smoke",
     "contract:check": "node scripts/contracts/check-openapi.mjs",

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

@@ -79,4 +79,34 @@ describe("shared Tailwind components", () => {
     expect(guestHtml).toContain('aria-label="Guest avatar"');
     expect(guestHtml).toContain("%2Fimages%2Favatar%2Fplaceholder.png");
   });
+
+  it("renders interactive avatars as accessible buttons", () => {
+    const characterHtml = renderToStaticMarkup(
+      <CharacterAvatar
+        src="/images/avatar/elio.png"
+        alt="Elio Silvestri"
+        actionLabel="Open Elio's private room"
+        analyticsKey="chat.open_private_room_from_avatar"
+        onClick={() => undefined}
+      />,
+    );
+    const userHtml = renderToStaticMarkup(
+      <UserMessageAvatar
+        actionLabel="Open profile"
+        analyticsKey="chat.open_profile_from_avatar"
+        onClick={() => undefined}
+      />,
+    );
+
+    expect(characterHtml).toContain('<button type="button"');
+    expect(characterHtml).toContain(
+      'aria-label="Open Elio&#x27;s private room"',
+    );
+    expect(characterHtml).toContain(
+      'data-analytics-key="chat.open_private_room_from_avatar"',
+    );
+    expect(userHtml).toContain('<button type="button"');
+    expect(userHtml).toContain('aria-label="Open profile"');
+    expect(userHtml).toContain("focus-visible:outline-3");
+  });
 });

src/app/_components/avatar-interaction.ts

@@ -0,0 +1,11 @@
+export type AvatarInteractionProps =
+  | {
+      onClick?: undefined;
+      actionLabel?: never;
+      analyticsKey?: never;
+    }
+  | {
+      onClick: () => void;
+      actionLabel: string;
+      analyticsKey?: string;
+    };

src/app/_components/character-avatar.tsx

@@ -3,7 +3,9 @@
 import Image from "next/image";
 import type { CSSProperties } from "react";
 
-export interface CharacterAvatarProps {
+import type { AvatarInteractionProps } from "./avatar-interaction";
+
+interface CharacterAvatarVisualProps {
   src: string;
   alt: string;
   className?: string;
@@ -12,6 +14,9 @@ export interface CharacterAvatarProps {
   priority?: boolean;
 }
 
+export type CharacterAvatarProps = CharacterAvatarVisualProps &
+  AvatarInteractionProps;
+
 export function CharacterAvatar({
   src,
   alt,
@@ -19,6 +24,9 @@ export function CharacterAvatar({
   size = 43,
   imageSize,
   priority = false,
+  onClick,
+  actionLabel,
+  analyticsKey,
 }: CharacterAvatarProps) {
   const resolvedImageSize =
     imageSize ?? (typeof size === "number" ? size : 96);
@@ -27,16 +35,16 @@ export function CharacterAvatar({
     height: size,
   };
 
-  return (
+  const avatarClassName = [
-    <span
+    "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border-0 bg-(--color-avatar-border,#fbf3f5)",
-      className={[
+    onClick
-        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
+      ? "cursor-pointer p-0 transition-transform duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-accent active:scale-96"
+      : undefined,
     className,
   ]
     .filter(Boolean)
-        .join(" ")}
+    .join(" ");
-      style={style}
+  const image = (
-    >
     <Image
       src={src}
       alt={alt}
@@ -45,6 +53,27 @@ export function CharacterAvatar({
       priority={priority}
       className="size-full object-cover"
     />
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={avatarClassName}
+        style={style}
+        aria-label={actionLabel}
+        data-analytics-key={analyticsKey}
+        data-analytics-label={actionLabel}
+        onClick={onClick}
+      >
+        {image}
+      </button>
+    );
+  }
+
+  return (
+    <span className={avatarClassName} style={style}>
+      {image}
     </span>
   );
 }

src/app/_components/index.ts

@@ -3,5 +3,6 @@
  */
 
 export * from "./back-button";
+export * from "./avatar-interaction";
 export * from "./character-avatar";
 export * from "./user-message-avatar";

src/app/_components/user-message-avatar.tsx

@@ -2,19 +2,30 @@
 
 import Image from "next/image";
 
-export interface UserMessageAvatarProps {
+import type { AvatarInteractionProps } from "./avatar-interaction";
+
+interface UserMessageAvatarVisualProps {
   avatarUrl?: string | null;
   className?: string;
   size?: number | string;
 }
 
+export type UserMessageAvatarProps = UserMessageAvatarVisualProps &
+  AvatarInteractionProps;
+
 export function UserMessageAvatar({
   avatarUrl,
   className,
   size = 43,
+  onClick,
+  actionLabel,
+  analyticsKey,
 }: UserMessageAvatarProps) {
   const avatarClassName = [
     "flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))",
+    onClick
+      ? "cursor-pointer p-0 transition-transform duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-accent active:scale-96"
+      : undefined,
     className,
   ]
     .filter(Boolean)
@@ -22,21 +33,30 @@ export function UserMessageAvatar({
   const avatarStyle = { width: size, height: size };
   const imageSize = typeof size === "number" ? size : 64;
 
-  if (avatarUrl && avatarUrl.length > 0) {
+  const hasUserAvatar = Boolean(avatarUrl && avatarUrl.length > 0);
-    return (
+  const image = (
-      <div
-        className={avatarClassName}
-        style={avatarStyle}
-        aria-label="User avatar"
-      >
     <Image
-          src={avatarUrl}
+      src={hasUserAvatar ? avatarUrl! : "/images/avatar/placeholder.png"}
-          alt=""
+      alt={hasUserAvatar ? "" : "Guest"}
       width={imageSize}
       height={imageSize}
       className="size-full object-cover"
     />
-      </div>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={avatarClassName}
+        style={avatarStyle}
+        aria-label={actionLabel}
+        data-analytics-key={analyticsKey}
+        data-analytics-label={actionLabel}
+        onClick={onClick}
+      >
+        {image}
+      </button>
     );
   }
 
@@ -44,15 +64,9 @@ export function UserMessageAvatar({
     <div
       className={avatarClassName}
       style={avatarStyle}
-      aria-label="Guest avatar"
+      aria-label={hasUserAvatar ? "User avatar" : "Guest avatar"}
     >
-      <Image
+      {image}
-        src="/images/avatar/placeholder.png"
-        alt="Guest"
-        width={imageSize}
-        height={imageSize}
-        className="size-full object-cover"
-      />
     </div>
   );
 }

src/app/chat/chat-screen.tsx

@@ -15,7 +15,9 @@ import {
 } from "@/providers/character-provider";
 import { useCharacterCatalog } from "@/providers/character-catalog-provider";
 import { clearPendingChatNavigation } from "@/lib/navigation/chat_unlock_session";
-import { getCharacterRoutes } from "@/router/routes";
+import { buildGlobalPageUrl } from "@/router/global-route-context";
+import { resolveAuthenticatedNavigation } from "@/router/navigation-resolver";
+import { getCharacterRoutes, ROUTES } from "@/router/routes";
 
 import { MobileShell } from "@/app/_components/core";
 
@@ -57,6 +59,10 @@ export function ChatScreen() {
   const refreshCharacterCatalog = characterCatalog.refresh;
   const defaultCharacterSlug = characterCatalog.defaultCharacter.slug;
   const characterRoutes = useActiveCharacterRoutes();
+  const profileUrl = buildGlobalPageUrl(
+    ROUTES.profile,
+    characterRoutes.chat,
+  );
   const searchParams = useSearchParams();
   const state = useChatState();
   const chatDispatch = useChatDispatch();
@@ -234,6 +240,19 @@ export function ChatScreen() {
     });
   }
 
+  function handleOpenUserProfile(): void {
+    router.push(
+      resolveAuthenticatedNavigation({
+        loginStatus: authState.loginStatus,
+        targetUrl: profileUrl,
+      }),
+    );
+  }
+
+  function handleOpenCharacterPrivateRoom(): void {
+    router.push(characterRoutes.privateRoom);
+  }
+
   return (
     <MobileShell>
       <div
@@ -280,6 +299,8 @@ export function ChatScreen() {
             onUnlockVoiceMessage={handleUnlockVoiceMessage}
             onUnlockImageMessage={handleUnlockImageMessage}
             onOpenImage={handleOpenImage}
+            onUserAvatarClick={handleOpenUserProfile}
+            onCharacterAvatarClick={handleOpenCharacterPrivateRoom}
             onLoadMoreHistory={() => {
               chatDispatch({ type: "ChatLoadMoreHistoryRequested" });
             }}

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

@@ -31,7 +31,6 @@ describe("chat Tailwind components", () => {
       <MessageAvatar isFromAI={false} userAvatarUrl="/user-avatar.png" />,
     );
 
-    expect(aiHtml).toContain('aria-label="AI avatar"');
     expect(aiHtml).toContain("size-(--chat-avatar-size,43px)");
     expect(aiHtml).toContain("size-full object-cover");
     expect(aiHtml).toContain("%2Fimages%2Favatar%2Felio.png");
@@ -39,6 +38,28 @@ describe("chat Tailwind components", () => {
     expect(userHtml).toContain("%2Fuser-avatar.png");
   });
 
+  it("renders message avatar actions with explicit destinations", () => {
+    const aiHtml = renderWithCharacter(
+      <MessageAvatar isFromAI={true} onClick={() => undefined} />,
+    );
+    const userHtml = renderWithCharacter(
+      <MessageAvatar isFromAI={false} onClick={() => undefined} />,
+    );
+
+    expect(aiHtml).toContain('<button type="button"');
+    expect(aiHtml).toContain(
+      'data-analytics-key="chat.open_private_room_from_avatar"',
+    );
+    expect(aiHtml).toContain(
+      'aria-label="Open Elio Silvestri&#x27;s private room"',
+    );
+    expect(userHtml).toContain('<button type="button"');
+    expect(userHtml).toContain(
+      'data-analytics-key="chat.open_profile_from_avatar"',
+    );
+    expect(userHtml).toContain('aria-label="Open profile"');
+  });
+
   it("renders the active character avatar", () => {
     const maya = getCharacterBySlug("maya");
     expect(maya).not.toBeNull();
@@ -196,12 +217,12 @@ describe("chat Tailwind components", () => {
     expect(guestHtml).toContain('aria-label="Back to home"');
     expect(guestHtml).toContain('data-analytics-key="chat.back_to_home"');
     expect(guestHtml).toContain("px-(--chat-inline-padding,16px)");
-    expect(guestHtml).not.toContain('aria-label="Menu"');
+    expect(guestHtml).not.toContain('aria-label="Profile"');
     expect(memberHtml).toContain("Offer");
     expect(memberHtml).toContain('href="/characters/elio/splash"');
     expect(memberHtml).toContain('aria-label="Back to home"');
-    expect(memberHtml).toContain('aria-label="Menu"');
+    expect(memberHtml).toContain('aria-label="Profile"');
-    expect(memberHtml).toContain('data-analytics-key="chat.open_menu"');
+    expect(memberHtml).toContain('data-analytics-key="chat.open_profile"');
     expect(memberHtml).toContain('data-analytics-key="chat.back_to_home"');
     expect(memberHtml).toContain("px-(--chat-inline-padding,16px)");
     expect(memberHtml).not.toContain("px-(--spacing-md,12px)");
@@ -222,7 +243,7 @@ describe("chat Tailwind components", () => {
       memberWithHintHtml.indexOf(
         'data-analytics-key="chat.external_browser_hint"',
       ),
-    ).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Menu"'));
+    ).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Profile"'));
     expect(guestWithHintHtml).not.toContain(
       'data-analytics-key="chat.external_browser_hint"',
     );
@@ -239,7 +260,7 @@ describe("chat Tailwind components", () => {
     );
 
     expect(html).toContain('href="/characters/maya/splash"');
-    expect(html).not.toContain('aria-label="Menu"');
+    expect(html).not.toContain('aria-label="Profile"');
     expect(html).not.toContain(
       'data-analytics-key="chat.external_browser_hint"',
     );

src/app/chat/components/chat-area.tsx

@@ -59,6 +59,8 @@ export interface ChatAreaProps {
   onUnlockImageMessage?: ChatMessageAction;
   onOpenImage?: (displayMessageId: string) => void;
   onLoadMoreHistory?: () => void;
+  onUserAvatarClick?: () => void;
+  onCharacterAvatarClick?: () => void;
 }
 
 type ChatMessageAction = (
@@ -81,6 +83,8 @@ export function ChatArea({
   onUnlockImageMessage,
   onOpenImage,
   onLoadMoreHistory,
+  onUserAvatarClick,
+  onCharacterAvatarClick,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -251,6 +255,8 @@ export function ChatArea({
           onUnlockVoiceMessage,
           onUnlockImageMessage,
           onOpenImage,
+          onUserAvatarClick,
+          onCharacterAvatarClick,
         )}
 
         {isReplyingAI ? (
@@ -287,6 +293,8 @@ function renderMessagesWithDateHeaders(
   onUnlockVoiceMessage?: ChatMessageAction,
   onUnlockImageMessage?: ChatMessageAction,
   onOpenImage?: (displayMessageId: string) => void,
+  onUserAvatarClick?: () => void,
+  onCharacterAvatarClick?: () => void,
 ) {
   return buildChatRenderItems(messages, getMessageKey).map((item) =>
     item.type === "date" ? (
@@ -314,6 +322,8 @@ function renderMessagesWithDateHeaders(
         onUnlockVoiceMessage={onUnlockVoiceMessage}
         onUnlockImageMessage={onUnlockImageMessage}
         onOpenImage={onOpenImage}
+        onUserAvatarClick={onUserAvatarClick}
+        onCharacterAvatarClick={onCharacterAvatarClick}
       />
     ),
   );

src/app/chat/components/chat-header.tsx

@@ -2,11 +2,11 @@
 /**
  * ChatHeader 顶部栏
  *
- * 图标：lucide-react <Lock />（游客 banner）+ <Menu />（菜单按钮）
+ * 图标：lucide-react <Lock />（游客 banner）+ <UserRound />（Profile）
  *   tree-shakable，currentColor 继承父 color
  */
 import type { ReactNode } from "react";
-import { Lock, Menu } from "lucide-react";
+import { Lock, UserRound } from "lucide-react";
 
 import { BackButton } from "@/app/_components";
 import { useActiveCharacterRoutes } from "@/providers/character-provider";
@@ -74,17 +74,17 @@ export function ChatHeader({
 
             <button
               type="button"
-              data-analytics-key="chat.open_menu"
+              data-analytics-key="chat.open_profile"
-              data-analytics-label="Open chat menu"
+              data-analytics-label="Open profile"
               className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
               onClick={() =>
                 navigator.push(
-                  buildGlobalPageUrl(ROUTES.sidebar, characterRoutes.chat),
+                  buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat),
                 )
               }
-              aria-label="Menu"
+              aria-label="Profile"
             >
-              <Menu size={24} aria-hidden="true" />
+              <UserRound size={24} aria-hidden="true" />
             </button>
           </>
         ) : null}

src/app/chat/components/message-avatar.tsx

@@ -1,32 +1,61 @@
 "use client";
-import Image from "next/image";
 
-import { UserMessageAvatar } from "@/app/_components";
+import { CharacterAvatar, UserMessageAvatar } from "@/app/_components";
 import { useActiveCharacter } from "@/providers/character-provider";
 
 export interface MessageAvatarProps {
   isFromAI: boolean;
   userAvatarUrl?: string | null;
+  onClick?: () => void;
 }
 
 const AVATAR_CLASS_NAME =
-  "flex size-(--chat-avatar-size,43px) shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";
+  "size-(--chat-avatar-size,43px) ring-2 ring-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";
 
-export function MessageAvatar({ isFromAI, userAvatarUrl }: MessageAvatarProps) {
+export function MessageAvatar({
+  isFromAI,
+  userAvatarUrl,
+  onClick,
+}: MessageAvatarProps) {
   const character = useActiveCharacter();
 
   if (isFromAI) {
+    if (onClick) {
       return (
-      <div className={AVATAR_CLASS_NAME} aria-label="AI avatar">
+        <CharacterAvatar
-        <Image
           src={character.assets.avatar}
           alt={character.displayName}
-          width={43}
+          size="var(--chat-avatar-size, 43px)"
-          height={43}
+          imageSize={43}
           priority
-          className="size-full object-cover"
+          className={AVATAR_CLASS_NAME}
+          actionLabel={`Open ${character.displayName}'s private room`}
+          analyticsKey="chat.open_private_room_from_avatar"
+          onClick={onClick}
+        />
+      );
+    }
+
+    return (
+      <CharacterAvatar
+        src={character.assets.avatar}
+        alt={character.displayName}
+        size="var(--chat-avatar-size, 43px)"
+        imageSize={43}
+        priority
+        className={AVATAR_CLASS_NAME}
+      />
+    );
+  }
+
+  if (onClick) {
+    return (
+      <UserMessageAvatar
+        avatarUrl={userAvatarUrl}
+        actionLabel="Open profile"
+        analyticsKey="chat.open_profile_from_avatar"
+        onClick={onClick}
       />
-      </div>
     );
   }
 

src/app/chat/components/message-bubble.tsx

@@ -32,6 +32,8 @@ export interface MessageBubbleProps {
   onUnlockVoiceMessage?: ChatMessageAction;
   onUnlockImageMessage?: ChatMessageAction;
   onOpenImage?: (displayMessageId: string) => void;
+  onUserAvatarClick?: () => void;
+  onCharacterAvatarClick?: () => void;
 }
 
 type ChatMessageAction = (
@@ -57,6 +59,8 @@ export function MessageBubble({
   onUnlockVoiceMessage,
   onUnlockImageMessage,
   onOpenImage,
+  onUserAvatarClick,
+  onCharacterAvatarClick,
 }: MessageBubbleProps) {
   const avatarUrl = useUserSelector((state) => state.context.avatarUrl);
 
@@ -67,7 +71,10 @@ export function MessageBubble({
         data-chat-message-id={displayMessageId}
         aria-label="AI message"
       >
-        <MessageAvatar isFromAI={true} />
+        <MessageAvatar
+          isFromAI={true}
+          onClick={onCharacterAvatarClick}
+        />
         <div className={styles.bubbleInlineSpacer} aria-hidden="true" />
         <MessageContent
           characterId={characterId}
@@ -120,7 +127,11 @@ export function MessageBubble({
         onOpenImage={onOpenImage}
       />
       <div className={styles.bubbleInlineSpacer} aria-hidden="true" />
-      <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />
+      <MessageAvatar
+        isFromAI={false}
+        userAvatarUrl={avatarUrl}
+        onClick={onUserAvatarClick}
+      />
     </div>
   );
 }

src/app/coins-rules/__tests__/coins-rules-screen.test.tsx

@@ -22,14 +22,14 @@ vi.mock("@/stores/user/user-context", () => ({
 }));
 
 describe("CoinsRulesScreen", () => {
-  it("renders outside CharacterProvider and returns to global sidebar", () => {
+  it("renders outside CharacterProvider and returns to global profile", () => {
     const html = renderToStaticMarkup(
       <CoinsRulesScreen returnTo="/characters/maya/chat" />,
     );
 
     expect(html).toContain("Coin Usage Rules");
     expect(html).toContain(
-      'href="/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat"',
+      'href="/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat"',
     );
   });
 });

src/app/coins-rules/coins-rules-screen.tsx

@@ -118,9 +118,9 @@ export function CoinsRulesScreen({ returnTo }: CoinsRulesScreenProps) {
       <main className={styles.screen}>
         <header className={styles.header}>
           <BackButton
-            href={navigation.sidebarUrl}
+            href={navigation.profileUrl}
             variant="soft"
-            aria-label="Back to sidebar"
+            aria-label="Back to profile"
           />
 
           <div className={styles.hero}>

src/app/feedback/__tests__/feedback-screen.test.tsx

@@ -69,9 +69,9 @@ describe("FeedbackScreen", () => {
     ).toBe("feedback-content-hint");
     expect(
       container.querySelector<HTMLAnchorElement>(
-        '[data-analytics-key="feedback.back_to_sidebar"]',
+        '[data-analytics-key="feedback.back_to_profile"]',
       )?.getAttribute("href"),
-    ).toBe("/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat");
+    ).toBe("/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat");
   });
 
   it("submits valid text and renders the feedback id", async () => {
@@ -106,7 +106,7 @@ describe("FeedbackScreen", () => {
     });
     expect(container.textContent).toContain("feedback-123");
     expect(container.textContent).toContain("Thank you for helping us.");
-    expect(container.textContent).toContain("Back to Sidebar");
+    expect(container.textContent).toContain("Back to Profile");
   });
 });
 

src/app/feedback/feedback-screen.tsx

@@ -77,11 +77,11 @@ export function FeedbackScreen({ returnTo }: FeedbackScreenProps) {
             </div>
             <button
               type="button"
-              data-analytics-key="feedback.back_to_sidebar"
+              data-analytics-key="feedback.back_to_profile"
               className={styles.primaryButton}
-              onClick={() => navigator.replace(navigation.sidebarUrl)}
+              onClick={() => navigator.replace(navigation.profileUrl)}
             >
-              Back to Sidebar
+              Back to Profile
             </button>
           </section>
         </main>
@@ -102,10 +102,10 @@ export function FeedbackScreen({ returnTo }: FeedbackScreenProps) {
 
         <header className={styles.header}>
           <BackButton
-            href={navigation.sidebarUrl}
+            href={navigation.profileUrl}
             variant="soft"
-            ariaLabel="Back to sidebar"
+            ariaLabel="Back to profile"
-            analyticsKey="feedback.back_to_sidebar"
+            analyticsKey="feedback.back_to_profile"
           />
           <div className={styles.headingBlock}>
             <h1 className={styles.title}>Help us improve CozSweet</h1>

src/app/profile/__tests__/profile-screen.test.tsx

@@ -4,7 +4,7 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { SidebarScreen } from "../sidebar-screen";
+import { ProfileScreen } from "../profile-screen";
 
 const mocks = vi.hoisted(() => ({
   openAuth: vi.fn(),
@@ -59,11 +59,11 @@ vi.mock("../use-pwa-install-entry", () => ({
     installApp: vi.fn(),
   }),
 }));
-vi.mock("../use-sidebar-user-bootstrap", () => ({
+vi.mock("../use-profile-user-bootstrap", () => ({
-  useSidebarUserBootstrap: vi.fn(),
+  useProfileUserBootstrap: vi.fn(),
 }));
 
-describe("SidebarScreen", () => {
+describe("ProfileScreen", () => {
   let container: HTMLDivElement;
   let root: Root;
 
@@ -83,12 +83,12 @@ describe("SidebarScreen", () => {
 
   it("renders without CharacterProvider and preserves the source character", () => {
     act(() => {
-      root.render(<SidebarScreen returnTo="/characters/maya/chat" />);
+      root.render(<ProfileScreen returnTo="/characters/maya/chat" />);
     });
 
     expect(
       container.querySelector<HTMLAnchorElement>(
-        '[data-analytics-key="sidebar.back_to_chat"]',
+        '[data-analytics-key="profile.back_to_chat"]',
       )?.getAttribute("href"),
     ).toBe("/characters/maya/chat");
 
@@ -107,7 +107,7 @@ describe("SidebarScreen", () => {
       expect.objectContaining({
         type: "topup",
         sourceCharacterSlug: "maya",
-        returnTo: "sidebar",
+        returnTo: "profile",
       }),
     );
   });

src/app/profile/__tests__/profile-view-model.test.ts

@@ -3,10 +3,10 @@ import { describe, expect, it } from "vitest";
 import type { UserView } from "@/stores/user/user-view";
 
 import {
-  getSidebarViewModel,
+  getProfileViewModel,
-  getSidebarWalletView,
+  getProfileWalletView,
-  normalizeSidebarCount,
+  normalizeProfileCount,
-} from "../sidebar-view-model";
+} from "../profile-view-model";
 
 const baseUser: UserView = {
   id: "user-1",
@@ -20,9 +20,9 @@ const baseUser: UserView = {
   isVip: false,
 };
 
-describe("getSidebarViewModel", () => {
+describe("getProfileViewModel", () => {
   it("derives guest state for logged-out users", () => {
-    const view = getSidebarViewModel({
+    const view = getProfileViewModel({
       loginStatus: "notLoggedIn",
       user: {
         currentUser: null,
@@ -37,7 +37,7 @@ describe("getSidebarViewModel", () => {
   });
 
   it("derives member state and shows VIP activation for non-VIP users", () => {
-    const view = getSidebarViewModel({
+    const view = getProfileViewModel({
       loginStatus: "email",
       user: {
         currentUser: baseUser,
@@ -54,7 +54,7 @@ describe("getSidebarViewModel", () => {
   });
 
   it("derives VIP state and hides VIP activation for VIP users", () => {
-    const view = getSidebarViewModel({
+    const view = getProfileViewModel({
       loginStatus: "email",
       user: {
         currentUser: { ...baseUser, isVip: true },
@@ -67,8 +67,8 @@ describe("getSidebarViewModel", () => {
     expect(view.canActivateVip).toBe(false);
   });
 
-  it("uses fallback name and marks logged-in users without profile as initializing", () => {
+  it("keeps Guest users in the signed-out profile state", () => {
-    const view = getSidebarViewModel({
+    const view = getProfileViewModel({
       loginStatus: "guest",
       user: {
         currentUser: null,
@@ -77,15 +77,15 @@ describe("getSidebarViewModel", () => {
       },
     });
 
-    expect(view.state).toBe("member");
+    expect(view.state).toBe("guest");
     expect(view.name).toBe("User name");
-    expect(view.isInitializingUser).toBe(true);
+    expect(view.isInitializingUser).toBe(false);
   });
 });
 
-describe("getSidebarWalletView", () => {
+describe("getProfileWalletView", () => {
   it("normalizes missing, negative, and fractional wallet values", () => {
-    const view = getSidebarWalletView({
+    const view = getProfileWalletView({
       currentUser: {
         ...baseUser,
         dailyFreeChatLimit: -1,
@@ -107,7 +107,7 @@ describe("getSidebarWalletView", () => {
   });
 
   it("normalizes undefined and null counts to zero", () => {
-    expect(normalizeSidebarCount(undefined)).toBe(0);
+    expect(normalizeProfileCount(undefined)).toBe(0);
-    expect(normalizeSidebarCount(null)).toBe(0);
+    expect(normalizeProfileCount(null)).toBe(0);
   });
 });

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

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest";
 
 import { UserHeader } from "../user-header";
 
-describe("sidebar Tailwind components", () => {
+describe("profile Tailwind components", () => {
   it("renders guest, member, and VIP header states", () => {
     const guestHtml = renderToStaticMarkup(
       <UserHeader

src/app/profile/components/index.ts

@@ -2,5 +2,5 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from "./sidebar-wallet-card";
+export * from "./profile-wallet-card";
 export * from "./user-header";

src/app/profile/components/profile-wallet-card.tsx

@@ -2,9 +2,9 @@
 
 import { FaCoins } from "react-icons/fa6";
 
-import styles from "./sidebar-wallet-card.module.css";
+import styles from "./profile-wallet-card.module.css";
 
-export interface SidebarWalletCardProps {
+export interface ProfileWalletCardProps {
   creditBalance: number;
   dailyFreeChatLimit: number;
   dailyFreeChatRemaining: number;
@@ -18,7 +18,7 @@ export interface SidebarWalletCardProps {
 const formatCoins = (value: number): string =>
   new Intl.NumberFormat("en-US").format(Math.max(0, Math.trunc(value)));
 
-export function SidebarWalletCard({
+export function ProfileWalletCard({
   creditBalance,
   dailyFreeChatLimit,
   dailyFreeChatRemaining,
@@ -27,7 +27,7 @@ export function SidebarWalletCard({
   onActivateVip,
   onTopUp,
   onRulesClick,
-}: SidebarWalletCardProps) {
+}: ProfileWalletCardProps) {
   return (
     <section className={styles.card} aria-label="My wallet">
       <div className={styles.leftColumn}>
@@ -45,7 +45,7 @@ export function SidebarWalletCard({
 
         <button
           type="button"
-          data-analytics-key="sidebar.coins_rules"
+          data-analytics-key="profile.coins_rules"
           data-analytics-label="Open coin usage rules"
           className={styles.rulesButton}
           onClick={onRulesClick}
@@ -58,7 +58,7 @@ export function SidebarWalletCard({
         {onActivateVip ? (
           <button
             type="button"
-            data-analytics-key="sidebar.activate_vip"
+            data-analytics-key="profile.activate_vip"
             data-analytics-label="Activate VIP"
             className={styles.activateButton}
             onClick={onActivateVip}
@@ -68,7 +68,7 @@ export function SidebarWalletCard({
         ) : null}
         <button
           type="button"
-          data-analytics-key="sidebar.topup"
+          data-analytics-key="profile.topup"
           data-analytics-label="Top up credits"
           className={styles.topUpButton}
           onClick={onTopUp}

src/app/profile/components/user-header.tsx

@@ -3,11 +3,11 @@
 import Image from "next/image";
 
 import { UserMessageAvatar } from "@/app/_components";
-import type { SidebarUserState } from "@/app/sidebar/sidebar-view-model";
+import type { ProfileUserState } from "@/app/profile/profile-view-model";
 
 export interface UserHeaderProps {
   /** 派生状态：未登录 / 已登录未 VIP / 已登录且 VIP */
-  state: SidebarUserState;
+  state: ProfileUserState;
   /** 用户名（无 currentUser 时使用 fallback "User name"） */
   name: string;
   /** null → 默认头像 SVG */
@@ -36,8 +36,8 @@ export function UserHeader({
   if (isLoading) {
     return (
       <div className="flex w-full items-center gap-(--spacing-md,12px)" aria-hidden="true">
-        <div className="flex size-(--sidebar-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white" />
+        <div className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white" />
-        <div className="flex min-w-0 flex-auto flex-col gap-(--sidebar-card-gap-y,4px)">
+        <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
           <span className="block h-[clamp(16px,3.333vw,18px)] w-[60%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
           <span className="block h-[clamp(12px,2.593vw,14px)] w-[80%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
           <span className="block h-[clamp(12px,2.593vw,14px)] w-[40%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
@@ -50,11 +50,11 @@ export function UserHeader({
     <div className="flex w-full items-center gap-(--spacing-md,12px)">
       <UserMessageAvatar
         avatarUrl={avatarUrl}
-        className="flex size-(--sidebar-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
+        className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
-        size="var(--sidebar-avatar-size, 56px)"
+        size="var(--profile-avatar-size, 56px)"
       />
 
-      <div className="flex min-w-0 flex-auto flex-col gap-(--sidebar-card-gap-y,4px)">
+      <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
         <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-(length:--font-responsive-md,16px) font-semibold leading-[1.2] text-black">
           {name}
         </p>
@@ -66,7 +66,7 @@ export function UserHeader({
         {state === "vip" && (
           <span className="inline-flex self-start items-center gap-(--spacing-xs,4px) rounded-full bg-(--color-pill-bg,rgba(248,77,150,0.10)) px-[clamp(7px,1.667vw,9px)] py-[clamp(3px,0.741vw,4px)] text-(length:--font-size-xs,10px) font-semibold leading-none text-accent">
             <Image
-              src="/images/sidebar/ic_user_vip.png"
+              src="/images/profile/ic_user_vip.png"
               alt=""
               width={39}
               height={36}
@@ -80,7 +80,7 @@ export function UserHeader({
       {state === "guest" && (
         <button
           type="button"
-          data-analytics-key="sidebar.login"
+          data-analytics-key="profile.login"
           data-analytics-label="Open login"
           className="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(90deg,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] px-(--spacing-lg,16px) py-[clamp(5px,1.111vw,6px)] text-(length:clamp(12px,2.593vw,14px)) font-semibold text-(--color-text-primary,#ffffff) hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
           onClick={onLoginClick}

src/app/profile/page.tsx

@@ -1,12 +1,12 @@
 import type { RouteSearchParams } from "@/router/routes";
 
-import { SidebarScreen } from "./sidebar-screen";
+import { ProfileScreen } from "./profile-screen";
 
-export default async function SidebarPage({
+export default async function ProfilePage({
   searchParams,
 }: {
   searchParams: Promise<RouteSearchParams>;
 }) {
   const query = await searchParams;
-  return <SidebarScreen returnTo={query.returnTo} />;
+  return <ProfileScreen returnTo={query.returnTo} />;
 }

src/app/profile/profile-screen.tsx

@@ -9,22 +9,23 @@ import {
   resolveGlobalRouteContext,
   type GlobalReturnToValue,
 } from "@/router/global-route-context";
+import { setPendingLogoutNavigation } from "@/router/logout-navigation";
 import { useGlobalAppNavigator } from "@/router/use-global-app-navigator";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
-import { SidebarWalletCard, UserHeader } from "./components";
+import { ProfileWalletCard, UserHeader } from "./components";
-import { getSidebarViewModel } from "./sidebar-view-model";
+import { getProfileViewModel } from "./profile-view-model";
 import { usePwaInstallEntry } from "./use-pwa-install-entry";
-import { useSidebarUserBootstrap } from "./use-sidebar-user-bootstrap";
+import { useProfileUserBootstrap } from "./use-profile-user-bootstrap";
 
-import styles from "./components/sidebar-screen.module.css";
+import styles from "./components/profile-screen.module.css";
 
-export interface SidebarScreenProps {
+export interface ProfileScreenProps {
   returnTo?: GlobalReturnToValue;
 }
 
-export function SidebarScreen({ returnTo }: SidebarScreenProps) {
+export function ProfileScreen({ returnTo }: ProfileScreenProps) {
   const navigator = useGlobalAppNavigator();
   const navigation = resolveGlobalRouteContext(returnTo);
   const user = useUserState();
@@ -33,16 +34,17 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
   const authDispatch = useAuthDispatch();
   const pwaInstallEntry = usePwaInstallEntry();
 
-  useSidebarUserBootstrap({ auth, userDispatch });
+  useProfileUserBootstrap({ auth, userDispatch });
 
   const handleLogoutClick = () => {
+    setPendingLogoutNavigation(navigation.splashUrl);
     userDispatch({ type: "UserClearLocal" });
     authDispatch({ type: "AuthLogoutSubmitted" });
     void signOut({ redirect: false });
     navigator.replace(navigation.splashUrl, { scroll: false });
   };
 
-  const view = getSidebarViewModel({
+  const view = getProfileViewModel({
     loginStatus: auth.loginStatus,
     user,
   });
@@ -57,7 +59,7 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
           <BackButton
             href={navigation.chatUrl}
             variant="soft"
-            analyticsKey="sidebar.back_to_chat"
+            analyticsKey="profile.back_to_chat"
           />
         </div>
 
@@ -67,12 +69,12 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
             name={view.name}
             avatarUrl={view.avatarUrl}
             isLoading={view.isInitializingUser}
-            onLoginClick={() => navigator.openAuth(navigation.sidebarUrl)}
+            onLoginClick={() => navigator.openAuth(navigation.profileUrl)}
           />
         </section>
 
         <section className={`${styles.cardSlot} ${styles.revealTwo}`}>
-          <SidebarWalletCard
+          <ProfileWalletCard
             creditBalance={view.wallet.creditBalance}
             dailyFreeChatLimit={view.wallet.dailyFreeChatLimit}
             dailyFreeChatRemaining={view.wallet.dailyFreeChatRemaining}
@@ -84,9 +86,9 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
                     navigator.openSubscription({
                       type: "vip",
                       sourceCharacterSlug: navigation.characterSlug,
-                      returnTo: "sidebar",
+                      returnTo: "profile",
                       analytics: {
-                        entryPoint: "sidebar",
+                        entryPoint: "profile",
                         triggerReason: "vip_cta",
                       },
                     })
@@ -96,10 +98,10 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
               navigator.openSubscription({
                 type: "topup",
                 sourceCharacterSlug: navigation.characterSlug,
-                returnTo: "sidebar",
+                returnTo: "profile",
                 analytics: {
-                  entryPoint: "sidebar",
+                  entryPoint: "profile",
-                  triggerReason: "sidebar_recharge",
+                  triggerReason: "profile_recharge",
                 },
               })
             }
@@ -113,7 +115,7 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
             <div className={styles.settingsActions}>
               <button
                 type="button"
-                data-analytics-key="sidebar.open_feedback"
+                data-analytics-key="profile.open_feedback"
                 data-analytics-label="Open feedback"
                 className={`${styles.logoutCard} ${styles.feedbackCard}`}
                 onClick={() => navigator.push(navigation.feedbackUrl)}
@@ -155,7 +157,7 @@ export function SidebarScreen({ returnTo }: SidebarScreenProps) {
 
               <button
                 type="button"
-                data-analytics-key="sidebar.logout"
+                data-analytics-key="profile.logout"
                 data-analytics-label="Log out"
                 className={styles.logoutCard}
                 onClick={handleLogoutClick}

src/app/profile/profile-view-model.ts

@@ -1,17 +1,17 @@
 import type { LoginStatus } from "@/data/schemas/auth";
 import type { UserView } from "@/stores/user/user-view";
 
-export type SidebarUserState = "guest" | "member" | "vip";
+export type ProfileUserState = "guest" | "member" | "vip";
 
-export const SIDEBAR_FALLBACK_USERNAME = "User name";
+export const PROFILE_FALLBACK_USERNAME = "User name";
 
-export interface SidebarUserInput {
+export interface ProfileUserInput {
   currentUser: UserView | null;
   avatarUrl: string | null;
   creditBalance?: number | null;
 }
 
-export interface SidebarWalletView {
+export interface ProfileWalletView {
   creditBalance: number;
   dailyFreeChatLimit: number;
   dailyFreeChatRemaining: number;
@@ -19,65 +19,67 @@ export interface SidebarWalletView {
   dailyFreePrivateRemaining: number;
 }
 
-export interface SidebarViewModel {
+export interface ProfileViewModel {
-  state: SidebarUserState;
+  state: ProfileUserState;
   name: string;
   avatarUrl: string | null;
   isInitializingUser: boolean;
-  wallet: SidebarWalletView;
+  wallet: ProfileWalletView;
   canActivateVip: boolean;
   canShowSettings: boolean;
 }
 
-export function getSidebarViewModel({
+export function getProfileViewModel({
   loginStatus,
   user,
 }: {
   loginStatus: LoginStatus;
-  user: SidebarUserInput;
+  user: ProfileUserInput;
-}): SidebarViewModel {
+}): ProfileViewModel {
-  const state = getSidebarUserState(loginStatus, user.currentUser);
+  const state = getProfileUserState(loginStatus, user.currentUser);
 
   return {
     state,
-    name: user.currentUser?.username ?? SIDEBAR_FALLBACK_USERNAME,
+    name: user.currentUser?.username ?? PROFILE_FALLBACK_USERNAME,
     avatarUrl: user.avatarUrl,
     isInitializingUser: state !== "guest" && user.currentUser == null,
-    wallet: getSidebarWalletView(user),
+    wallet: getProfileWalletView(user),
     canActivateVip: state !== "vip",
     canShowSettings: state !== "guest",
   };
 }
 
-export function getSidebarUserState(
+export function getProfileUserState(
   loginStatus: LoginStatus,
   currentUser: UserView | null,
-): SidebarUserState {
+): ProfileUserState {
-  if (loginStatus === "notLoggedIn") return "guest";
+  if (loginStatus === "notLoggedIn" || loginStatus === "guest") {
+    return "guest";
+  }
   return currentUser?.isVip === true ? "vip" : "member";
 }
 
-export function getSidebarWalletView(
+export function getProfileWalletView(
-  user: SidebarUserInput,
+  user: ProfileUserInput,
-): SidebarWalletView {
+): ProfileWalletView {
   const currentUser = user.currentUser;
 
   return {
-    creditBalance: normalizeSidebarCount(user.creditBalance),
+    creditBalance: normalizeProfileCount(user.creditBalance),
-    dailyFreeChatLimit: normalizeSidebarCount(currentUser?.dailyFreeChatLimit),
+    dailyFreeChatLimit: normalizeProfileCount(currentUser?.dailyFreeChatLimit),
-    dailyFreeChatRemaining: normalizeSidebarCount(
+    dailyFreeChatRemaining: normalizeProfileCount(
       currentUser?.dailyFreeChatRemaining,
     ),
-    dailyFreePrivateLimit: normalizeSidebarCount(
+    dailyFreePrivateLimit: normalizeProfileCount(
       currentUser?.dailyFreePrivateLimit,
     ),
-    dailyFreePrivateRemaining: normalizeSidebarCount(
+    dailyFreePrivateRemaining: normalizeProfileCount(
       currentUser?.dailyFreePrivateRemaining,
     ),
   };
 }
 
-export function normalizeSidebarCount(value: number | null | undefined): number {
+export function normalizeProfileCount(value: number | null | undefined): number {
   if (typeof value !== "number" || !Number.isFinite(value)) return 0;
   return Math.max(0, Math.trunc(value));
 }

src/app/profile/use-profile-user-bootstrap.ts

@@ -4,17 +4,17 @@ import { type Dispatch, useEffect } from "react";
 
 import type { LoginStatus } from "@/data/schemas/auth";
 
-interface SidebarAuthBootstrapState {
+interface ProfileAuthBootstrapState {
   hasInitialized: boolean;
   isLoading: boolean;
   loginStatus: LoginStatus;
 }
 
-export function useSidebarUserBootstrap({
+export function useProfileUserBootstrap({
   auth,
   userDispatch,
 }: {
-  auth: SidebarAuthBootstrapState;
+  auth: ProfileAuthBootstrapState;
   userDispatch: Dispatch<{ type: "UserFetch" }>;
 }) {
   useEffect(() => {

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

@@ -22,7 +22,7 @@ describe("splash Tailwind components", () => {
     );
 
     expect(html).toContain("absolute");
-    expect(html).toContain("bg-sidebar-background");
+    expect(html).toContain("bg-splash-background");
     expect(html).toContain("object-cover");
     expect(html).toContain("%2Fimages%2Fcover%2Fmaya.png");
   });

src/app/splash/components/splash-background.tsx

@@ -16,7 +16,7 @@ export function SplashBackground({
   src: string;
 }) {
   return (
-    <div className="absolute inset-0 z-0 overflow-hidden bg-sidebar-background">
+    <div className="absolute inset-0 z-0 overflow-hidden bg-splash-background">
       <Image
         src={src}
         alt=""

src/app/splash/splash-screen.tsx

@@ -50,7 +50,7 @@ export function SplashScreen() {
   }, []);
 
   return (
-    <MobileShell background="var(--color-sidebar-background)">
+    <MobileShell background="var(--color-splash-background)">
       <div className={styles.wrapper}>
         <SplashBackground src={character.assets.cover} />
         {/* 渐变叠加层：accent → transparent (bottom-left → center-right) */}

src/app/subscription/__tests__/subscription-page.test.tsx

@@ -19,7 +19,7 @@ describe("SubscriptionPage", () => {
     const page = await SubscriptionPage({
       searchParams: Promise.resolve({
         character: "maya",
-        returnTo: "sidebar",
+        returnTo: "profile",
         type: "topup",
       }),
     });
@@ -27,7 +27,7 @@ describe("SubscriptionPage", () => {
     expect(renderToStaticMarkup(page)).toContain("Global subscription");
     expect(mocks.screenProps).toHaveBeenCalledWith(
       expect.objectContaining({
-        returnTo: "sidebar",
+        returnTo: "profile",
         sourceCharacterSlug: "maya",
         subscriptionType: "topup",
       }),

src/data/storage/payment/pending_payment_order_storage.ts

@@ -14,7 +14,7 @@ const PendingPaymentOrderSchema = z
     subscriptionType: z.enum(["vip", "topup", "tip"]),
     giftCategory: z.string().min(1).nullable().default(null),
     giftPlanId: z.string().min(1).nullable().default(null),
-    returnTo: z.enum(["chat", "private-room", "sidebar"]).optional(),
+    returnTo: z.enum(["chat", "private-room", "profile"]).optional(),
     characterSlug: z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).optional(),
     createdAt: z.number(),
   })

src/lib/analytics/__tests__/payment_analytics_context.test.ts

@@ -30,10 +30,10 @@ describe("payment analytics context", () => {
 
     expect(
       parsePaymentAnalyticsContext({
-        entryPoint: "sidebar",
+        entryPoint: "profile",
         triggerReason: null,
         subscriptionType: "vip",
       }),
-    ).toEqual({ entryPoint: "sidebar", triggerReason: "vip_cta" });
+    ).toEqual({ entryPoint: "profile", triggerReason: "vip_cta" });
   });
 });

src/lib/analytics/payment_analytics_context.ts

@@ -5,7 +5,7 @@ export type PaymentAnalyticsTriggerReason =
   | "daily_chat_limit"
   | "private_topic_limit"
   | "insufficient_credits"
-  | "sidebar_recharge"
+  | "profile_recharge"
   | "vip_cta"
   | "ad_landing"
   | "manual_recharge"
@@ -16,7 +16,7 @@ export type PaymentAnalyticsEntryPoint =
   | "chat_unlock"
   | "private_album_unlock"
   | "private_room"
-  | "sidebar"
+  | "profile"
   | "chat_offer_banner"
   | "subscription_direct"
   | "tip_page"
@@ -33,7 +33,7 @@ const ENTRY_POINTS = new Set<PaymentAnalyticsEntryPoint>([
   "chat_unlock",
   "private_album_unlock",
   "private_room",
-  "sidebar",
+  "profile",
   "chat_offer_banner",
   "subscription_direct",
   "tip_page",
@@ -45,7 +45,7 @@ const TRIGGER_REASONS = new Set<PaymentAnalyticsTriggerReason>([
   "daily_chat_limit",
   "private_topic_limit",
   "insufficient_credits",
-  "sidebar_recharge",
+  "profile_recharge",
   "vip_cta",
   "ad_landing",
   "manual_recharge",

src/lib/navigation/__tests__/external_entry.test.ts

@@ -29,7 +29,7 @@ describe("external entry navigation", () => {
       ROUTES.chat,
     );
     expect(resolveExternalEntryTarget({ target: "/tip" })).toBe(ROUTES.chat);
-    expect(resolveExternalEntryTarget({ target: "sidebar" })).toBe(ROUTES.chat);
+    expect(resolveExternalEntryTarget({ target: "profile" })).toBe(ROUTES.chat);
   });
 
   it("routes every tip entry to the tier selection page", () => {

src/lib/navigation/__tests__/subscription_exit.test.ts

@@ -60,30 +60,30 @@ describe("subscription exit helpers", () => {
     );
   });
 
-  it("falls back to sidebar by default", async () => {
+  it("falls back to profile by default", async () => {
     consumePendingChatImageReturnMock.mockResolvedValue(null);
     peekPendingChatUnlockMock.mockResolvedValue(null);
 
-    expect(getSubscriptionFallbackExitUrl(null)).toBe(ROUTES.sidebar);
+    expect(getSubscriptionFallbackExitUrl(null)).toBe(ROUTES.profile);
     await expect(consumeSubscriptionExitUrl(null)).resolves.toBe(
-      ROUTES.sidebar,
+      ROUTES.profile,
     );
   });
 
-  it("returns to global sidebar with the source character", async () => {
+  it("returns to global profile with the source character", async () => {
     const expectedUrl = buildGlobalPageUrl(
-      ROUTES.sidebar,
+      ROUTES.profile,
       getCharacterRoutes("maya").chat,
     );
 
-    expect(getSubscriptionFallbackExitUrl("sidebar", "maya")).toBe(
+    expect(getSubscriptionFallbackExitUrl("profile", "maya")).toBe(
       expectedUrl,
     );
     await expect(
-      consumeSubscriptionExitUrl("sidebar", "maya"),
+      consumeSubscriptionExitUrl("profile", "maya"),
     ).resolves.toBe(expectedUrl);
     await expect(
-      resolveSubscriptionSuccessExitUrl("sidebar", "maya"),
+      resolveSubscriptionSuccessExitUrl("profile", "maya"),
     ).resolves.toBe(expectedUrl);
     expect(consumePendingChatImageReturnMock).not.toHaveBeenCalled();
     expect(peekPendingChatUnlockMock).not.toHaveBeenCalled();

src/lib/navigation/subscription_exit.ts

@@ -48,10 +48,10 @@ export function getSubscriptionFallbackExitUrl(
   const routes = getCharacterRoutes(characterSlug);
   if (returnTo === "chat") return routes.chat;
   if (returnTo === "private-room") return routes.privateRoom;
-  if (returnTo === "sidebar") {
+  if (returnTo === "profile") {
-    return buildGlobalPageUrl(ROUTES.sidebar, routes.chat);
+    return buildGlobalPageUrl(ROUTES.profile, routes.chat);
   }
-  return ROUTES.sidebar;
+  return ROUTES.profile;
 }
 
 export async function consumeSubscriptionExitUrl(
@@ -61,7 +61,7 @@ export async function consumeSubscriptionExitUrl(
   if (returnTo === "private-room") {
     return getCharacterRoutes(characterSlug).privateRoom;
   }
-  if (returnTo === "sidebar") {
+  if (returnTo === "profile") {
     return getSubscriptionFallbackExitUrl(returnTo, characterSlug);
   }
 
@@ -78,7 +78,7 @@ export async function resolveSubscriptionSuccessExitUrl(
   if (returnTo === "private-room") {
     return getCharacterRoutes(characterSlug).privateRoom;
   }
-  if (returnTo === "sidebar") {
+  if (returnTo === "profile") {
     return getSubscriptionFallbackExitUrl(returnTo, characterSlug);
   }
 

src/lib/payment/__tests__/payment_search_params.test.ts

@@ -40,7 +40,7 @@ describe("payment search params", () => {
   it("accepts only supported subscription return targets", () => {
     expect(parseSubscriptionReturnTo("chat")).toBe("chat");
     expect(parseSubscriptionReturnTo("private-room")).toBe("private-room");
-    expect(parseSubscriptionReturnTo("sidebar")).toBe("sidebar");
+    expect(parseSubscriptionReturnTo("profile")).toBe("profile");
     expect(parseSubscriptionReturnTo(["private-room", "chat"])).toBe(
       "private-room",
     );

src/lib/payment/__tests__/pending_payment_order.test.ts

@@ -54,12 +54,12 @@ describe("pending payment order helpers", () => {
     await clearPendingPaymentOrder();
   });
 
-  it("stores and rebuilds global sidebar returns", async () => {
+  it("stores and rebuilds global profile returns", async () => {
     await clearPendingPaymentOrder();
 
     const saveResult = await savePendingEzpayOrder({
-      orderId: "order-sidebar",
+      orderId: "order-profile",
-      returnTo: "sidebar",
+      returnTo: "profile",
       subscriptionType: "topup",
       characterSlug: "maya",
       createdAt: 1,
@@ -70,20 +70,20 @@ describe("pending payment order helpers", () => {
     expect(storedResult).toMatchObject({
       success: true,
       data: {
-        orderId: "order-sidebar",
+        orderId: "order-profile",
-        returnTo: "sidebar",
+        returnTo: "profile",
         characterSlug: "maya",
       },
     });
     expect(
       buildPendingPaymentSubscriptionUrl({
         payChannel: "ezpay",
-        returnTo: "sidebar",
+        returnTo: "profile",
         subscriptionType: "topup",
         characterSlug: "maya",
       }),
     ).toBe(
-      "/subscription?type=topup&payChannel=ezpay&paymentReturn=1&returnTo=sidebar&character=maya",
+      "/subscription?type=topup&payChannel=ezpay&paymentReturn=1&returnTo=profile&character=maya",
     );
     await clearPendingPaymentOrder();
   });

src/lib/payment/payment_search_params.ts

@@ -29,7 +29,7 @@ export function parseSubscriptionReturnTo(
   if (
     returnTo === "chat" ||
     returnTo === "private-room" ||
-    returnTo === "sidebar"
+    returnTo === "profile"
   ) {
     return returnTo;
   }

src/router/__tests__/global-route-context.test.ts

@@ -16,8 +16,8 @@ describe("global route context", () => {
       chatUrl: "/characters/maya/chat",
       splashUrl: "/characters/maya/splash",
     });
-    expect(context.sidebarUrl).toBe(
+    expect(context.profileUrl).toBe(
-      "/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat",
+      "/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat",
     );
     expect(context.feedbackUrl).toBe(
       "/feedback?returnTo=%2Fcharacters%2Fmaya%2Fchat",
@@ -52,8 +52,8 @@ describe("global route context", () => {
   });
 
   it("sanitizes return targets when building a global page url", () => {
-    expect(buildGlobalPageUrl(ROUTES.sidebar, "https://example.com")).toBe(
+    expect(buildGlobalPageUrl(ROUTES.profile, "https://example.com")).toBe(
-      "/sidebar?returnTo=%2Fcharacters%2Felio%2Fchat",
+      "/profile?returnTo=%2Fcharacters%2Felio%2Fchat",
     );
   });
 });

src/router/__tests__/legacy-global-route-redirects.test.ts

@@ -5,11 +5,6 @@ import { LEGACY_GLOBAL_ROUTE_REDIRECTS } from "../legacy-global-route-redirects"
 describe("legacy global route redirects", () => {
   it("redirects character-scoped global pages without permanent caching", () => {
     expect(LEGACY_GLOBAL_ROUTE_REDIRECTS).toEqual([
-      {
-        source: "/characters/:characterSlug/sidebar",
-        destination: "/sidebar?returnTo=/characters/:characterSlug/chat",
-        permanent: false,
-      },
       {
         source: "/characters/:characterSlug/feedback",
         destination: "/feedback?returnTo=/characters/:characterSlug/chat",

src/router/__tests__/logout-navigation.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  consumePendingLogoutNavigation,
+  setPendingLogoutNavigation,
+} from "../logout-navigation";
+
+describe("logout navigation", () => {
+  it("consumes the pending destination only once", () => {
+    setPendingLogoutNavigation("/characters/maya/splash");
+
+    expect(consumePendingLogoutNavigation()).toBe(
+      "/characters/maya/splash",
+    );
+    expect(consumePendingLogoutNavigation()).toBeNull();
+  });
+
+  it("keeps only the latest pending destination", () => {
+    setPendingLogoutNavigation("/characters/elio/splash");
+    setPendingLogoutNavigation("/characters/nayeli/splash");
+
+    expect(consumePendingLogoutNavigation()).toBe(
+      "/characters/nayeli/splash",
+    );
+  });
+});

src/router/__tests__/navigation-resolver.test.ts

@@ -75,14 +75,22 @@ describe("navigation resolver", () => {
     ).toBeNull();
   });
 
-  it("redirects not logged in session routes except chat to splash", () => {
+  it.each(["notLoggedIn", "guest"] as const)(
+    "redirects %s users from profile to auth with the return context",
+    (loginStatus) => {
       expect(
         resolveRouteGuardRedirect({
-        loginStatus: "notLoggedIn",
+          loginStatus,
-        pathname: ROUTES.sidebar,
+          pathname: ROUTES.profile,
+          searchParams: "returnTo=%2Fcharacters%2Fmaya%2Fchat",
         }),
-    ).toBe(ROUTES.splash);
+      ).toBe(
-  });
+        ROUTE_BUILDERS.authWithRedirect(
+          "/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat",
+        ),
+      );
+    },
+  );
 
   it("redirects non-real users on subscription routes to auth", () => {
     expect(

src/router/__tests__/route-meta.test.ts

@@ -11,7 +11,7 @@ describe("route meta", () => {
     expect(getRouteAccess(ROUTES.privateRoom)).toBe("guestEntry");
     expect(getRouteAccess(ROUTES.tip)).toBe("public");
     expect(getRouteAccess(ROUTES.externalEntry)).toBe("public");
-    expect(getRouteAccess(ROUTES.sidebar)).toBe("session");
+    expect(getRouteAccess(ROUTES.profile)).toBe("realUser");
     expect(getRouteAccess(ROUTES.feedback)).toBe("session");
     expect(getRouteAccess(ROUTES.subscription)).toBe("realUser");
     expect(getRouteAccess(ROUTES.coinsRules)).toBe("public");
@@ -36,7 +36,7 @@ describe("route meta", () => {
   });
 
   it("does not classify removed character-scoped global pages", () => {
-    expect(getRouteAccess("/characters/maya/sidebar")).toBe("public");
+    expect(getRouteAccess("/characters/maya/profile")).toBe("public");
     expect(getRouteAccess("/characters/maya/feedback")).toBe("public");
     expect(getRouteAccess("/characters/maya/coins-rules")).toBe("public");
   });

src/router/app-navigation-guard.tsx

@@ -9,6 +9,7 @@ import {
   useAuthSelector,
 } from "@/stores/auth/auth-context";
 
+import { consumePendingLogoutNavigation } from "./logout-navigation";
 import { resolveRouteGuardRedirect } from "./navigation-resolver";
 
 export function AppNavigationGuard() {
@@ -26,6 +27,12 @@ export function AppNavigationGuard() {
   useEffect(() => {
     if (!authState.hasInitialized || authState.isLoading) return;
 
+    const logoutRedirect = consumePendingLogoutNavigation();
+    if (logoutRedirect) {
+      router.replace(logoutRedirect);
+      return;
+    }
+
     const redirectTo = resolveRouteGuardRedirect({
       loginStatus: authState.loginStatus,
       pathname,

src/router/global-route-context.ts

@@ -9,7 +9,7 @@ import { getCharacterRoutes, ROUTES } from "./routes";
 export const GLOBAL_RETURN_TO_PARAM = "returnTo";
 
 export type GlobalPageRoute =
-  | typeof ROUTES.sidebar
+  | typeof ROUTES.profile
   | typeof ROUTES.feedback
   | typeof ROUTES.coinsRules;
 
@@ -17,7 +17,7 @@ export interface GlobalRouteContext {
   readonly characterSlug: CharacterProfile["slug"];
   readonly chatUrl: string;
   readonly splashUrl: string;
-  readonly sidebarUrl: string;
+  readonly profileUrl: string;
   readonly feedbackUrl: string;
   readonly coinsRulesUrl: string;
 }
@@ -39,7 +39,7 @@ export function resolveGlobalRouteContext(
     characterSlug: character.slug,
     chatUrl,
     splashUrl: characterRoutes.splash,
-    sidebarUrl: buildGlobalPageUrl(ROUTES.sidebar, chatUrl),
+    profileUrl: buildGlobalPageUrl(ROUTES.profile, chatUrl),
     feedbackUrl: buildGlobalPageUrl(ROUTES.feedback, chatUrl),
     coinsRulesUrl: buildGlobalPageUrl(ROUTES.coinsRules, chatUrl),
   });

src/router/legacy-global-route-redirects.ts

@@ -6,11 +6,6 @@ export interface LegacyGlobalRouteRedirect {
 
 export const LEGACY_GLOBAL_ROUTE_REDIRECTS: readonly LegacyGlobalRouteRedirect[] =
   Object.freeze([
-    {
-      source: "/characters/:characterSlug/sidebar",
-      destination: "/sidebar?returnTo=/characters/:characterSlug/chat",
-      permanent: false,
-    },
     {
       source: "/characters/:characterSlug/feedback",
       destination: "/feedback?returnTo=/characters/:characterSlug/chat",

src/router/logout-navigation.ts

@@ -0,0 +1,11 @@
+let pendingLogoutUrl: string | null = null;
+
+export function setPendingLogoutNavigation(url: string): void {
+  pendingLogoutUrl = url;
+}
+
+export function consumePendingLogoutNavigation(): string | null {
+  const url = pendingLogoutUrl;
+  pendingLogoutUrl = null;
+  return url;
+}

src/router/navigation-types.ts

@@ -10,7 +10,7 @@ export type AppSubscriptionType = "vip" | "topup";
 export type AppSubscriptionReturnTo =
   | "chat"
   | "private-room"
-  | "sidebar"
+  | "profile"
   | null;
 
 export interface OpenSubscriptionInput {

src/router/route-meta.ts

@@ -15,7 +15,7 @@ const GLOBAL_ROUTE_ACCESS: Partial<Record<string, RouteAccess>> = {
   [ROUTES.privateRoom]: "guestEntry",
   [ROUTES.tip]: "public",
   [ROUTES.externalEntry]: "public",
-  [ROUTES.sidebar]: "session",
+  [ROUTES.profile]: "realUser",
   [ROUTES.feedback]: "session",
   [ROUTES.subscription]: "realUser",
   [ROUTES.coinsRules]: "public",

src/router/routes.ts

@@ -25,7 +25,7 @@ export const ROUTES = {
   tip: "/tip",
   externalEntry: "/external-entry",
   auth: "/auth",
-  sidebar: "/sidebar",
+  profile: "/profile",
   feedback: "/feedback",
   subscription: "/subscription",
   coinsRules: "/coins-rules",
@@ -114,7 +114,7 @@ export const ALL_STATIC_ROUTES: readonly StaticRoute[] = [
   ROUTES.tip,
   ROUTES.externalEntry,
   ROUTES.auth,
-  ROUTES.sidebar,
+  ROUTES.profile,
   ROUTES.feedback,
   ROUTES.coinsRules,
 ] as const;

src/tokens/colors.css

@@ -31,8 +31,8 @@
   --color-page-background: #ffffff;
 
   /* ==================== 扩展令牌（迁移自 Flutter UI） ==================== */
-  /* 侧边栏/Profile 深色背景 */
+  /* Splash 深色背景 */
-  --color-sidebar-background: #0d0b14;
+  --color-splash-background: #0d0b14;
   --color-dark-background: #0d0b14;
   --color-dark-gray: #2a2a2a;
   --color-bubble-background: #1a1625;
@@ -91,7 +91,7 @@
   --color-chevron-icon: #000000;
   --color-destructive: #ff6b6b;
 
-  /* ==================== Sidebar（浅色主题） ==================== */
+  /* ==================== Profile（浅色主题） ==================== */
   /* 卡片纯白表面 */
   --color-card-surface: #ffffff;
 

src/tokens/responsive.css

@@ -54,14 +54,14 @@
   --chat-avatar-size: clamp(38px, 7.963vw, 43px);
   --chat-send-button-size: clamp(40px, 8.148vw, 44px);
 
-  /* Sidebar 专用响应式尺寸 */
+  /* Profile 专用响应式尺寸 */
-  --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
+  --profile-user-padding-y: clamp(18px, 3.704vw, 20px);
-  --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
+  --profile-card-gap-y: clamp(6px, 1.481vw, 8px);
-  --sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
+  --profile-card-padding-x: clamp(18px, 5.185vw, 28px);
-  --sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
+  --profile-card-padding-y: clamp(16px, 3.333vw, 18px);
-  --sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
+  --profile-card-padding-right: clamp(10px, 2.222vw, 12px);
-  --sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
+  --profile-avatar-size: clamp(48px, 10.37vw, 56px);
-  --sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);
+  --profile-voice-image-size: clamp(84px, 18.519vw, 100px);
 
   /* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
   --font-responsive-md: clamp(14px, 2.963vw, 16px);