feat(sidebar): redesign sidebar UI with three user states (light theme)

Replace the dark sidebar theme with a light-themed three-state UI
matching the design references:

- guest  : pink "login" pill in user row, no status pill on VIP card,
           "Activate VIP Membership" button shown
- member : "VIP membership not activated" subtitle, no status pill,
           "Activate VIP Membership" button shown
- vip    : pink "VIP Member" pill with diamond icon, "Activated" pill
           in VIP card header, no Activate button

Decompose into BackBar, UserHeader, VipBenefitsCard, and VoicePackageCard
under src/app/sidebar/components/. Delete obsolete GuestPanel,
UserInfoCard, and VipCta.

Lift VIP_BENEFITS to a shared src/data/constants/vip-benefits.ts so the
sidebar and subscription page render identical benefit copy.

Add five sidebar tokens (--color-card-surface, --color-voice-gradient-*
--border-card, --shadow-card, --color-pill-bg) to src/tokens/colors.css.

Includes barrelsby regeneration for src/app/sidebar/components and
side-effect barrel updates under src/stores/{auth,chat,sidebar,user},
plus package-lock.json from npm install (required for lint/typecheck).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-06-16 10:25:04 +08:00
parent 0548a08cbb
commit e44cc7e2f3
22 changed files with 10240 additions and 559 deletions
+12
View File
@@ -0,0 +1,12 @@
/**
* VIP 会员权益文案
*
* 共享常量:侧边栏 (`/sidebar`) 与订阅页 (`/subscription`) 都引用,
* 保持两处文案一致。
*/
export const VIP_BENEFITS: readonly string[] = [
"Unlimited chat sessions per day",
"Unlimited free access to private messages",
"Unlimited access to AI boyfriend photos",
"Free voice chat for X minutes",
] as const;