Compare commits
2 Commits
cc9fb9f4fd
...
9cb46a48bb
| Author | SHA1 | Date | |
|---|---|---|---|
| 9cb46a48bb | |||
| 9deb320cf6 |
@@ -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
|
||||
```
|
||||
|
||||
@@ -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(?:\\?.*)?$`,
|
||||
);
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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");
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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",
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
@@ -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'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");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
export type AvatarInteractionProps =
|
||||
| {
|
||||
onClick?: undefined;
|
||||
actionLabel?: never;
|
||||
analyticsKey?: never;
|
||||
}
|
||||
| {
|
||||
onClick: () => void;
|
||||
actionLabel: string;
|
||||
analyticsKey?: string;
|
||||
};
|
||||
@@ -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 (
|
||||
<span
|
||||
className={[
|
||||
"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
|
||||
const avatarClassName = [
|
||||
"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border-0 bg-(--color-avatar-border,#fbf3f5)",
|
||||
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)
|
||||
.join(" ")}
|
||||
style={style}
|
||||
>
|
||||
.join(" ");
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,5 +3,6 @@
|
||||
*/
|
||||
|
||||
export * from "./back-button";
|
||||
export * from "./avatar-interaction";
|
||||
export * from "./character-avatar";
|
||||
export * from "./user-message-avatar";
|
||||
|
||||
@@ -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) {
|
||||
return (
|
||||
<div
|
||||
className={avatarClassName}
|
||||
style={avatarStyle}
|
||||
aria-label="User avatar"
|
||||
>
|
||||
const hasUserAvatar = Boolean(avatarUrl && avatarUrl.length > 0);
|
||||
const image = (
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt=""
|
||||
src={hasUserAvatar ? avatarUrl! : "/images/avatar/placeholder.png"}
|
||||
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
|
||||
src="/images/avatar/placeholder.png"
|
||||
alt="Guest"
|
||||
width={imageSize}
|
||||
height={imageSize}
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
{image}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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" });
|
||||
}}
|
||||
|
||||
@@ -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'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('data-analytics-key="chat.open_menu"');
|
||||
expect(memberHtml).toContain('aria-label="Profile"');
|
||||
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"',
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
@@ -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-label="Open chat menu"
|
||||
data-analytics-key="chat.open_profile"
|
||||
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}
|
||||
|
||||
@@ -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">
|
||||
<Image
|
||||
<CharacterAvatar
|
||||
src={character.assets.avatar}
|
||||
alt={character.displayName}
|
||||
width={43}
|
||||
height={43}
|
||||
size="var(--chat-avatar-size, 43px)"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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"',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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"
|
||||
analyticsKey="feedback.back_to_sidebar"
|
||||
ariaLabel="Back to profile"
|
||||
analyticsKey="feedback.back_to_profile"
|
||||
/>
|
||||
<div className={styles.headingBlock}>
|
||||
<h1 className={styles.title}>Help us improve CozSweet</h1>
|
||||
|
||||
@@ -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", () => ({
|
||||
useSidebarUserBootstrap: vi.fn(),
|
||||
vi.mock("../use-profile-user-bootstrap", () => ({
|
||||
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",
|
||||
}),
|
||||
);
|
||||
});
|
||||
@@ -3,10 +3,10 @@ import { describe, expect, it } from "vitest";
|
||||
import type { UserView } from "@/stores/user/user-view";
|
||||
|
||||
import {
|
||||
getSidebarViewModel,
|
||||
getSidebarWalletView,
|
||||
normalizeSidebarCount,
|
||||
} from "../sidebar-view-model";
|
||||
getProfileViewModel,
|
||||
getProfileWalletView,
|
||||
normalizeProfileCount,
|
||||
} 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", () => {
|
||||
const view = getSidebarViewModel({
|
||||
it("keeps Guest users in the signed-out profile state", () => {
|
||||
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(normalizeSidebarCount(null)).toBe(0);
|
||||
expect(normalizeProfileCount(undefined)).toBe(0);
|
||||
expect(normalizeProfileCount(null)).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -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
|
||||
@@ -2,5 +2,5 @@
|
||||
* @file Automatically generated by barrelsby.
|
||||
*/
|
||||
|
||||
export * from "./sidebar-wallet-card";
|
||||
export * from "./profile-wallet-card";
|
||||
export * from "./user-header";
|
||||
@@ -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}
|
||||
@@ -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 min-w-0 flex-auto flex-col gap-(--sidebar-card-gap-y,4px)">
|
||||
<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-(--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"
|
||||
size="var(--sidebar-avatar-size, 56px)"
|
||||
className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
|
||||
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}
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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 { getSidebarViewModel } from "./sidebar-view-model";
|
||||
import { ProfileWalletCard, UserHeader } from "./components";
|
||||
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",
|
||||
triggerReason: "sidebar_recharge",
|
||||
entryPoint: "profile",
|
||||
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}
|
||||
@@ -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 {
|
||||
state: SidebarUserState;
|
||||
export interface ProfileViewModel {
|
||||
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;
|
||||
}): SidebarViewModel {
|
||||
const state = getSidebarUserState(loginStatus, user.currentUser);
|
||||
user: ProfileUserInput;
|
||||
}): ProfileViewModel {
|
||||
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 {
|
||||
if (loginStatus === "notLoggedIn") return "guest";
|
||||
): ProfileUserState {
|
||||
if (loginStatus === "notLoggedIn" || loginStatus === "guest") {
|
||||
return "guest";
|
||||
}
|
||||
return currentUser?.isVip === true ? "vip" : "member";
|
||||
}
|
||||
|
||||
export function getSidebarWalletView(
|
||||
user: SidebarUserInput,
|
||||
): SidebarWalletView {
|
||||
export function getProfileWalletView(
|
||||
user: ProfileUserInput,
|
||||
): ProfileWalletView {
|
||||
const currentUser = user.currentUser;
|
||||
|
||||
return {
|
||||
creditBalance: normalizeSidebarCount(user.creditBalance),
|
||||
dailyFreeChatLimit: normalizeSidebarCount(currentUser?.dailyFreeChatLimit),
|
||||
dailyFreeChatRemaining: normalizeSidebarCount(
|
||||
creditBalance: normalizeProfileCount(user.creditBalance),
|
||||
dailyFreeChatLimit: normalizeProfileCount(currentUser?.dailyFreeChatLimit),
|
||||
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));
|
||||
}
|
||||
@@ -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(() => {
|
||||
@@ -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");
|
||||
});
|
||||
|
||||
@@ -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=""
|
||||
|
||||
@@ -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) */}
|
||||
|
||||
@@ -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",
|
||||
}),
|
||||
|
||||
@@ -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(),
|
||||
})
|
||||
|
||||
@@ -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" });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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") {
|
||||
return buildGlobalPageUrl(ROUTES.sidebar, routes.chat);
|
||||
if (returnTo === "profile") {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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",
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
returnTo: "sidebar",
|
||||
orderId: "order-profile",
|
||||
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",
|
||||
returnTo: "sidebar",
|
||||
orderId: "order-profile",
|
||||
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();
|
||||
});
|
||||
|
||||
@@ -29,7 +29,7 @@ export function parseSubscriptionReturnTo(
|
||||
if (
|
||||
returnTo === "chat" ||
|
||||
returnTo === "private-room" ||
|
||||
returnTo === "sidebar"
|
||||
returnTo === "profile"
|
||||
) {
|
||||
return returnTo;
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@ describe("global route context", () => {
|
||||
chatUrl: "/characters/maya/chat",
|
||||
splashUrl: "/characters/maya/splash",
|
||||
});
|
||||
expect(context.sidebarUrl).toBe(
|
||||
"/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat",
|
||||
expect(context.profileUrl).toBe(
|
||||
"/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(
|
||||
"/sidebar?returnTo=%2Fcharacters%2Felio%2Fchat",
|
||||
expect(buildGlobalPageUrl(ROUTES.profile, "https://example.com")).toBe(
|
||||
"/profile?returnTo=%2Fcharacters%2Felio%2Fchat",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -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",
|
||||
pathname: ROUTES.sidebar,
|
||||
loginStatus,
|
||||
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(
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
});
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -10,7 +10,7 @@ export type AppSubscriptionType = "vip" | "topup";
|
||||
export type AppSubscriptionReturnTo =
|
||||
| "chat"
|
||||
| "private-room"
|
||||
| "sidebar"
|
||||
| "profile"
|
||||
| null;
|
||||
|
||||
export interface OpenSubscriptionInput {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
--color-page-background: #ffffff;
|
||||
|
||||
/* ==================== 扩展令牌(迁移自 Flutter UI) ==================== */
|
||||
/* 侧边栏/Profile 深色背景 */
|
||||
--color-sidebar-background: #0d0b14;
|
||||
/* Splash 深色背景 */
|
||||
--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;
|
||||
|
||||
|
||||
@@ -54,14 +54,14 @@
|
||||
--chat-avatar-size: clamp(38px, 7.963vw, 43px);
|
||||
--chat-send-button-size: clamp(40px, 8.148vw, 44px);
|
||||
|
||||
/* Sidebar 专用响应式尺寸 */
|
||||
--sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
|
||||
--sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
|
||||
--sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
|
||||
--sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
|
||||
--sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
|
||||
--sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
|
||||
--sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);
|
||||
/* Profile 专用响应式尺寸 */
|
||||
--profile-user-padding-y: clamp(18px, 3.704vw, 20px);
|
||||
--profile-card-gap-y: clamp(6px, 1.481vw, 8px);
|
||||
--profile-card-padding-x: clamp(18px, 5.185vw, 28px);
|
||||
--profile-card-padding-y: clamp(16px, 3.333vw, 18px);
|
||||
--profile-card-padding-right: clamp(10px, 2.222vw, 12px);
|
||||
--profile-avatar-size: clamp(48px, 10.37vw, 56px);
|
||||
--profile-voice-image-size: clamp(84px, 18.519vw, 100px);
|
||||
|
||||
/* 响应式字体:按 540px 设计宽度换算,并给小屏设置可读下限。 */
|
||||
--font-responsive-md: clamp(14px, 2.963vw, 16px);
|
||||
|
||||