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.stories.tsx

@@ -58,3 +58,14 @@ WithRemove.args = {
     console.log('on remove', e);
   },
 };
+
+const img =
+  'data:image/png;base64,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
Line truncated
+
+export const CustomizeBorderRadius: StoryFn<AvatarProps> = args => (
+  <div style={{ display: 'flex', gap: 4 }}>
+    <Avatar {...args} size={60} colorfulFallback name="AFFiNE" rounded={10} />
+    <Avatar {...args} size={60} url={img} rounded="10px" />
+    <Avatar {...args} size={60} rounded={'5%'} name="C" />
+  </div>
+);

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',