From f24c0caaeade926b2eeaf2f0ab5e1aa8f03aa1f4 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Fri, 21 Jun 2024 02:47:20 +0000 Subject: [PATCH] feat(core): add ai-usage info in sidebar user avatar menu (#7294) --- .../component/src/ui/divider/divider.tsx | 1 + .../affine/auth/user-plan-button.tsx | 8 +- .../components/root-app-sidebar/index.css.ts | 47 +++++- .../components/root-app-sidebar/user-info.tsx | 141 +++++++++++++++++- packages/frontend/i18n/src/resources/en.json | 4 +- 5 files changed, 182 insertions(+), 19 deletions(-) diff --git a/packages/frontend/component/src/ui/divider/divider.tsx b/packages/frontend/component/src/ui/divider/divider.tsx index de051b5461..6a35f88932 100644 --- a/packages/frontend/component/src/ui/divider/divider.tsx +++ b/packages/frontend/component/src/ui/divider/divider.tsx @@ -25,6 +25,7 @@ export const Divider = forwardRef( ) => { return (
{ return; } - if (!plan) { - // no plan, do nothing - return; - } + const planLabel = plan ?? SubscriptionPlan.Free; return (
- {plan} + {planLabel}
); diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts index 3c1d6d782a..65e5014700 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts +++ b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts @@ -32,21 +32,46 @@ export const operationMenu = style({ flexDirection: 'column', gap: 4, }); +// TODO: refactor menu, use `gap` to replace `margin` +globalStyle(`.${operationMenu} > div:not([data-divider])`, { + marginBottom: '0 !important', + marginTop: '0 !important', +}); -export const cloudUsage = style({ +export const usageBlock = style({ display: 'flex', flexDirection: 'column', gap: 4, + borderRadius: 4, +}); +export const aiUsageBlock = style({ + padding: 12, + cursor: 'pointer', + ':hover': { + background: cssVar('hoverColor'), + }, + selectors: { + '&[data-pro]': { + padding: '12px 12px 2px 12px', + }, + }, +}); +export const cloudUsageBlock = style({ padding: '4px 12px', }); -export const cloudUsageLabel = style({ - fontWeight: 500, + +export const usageLabel = style({ + fontWeight: 400, lineHeight: '20px', fontSize: cssVar('fontXs'), color: cssVar('textSecondaryColor'), + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', }); -export const cloudUsageLabelUsed = style({ - color: progressColorVar, +export const usageLabelTitle = style({ + color: cssVar('textPrimaryColor'), + marginRight: '0.5em', }); export const cloudUsageBar = style({ @@ -54,7 +79,7 @@ export const cloudUsageBar = style({ borderRadius: 5, overflow: 'hidden', position: 'relative', - minWidth: 160, + minWidth: 260, '::before': { position: 'absolute', @@ -69,3 +94,13 @@ export const cloudUsageBarInner = style({ borderRadius: 'inherit', backgroundColor: progressColorVar, }); +export const freeTag = style({ + height: 20, + padding: '0px 4px', + borderRadius: 4, + fontWeight: 500, + fontSize: cssVar('fontXs'), + lineHeight: '20px', + color: cssVar('pureWhite'), + background: cssVar('primaryColor'), +}); diff --git a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx index cb569416f3..2b3f8c8e90 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx @@ -6,6 +6,7 @@ import { Menu, MenuIcon, MenuItem, + type MenuProps, Skeleton, } from '@affine/component'; import { @@ -18,15 +19,21 @@ import { mixpanel } from '@affine/core/utils'; import { useI18n } from '@affine/i18n'; import { AccountIcon, SignOutIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; +import { cssVar } from '@toeverything/theme'; import { assignInlineVars } from '@vanilla-extract/dynamic'; +import clsx from 'clsx'; import { useSetAtom } from 'jotai'; import { useCallback, useEffect } from 'react'; import { type AuthAccountInfo, AuthService, + ServerConfigService, + SubscriptionService, + UserCopilotQuotaService, UserQuotaService, } from '../../modules/cloud'; +import { UserPlanButton } from '../affine/auth/user-plan-button'; import * as styles from './index.css'; import { UnknownUserIcon } from './unknow-user'; @@ -40,9 +47,12 @@ export const UserInfo = () => { ); }; +const menuContentOptions: MenuProps['contentOptions'] = { + className: styles.operationMenu, +}; const AuthorizedUserInfo = ({ account }: { account: AuthAccountInfo }) => { return ( - }> + } contentOptions={menuContentOptions}>