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:
@@ -23,6 +23,7 @@ import {
|
||||
SUBSCRIPTION_PLANS,
|
||||
type SubscriptionPlanId,
|
||||
} from "@/data/constants/subscription-plans";
|
||||
import { VIP_BENEFITS } from "@/data/constants/vip-benefits";
|
||||
import { useUserState } from "@/stores/user/user-context";
|
||||
|
||||
import { SubscriptionBackLink } from "./subscription-back-link";
|
||||
@@ -34,13 +35,6 @@ import { SubscriptionPlanCard } from "./subscription-plan-card";
|
||||
import { SubscriptionUserRow } from "./subscription-user-row";
|
||||
import styles from "./subscription-screen.module.css";
|
||||
|
||||
const VIP_BENEFITS = [
|
||||
"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;
|
||||
|
||||
const FALLBACK_USERNAME = "User name";
|
||||
|
||||
export function SubscriptionScreen() {
|
||||
|
||||
Reference in New Issue
Block a user