feat(chat-header): update guest chat layout and link to character splash

This commit is contained in:
2026-07-17 16:29:37 +08:00
parent d545c3653f
commit 8a53a07e0e
2 changed files with 51 additions and 25 deletions
+31 -23
View File
@@ -50,31 +50,39 @@ export function ChatHeader({
offerBanner
)}
{!isGuest ? (
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)">
<BackButton
href={characterRoutes.splash}
variant="dark"
ariaLabel="Back to home"
analyticsKey="chat.back_to_home"
/>
<div
className={
isGuest
? "flex items-center px-(--spacing-md,12px) py-(--spacing-sm,8px)"
: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)"
}
>
<BackButton
href={characterRoutes.splash}
variant="dark"
ariaLabel="Back to home"
analyticsKey="chat.back_to_home"
/>
<div className="flex min-w-0 justify-center">
{showBrowserHint ? <BrowserHintOverlay /> : null}
</div>
{!isGuest ? (
<>
<div className="flex min-w-0 justify-center">
{showBrowserHint ? <BrowserHintOverlay /> : null}
</div>
<button
type="button"
data-analytics-key="chat.open_menu"
data-analytics-label="Open chat menu"
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(characterRoutes.sidebar)}
aria-label="Menu"
>
<Menu size={24} aria-hidden="true" />
</button>
</div>
) : null}
<button
type="button"
data-analytics-key="chat.open_menu"
data-analytics-label="Open chat menu"
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(characterRoutes.sidebar)}
aria-label="Menu"
>
<Menu size={24} aria-hidden="true" />
</button>
</>
) : null}
</div>
</header>
);
}