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