feat(core): add account subscription status (#4707)

packages/frontend/core/src/components/affine/auth/style.css.ts

@@ -62,3 +62,17 @@ export const accessMessage = style({
   marginTop: 65,
   marginBottom: 40,
 });
+
+export const userPlanButton = style({
+  display: 'flex',
+  fontSize: 'var(--affine-font-xs)',
+  height: 20,
+  fontWeight: 500,
+  cursor: 'pointer',
+  color: 'var(--affine-pure-white)',
+  backgroundColor: 'var(--affine-brand-color)',
+  padding: '0 4px',
+  borderRadius: 4,
+  justifyContent: 'center',
+  alignItems: 'center',
+});

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -0,0 +1,34 @@
+import { SubscriptionPlan } from '@affine/graphql';
+import Tooltip from '@toeverything/components/tooltip';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import { openSettingModalAtom } from '../../../atoms';
+import { useUserSubscription } from '../../../hooks/use-subscription';
+import * as styles from './style.css';
+
+export const UserPlanButton = () => {
+  const [subscription] = useUserSubscription();
+  const plan = subscription?.plan ?? SubscriptionPlan.Free;
+
+  const setSettingModalAtom = useSetAtom(openSettingModalAtom);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      setSettingModalAtom({
+        open: true,
+        activeTab: 'plans',
+        workspaceId: null,
+      });
+    },
+    [setSettingModalAtom]
+  );
+
+  return (
+    <Tooltip content={'See all plans'} side="top">
+      <div className={styles.userPlanButton} onClick={handleClick}>
+        {plan}
+      </div>
+    </Tooltip>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -20,6 +20,7 @@ import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import { UserPlanButton } from '../../auth/user-plan-button';
 import type {
   GeneralSettingKeys,
   GeneralSettingList,
@@ -52,9 +53,13 @@ export const UserInfo = ({
       <Avatar size={28} name={user.name} url={user.image} className="avatar" />
 
       <div className="content">
-        <div className="name" title={user.name}>
+        <div className="name-container">
-          {user.name}
+          <div className="name" title={user.name}>
+            {user.name}
+          </div>
+          <UserPlanButton />
         </div>
+
         <div className="email" title={user.email}>
           {user.email}
         </div>

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts

@@ -94,7 +94,6 @@ export const currentWorkspaceLabel = style({
 export const sidebarFooter = style({ padding: '0 16px' });
 
 export const accountButton = style({
-  height: '42px',
   padding: '4px 8px',
   borderRadius: '8px',
   cursor: 'pointer',
@@ -129,13 +128,21 @@ globalStyle(`${accountButton} .content`, {
   flexGrow: '1',
   minWidth: 0,
 });
+globalStyle(`${accountButton} .name-container`, {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  width: '100%',
+  gap: '4px',
+  height: '22px',
+});
 globalStyle(`${accountButton} .name`, {
   fontSize: 'var(--affine-font-sm)',
   fontWeight: 600,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  flexGrow: 1,
+  height: '22px',
 });
 globalStyle(`${accountButton} .email`, {
   fontSize: 'var(--affine-font-xs)',
@@ -144,4 +151,5 @@ globalStyle(`${accountButton} .email`, {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   flexGrow: 1,
+  height: '20px',
 });

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts

@@ -3,9 +3,10 @@ import { style } from '@vanilla-extract/css';
 export const userAccountContainer = style({
   display: 'flex',
   padding: '4px 0px 4px 12px',
-  gap: '12px',
+  gap: '8px',
   alignItems: 'center',
   justifyContent: 'space-between',
+  width: '100%',
 });
 export const userEmail = style({
   fontSize: 'var(--affine-font-sm)',
@@ -14,5 +15,12 @@ export const userEmail = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  maxWidth: 'calc(100% - 36px)',
+});
+
+export const leftContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  width: '100%',
+  overflow: 'hidden',
 });

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx

@@ -14,6 +14,7 @@ import {
   openSettingModalAtom,
   openSignOutModalAtom,
 } from '../../../../../atoms';
+import { UserPlanButton } from '../../../../affine/auth/user-plan-button';
 import * as styles from './index.css';
 
 const AccountMenu = ({ onEventEnd }: { onEventEnd?: () => void }) => {
@@ -73,7 +74,10 @@ export const UserAccountItem = ({
 }) => {
   return (
     <div className={styles.userAccountContainer}>
-      <div className={styles.userEmail}>{email}</div>
+      <div className={styles.leftContainer}>
+        <div className={styles.userEmail}>{email}</div>
+        <UserPlanButton />
+      </div>
       <Menu
         items={<AccountMenu onEventEnd={onEventEnd} />}
         contentOptions={{