feat(core): believer subscription UI (#7431)

feat(core): switch ai and cloud plans position

feat(core): impl lifetime subscription ui

feat(core): adapt ui for lifetime status

feat(core): add believer card in billing page

packages/frontend/component/src/components/card/workspace-card/index.tsx

@@ -6,7 +6,6 @@ import type { WorkspaceMetadata } from '@toeverything/infra';
 import clsx from 'clsx';
 import { type MouseEvent, useCallback } from 'react';
 
-import { type AvatarProps } from '../../../ui/avatar';
 import { Button } from '../../../ui/button';
 import { Skeleton } from '../../../ui/skeleton';
 import * as styles from './styles.css';
@@ -44,9 +43,6 @@ export const WorkspaceCardSkeleton = () => {
   );
 };
 
-const avatarImageProps = {
-  style: { borderRadius: 3, overflow: 'hidden' },
-} satisfies AvatarProps['imageProps'];
 export const WorkspaceCard = ({
   onClick,
   onSettingClick,
@@ -80,8 +76,7 @@ export const WorkspaceCard = ({
       <WorkspaceAvatar
         key={meta.id}
         meta={meta}
-        imageProps={avatarImageProps}
-        fallbackProps={avatarImageProps}
+        rounded={3}
         size={28}
         name={name}
         colorfulFallback

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -25,6 +25,7 @@ import {
   useState,
 } from 'react';
 
+import { withUnit } from '../../utils/with-unit';
 import { IconButton } from '../button';
 import type { TooltipProps } from '../tooltip';
 import { Tooltip } from '../tooltip';
@@ -44,6 +45,11 @@ export type AvatarProps = {
   onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
   avatarTooltipOptions?: Omit<TooltipProps, 'children'>;
   removeTooltipOptions?: Omit<TooltipProps, 'children'>;
+  /**
+   * Same as `CSS.borderRadius`, number in px or string with unit
+   * @default '50%'
+   */
+  rounded?: number | string;
 
   fallbackProps?: AvatarFallbackProps;
   imageProps?: Omit<
@@ -92,6 +98,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
       fallbackProps: { className: fallbackClassName, ...fallbackProps } = {},
       imageProps,
       avatarProps,
+      rounded = '50%',
       onRemove,
       hoverWrapperProps: {
         className: hoverWrapperClassName,
@@ -144,6 +151,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
               ...assignInlineVars({
                 [sizeVar]: size ? `${size}px` : '20px',
                 [blurVar]: `${size * 0.3}px`,
+                borderRadius: withUnit(rounded, 'px'),
               }),
               ...propsStyles,
             }}

packages/frontend/component/src/ui/avatar/style.css.ts

@@ -144,17 +144,16 @@ export const avatarWrapper = style({
   verticalAlign: 'middle',
   userSelect: 'none',
   position: 'relative',
+  overflow: 'hidden',
 });
 export const avatarImage = style({
   width: '100%',
   height: '100%',
   objectFit: 'cover',
-  borderRadius: '50%',
 });
 export const avatarFallback = style({
   width: '100%',
   height: '100%',
-  borderRadius: '50%',
   overflow: 'hidden',
   display: 'flex',
   alignItems: 'center',
@@ -167,7 +166,6 @@ export const avatarFallback = style({
 export const hoverWrapper = style({
   width: '100%',
   height: '100%',
-  borderRadius: '50%',
   position: 'absolute',
   display: 'flex',
   justifyContent: 'center',