feat(navigation): add favorite entry and Menu tab
This commit is contained in:
Codex
@@ -0,0 +1,198 @@
|
||||
import path from "node:path";
|
||||
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
|
||||
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
|
||||
import { apiEnvelope } from "@e2e/fixtures/data/common";
|
||||
import { e2eEmailUser } from "@e2e/fixtures/data/auth";
|
||||
import { chatCharactersResponse } from "@e2e/fixtures/data/character";
|
||||
import {
|
||||
emptyChatHistoryResponse,
|
||||
emptyChatPreviewsResponse,
|
||||
} from "@e2e/fixtures/data/chat";
|
||||
import { paymentPlansResponse } from "@e2e/fixtures/data/payment";
|
||||
import { userEntitlementsResponse } from "@e2e/fixtures/data/user";
|
||||
import {
|
||||
defaultCharacterChatPath,
|
||||
defaultCharacterSplashPath,
|
||||
seedEmailSession,
|
||||
} from "@e2e/fixtures/helpers/auth";
|
||||
|
||||
const previewDirectory = path.join(
|
||||
process.cwd(),
|
||||
".codex",
|
||||
"artifacts",
|
||||
"frontend-preview",
|
||||
"2026-07-22",
|
||||
"favorite-menu",
|
||||
);
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await registerFavoriteMenuMocks(page);
|
||||
});
|
||||
|
||||
test("favorite entry and three-tab Menu navigation render on the real pages", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
const mobile = testInfo.project.name.includes("mobile");
|
||||
await page.setViewportSize(
|
||||
mobile ? { width: 390, height: 844 } : { width: 1440, height: 900 },
|
||||
);
|
||||
const browserErrors = collectBrowserErrors(page);
|
||||
|
||||
await seedEmailSession(page);
|
||||
await page.goto(defaultCharacterChatPath);
|
||||
|
||||
await expect(page.getByRole("button", { name: "Save CozSweet" })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("button", { name: /First recharge offer, 50% off/i }),
|
||||
).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Profile" })).toHaveCount(0);
|
||||
await savePreview(page, `${mobile ? "mobile" : "desktop"}-chat.png`);
|
||||
|
||||
await page.goto(defaultCharacterSplashPath);
|
||||
await expect(page.getByRole("button", { name: "Save CozSweet" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
|
||||
const navigation = page.getByRole("navigation", {
|
||||
name: "Primary navigation",
|
||||
});
|
||||
await expect(navigation).toContainText("Chat");
|
||||
await expect(navigation).toContainText("Elio Private Zoom");
|
||||
await expect(navigation).toContainText("Menu");
|
||||
await savePreview(page, `${mobile ? "mobile" : "desktop"}-splash.png`);
|
||||
|
||||
await page.goto("/characters/elio/private-zoom");
|
||||
await expect(page.getByRole("button", { name: "Save CozSweet" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
|
||||
await savePreview(
|
||||
page,
|
||||
`${mobile ? "mobile" : "desktop"}-private-zoom.png`,
|
||||
);
|
||||
|
||||
await page.getByRole("button", { name: "Menu" }).click();
|
||||
await expect(page.getByRole("heading", { name: "Menu" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Save CozSweet" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Menu" })).toHaveAttribute(
|
||||
"aria-current",
|
||||
"page",
|
||||
);
|
||||
await savePreview(page, `${mobile ? "mobile" : "desktop"}-menu.png`);
|
||||
|
||||
if (mobile) {
|
||||
await page.evaluate(() => {
|
||||
localStorage.setItem("cozsweet:favorite_entry", "1");
|
||||
});
|
||||
await page.goto(defaultCharacterChatPath);
|
||||
await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
|
||||
await savePreview(page, "mobile-android-external-chat-download.png");
|
||||
|
||||
await page.addInitScript(() => {
|
||||
Object.defineProperty(navigator, "userAgent", {
|
||||
configurable: true,
|
||||
value:
|
||||
"Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1",
|
||||
});
|
||||
});
|
||||
await page.goto(defaultCharacterChatPath);
|
||||
await expect(page.getByRole("button", { name: "Saved" })).toBeVisible();
|
||||
await savePreview(page, "mobile-ios-external-chat-saved.png");
|
||||
}
|
||||
|
||||
expect(browserErrors.filter(isFeatureRuntimeError)).toEqual([]);
|
||||
});
|
||||
|
||||
async function registerFavoriteMenuMocks(page: Page): Promise<void> {
|
||||
await mockCoreApis(page);
|
||||
await page.route("**/api/payment/plans**", async (route) => {
|
||||
await route.fulfill({
|
||||
json: apiEnvelope({
|
||||
...paymentPlansResponse,
|
||||
isFirstRecharge: true,
|
||||
}),
|
||||
});
|
||||
});
|
||||
await page.route("**/api/private-zoom/albums**", async (route) => {
|
||||
await route.fulfill({
|
||||
json: apiEnvelope({ items: [], creditBalance: 80 }),
|
||||
});
|
||||
});
|
||||
await page.context().route("**/api/**", async (route) => {
|
||||
const pathname = new URL(route.request().url()).pathname;
|
||||
if (pathname === "/api/auth/session") {
|
||||
await route.fulfill({
|
||||
json: {
|
||||
expires: "2099-12-31T23:59:59.000Z",
|
||||
user: { email: null, image: null, name: null },
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/characters") {
|
||||
await route.fulfill({ json: apiEnvelope(chatCharactersResponse) });
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/user/profile") {
|
||||
await route.fulfill({ json: apiEnvelope(e2eEmailUser) });
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/user/entitlements") {
|
||||
await route.fulfill({ json: apiEnvelope(userEntitlementsResponse) });
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/chat/history") {
|
||||
await route.fulfill({ json: apiEnvelope(emptyChatHistoryResponse) });
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/chat/previews") {
|
||||
await route.fulfill({ json: apiEnvelope(emptyChatPreviewsResponse) });
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/payment/plans") {
|
||||
await route.fulfill({
|
||||
json: apiEnvelope({
|
||||
...paymentPlansResponse,
|
||||
isFirstRecharge: true,
|
||||
}),
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/payment/vip-status") {
|
||||
await route.fulfill({
|
||||
json: apiEnvelope({ isVip: false, expiresAt: null }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (pathname === "/api/private-zoom/albums") {
|
||||
await route.fulfill({
|
||||
json: apiEnvelope({ items: [], creditBalance: 80 }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
await route.fallback();
|
||||
});
|
||||
}
|
||||
|
||||
function collectBrowserErrors(page: Page): string[] {
|
||||
const errors: string[] = [];
|
||||
page.on("pageerror", (error) => errors.push(error.message));
|
||||
page.on("console", (message) => {
|
||||
if (message.type() === "error") errors.push(message.text());
|
||||
});
|
||||
return errors;
|
||||
}
|
||||
|
||||
function isFeatureRuntimeError(message: string): boolean {
|
||||
const isKnownLocalPreviewDependencyError =
|
||||
message.includes("[ApiLoggingInterceptor]") ||
|
||||
message.includes("[next-auth][error][CLIENT_FETCH_ERROR]") ||
|
||||
message.includes("[Result] Result.wrap caught exception");
|
||||
return !isKnownLocalPreviewDependencyError;
|
||||
}
|
||||
|
||||
async function savePreview(page: Page, fileName: string): Promise<void> {
|
||||
if (process.env.FRONTEND_PREVIEW_SCREENSHOTS !== "1") return;
|
||||
await page.screenshot({
|
||||
path: path.join(previewDirectory, fileName),
|
||||
animations: "disabled",
|
||||
});
|
||||
}
|
||||
@@ -82,6 +82,7 @@ describe("core Tailwind components", () => {
|
||||
privateZoomLabel="Maya Private Zoom"
|
||||
onChatClick={() => undefined}
|
||||
onPrivateZoomClick={() => undefined}
|
||||
onMenuClick={() => undefined}
|
||||
/>,
|
||||
);
|
||||
const privateZoomHtml = renderToStaticMarkup(
|
||||
@@ -91,6 +92,7 @@ describe("core Tailwind components", () => {
|
||||
privateZoomLabel="Maya Private Zoom"
|
||||
onChatClick={() => undefined}
|
||||
onPrivateZoomClick={() => undefined}
|
||||
onMenuClick={() => undefined}
|
||||
/>,
|
||||
);
|
||||
|
||||
@@ -107,5 +109,7 @@ describe("core Tailwind components", () => {
|
||||
expect(privateZoomHtml).toContain(
|
||||
'data-analytics-key="navigation.private_zoom"',
|
||||
);
|
||||
expect(chatHtml).toContain('data-analytics-key="navigation.menu"');
|
||||
expect(chatHtml).toContain("<span>Menu</span>");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
left: 50%;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
box-sizing: border-box;
|
||||
width: min(100vw, var(--app-max-width, 540px));
|
||||
min-height: calc(
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { Camera, MessageCircle } from "lucide-react";
|
||||
import { Camera, Menu as MenuIcon, MessageCircle } from "lucide-react";
|
||||
|
||||
import styles from "./app-bottom-nav.module.css";
|
||||
|
||||
export type AppBottomNavItem = "chat" | "privateZoom";
|
||||
export type AppBottomNavItem = "chat" | "privateZoom" | "menu";
|
||||
export type AppBottomNavVariant = "warm" | "dark";
|
||||
|
||||
export interface AppBottomNavProps {
|
||||
@@ -13,6 +13,7 @@ export interface AppBottomNavProps {
|
||||
privateZoomLabel: string;
|
||||
onChatClick: () => void;
|
||||
onPrivateZoomClick: () => void;
|
||||
onMenuClick: () => void;
|
||||
}
|
||||
|
||||
export function AppBottomNav({
|
||||
@@ -21,6 +22,7 @@ export function AppBottomNav({
|
||||
privateZoomLabel,
|
||||
onChatClick,
|
||||
onPrivateZoomClick,
|
||||
onMenuClick,
|
||||
}: AppBottomNavProps) {
|
||||
return (
|
||||
<nav className={getRootClass(variant)} aria-label="Primary navigation">
|
||||
@@ -46,6 +48,17 @@ export function AppBottomNav({
|
||||
<Camera size={20} aria-hidden="true" />
|
||||
<span>{privateZoomLabel}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-analytics-key="navigation.menu"
|
||||
data-analytics-label="Menu navigation"
|
||||
className={getButtonClass(activeItem === "menu")}
|
||||
aria-current={activeItem === "menu" ? "page" : undefined}
|
||||
onClick={onMenuClick}
|
||||
>
|
||||
<MenuIcon size={20} aria-hidden="true" />
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
min-width: var(--responsive-icon-button-size, 42px);
|
||||
height: var(--responsive-icon-button-size, 42px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 11px;
|
||||
border: 1px solid var(--favorite-border);
|
||||
border-radius: 999px;
|
||||
background: var(--favorite-background);
|
||||
color: var(--favorite-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
box-shadow: var(--favorite-shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
transition: background 160ms ease, transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--favorite-background: rgba(18, 15, 24, 0.72);
|
||||
--favorite-border: rgba(255, 255, 255, 0.22);
|
||||
--favorite-color: #ffffff;
|
||||
--favorite-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.light {
|
||||
--favorite-background: rgba(255, 255, 255, 0.88);
|
||||
--favorite-border: rgba(43, 27, 34, 0.1);
|
||||
--favorite-color: #34272c;
|
||||
--favorite-shadow: 0 10px 24px rgba(74, 48, 58, 0.1);
|
||||
}
|
||||
|
||||
.favorite {
|
||||
width: var(--responsive-icon-button-size, 42px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.download {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #ff76ab, #f84d96);
|
||||
border-color: rgba(255, 255, 255, 0.42);
|
||||
box-shadow: 0 10px 25px rgba(248, 77, 150, 0.3);
|
||||
}
|
||||
|
||||
.saved {
|
||||
color: #f84d96;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 2px solid #ffffff;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.light:focus-visible {
|
||||
outline-color: #f84d96;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 45;
|
||||
width: max-content;
|
||||
max-width: min(72vw, 250px);
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(22, 18, 25, 0.94);
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Download, Star } from "lucide-react";
|
||||
|
||||
import { openChatInExternalBrowser } from "@/lib/chat/chat_external_browser";
|
||||
import {
|
||||
hasPersistedFavoriteEntryIntent,
|
||||
resolveFavoriteEntryMode,
|
||||
type FavoriteEntryMode,
|
||||
} from "@/lib/navigation/favorite_entry";
|
||||
import { BrowserDetector } from "@/utils/browser-detect";
|
||||
import { PlatformDetector } from "@/utils/platform-detect";
|
||||
import { pwaUtil } from "@/utils/pwa";
|
||||
|
||||
import styles from "./favorite-entry-button.module.css";
|
||||
|
||||
export interface FavoriteEntryButtonProps {
|
||||
characterSlug: string;
|
||||
tone?: "dark" | "light";
|
||||
}
|
||||
|
||||
export function FavoriteEntryButton({
|
||||
characterSlug,
|
||||
tone = "dark",
|
||||
}: FavoriteEntryButtonProps) {
|
||||
const [mode, setMode] = useState<FavoriteEntryMode>("favorite");
|
||||
const [installHint, setInstallHint] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const updateMode = () => {
|
||||
setMode(
|
||||
resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent: hasPersistedFavoriteEntryIntent(),
|
||||
isAndroid: PlatformDetector.isAndroid(),
|
||||
isIOS: PlatformDetector.isIOS(),
|
||||
isInAppBrowser: BrowserDetector.isInAppBrowser(),
|
||||
isInstalled: pwaUtil.isInstalled(),
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
pwaUtil.prepareInstallPrompt();
|
||||
updateMode();
|
||||
const unsubscribe = pwaUtil.subscribe(updateMode);
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const handleClick = async (): Promise<void> => {
|
||||
if (mode === "favorite") {
|
||||
await openChatInExternalBrowser({ characterSlug });
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === "download") {
|
||||
pwaUtil.prepareInstallPrompt();
|
||||
const result = await pwaUtil.install();
|
||||
if (result === "accepted" || pwaUtil.isInstalled()) {
|
||||
setMode("saved");
|
||||
setInstallHint(false);
|
||||
return;
|
||||
}
|
||||
if (result === "unavailable") setInstallHint(true);
|
||||
}
|
||||
};
|
||||
|
||||
const label = getFavoriteEntryLabel(mode);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<button
|
||||
type="button"
|
||||
data-analytics-key={`favorite.${mode}`}
|
||||
data-analytics-label={label}
|
||||
className={[styles.button, styles[tone], styles[mode]]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
aria-label={label}
|
||||
aria-pressed={mode === "saved"}
|
||||
onClick={() => void handleClick()}
|
||||
>
|
||||
{mode === "download" ? (
|
||||
<Download size={16} strokeWidth={2.4} aria-hidden="true" />
|
||||
) : (
|
||||
<Star
|
||||
size={21}
|
||||
strokeWidth={2.3}
|
||||
fill={mode === "saved" ? "currentColor" : "none"}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{mode === "favorite" ? null : <span>{label}</span>}
|
||||
</button>
|
||||
{installHint ? (
|
||||
<span className={styles.hint} role="status">
|
||||
Chrome menu → Add to Home screen
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getFavoriteEntryLabel(mode: FavoriteEntryMode): string {
|
||||
if (mode === "download") return "Download";
|
||||
if (mode === "saved") return "Saved";
|
||||
return "Save CozSweet";
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
export * from "./app-bottom-nav";
|
||||
export * from "./bottom-sheet";
|
||||
export * from "./checkbox";
|
||||
export * from "./favorite-entry-button";
|
||||
export * from "./loading-indicator";
|
||||
export * from "./mobile-shell";
|
||||
export * from "./page-loading-fallback";
|
||||
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
} from "./chat-image-overlay-url";
|
||||
import {
|
||||
deriveIsGuest,
|
||||
shouldStartExternalBrowserPrompt,
|
||||
} from "./chat-screen.helpers";
|
||||
import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
|
||||
import { useChatUnlockCoordinator } from "./hooks/use-chat-unlock-coordinator";
|
||||
@@ -118,12 +117,6 @@ export function ChatScreen() {
|
||||
});
|
||||
const shouldShowPwaInstall =
|
||||
state.historyLoaded && state.historyMessages.length >= 10;
|
||||
const shouldShowBrowserHint = shouldStartExternalBrowserPrompt({
|
||||
hasInitialized: authState.hasInitialized,
|
||||
isLoading: authState.isLoading,
|
||||
loginStatus: authState.loginStatus,
|
||||
});
|
||||
|
||||
useChatGuestLogin({
|
||||
dispatch: authDispatch,
|
||||
hasInitialized: authState.hasInitialized,
|
||||
@@ -276,13 +269,13 @@ export function ChatScreen() {
|
||||
<div className="relative z-1 flex min-h-0 flex-[1_1_auto] flex-col">
|
||||
<ChatHeader
|
||||
isGuest={isGuest}
|
||||
showBrowserHint={shouldShowBrowserHint}
|
||||
offerBanner={
|
||||
<FirstRechargeOfferBanner
|
||||
visible={firstRechargeOfferBanner.visible}
|
||||
discountPercent={firstRechargeOfferBanner.discountPercent}
|
||||
onClick={firstRechargeOfferBanner.claim}
|
||||
onClose={firstRechargeOfferBanner.close}
|
||||
variant="compact"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -242,12 +242,6 @@ describe("chat Tailwind components", () => {
|
||||
const memberHtml = renderWithCharacter(
|
||||
<ChatHeader isGuest={false} offerBanner={<div>Offer</div>} />,
|
||||
);
|
||||
const memberWithHintHtml = renderWithCharacter(
|
||||
<ChatHeader isGuest={false} showBrowserHint />,
|
||||
);
|
||||
const guestWithHintHtml = renderWithCharacter(
|
||||
<ChatHeader isGuest={true} showBrowserHint />,
|
||||
);
|
||||
|
||||
expect(guestHtml).toContain('aria-label="Sign up to unlock more features"');
|
||||
expect(guestHtml).toContain("bg-accent");
|
||||
@@ -257,50 +251,33 @@ describe("chat Tailwind components", () => {
|
||||
expect(guestHtml).toContain('data-analytics-key="chat.back_to_home"');
|
||||
expect(guestHtml).toContain("px-(--chat-inline-padding,16px)");
|
||||
expect(guestHtml).not.toContain('aria-label="Profile"');
|
||||
expect(guestHtml).toContain('aria-label="Save CozSweet"');
|
||||
expect(memberHtml).toContain("Offer");
|
||||
expect(memberHtml).toContain('href="/characters/elio/splash"');
|
||||
expect(memberHtml).toContain('aria-label="Back to home"');
|
||||
expect(memberHtml).toContain('aria-label="Profile"');
|
||||
expect(memberHtml).toContain('data-analytics-key="chat.open_profile"');
|
||||
expect(memberHtml).toContain('aria-label="Save CozSweet"');
|
||||
expect(memberHtml).toContain('data-analytics-key="favorite.favorite"');
|
||||
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)");
|
||||
expect(memberHtml).toContain("bg-[rgba(13,11,20,0.7)]");
|
||||
expect(memberHtml).toContain("size-(--responsive-icon-button-size,42px)");
|
||||
expect(memberHtml).toContain("lucide-user-round");
|
||||
expect(memberWithHintHtml).toContain(
|
||||
'data-analytics-key="chat.external_browser_hint"',
|
||||
);
|
||||
expect(memberWithHintHtml).toContain(
|
||||
expect(memberHtml).toContain(
|
||||
"grid-cols-[auto_minmax(0,1fr)_auto]",
|
||||
);
|
||||
expect(memberWithHintHtml.indexOf('aria-label="Back to home"')).toBeLessThan(
|
||||
memberWithHintHtml.indexOf(
|
||||
'data-analytics-key="chat.external_browser_hint"',
|
||||
),
|
||||
);
|
||||
expect(
|
||||
memberWithHintHtml.indexOf(
|
||||
'data-analytics-key="chat.external_browser_hint"',
|
||||
),
|
||||
).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Profile"'));
|
||||
expect(guestWithHintHtml).not.toContain(
|
||||
expect(memberHtml).not.toContain(
|
||||
'data-analytics-key="chat.external_browser_hint"',
|
||||
);
|
||||
});
|
||||
|
||||
it("renders the user avatar in the ChatHeader Profile action", () => {
|
||||
it("replaces the ChatHeader Profile avatar with the favorite action", () => {
|
||||
userMocks.avatarUrl = "/images/avatar/profile-user.png";
|
||||
|
||||
const html = renderWithCharacter(<ChatHeader isGuest={false} />);
|
||||
|
||||
expect(html).toContain("%2Fimages%2Favatar%2Fprofile-user.png");
|
||||
expect(html).toContain('aria-label="Profile"');
|
||||
expect(html).toContain('data-analytics-key="chat.open_profile"');
|
||||
expect(html).toContain(
|
||||
"var(--responsive-icon-button-size, 42px)",
|
||||
);
|
||||
expect(html).not.toContain("lucide-user-round");
|
||||
expect(html).not.toContain("%2Fimages%2Favatar%2Fprofile-user.png");
|
||||
expect(html).not.toContain('aria-label="Profile"');
|
||||
expect(html).not.toContain('data-analytics-key="chat.open_profile"');
|
||||
expect(html).toContain('aria-label="Save CozSweet"');
|
||||
expect(html).toContain("lucide-star");
|
||||
});
|
||||
|
||||
it("links guest chat back to the active character splash", () => {
|
||||
@@ -315,6 +292,7 @@ describe("chat Tailwind components", () => {
|
||||
|
||||
expect(html).toContain('href="/characters/maya/splash"');
|
||||
expect(html).not.toContain('aria-label="Profile"');
|
||||
expect(html).toContain('aria-label="Save CozSweet"');
|
||||
expect(html).not.toContain(
|
||||
'data-analytics-key="chat.external_browser_hint"',
|
||||
);
|
||||
|
||||
@@ -2,37 +2,31 @@
|
||||
/**
|
||||
* ChatHeader 顶部栏
|
||||
*
|
||||
* Profile 优先展示用户头像；头像缺失时回退到 lucide-react <UserRound />。
|
||||
* 顶部保持返回、首充优惠、收藏入口三段结构。
|
||||
*/
|
||||
import type { ReactNode } from "react";
|
||||
import { Lock, UserRound } from "lucide-react";
|
||||
import { Lock } from "lucide-react";
|
||||
|
||||
import { BackButton, UserMessageAvatar } from "@/app/_components";
|
||||
import { useActiveCharacterRoutes } from "@/providers/character-provider";
|
||||
import { buildGlobalPageUrl } from "@/router/global-route-context";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { BackButton } from "@/app/_components";
|
||||
import { FavoriteEntryButton } from "@/app/_components/core";
|
||||
import {
|
||||
useActiveCharacter,
|
||||
useActiveCharacterRoutes,
|
||||
} from "@/providers/character-provider";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import { useUserSelector } from "@/stores/user/user-context";
|
||||
|
||||
import { BrowserHintOverlay } from "./browser-hint-overlay";
|
||||
|
||||
export interface ChatHeaderProps {
|
||||
isGuest: boolean;
|
||||
offerBanner?: ReactNode;
|
||||
showBrowserHint?: boolean;
|
||||
}
|
||||
|
||||
export function ChatHeader({
|
||||
isGuest,
|
||||
offerBanner,
|
||||
showBrowserHint = false,
|
||||
}: ChatHeaderProps) {
|
||||
const navigator = useAppNavigator();
|
||||
const character = useActiveCharacter();
|
||||
const characterRoutes = useActiveCharacterRoutes();
|
||||
const avatarUrl = useUserSelector((state) => state.context.avatarUrl);
|
||||
const handleOpenProfile = () => {
|
||||
navigator.push(buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat));
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
|
||||
@@ -52,17 +46,9 @@ export function ChatHeader({
|
||||
/>
|
||||
<span>Sign up to unlock more features</span>
|
||||
</button>
|
||||
) : (
|
||||
offerBanner
|
||||
)}
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={
|
||||
isGuest
|
||||
? "flex items-center px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)"
|
||||
: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)"
|
||||
}
|
||||
>
|
||||
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)">
|
||||
<BackButton
|
||||
href={characterRoutes.splash}
|
||||
variant="dark"
|
||||
@@ -70,34 +56,12 @@ export function ChatHeader({
|
||||
analyticsKey="chat.back_to_home"
|
||||
/>
|
||||
|
||||
{!isGuest ? (
|
||||
<>
|
||||
<div className="flex min-w-0 justify-center">
|
||||
{showBrowserHint ? <BrowserHintOverlay /> : null}
|
||||
</div>
|
||||
<div className="flex min-w-0 justify-center">{offerBanner}</div>
|
||||
|
||||
{avatarUrl ? (
|
||||
<UserMessageAvatar
|
||||
avatarUrl={avatarUrl}
|
||||
size="var(--responsive-icon-button-size, 42px)"
|
||||
actionLabel="Profile"
|
||||
analyticsKey="chat.open_profile"
|
||||
onClick={handleOpenProfile}
|
||||
<FavoriteEntryButton
|
||||
characterSlug={character.slug}
|
||||
tone="dark"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
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={handleOpenProfile}
|
||||
aria-label="Profile"
|
||||
>
|
||||
<UserRound size={24} aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -121,8 +121,73 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.compactButton {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
max-width: 224px;
|
||||
min-height: 44px;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 5px 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.42);
|
||||
border-radius: 16px;
|
||||
background:
|
||||
radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.68), transparent 38%),
|
||||
linear-gradient(135deg, #fff0b8 0%, #ffd0df 50%, #ff6cab 100%);
|
||||
color: #2c111d;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
box-shadow: 0 9px 24px rgba(114, 21, 63, 0.2);
|
||||
animation: firstRechargeBannerIn 260ms ease-out both;
|
||||
}
|
||||
|
||||
.compactIcon {
|
||||
display: inline-flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
color: #f90073;
|
||||
}
|
||||
|
||||
.compactCopy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.compactCopy span,
|
||||
.compactCopy strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.compactCopy span {
|
||||
color: rgba(44, 17, 29, 0.68);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.compactCopy strong {
|
||||
color: #ec006d;
|
||||
font-size: 15px;
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.contentButton:focus-visible,
|
||||
.closeButton:focus-visible {
|
||||
.closeButton:focus-visible,
|
||||
.compactButton:focus-visible {
|
||||
outline: 2px solid rgba(255, 255, 255, 0.94);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
@@ -144,4 +209,14 @@
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.compactButton {
|
||||
gap: 5px;
|
||||
padding-inline: 6px;
|
||||
}
|
||||
|
||||
.compactIcon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ export interface FirstRechargeOfferBannerProps {
|
||||
discountPercent: number;
|
||||
onClick: () => void;
|
||||
onClose: () => void;
|
||||
variant?: "banner" | "compact";
|
||||
}
|
||||
|
||||
export function FirstRechargeOfferBanner({
|
||||
@@ -16,9 +17,32 @@ export function FirstRechargeOfferBanner({
|
||||
discountPercent,
|
||||
onClick,
|
||||
onClose,
|
||||
variant = "banner",
|
||||
}: FirstRechargeOfferBannerProps) {
|
||||
if (!visible) return null;
|
||||
|
||||
if (variant === "compact") {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-analytics-key="chat.first_recharge_offer"
|
||||
data-analytics-label="Open first recharge offer"
|
||||
className={styles.compactButton}
|
||||
aria-label={`First recharge offer, ${discountPercent}% off`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<span className={styles.compactIcon} aria-hidden="true">
|
||||
<Sparkles size={14} strokeWidth={2.4} />
|
||||
</span>
|
||||
<span className={styles.compactCopy}>
|
||||
<span>First recharge</span>
|
||||
<strong>{discountPercent}% OFF</strong>
|
||||
</span>
|
||||
<ChevronRight size={14} strokeWidth={2.4} aria-hidden="true" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={styles.banner} aria-label="First recharge offer">
|
||||
<button
|
||||
|
||||
@@ -21,6 +21,10 @@ import {
|
||||
} from "@/data/constants/character";
|
||||
import { Logger } from "@/utils/logger";
|
||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||
import {
|
||||
isFavoriteEntryRequest,
|
||||
persistFavoriteEntryIntent,
|
||||
} from "@/lib/navigation/favorite_entry";
|
||||
|
||||
const log = new Logger("ExternalEntryPersist");
|
||||
|
||||
@@ -33,6 +37,7 @@ interface ExternalEntryPersistProps {
|
||||
character: string | null;
|
||||
mode: string | null;
|
||||
promotionType: string | null;
|
||||
favorite: string | null;
|
||||
}
|
||||
|
||||
export default function ExternalEntryPersist({
|
||||
@@ -44,6 +49,7 @@ export default function ExternalEntryPersist({
|
||||
character,
|
||||
mode,
|
||||
promotionType,
|
||||
favorite,
|
||||
}: ExternalEntryPersistProps) {
|
||||
const router = useRouter();
|
||||
const authState = useAuthState();
|
||||
@@ -75,6 +81,9 @@ export default function ExternalEntryPersist({
|
||||
? savePendingChatPromotion(resolvedPromotionType, characterId)
|
||||
: clearPendingChatPromotion(),
|
||||
]);
|
||||
if (isFavoriteEntryRequest(favorite)) {
|
||||
persistFavoriteEntryIntent();
|
||||
}
|
||||
for (const result of results) {
|
||||
if (result.status === "rejected") {
|
||||
log.warn(
|
||||
@@ -96,6 +105,7 @@ export default function ExternalEntryPersist({
|
||||
characterId,
|
||||
destination,
|
||||
deviceId,
|
||||
favorite,
|
||||
mode,
|
||||
promotionType,
|
||||
psid,
|
||||
|
||||
@@ -34,6 +34,7 @@ export default async function ExternalEntryPage({
|
||||
character={pickParam(params.character)}
|
||||
mode={pickParam(params.mode)}
|
||||
promotionType={pickParam(params.promotion_type)}
|
||||
favorite={pickParam(params.favorite)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,6 +26,13 @@
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.favoriteAction {
|
||||
position: absolute;
|
||||
top: calc(var(--app-safe-top, 0px) + 14px);
|
||||
right: calc(var(--app-safe-right, 0px) + 14px);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.backgroundGlowOne {
|
||||
top: 118px;
|
||||
right: -82px;
|
||||
|
||||
@@ -5,7 +5,13 @@ import Image from "next/image";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
import { CharacterAvatar } from "@/app/_components";
|
||||
import { AppBottomNav, MobileShell } from "@/app/_components/core";
|
||||
import {
|
||||
AppBottomNav,
|
||||
FavoriteEntryButton,
|
||||
MobileShell,
|
||||
} from "@/app/_components/core";
|
||||
import { buildGlobalPageUrl } from "@/router/global-route-context";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import {
|
||||
useActiveCharacter,
|
||||
@@ -183,6 +189,12 @@ export function PrivateZoomScreen() {
|
||||
<main className={styles.shell}>
|
||||
<div className={styles.backgroundGlowOne} />
|
||||
<div className={styles.backgroundGlowTwo} />
|
||||
<div className={styles.favoriteAction}>
|
||||
<FavoriteEntryButton
|
||||
characterSlug={character.slug}
|
||||
tone="dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className={styles.hero} aria-label={title}>
|
||||
<div className={styles.heroCover}>
|
||||
@@ -283,6 +295,12 @@ export function PrivateZoomScreen() {
|
||||
navigator.push(characterRoutes.splash, { scroll: false })
|
||||
}
|
||||
onPrivateZoomClick={() => undefined}
|
||||
onMenuClick={() =>
|
||||
navigator.push(
|
||||
buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat),
|
||||
{ scroll: false },
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
{pendingAlbum ? (
|
||||
|
||||
@@ -3,13 +3,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--page-section-gap, 14px);
|
||||
overflow: hidden;
|
||||
overflow: hidden auto;
|
||||
min-height: var(--app-viewport-height, 100dvh);
|
||||
box-sizing: border-box;
|
||||
padding:
|
||||
var(--app-safe-top, 0px)
|
||||
calc(var(--page-padding-x, 28px) + var(--app-safe-right, 0px))
|
||||
calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
|
||||
calc(
|
||||
var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px) +
|
||||
var(--app-bottom-nav-height, 64px)
|
||||
)
|
||||
calc(var(--page-padding-x, 28px) + var(--app-safe-left, 0px));
|
||||
background:
|
||||
radial-gradient(circle at 18% 6%, rgba(255, 206, 160, 0.22), transparent 28%),
|
||||
@@ -52,9 +55,23 @@
|
||||
}
|
||||
|
||||
.topBar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: var(--page-padding-y, 18px) 0 -2px;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
color: #251a1f;
|
||||
font-size: clamp(22px, 5.185vw, 28px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.userSlot {
|
||||
padding: var(--responsive-card-padding, 18px);
|
||||
border: 1px solid rgba(25, 19, 22, 0.06);
|
||||
|
||||
@@ -4,7 +4,12 @@ import { Download, LogOut, MessageCircleQuestion } from "lucide-react";
|
||||
import { signOut } from "next-auth/react";
|
||||
|
||||
import { BackButton } from "@/app/_components";
|
||||
import { MobileShell } from "@/app/_components/core";
|
||||
import {
|
||||
AppBottomNav,
|
||||
FavoriteEntryButton,
|
||||
MobileShell,
|
||||
} from "@/app/_components/core";
|
||||
import { getCharacterBySlug } from "@/data/constants/character";
|
||||
import {
|
||||
resolveGlobalRouteContext,
|
||||
type GlobalReturnToValue,
|
||||
@@ -13,6 +18,7 @@ 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 { getCharacterRoutes } from "@/router/routes";
|
||||
|
||||
import { ProfileWalletCard, UserHeader } from "./components";
|
||||
import { getProfileViewModel } from "./profile-view-model";
|
||||
@@ -28,6 +34,8 @@ export interface ProfileScreenProps {
|
||||
export function ProfileScreen({ returnTo }: ProfileScreenProps) {
|
||||
const navigator = useGlobalAppNavigator();
|
||||
const navigation = resolveGlobalRouteContext(returnTo);
|
||||
const character = getCharacterBySlug(navigation.characterSlug);
|
||||
const characterRoutes = getCharacterRoutes(navigation.characterSlug);
|
||||
const user = useUserState();
|
||||
const userDispatch = useUserDispatch();
|
||||
const auth = useAuthState();
|
||||
@@ -61,6 +69,11 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
|
||||
variant="soft"
|
||||
analyticsKey="profile.back_to_chat"
|
||||
/>
|
||||
<h1 className={styles.pageTitle}>Menu</h1>
|
||||
<FavoriteEntryButton
|
||||
characterSlug={navigation.characterSlug}
|
||||
tone="light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className={`${styles.userSlot} ${styles.revealOne}`}>
|
||||
@@ -175,6 +188,20 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<AppBottomNav
|
||||
activeItem="menu"
|
||||
privateZoomLabel={
|
||||
character?.copy.privateZoomTitle ?? "Private Zoom"
|
||||
}
|
||||
onChatClick={() =>
|
||||
navigator.push(navigation.splashUrl, { scroll: false })
|
||||
}
|
||||
onPrivateZoomClick={() =>
|
||||
navigator.push(characterRoutes.privateZoom, { scroll: false })
|
||||
}
|
||||
onMenuClick={() => undefined}
|
||||
/>
|
||||
</div>
|
||||
</MobileShell>
|
||||
);
|
||||
|
||||
@@ -22,6 +22,13 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.favoriteAction {
|
||||
position: absolute;
|
||||
top: calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px));
|
||||
right: calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px));
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@@ -2,7 +2,13 @@
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { AppBottomNav, MobileShell } from "@/app/_components/core";
|
||||
import {
|
||||
AppBottomNav,
|
||||
FavoriteEntryButton,
|
||||
MobileShell,
|
||||
} from "@/app/_components/core";
|
||||
import { buildGlobalPageUrl } from "@/router/global-route-context";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import {
|
||||
useActiveCharacter,
|
||||
@@ -45,6 +51,13 @@ export function SplashScreen() {
|
||||
navigator.push(characterRoutes.splash, { scroll: false });
|
||||
};
|
||||
|
||||
const handleOpenMenu = () => {
|
||||
navigator.push(
|
||||
buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat),
|
||||
{ scroll: false },
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
pwaUtil.prepareInstallPrompt();
|
||||
}, []);
|
||||
@@ -55,6 +68,12 @@ export function SplashScreen() {
|
||||
<SplashBackground src={character.assets.cover} />
|
||||
{/* 渐变叠加层：accent → transparent (bottom-left → center-right) */}
|
||||
<div className={styles.gradientOverlay} aria-hidden="true" />
|
||||
<div className={styles.favoriteAction}>
|
||||
<FavoriteEntryButton
|
||||
characterSlug={character.slug}
|
||||
tone="dark"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<SplashLogo />
|
||||
<div className={styles.spacer} />
|
||||
@@ -80,6 +99,7 @@ export function SplashScreen() {
|
||||
privateZoomLabel={character.copy.privateZoomTitle}
|
||||
onChatClick={handleOpenSplash}
|
||||
onPrivateZoomClick={handleOpenPrivateZoom}
|
||||
onMenuClick={handleOpenMenu}
|
||||
/>
|
||||
</div>
|
||||
</MobileShell>
|
||||
|
||||
@@ -5,7 +5,13 @@ import { UserStorage } from "@/data/storage/user/user_storage";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { UrlLauncherUtil } from "@/utils/url-launcher-util";
|
||||
|
||||
export async function openChatInExternalBrowser(): Promise<void> {
|
||||
export interface OpenChatInExternalBrowserInput {
|
||||
characterSlug?: string;
|
||||
}
|
||||
|
||||
export async function openChatInExternalBrowser({
|
||||
characterSlug,
|
||||
}: OpenChatInExternalBrowserInput = {}): Promise<void> {
|
||||
const authStorage = AuthStorage.getInstance();
|
||||
const userStorage = UserStorage.getInstance();
|
||||
const [deviceIdR, asidR, psidR, avatarUrlR] =
|
||||
@@ -21,18 +27,15 @@ export async function openChatInExternalBrowser(): Promise<void> {
|
||||
const psid = psidR.success ? psidR.data : null;
|
||||
const avatarUrl = avatarUrlR.success ? avatarUrlR.data : null;
|
||||
|
||||
if (deviceId && asid) {
|
||||
UrlLauncherUtil.openUrlWithExternalBrowser(ROUTES.externalEntry, {
|
||||
queryParams: {
|
||||
target: "chat",
|
||||
device_id: deviceId,
|
||||
asid,
|
||||
favorite: "1",
|
||||
...(characterSlug ? { character: characterSlug } : {}),
|
||||
...(deviceId ? { device_id: deviceId } : {}),
|
||||
...(asid ? { asid } : {}),
|
||||
...(psid ? { psid } : {}),
|
||||
...(avatarUrl ? { avatar_url: avatarUrl } : {}),
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
UrlLauncherUtil.openUrlWithExternalBrowser(ROUTES.splash);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
isFavoriteEntryRequest,
|
||||
resolveFavoriteEntryMode,
|
||||
} from "../favorite_entry";
|
||||
|
||||
describe("favorite external entry", () => {
|
||||
it("keeps the favorite action inside an in-app browser", () => {
|
||||
expect(
|
||||
resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent: true,
|
||||
isAndroid: true,
|
||||
isIOS: false,
|
||||
isInAppBrowser: true,
|
||||
isInstalled: false,
|
||||
}),
|
||||
).toBe("favorite");
|
||||
});
|
||||
|
||||
it("turns the external Android action into Download", () => {
|
||||
expect(
|
||||
resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent: true,
|
||||
isAndroid: true,
|
||||
isIOS: false,
|
||||
isInAppBrowser: false,
|
||||
isInstalled: false,
|
||||
}),
|
||||
).toBe("download");
|
||||
});
|
||||
|
||||
it("turns the external iOS action into Saved", () => {
|
||||
expect(
|
||||
resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent: true,
|
||||
isAndroid: false,
|
||||
isIOS: true,
|
||||
isInAppBrowser: false,
|
||||
isInstalled: false,
|
||||
}),
|
||||
).toBe("saved");
|
||||
});
|
||||
|
||||
it("treats an installed PWA as saved", () => {
|
||||
expect(
|
||||
resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent: false,
|
||||
isAndroid: true,
|
||||
isIOS: false,
|
||||
isInAppBrowser: false,
|
||||
isInstalled: true,
|
||||
}),
|
||||
).toBe("saved");
|
||||
});
|
||||
|
||||
it("accepts only the explicit favorite entry marker", () => {
|
||||
expect(isFavoriteEntryRequest("1")).toBe(true);
|
||||
expect(isFavoriteEntryRequest("true")).toBe(false);
|
||||
expect(isFavoriteEntryRequest(null)).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
export const FAVORITE_ENTRY_QUERY_PARAM = "favorite";
|
||||
export const FAVORITE_ENTRY_QUERY_VALUE = "1";
|
||||
|
||||
const FAVORITE_ENTRY_STORAGE_KEY = "cozsweet:favorite_entry";
|
||||
|
||||
export type FavoriteEntryMode = "favorite" | "download" | "saved";
|
||||
|
||||
export interface FavoriteEntryModeInput {
|
||||
hasFavoriteIntent: boolean;
|
||||
isAndroid: boolean;
|
||||
isIOS: boolean;
|
||||
isInAppBrowser: boolean;
|
||||
isInstalled: boolean;
|
||||
}
|
||||
|
||||
export function resolveFavoriteEntryMode({
|
||||
hasFavoriteIntent,
|
||||
isAndroid,
|
||||
isIOS,
|
||||
isInAppBrowser,
|
||||
isInstalled,
|
||||
}: FavoriteEntryModeInput): FavoriteEntryMode {
|
||||
if (isInAppBrowser) return "favorite";
|
||||
if (isInstalled) return "saved";
|
||||
if (!hasFavoriteIntent) return "favorite";
|
||||
if (isAndroid) return "download";
|
||||
if (isIOS) return "saved";
|
||||
return "saved";
|
||||
}
|
||||
|
||||
export function isFavoriteEntryRequest(value?: string | null): boolean {
|
||||
return value?.trim() === FAVORITE_ENTRY_QUERY_VALUE;
|
||||
}
|
||||
|
||||
export function persistFavoriteEntryIntent(): void {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(
|
||||
FAVORITE_ENTRY_STORAGE_KEY,
|
||||
FAVORITE_ENTRY_QUERY_VALUE,
|
||||
);
|
||||
}
|
||||
|
||||
export function hasPersistedFavoriteEntryIntent(): boolean {
|
||||
if (typeof window === "undefined") return false;
|
||||
return (
|
||||
window.localStorage.getItem(FAVORITE_ENTRY_STORAGE_KEY) ===
|
||||
FAVORITE_ENTRY_QUERY_VALUE
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user