feat(subscription): split vip and topup flows

src/app/sidebar/sidebar-screen.tsx

@@ -20,23 +20,8 @@ import styles from "./components/sidebar-screen.module.css";
 
 const FALLBACK_USERNAME = "User name";
 const VIP_SUBSCRIPTION_URL = `${ROUTES.subscription}?type=vip`;
+const TOP_UP_SUBSCRIPTION_URL = `${ROUTES.subscription}?type=topup`;
 
-const STATUS_LABELS: Record<SidebarUserState, string> = {
-  guest: "Sign in to keep your coins and unlock more features.",
-  member: "Manage your wallet, subscription and account settings.",
-  vip: "Your VIP benefits are active. Enjoy the full experience.",
-};
-
-/**
- * 侧边栏主屏幕
- *
- * 根据 `loginStatus + currentUser.isVip` 派生三种状态：
- *   - guest：未登录
- *   - member：已登录未购买 VIP
- *   - vip：已登录且购买 VIP
- *
- * 
- */
 export function SidebarScreen() {
   const router = useRouter();
   const user = useUserState();
@@ -74,12 +59,6 @@ export function SidebarScreen() {
           <BackBar />
         </div>
 
-        <section className={styles.hero}>
-          <p className={styles.kicker}>Cozsweet</p>
-          <h1 className={styles.title}>Account</h1>
-          <p className={styles.subtitle}>{STATUS_LABELS[sidebarState]}</p>
-        </section>
-
         <section className={`${styles.userSlot} ${styles.revealOne}`}>
           <UserHeader
             state={sidebarState}
@@ -93,21 +72,16 @@ export function SidebarScreen() {
         <section className={`${styles.cardSlot} ${styles.revealTwo}`}>
           <SidebarWalletCard
             creditBalance={user.creditBalance}
-            onTopUp={() => router.push(VIP_SUBSCRIPTION_URL)}
+            onActivateVip={
+              sidebarState === "vip"
+                ? undefined
+                : () => router.push(VIP_SUBSCRIPTION_URL)
+            }
+            onTopUp={() => router.push(TOP_UP_SUBSCRIPTION_URL)}
             onRulesClick={() => router.push(ROUTES.coinsRules)}
           />
         </section>
 
-        {/*
-        <section className={styles.cardSlot}>
-          <VoicePackageCard
-            usedMinutes={0}
-            totalMinutes={0}
-            onBuyPackage={() => router.push(VOICE_SUBSCRIPTION_URL)}
-          />
-        </section>
-        */}
-
         {sidebarState !== "guest" ? (
           <section className={`${styles.settingsSlot} ${styles.revealThree}`}>
             <p className={styles.settingsLabel}>Other</p>