feat: support remove user & workspace avatar (#4302)

2024-12-23 17:22:18 +03:00 · 2023-09-14 22:35:05 +08:00 · 2023-09-14 22:35:05 +08:00 · 465098cc9a
commit 465098cc9a
parent e1a330a0a6
40 changed files with 504 additions and 808 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@ -39,7 +39,7 @@
    "@mui/material": "^5.14.7",
    "@radix-ui/react-select": "^1.2.2",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.38",
+    "@toeverything/components": "^0.0.41",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/components/affine/create-workspace-modal/index.css.ts
+++ b/apps/core/src/components/affine/create-workspace-modal/index.css.ts
@ -2,7 +2,7 @@ import { globalStyle, style } from '@vanilla-extract/css';

 export const header = style({
  position: 'relative',
-  height: '44px',
+  marginTop: '44px',
 });

 export const content = style({
--- a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
@ -1,17 +1,16 @@
 import { FlexWrapper, Input, Wrapper } from '@affine/component';
 import { pushNotificationAtom } from '@affine/component/notification-center';
-import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CameraIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
 import { Button } from '@toeverything/components/button';
-import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
 import {
  type KeyboardEvent,
+  type MouseEvent,
  startTransition,
  useCallback,
  useState,
@ -29,7 +28,7 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
  const t = useAFFiNEI18N();
  const pushNotification = useSetAtom(pushNotificationAtom);

-  const [, update] = useBlockSuiteWorkspaceAvatarUrl(
+  const [workspaceAvatar, update] = useBlockSuiteWorkspaceAvatarUrl(
    workspace.blockSuiteWorkspace
  );

@ -38,8 +37,6 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
  );

  const [input, setInput] = useState<string>(name);
-  const [tooltipContainer, setTooltipContainer] =
-    useState<HTMLDivElement | null>(null);

  const handleUpdateWorkspaceName = useCallback(
    (name: string) => {
@ -71,35 +68,38 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
    handleUpdateWorkspaceName(input);
  }, [handleUpdateWorkspaceName, input]);

+  const handleRemoveUserAvatar = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      await update(null);
+    },
+    [update]
+  );
  return (
    <div className={style.profileWrapper}>
-      <Tooltip
-        content={t['Click to replace photo']()}
-        portalOptions={{
-          container: tooltipContainer,
-        }}
+      <Upload
+        accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+        fileChange={update}
+        data-testid="upload-avatar"
+        disabled={!isOwner}
      >
-        <div
-          className={clsx(style.avatarWrapper, { disable: !isOwner })}
-          ref={setTooltipContainer}
-        >
-          <Upload
-            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-            fileChange={update}
-            data-testid="upload-avatar"
-          >
-            <>
-              <div className="camera-icon-wrapper">
-                <CameraIcon />
-              </div>
-              <WorkspaceAvatar
-                size={56}
-                workspace={workspace.blockSuiteWorkspace}
-              />
-            </>
-          </Upload>
-        </div>
-      </Tooltip>
+        <Avatar
+          size={56}
+          url={workspaceAvatar}
+          name={name}
+          colorfulFallback
+          hoverIcon={isOwner ? <CameraIcon /> : undefined}
+          onRemove={
+            workspaceAvatar && isOwner ? handleRemoveUserAvatar : undefined
+          }
+          avatarTooltipOptions={{ content: t['Click to replace photo']() }}
+          removeTooltipOptions={{ content: t['Remove photo']() }}
+          data-testid="workspace-setting-avatar"
+          removeButtonProps={{
+            ['data-testid' as string]: 'workspace-setting-remove-avatar-button',
+          }}
+        />
+      </Upload>

      <Wrapper marginLeft={20}>
        <div className={style.label}>{t['Workspace Name']()}</div>
--- a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
@ -4,15 +4,24 @@ import {
  SettingRow,
  StorageProgress,
 } from '@affine/component/setting-components';
-import { UserAvatar } from '@affine/component/user-avatar';
-import { allBlobSizesQuery, uploadAvatarMutation } from '@affine/graphql';
+import {
+  allBlobSizesQuery,
+  removeAvatarMutation,
+  uploadAvatarMutation,
+} from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
 import { Button } from '@toeverything/components/button';
-import { Tooltip } from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai';
-import { type FC, Suspense, useCallback, useState } from 'react';
+import {
+  type FC,
+  type MouseEvent,
+  Suspense,
+  useCallback,
+  useState,
+} from 'react';

 import { authAtom } from '../../../../atoms';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
@ -21,24 +30,16 @@ import { signOutCloud } from '../../../../utils/cloud-utils';
 import { Upload } from '../../../pure/file-upload';
 import * as style from './style.css';

-export const AvatarAndName = () => {
+export const UserAvatar = () => {
  const t = useAFFiNEI18N();
  const user = useCurrentUser();

-  const [tooltipContainer, setTooltipContainer] =
-    useState<HTMLDivElement | null>(null);
-  const [input, setInput] = useState<string>(user.name);
-
  const { trigger: avatarTrigger } = useMutation({
    mutation: uploadAvatarMutation,
  });
-
-  const handleUpdateUserName = useCallback(
-    (newName: string) => {
-      user.update({ name: newName }).catch(console.error);
-    },
-    [user]
-  );
+  const { trigger: removeAvatarTrigger } = useMutation({
+    mutation: removeAvatarMutation,
+  });

  const handleUpdateUserAvatar = useCallback(
    async (file: File) => {
@ -51,6 +52,50 @@ export const AvatarAndName = () => {
    },
    [avatarTrigger, user]
  );
+  const handleRemoveUserAvatar = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      await removeAvatarTrigger();
+      // XXX: This is a hack to force the user to update, since next-auth can not only use update function without params
+      user.update({ name: user.name }).catch(console.error);
+    },
+    [removeAvatarTrigger, user]
+  );
+  return (
+    <Upload
+      accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+      fileChange={handleUpdateUserAvatar}
+      data-testid="upload-user-avatar"
+    >
+      <Avatar
+        size={56}
+        name={user.name}
+        url={user.image}
+        hoverIcon={<CameraIcon />}
+        onRemove={user.image ? handleRemoveUserAvatar : undefined}
+        avatarTooltipOptions={{ content: t['Click to replace photo']() }}
+        removeTooltipOptions={{ content: t['Remove photo']() }}
+        data-testid="user-setting-avatar"
+        removeButtonProps={{
+          ['data-testid' as string]: 'user-setting-remove-avatar-button',
+        }}
+      />
+    </Upload>
+  );
+};
+
+export const AvatarAndName = () => {
+  const t = useAFFiNEI18N();
+  const user = useCurrentUser();
+  const [input, setInput] = useState<string>(user.name);
+
+  const handleUpdateUserName = useCallback(
+    (newName: string) => {
+      user.update({ name: newName }).catch(console.error);
+    },
+    [user]
+  );
+
  return (
    <>
      <SettingRow
@ -59,32 +104,9 @@ export const AvatarAndName = () => {
        spreadCol={false}
      >
        <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
-          <Tooltip
-            content={t['Click to replace photo']()}
-            portalOptions={{
-              container: tooltipContainer,
-            }}
-          >
-            <div className={style.avatarWrapper} ref={setTooltipContainer}>
-              <Upload
-                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-                fileChange={handleUpdateUserAvatar}
-                data-testid="upload-user-avatar"
-              >
-                <>
-                  <div className="camera-icon-wrapper">
-                    <CameraIcon />
-                  </div>
-                  <UserAvatar
-                    size={56}
-                    name={user.name}
-                    url={user.image}
-                    className="avatar"
-                  />
-                </>
-              </Upload>
-            </div>
-          </Tooltip>
+          <Suspense>
+            <UserAvatar />
+          </Suspense>

          <div className={style.profileInputWrapper}>
            <label>{t['com.affine.settings.profile.name']()}</label>
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@ -2,14 +2,14 @@ import {
  WorkspaceListItemSkeleton,
  WorkspaceListSkeleton,
 } from '@affine/component/setting-components';
-import { UserAvatar } from '@affine/component/user-avatar';
-import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { Logo1Icon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
 import { Tooltip } from '@toeverything/components/tooltip';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
@ -55,11 +55,13 @@ export const UserInfo = ({
      className={accountButton}
      onClick={onAccountSettingClick}
    >
-      <UserAvatar
+      <Avatar
        size={28}
        name={user.name}
        url={user.image}
-        className="avatar"
+        style={{
+          marginRight: '10px',
+        }}
      />

      <div className="content">
@ -221,6 +223,7 @@ const WorkspaceListItem = ({
  isActive: boolean;
 }) => {
  const workspace = useStaticBlockSuiteWorkspace(meta.id);
+  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
  const ref = useRef(null);

@ -232,7 +235,15 @@ const WorkspaceListItem = ({
      data-testid="workspace-list-item"
      ref={ref}
    >
-      <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
+      <Avatar
+        size={14}
+        url={workspaceAvatar}
+        name={workspaceName}
+        colorfulFallback
+        style={{
+          marginRight: '10px',
+        }}
+      />
      <span className="setting-name">{workspaceName}</span>
      {isCurrent ? (
        <Tooltip
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
@ -62,12 +62,6 @@ export const sidebarSelectItem = style({
  },
 });

-globalStyle(`${settingSlideBar} .icon`, {
-  width: '16px',
-  height: '16px',
-  marginRight: '10px',
-  flexShrink: 0,
-});
 globalStyle(`${settingSlideBar} .setting-name`, {
  minWidth: 0,
  overflow: 'hidden',
@ -108,13 +102,6 @@ export const accountButton = style({
  },
 });

-globalStyle(`${accountButton} .avatar`, {
-  border: '1px solid',
-  borderColor: 'var(--affine-white)',
-  marginRight: '10px',
-  flexShrink: 0,
-});
-
 globalStyle(`${accountButton} .avatar.not-sign`, {
  width: '28px',
  height: '28px',
--- a/apps/core/src/components/cloud/login-card.tsx
+++ b/apps/core/src/components/cloud/login-card.tsx
@ -1,6 +1,6 @@
-import { UserAvatar } from '@affine/component/user-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloudWorkspaceIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';

 import { useCurrentLoginStatus } from '../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../hooks/affine/use-current-user';
@ -37,12 +37,7 @@ const UserCard = () => {
        alignItems: 'center',
      }}
    >
-      <UserAvatar
-        size={28}
-        name={user.name}
-        url={user.image}
-        className="avatar"
-      />
+      <Avatar size={28} name={user.name} url={user.image} />
      <div style={{ marginLeft: '15px' }}>
        <div>{user.name}</div>
        <div>{user.email}</div>
--- a/apps/core/src/components/pure/file-upload/index.tsx
+++ b/apps/core/src/components/pure/file-upload/index.tsx
@ -8,12 +8,14 @@ export interface UploadProps {
  uploadType?: string;
  accept?: string;
  fileChange: (file: File) => void;
+  disabled?: boolean;
 }

 export const Upload = ({
  fileChange,
  accept,
  children,
+  disabled,
  ...props
 }: PropsWithChildren<UploadProps>) => {
  const t = useAFFiNEI18N();
@ -35,6 +37,10 @@ export const Upload = ({
    }
  };

+  if (disabled) {
+    return children ?? <Button>{t['Upload']()}</Button>;
+  }
+
  return (
    <UploadStyle onClick={_chooseFile}>
      {children ?? <Button>{t['Upload']()}</Button>}
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.ts
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.ts
@ -1 +0,0 @@
-export * from './workspace-selector';
--- a/apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
@ -3,9 +3,10 @@ import type {
  AffineCloudWorkspace,
  LocalWorkspace,
 } from '@affine/env/workspace';
-import { WorkspaceFlavour } from '@affine/env/workspace';
+import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import {
  AccountIcon,
  ImportIcon,
@ -15,23 +16,28 @@ import {
  SignOutIcon,
 } from '@blocksuite/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
-import { Popover } from '@mui/material';
+import { arrayMove } from '@dnd-kit/sortable';
 import { IconButton } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
 import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
-import { useSetAtom } from 'jotai';
+import {
+  currentPageIdAtom,
+  currentWorkspaceIdAtom,
+} from '@toeverything/infra/atom';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
-import { useCallback } from 'react';
+import { startTransition, useCallback, useMemo, useTransition } from 'react';

 import {
  authAtom,
+  openCreateWorkspaceModalAtom,
  openDisableCloudAlertModalAtom,
  openSettingModalAtom,
-} from '../../../atoms';
-import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
-import type { AllWorkspace } from '../../../shared';
-import { signOutCloud } from '../../../utils/cloud-utils';
+} from '../../../../atoms';
+import type { AllWorkspace } from '../../../../shared';
+import { signOutCloud } from '../../../../utils/cloud-utils';
+import { useNavigateHelper } from '../.././../../hooks/use-navigate-helper';
 import {
  StyledCreateWorkspaceCardPill,
  StyledCreateWorkspaceCardPillContent,
@ -57,8 +63,6 @@ interface WorkspaceModalProps {
  disabled?: boolean;
  workspaces: RootWorkspaceMetadata[];
  currentWorkspaceId: AllWorkspace['id'] | null;
-  open: boolean;
-  onClose: () => void;
  onClickWorkspace: (workspace: RootWorkspaceMetadata['id']) => void;
  onClickWorkspaceSetting: (workspace: RootWorkspaceMetadata['id']) => void;
  onNewWorkspace: () => void;
@ -66,10 +70,15 @@ interface WorkspaceModalProps {
  onMoveWorkspace: (activeId: string, overId: string) => void;
 }

-const AccountMenu = () => {
+const AccountMenu = ({
+  onOpenAccountSetting,
+  onSignOut,
+}: {
+  onOpenAccountSetting: () => void;
+  onSignOut: () => void;
+}) => {
  const t = useAFFiNEI18N();
-  const setOpen = useSetAtom(openSettingModalAtom);
-  const { jumpToIndex } = useNavigateHelper();
+
  return (
    <div>
      <MenuItem
@ -79,9 +88,7 @@ const AccountMenu = () => {
          </MenuIcon>
        }
        data-testid="editor-option-menu-import"
-        onClick={useCallback(() => {
-          setOpen(prev => ({ ...prev, open: true, activeTab: 'account' }));
-        }, [setOpen])}
+        onClick={onOpenAccountSetting}
      >
        {t['com.affine.workspace.cloud.account.settings']()}
      </MenuItem>
@ -93,13 +100,7 @@ const AccountMenu = () => {
          </MenuIcon>
        }
        data-testid="editor-option-menu-import"
-        onClick={useCallback(() => {
-          signOutCloud()
-            .then(() => {
-              jumpToIndex();
-            })
-            .catch(console.error);
-        }, [jumpToIndex])}
+        onClick={onSignOut}
      >
        {t['com.affine.workspace.cloud.account.logout']()}
      </MenuItem>
@ -152,52 +153,108 @@ const CloudWorkSpaceList = ({
  );
 };

-export const WorkspaceListModal = ({
-  disabled,
-  open,
-  onClose,
-  workspaces,
-  onClickWorkspace,
-  onClickWorkspaceSetting,
-  onNewWorkspace,
-  onAddWorkspace,
-  currentWorkspaceId,
-  onMoveWorkspace,
-}: WorkspaceModalProps) => {
+export const UserWithWorkspaceList = ({
+  onEventEnd,
+}: {
+  onEventEnd?: () => void;
+}) => {
+  const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
+
+  const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom, {
+    delay: 0,
+  });
+  const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
+    currentWorkspaceIdAtom
+  );
+  const setCurrentPageId = useSetAtom(currentPageIdAtom);
+  const [, startCloseTransition] = useTransition();
+  const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
+  const setSettingModalAtom = useSetAtom(openSettingModalAtom);
+
  const t = useAFFiNEI18N();
  const setOpen = useSetAtom(authAtom);
  const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
  // TODO: AFFiNE Cloud support
  const { data: session, status } = useSession();
-  const isLoggedIn = status === 'authenticated' ? true : false;
-  const anchorEl = document.getElementById('current-workspace');
-  const cloudWorkspaces = workspaces.filter(
-    ({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
-  ) as (AffineCloudWorkspace | LocalWorkspace)[];
-  const localWorkspaces = workspaces.filter(
-    ({ flavour }) => flavour === WorkspaceFlavour.LOCAL
-  ) as (AffineCloudWorkspace | LocalWorkspace)[];
-  // FIXME: replace mui popover
+  const isLoggedIn = useMemo(() => status === 'authenticated', [status]);
+  const cloudWorkspaces = useMemo(
+    () =>
+      workspaces.filter(
+        ({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
+      ) as (AffineCloudWorkspace | LocalWorkspace)[],
+    [workspaces]
+  );
+  const localWorkspaces = useMemo(
+    () =>
+      workspaces.filter(
+        ({ flavour }) => flavour === WorkspaceFlavour.LOCAL
+      ) as (AffineCloudWorkspace | LocalWorkspace)[],
+    [workspaces]
+  );
+
+  const onClickWorkspaceSetting = useCallback(
+    (workspaceId: string) => {
+      setOpenSettingModalAtom({
+        open: true,
+        activeTab: 'workspace',
+        workspaceId,
+      });
+      onEventEnd?.();
+    },
+    [onEventEnd, setOpenSettingModalAtom]
+  );
+
+  const onMoveWorkspace = useCallback(
+    (activeId: string, overId: string) => {
+      const oldIndex = workspaces.findIndex(w => w.id === activeId);
+      const newIndex = workspaces.findIndex(w => w.id === overId);
+      startTransition(() => {
+        setWorkspaces(workspaces => arrayMove(workspaces, oldIndex, newIndex));
+      });
+    },
+    [setWorkspaces, workspaces]
+  );
+  const onClickWorkspace = useCallback(
+    (workspaceId: string) => {
+      startCloseTransition(() => {
+        setCurrentWorkspaceId(workspaceId);
+        setCurrentPageId(null);
+        jumpToSubPath(workspaceId, WorkspaceSubPath.ALL);
+      });
+      onEventEnd?.();
+    },
+    [jumpToSubPath, onEventEnd, setCurrentPageId, setCurrentWorkspaceId]
+  );
+  const onNewWorkspace = useCallback(() => {
+    setOpenCreateWorkspaceModal('new');
+    onEventEnd?.();
+  }, [onEventEnd, setOpenCreateWorkspaceModal]);
+  const onAddWorkspace = useCallback(async () => {
+    setOpenCreateWorkspaceModal('add');
+    onEventEnd?.();
+  }, [onEventEnd, setOpenCreateWorkspaceModal]);
+
+  const onOpenAccountSetting = useCallback(() => {
+    setSettingModalAtom(prev => ({
+      ...prev,
+      open: true,
+      activeTab: 'account',
+    }));
+    onEventEnd?.();
+  }, [onEventEnd, setSettingModalAtom]);
+  const onSignOut = useCallback(async () => {
+    signOutCloud()
+      .then(() => {
+        jumpToIndex();
+      })
+      .catch(console.error);
+    onEventEnd?.();
+  }, [onEventEnd, jumpToIndex]);
+
  return (
-    <Popover
-      sx={{
-        color: 'success.main',
-        zIndex: 999,
-        '& .MuiPopover-paper': {
-          borderRadius: '8px',
-          display: 'flex',
-          flexDirection: 'column',
-          boxShadow: 'var(--affine-shadow-2)',
-          backgroundColor: 'var(--affine-background-overlay-panel-color)',
-          padding: '16px 12px',
-        },
-        maxHeight: '90vh',
-      }}
-      open={open}
-      anchorEl={anchorEl}
-      onClose={onClose}
-      disableEnforceFocus
-    >
+    <>
      {!isLoggedIn ? (
        <StyledModalHeaderContent>
          <StyledSignInCardPill>
@ -211,7 +268,6 @@ export const WorkspaceListModal = ({
                    openModal: true,
                  }));
                }
-                onClose();
              }}
              data-testid="cloud-signin-button"
            >
@ -242,7 +298,12 @@ export const WorkspaceListModal = ({
            <StyledModalTitle>{session?.user.email}</StyledModalTitle>
            <StyledOperationWrapper>
              <Menu
-                items={<AccountMenu />}
+                items={
+                  <AccountMenu
+                    onOpenAccountSetting={onOpenAccountSetting}
+                    onSignOut={onSignOut}
+                  />
+                }
                contentOptions={{
                  side: 'right',
                  sideOffset: 30,
@ -263,9 +324,6 @@ export const WorkspaceListModal = ({
        {isLoggedIn && cloudWorkspaces.length !== 0 ? (
          <>
            <CloudWorkSpaceList
-              disabled={disabled}
-              open={open}
-              onClose={onClose}
              workspaces={workspaces}
              onClickWorkspace={onClickWorkspace}
              onClickWorkspaceSetting={onClickWorkspaceSetting}
@ -288,7 +346,6 @@ export const WorkspaceListModal = ({
        </StyledModalHeader>
        <StyledModalContent>
          <WorkspaceList
-            disabled={disabled}
            items={localWorkspaces}
            currentWorkspaceId={currentWorkspaceId}
            onClick={onClickWorkspace}
@ -335,6 +392,6 @@ export const WorkspaceListModal = ({
          </StyledItem>
        </StyledCreateWorkspaceCardPill>
      </StyledModalFooterContent>
-    </Popover>
+    </>
  );
 };
--- a/apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/styles.ts
+++ b/apps/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/styles.ts
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.css.ts
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.css.ts
@ -1,7 +1,4 @@
 import { createVar, keyframes, style } from '@vanilla-extract/css';
-export const workspaceAvatarStyle = style({
-  flexShrink: 0,
-});

 export const speedVar = createVar('speedVar');

--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
@ -1,4 +1,3 @@
-import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import {
  CloudWorkspaceIcon,
@ -6,11 +5,14 @@ import {
  NoNetworkIcon,
  UnsyncIcon,
 } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
 import { Tooltip } from '@toeverything/components/tooltip';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atom, useSetAtom } from 'jotai';
 import {
-  type KeyboardEvent,
+  forwardRef,
+  type HTMLAttributes,
  type MouseEvent,
  useCallback,
  useMemo,
@ -20,7 +22,6 @@ import {
 import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
 import { useSystemOnline } from '../../../../hooks/use-system-online';
 import type { AllWorkspace } from '../../../../shared';
-import { workspaceAvatarStyle } from './index.css';
 import { Loading } from './loading-icon';
 import {
  StyledSelectorContainer,
@ -29,13 +30,10 @@ import {
  StyledWorkspaceStatus,
 } from './styles';

-export interface WorkspaceSelectorProps {
-  currentWorkspace: AllWorkspace;
-  onClick: () => void;
-}
-
 const hoverAtom = atom(false);
-
+// FIXME:
+// 1. Remove mui style
+// 2. Refactor the code to improve readability
 const CloudWorkspaceStatus = () => {
  return (
    <>
@ -161,47 +159,37 @@ const WorkspaceStatus = ({
  );
 };

-/**
- * @todo-Doma Co-locate WorkspaceListModal with {@link WorkspaceSelector},
- *            because it's never used elsewhere.
- */
-export const WorkspaceSelector = ({
-  currentWorkspace,
-  onClick,
-}: WorkspaceSelectorProps) => {
+export const WorkspaceCard = forwardRef<
+  HTMLDivElement,
+  {
+    currentWorkspace: AllWorkspace;
+  } & HTMLAttributes<HTMLDivElement>
+>(({ currentWorkspace, ...props }, ref) => {
  const [name] = useBlockSuiteWorkspaceName(
    currentWorkspace.blockSuiteWorkspace
  );
-  // Open dialog when `Enter` or `Space` pressed
-  // TODO-Doma Refactor with `@radix-ui/react-dialog` or other libraries that handle these out of the box and be accessible by default
-  // TODO: Delete this?
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        // TODO-Doma Rename this callback to `onOpenDialog` or something to reduce ambiguity.
-        onClick();
-      }
-    },
-    [onClick]
+  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(
+    currentWorkspace.blockSuiteWorkspace
  );
-  const isHovered = useAtomValue(hoverAtom);

  return (
    <StyledSelectorContainer
      role="button"
      tabIndex={0}
-      onClick={onClick}
-      onKeyDown={handleKeyDown}
-      disableHoverBackground={isHovered}
      data-testid="current-workspace"
      id="current-workspace"
+      ref={ref}
+      {...props}
    >
-      <WorkspaceAvatar
+      <Avatar
        data-testid="workspace-avatar"
-        className={workspaceAvatarStyle}
        size={40}
-        workspace={currentWorkspace.blockSuiteWorkspace}
+        url={workspaceAvatar}
+        name={name}
+        colorfulFallback
+        style={{
+          marginRight: '10px',
+        }}
      />
      <StyledSelectorWrapper>
        <StyledWorkspaceName data-testid="workspace-name">
@ -211,4 +199,6 @@ export const WorkspaceSelector = ({
      </StyledSelectorWrapper>
    </StyledSelectorContainer>
  );
-};
+});
+
+WorkspaceCard.displayName = 'WorkspaceCard';
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
@ -1,22 +1,16 @@
 import { displayFlex, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
-export const StyledSelectorContainer = styled('div')(({
-  disableHoverBackground,
-}: {
-  disableHoverBackground: boolean;
-}) => {
-  return {
-    height: '58px',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 6px',
-    borderRadius: '8px',
-    color: 'var(--affine-text-primary-color)',
-    ':hover': {
-      cursor: 'pointer',
-      background: disableHoverBackground ? '' : 'var(--affine-hover-color)',
-    },
-  };
+export const StyledSelectorContainer = styled('div')({
+  height: '58px',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0 6px',
+  borderRadius: '8px',
+  color: 'var(--affine-text-primary-color)',
+  ':hover': {
+    cursor: 'pointer',
+    background: 'var(--affine-hover-color)',
+  },
 });

 export const StyledSelectorWrapper = styled('div')(() => {
--- a/apps/core/src/components/root-app-sidebar/index.tsx
+++ b/apps/core/src/components/root-app-sidebar/index.tsx
@ -20,10 +20,17 @@ import {
 } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
-import { NoSsr } from '@mui/material';
+import { Popover } from '@toeverything/components/popover';
 import { useAtom } from 'jotai';
-import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
+import {
+  forwardRef,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

 import { useHistoryAtom } from '../../atoms/history';
 import { useAppSetting } from '../../atoms/settings';
@ -33,14 +40,14 @@ import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
 import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
-import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector';
+import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
+import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
 import ImportPage from './import-page';

 export type RootAppSidebarProps = {
  isPublicWorkspace: boolean;
  onOpenQuickSearchModal: () => void;
  onOpenSettingModal: () => void;
-  onOpenWorkspaceListModal: () => void;
  currentWorkspace: AllWorkspace;
  openPage: (pageId: string) => void;
  createPage: () => Page;
@ -52,7 +59,7 @@ export type RootAppSidebarProps = {
  };
 };

-const RouteMenuLinkItem = React.forwardRef<
+const RouteMenuLinkItem = forwardRef<
  HTMLDivElement,
  {
    currentPath: string; // todo: pass through useRouter?
@ -60,7 +67,7 @@ const RouteMenuLinkItem = React.forwardRef<
    icon: ReactElement;
    children?: ReactElement;
    isDraggedOver?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>
+  } & HTMLAttributes<HTMLDivElement>
 >(({ currentPath, path, icon, children, isDraggedOver, ...props }, ref) => {
  // Force active style when a page is dragged over
  const active = isDraggedOver || currentPath === path;
@ -94,7 +101,6 @@ export const RootAppSidebar = ({
  currentPath,
  paths,
  onOpenQuickSearchModal,
-  onOpenWorkspaceListModal,
  onOpenSettingModal,
 }: RootAppSidebarProps): ReactElement => {
  const currentWorkspaceId = currentWorkspace.id;
@ -102,6 +108,7 @@ export const RootAppSidebar = ({
  const { backToAll } = useCollectionManager(currentCollectionsAtom);
  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
  const t = useAFFiNEI18N();
+  const [openUserWorkspaceList, setOpenUserWorkspaceList] = useState(false);
  const onClickNewPage = useCallback(async () => {
    const page = createPage();
    await page.waitForLoaded();
@ -152,6 +159,9 @@ export const RootAppSidebar = ({
  const trashDroppable = useDroppable({
    id: DROPPABLE_SIDEBAR_TRASH,
  });
+  const closeUserWorkspaceList = useCallback(() => {
+    setOpenUserWorkspaceList(false);
+  }, []);

  return (
    <>
@ -166,12 +176,27 @@ export const RootAppSidebar = ({
        }
      >
        <SidebarContainer>
-          <NoSsr>
-            <WorkspaceSelector
+          <Popover
+            open={openUserWorkspaceList}
+            content={
+              <Suspense>
+                <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
+              </Suspense>
+            }
+            contentOptions={{
+              // hide trigger
+              sideOffset: -58,
+              onInteractOutside: closeUserWorkspaceList,
+              onEscapeKeyDown: closeUserWorkspaceList,
+            }}
+          >
+            <WorkspaceCard
              currentWorkspace={currentWorkspace}
-              onClick={onOpenWorkspaceListModal}
+              onClick={useCallback(() => {
+                setOpenUserWorkspaceList(true);
+              }, [])}
            />
-          </NoSsr>
+          </Popover>
          <QuickSearchInput
            data-testid="slider-bar-quick-search-button"
            onClick={onOpenQuickSearchModal}
--- a/apps/core/src/layouts/workspace-layout.tsx
+++ b/apps/core/src/layouts/workspace-layout.tsx
@ -36,11 +36,7 @@ import { lazy, Suspense, useCallback, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Map as YMap } from 'yjs';

-import {
-  openQuickSearchModalAtom,
-  openSettingModalAtom,
-  openWorkspacesModalAtom,
-} from '../atoms';
+import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
 import { mainContainerAtom } from '../atoms/element';
 import { useAppSetting } from '../atoms/settings';
 import { AdapterProviderWrapper } from '../components/adapter-worksapce-wrapper';
@ -167,7 +163,6 @@ export const WorkspaceLayoutInner = ({

  usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);

-  const [, setOpenWorkspacesModal] = useAtom(openWorkspacesModalAtom);
  const helper = usePageHelper(currentWorkspace.blockSuiteWorkspace);

  const handleCreatePage = useCallback(() => {
@ -178,10 +173,6 @@ export const WorkspaceLayoutInner = ({
    return page;
  }, [currentWorkspace.blockSuiteWorkspace, helper]);

-  const handleOpenWorkspaceListModal = useCallback(() => {
-    setOpenWorkspacesModal(true);
-  }, [setOpenWorkspacesModal]);
-
  const [, setOpenQuickSearchModalAtom] = useAtom(openQuickSearchModalAtom);
  const handleOpenQuickSearchModal = useCallback(() => {
    setOpenQuickSearchModalAtom(true);
@ -255,7 +246,6 @@ export const WorkspaceLayoutInner = ({
              onOpenQuickSearchModal={handleOpenQuickSearchModal}
              onOpenSettingModal={handleOpenSettingModal}
              currentWorkspace={currentWorkspace}
-              onOpenWorkspaceListModal={handleOpenWorkspaceListModal}
              openPage={useCallback(
                (pageId: string) => {
                  assertExists(currentWorkspace);
--- a/apps/core/src/pages/index.tsx
+++ b/apps/core/src/pages/index.tsx
@ -7,6 +7,8 @@ import { lazy } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 import { redirect } from 'react-router-dom';

+import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
+
 const AllWorkspaceModals = lazy(() =>
  import('../providers/modal-provider').then(({ AllWorkspaceModals }) => ({
    default: AllWorkspaceModals,
@ -54,5 +56,22 @@ export const loader: LoaderFunction = async () => {
 };

 export const Component = () => {
-  return <AllWorkspaceModals />;
+  // TODO: We need a no workspace page
+  return (
+    <>
+      <div
+        style={{
+          width: 300,
+          margin: '80px auto',
+          borderRadius: '8px',
+          boxShadow: 'var(--affine-shadow-2)',
+          backgroundColor: 'var(--affine-background-overlay-panel-color)',
+          padding: '16px 12px',
+        }}
+      >
+        <UserWithWorkspaceList />
+      </div>
+      <AllWorkspaceModals />
+    </>
+  );
 };
--- a/apps/core/src/providers/modal-provider.tsx
+++ b/apps/core/src/providers/modal-provider.tsx
@ -1,20 +1,8 @@
 import { WorkspaceSubPath } from '@affine/env/workspace';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
-import { arrayMove } from '@dnd-kit/sortable';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-} from '@toeverything/infra/atom';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import type { ReactElement } from 'react';
-import {
-  lazy,
-  startTransition,
-  Suspense,
-  useCallback,
-  useTransition,
-} from 'react';
+import { lazy, Suspense, useCallback } from 'react';

 import type { SettingAtom } from '../atoms';
 import {
@ -22,7 +10,6 @@ import {
  openCreateWorkspaceModalAtom,
  openDisableCloudAlertModalAtom,
  openSettingModalAtom,
-  openWorkspacesModalAtom,
 } from '../atoms';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
@ -38,12 +25,6 @@ const Auth = lazy(() =>
  }))
 );

-const WorkspaceListModal = lazy(() =>
-  import('../components/pure/workspace-list-modal').then(module => ({
-    default: module.WorkspaceListModal,
-  }))
-);
-
 const CreateWorkspaceModal = lazy(() =>
  import('../components/affine/create-workspace-modal').then(module => ({
    default: module.CreateWorkspaceModal,
@ -161,90 +142,14 @@ export function CurrentWorkspaceModals() {
 }

 export const AllWorkspaceModals = (): ReactElement => {
-  const [openWorkspacesModal, setOpenWorkspacesModal] = useAtom(
-    openWorkspacesModalAtom
-  );
  const [isOpenCreateWorkspaceModal, setOpenCreateWorkspaceModal] = useAtom(
    openCreateWorkspaceModalAtom
  );

  const { jumpToSubPath } = useNavigateHelper();
-  const workspaces = useAtomValue(rootWorkspacesMetadataAtom, {
-    delay: 0,
-  });
-  const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
-    currentWorkspaceIdAtom
-  );
-  const setCurrentPageId = useSetAtom(currentPageIdAtom);
-  const [, startCloseTransition] = useTransition();
-  const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
-
-  const handleOpenSettingModal = useCallback(
-    (workspaceId: string) => {
-      setOpenWorkspacesModal(false);
-
-      setOpenSettingModalAtom({
-        open: true,
-        activeTab: 'workspace',
-        workspaceId,
-      });
-    },
-    [setOpenSettingModalAtom, setOpenWorkspacesModal]
-  );

  return (
    <>
-      <Suspense>
-        <WorkspaceListModal
-          workspaces={workspaces}
-          currentWorkspaceId={currentWorkspaceId}
-          open={
-            (openWorkspacesModal || workspaces.length === 0) &&
-            isOpenCreateWorkspaceModal === false
-          }
-          onClose={useCallback(() => {
-            startCloseTransition(() => {
-              setOpenWorkspacesModal(false);
-            });
-          }, [setOpenWorkspacesModal])}
-          onMoveWorkspace={useCallback(
-            (activeId, overId) => {
-              const oldIndex = workspaces.findIndex(w => w.id === activeId);
-              const newIndex = workspaces.findIndex(w => w.id === overId);
-              startTransition(() => {
-                setWorkspaces(workspaces =>
-                  arrayMove(workspaces, oldIndex, newIndex)
-                );
-              });
-            },
-            [setWorkspaces, workspaces]
-          )}
-          onClickWorkspace={useCallback(
-            workspaceId => {
-              startCloseTransition(() => {
-                setOpenWorkspacesModal(false);
-                setCurrentWorkspaceId(workspaceId);
-                setCurrentPageId(null);
-                jumpToSubPath(workspaceId, WorkspaceSubPath.ALL);
-              });
-            },
-            [
-              jumpToSubPath,
-              setCurrentPageId,
-              setCurrentWorkspaceId,
-              setOpenWorkspacesModal,
-            ]
-          )}
-          onClickWorkspaceSetting={handleOpenSettingModal}
-          onNewWorkspace={useCallback(() => {
-            setOpenCreateWorkspaceModal('new');
-          }, [setOpenCreateWorkspaceModal])}
-          onAddWorkspace={useCallback(async () => {
-            setOpenCreateWorkspaceModal('add');
-          }, [setOpenCreateWorkspaceModal])}
-        />
-      </Suspense>
      <Suspense>
        <CreateWorkspaceModal
          mode={isOpenCreateWorkspaceModal}
@ -254,14 +159,13 @@ export const AllWorkspaceModals = (): ReactElement => {
          onCreate={useCallback(
            id => {
              setOpenCreateWorkspaceModal(false);
-              setOpenWorkspacesModal(false);
              // if jumping immediately, the page may stuck in loading state
              // not sure why yet .. here is a workaround
              setTimeout(() => {
                jumpToSubPath(id, WorkspaceSubPath.ALL);
              });
            },
-            [jumpToSubPath, setOpenCreateWorkspaceModal, setOpenWorkspacesModal]
+            [jumpToSubPath, setOpenCreateWorkspaceModal]
          )}
        />
      </Suspense>
--- a/apps/server/src/modules/users/resolver.ts
+++ b/apps/server/src/modules/users/resolver.ts
@ -63,6 +63,11 @@ export class DeleteAccount {
  @Field()
  success!: boolean;
 }
+@ObjectType()
+export class RemoveAvatar {
+  @Field()
+  success!: boolean;
+}

@ObjectType()
 export class AddToNewFeaturesWaitingList {
@ -151,6 +156,22 @@ export class UserResolver {
    });
  }

+  @Throttle(10, 60)
+  @Mutation(() => RemoveAvatar, {
+    name: 'removeAvatar',
+    description: 'Remove user avatar',
+  })
+  async removeAvatar(@CurrentUser() user: UserType) {
+    if (!user) {
+      throw new BadRequestException(`User not found`);
+    }
+    await this.prisma.user.update({
+      where: { id: user.id },
+      data: { avatarUrl: null },
+    });
+    return { success: true };
+  }
+
  @Throttle(10, 60)
  @Mutation(() => DeleteAccount)
  async deleteAccount(@CurrentUser() user: UserType): Promise<DeleteAccount> {
--- a/apps/server/src/schema.gql
+++ b/apps/server/src/schema.gql
@ -34,6 +34,10 @@ type DeleteAccount {
  success: Boolean!
 }

+type RemoveAvatar {
+  success: Boolean!
+}
+
 type AddToNewFeaturesWaitingList {
  email: String!

@ -187,6 +191,9 @@ type Mutation {

  """Upload user avatar"""
  uploadAvatar(id: String!, avatar: Upload!): UserType!
+
+  """Remove user avatar"""
+  removeAvatar: RemoveAvatar!
  deleteAccount: DeleteAccount!
  addToNewFeaturesWaitingList(type: NewFeaturesKind!, email: String!): AddToNewFeaturesWaitingList!
  signUp(name: String!, email: String!, password: String!): UserType!
--- a/apps/server/src/tests/app.e2e.ts
+++ b/apps/server/src/tests/app.e2e.ts
@ -124,7 +124,7 @@ test('should find default user', async t => {
    });
 });

-test('should be able to upload avatar', async t => {
+test('should be able to upload avatar and remove it', async t => {
  const { token, id } = await createToken(t.context.app);
  const png = await Transformer.fromRgbaPixels(
    Buffer.alloc(400 * 400 * 4).fill(255),
@ -157,6 +157,27 @@ test('should be able to upload avatar', async t => {
    .expect(res => {
      t.is(res.body.data.uploadAvatar.id, id);
    });
+
+  await request(t.context.app.getHttpServer())
+    .post(gql)
+    .auth(token, { type: 'bearer' })
+    .set({ 'x-request-id': 'test', 'x-operation-name': 'test' })
+    .send({
+      query: `
+          mutation removeAvatar {
+            removeAvatar {
+              id
+              name
+              avatarUrl
+              email
+            }
+          }
+        `,
+    })
+    .expect(200)
+    .expect(res => {
+      t.is(res.body.data.removeAvatar.avatarUrl, '');
+    });
 });

 async function createToken(app: INestApplication<Express>): Promise<{
--- a/apps/storybook/src/stories/workspace-avatar.stories.tsx
+++ b/apps/storybook/src/stories/workspace-avatar.stories.tsx
@ -1,76 +0,0 @@
-import type { WorkspaceAvatarProps } from '@affine/component/workspace-avatar';
-import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
-import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
-import { Schema, Workspace } from '@blocksuite/store';
-import type { Meta, StoryFn } from '@storybook/react';
-
-export default {
-  title: 'AFFiNE/WorkspaceAvatar',
-  component: WorkspaceAvatar,
-  argTypes: {
-    size: {
-      control: {
-        type: 'range',
-        min: 20,
-        max: 100,
-      },
-    },
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta<WorkspaceAvatarProps>;
-
-const schema = new Schema();
-
-schema.register(AffineSchemas).register(__unstableSchemas);
-
-const basicBlockSuiteWorkspace = new Workspace({
-  id: 'blocksuite-local',
-  schema,
-});
-
-basicBlockSuiteWorkspace.meta.setName('Hello World');
-
-export const Basic: StoryFn<WorkspaceAvatarProps> = props => {
-  return <WorkspaceAvatar {...props} workspace={basicBlockSuiteWorkspace} />;
-};
-
-Basic.args = {
-  size: 40,
-};
-
-const avatarBlockSuiteWorkspace = new Workspace({
-  id: 'blocksuite-local',
-  schema,
-});
-
-avatarBlockSuiteWorkspace.meta.setName('Hello World');
-fetch(new URL('@affine-test/fixtures/smile.png', import.meta.url))
-  .then(res => res.arrayBuffer())
-  .then(async buffer => {
-    const id = await avatarBlockSuiteWorkspace.blobs.set(
-      new Blob([buffer], { type: 'image/png' })
-    );
-    avatarBlockSuiteWorkspace.meta.setAvatar(id);
-  })
-  .catch(() => {
-    // just ignore
-    console.error('Failed to load smile.png');
-  });
-
-export const BlobExample: StoryFn<WorkspaceAvatarProps> = props => {
-  return <WorkspaceAvatar {...props} workspace={avatarBlockSuiteWorkspace} />;
-};
-
-BlobExample.args = {
-  size: 40,
-};
-
-export const Empty: StoryFn<WorkspaceAvatarProps> = props => {
-  return <WorkspaceAvatar {...props} workspace={null} />;
-};
-
-Empty.args = {
-  size: 40,
-};
--- a/packages/component/src/components/card/workspace-card/index.tsx
+++ b/packages/component/src/components/card/workspace-card/index.tsx
@ -2,11 +2,12 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { SettingsIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import { useCallback } from 'react';

-import { WorkspaceAvatar } from '../../workspace-avatar';
 import {
  StyledCard,
  StyledSettingLink,
@ -68,6 +69,7 @@ export const WorkspaceCard = ({
  // const t = useAFFiNEI18N();
  const workspace = useStaticBlockSuiteWorkspace(meta.id);
  const [name] = useBlockSuiteWorkspaceName(workspace);
+  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);

  return (
    <StyledCard
@ -77,8 +79,7 @@ export const WorkspaceCard = ({
      }, [onClick, meta.id])}
      active={workspace.id === currentWorkspaceId}
    >
-      <WorkspaceAvatar size={28} workspace={workspace} />
-
+      <Avatar size={28} url={workspaceAvatar} name={name} colorfulFallback />
      <StyledWorkspaceInfo>
        <StyledWorkspaceTitleArea style={{ display: 'flex' }}>
          <StyledWorkspaceTitle>{name}</StyledWorkspaceTitle>
--- a/packages/component/src/components/member-components/accept-invite-page.tsx
+++ b/packages/component/src/components/member-components/accept-invite-page.tsx
@ -23,12 +23,6 @@ export const AcceptInvitePage = ({
            url={inviteInfo.user.avatarUrl || ''}
            name={inviteInfo.user.name}
            size={20}
-            // FIXME: fix it in @toeverything/components/avatar
-            imageProps={{
-              style: {
-                objectFit: 'cover',
-              },
-            }}
          />
          <span className={styles.inviteName}>{inviteInfo.user.name}</span>
          {t['invited you to join']()}
@ -37,7 +31,7 @@ export const AcceptInvitePage = ({
            name={inviteInfo.workspace.name}
            size={20}
            style={{ marginLeft: 4 }}
-            colorfulFallback={true}
+            colorfulFallback
          />
          <span className={styles.inviteName}>{inviteInfo.workspace.name}</span>
        </FlexWrapper>
--- a/packages/component/src/components/user-avatar/index.tsx
+++ b/packages/component/src/components/user-avatar/index.tsx
@ -1,37 +0,0 @@
-import * as Avatar from '@radix-ui/react-avatar';
-import clsx from 'clsx';
-import type { CSSProperties } from 'react';
-
-import * as style from './style.css';
-
-export interface UserAvatar {
-  size?: number;
-  url?: string;
-  name?: string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export const UserAvatar = ({
-  size = 20,
-  style: propsStyles = {},
-  url,
-  name,
-  className,
-}: UserAvatar) => {
-  return (
-    <Avatar.Root
-      style={{
-        width: size,
-        height: size,
-        ...propsStyles,
-      }}
-      className={clsx(style.avatarRoot, className)}
-    >
-      <Avatar.Image className={style.avatarImage} src={url} alt={name} />
-      <Avatar.Fallback className={style.avatarFallback} delayMs={600}>
-        {name?.slice(0, 1) || 'A'}
-      </Avatar.Fallback>
-    </Avatar.Root>
-  );
-};
--- a/packages/component/src/components/user-avatar/style.css.ts
+++ b/packages/component/src/components/user-avatar/style.css.ts
@ -1,31 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const avatarRoot = style({
-  display: 'inline-flex',
-  flexShrink: 0,
-  alignItems: 'center',
-  justifyContent: 'center',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  userSelect: 'none',
-  borderRadius: '100%',
-});
-
-export const avatarImage = style({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  borderRadius: 'inherit',
-});
-export const avatarFallback = style({
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: 'var(--affine-primary-color)',
-  color: 'var(--affine-white)',
-  fontSize: 'var(--affine-font-base)',
-  lineHeight: '1',
-  fontWeight: '500',
-});
--- a/packages/component/src/components/workspace-avatar/default-avatar.tsx
+++ b/packages/component/src/components/workspace-avatar/default-avatar.tsx
@ -1,69 +0,0 @@
-import clsx from 'clsx';
-import { useMemo, useRef, useState } from 'react';
-
-import {
-  DefaultAvatarBottomItemStyle,
-  DefaultAvatarBottomItemWithAnimationStyle,
-  DefaultAvatarContainerStyle,
-  DefaultAvatarMiddleItemStyle,
-  DefaultAvatarMiddleItemWithAnimationStyle,
-  DefaultAvatarTopItemStyle,
-} from './index.css';
-
-const colorsSchema = [
-  ['#FF0000', '#FF00E5', '#FFAE73'],
-  ['#FF5C00', '#FFC700', '#FFE073'],
-  ['#FFDA16', '#FFFBA6', '#FFBE73'],
-  ['#8CD317', '#FCFF5C', '#67CAE9'],
-  ['#28E19F', '#89FFC6', '#39A880'],
-  ['#35B7E0', '#77FFCE', '#5076FF'],
-  ['#3D39FF', '#77BEFF', '#3502FF'],
-  ['#BD08EB', '#755FFF', '#6967E4'],
-];
-
-export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
-  // Sometimes name is ' '
-  const name = propsName || 'A';
-  const colors = useMemo(() => {
-    const index = name[0].toUpperCase().charCodeAt(0);
-    return colorsSchema[index % colorsSchema.length];
-  }, [name]);
-
-  const timer = useRef<number>();
-
-  const [topColor, middleColor, bottomColor] = colors;
-  const [isHover, setIsHover] = useState(false);
-
-  return (
-    <div
-      className={DefaultAvatarContainerStyle}
-      onMouseEnter={() => {
-        timer.current = window.setTimeout(() => {
-          setIsHover(true);
-        }, 300);
-      }}
-      onMouseLeave={() => {
-        clearTimeout(timer.current);
-        setIsHover(false);
-      }}
-    >
-      <div
-        className={DefaultAvatarTopItemStyle}
-        style={{ background: bottomColor }}
-      ></div>
-      <div
-        className={clsx(DefaultAvatarMiddleItemStyle, {
-          [DefaultAvatarMiddleItemWithAnimationStyle]: isHover,
-        })}
-        style={{ background: middleColor }}
-      ></div>
-      <div
-        className={clsx(DefaultAvatarBottomItemStyle, {
-          [DefaultAvatarBottomItemWithAnimationStyle]: isHover,
-        })}
-        style={{ background: topColor }}
-      ></div>
-    </div>
-  );
-};
-export default DefaultAvatar;
--- a/packages/component/src/components/workspace-avatar/index.css.ts
+++ b/packages/component/src/components/workspace-avatar/index.css.ts
@ -1,146 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-export const avatarStyle = style({
-  width: '100%',
-  height: '100%',
-  color: '#fff',
-  borderRadius: '50%',
-  overflow: 'hidden',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-});
-
-export const avatarImageStyle = style({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  objectPosition: 'center',
-  display: 'block',
-});
-
-const bottomAnimation = keyframes({
-  '0%': {
-    top: '-44%',
-    left: '-11%',
-    transform: 'matrix(-0.29, -0.96, 0.94, -0.35, 0, 0)',
-  },
-  '16%': {
-    left: '-18%',
-    top: '-51%',
-    transform: 'matrix(-0.73, -0.69, 0.64, -0.77, 0, 0)',
-  },
-  '32%': {
-    left: '-7%',
-    top: '-40%',
-    transform: 'matrix(-0.97, -0.23, 0.16, -0.99, 0, 0)',
-  },
-  '48%': {
-    left: '-15%',
-    top: '-39%',
-    transform: 'matrix(-0.88, 0.48, -0.6, -0.8, 0, 0)',
-  },
-  '64%': {
-    left: '-7%',
-    top: '-40%',
-    transform: 'matrix(-0.97, -0.23, 0.16, -0.99, 0, 0)',
-  },
-  '80%': {
-    left: '-18%',
-    top: '-51%',
-    transform: 'matrix(-0.73, -0.69, 0.64, -0.77, 0, 0)',
-  },
-  '100%': {
-    top: '-44%',
-    left: '-11%',
-    transform: 'matrix(-0.29, -0.96, 0.94, -0.35, 0, 0)',
-  },
-});
-const middleAnimation = keyframes({
-  '0%': {
-    left: '-30px',
-    top: '-30px',
-    transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
-  },
-  '16%': {
-    left: '-37px',
-    top: '-37px',
-    transform: 'matrix(-0.86, -0.52, 0.39, -0.92, 0, 0)',
-  },
-  '32%': {
-    left: '-20px',
-    top: '-10px',
-    transform: 'matrix(-1, -0.02, -0.12, -0.99, 0, 0)',
-  },
-  '48%': {
-    left: '-27px',
-    top: '-2px',
-    transform: 'matrix(-0.88, 0.48, -0.6, -0.8, 0, 0)',
-  },
-  '64%': {
-    left: '-20px',
-    top: '-10px',
-    transform: 'matrix(-1, -0.02, -0.12, -0.99, 0, 0)',
-  },
-  '80%': {
-    left: '-37px',
-    top: '-37px',
-    transform: 'matrix(-0.86, -0.52, 0.39, -0.92, 0, 0)',
-  },
-  '100%': {
-    left: '-30px',
-    top: '-30px',
-    transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
-  },
-});
-
-export const DefaultAvatarContainerStyle = style({
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  borderRadius: '50%',
-  overflow: 'hidden',
-});
-
-export const DefaultAvatarMiddleItemStyle = style({
-  width: '83%',
-  height: '81%',
-  position: 'absolute',
-  left: '-30%',
-  top: '-30%',
-  transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
-  opacity: '0.8',
-  filter: 'blur(12px)',
-  transformOrigin: 'center center',
-  animation: `${middleAnimation} 3s ease-in-out forwards infinite`,
-  animationPlayState: 'paused',
-});
-export const DefaultAvatarMiddleItemWithAnimationStyle = style({
-  animationPlayState: 'running',
-});
-export const DefaultAvatarBottomItemStyle = style({
-  width: '98%',
-  height: '97%',
-  position: 'absolute',
-  top: '-44%',
-  left: '-11%',
-  transform: 'matrix(-0.29, -0.96, 0.94, -0.35, 0, 0)',
-  opacity: '0.8',
-  filter: 'blur(12px)',
-  transformOrigin: 'center center',
-  willChange: 'left, top, transform',
-  animation: `${bottomAnimation} 3s ease-in-out forwards infinite`,
-  animationPlayState: 'paused',
-});
-export const DefaultAvatarBottomItemWithAnimationStyle = style({
-  animationPlayState: 'running',
-});
-export const DefaultAvatarTopItemStyle = style({
-  width: '104%',
-  height: '94%',
-  position: 'absolute',
-  right: '-30%',
-  top: '-30%',
-  opacity: '0.8',
-  filter: 'blur(12px)',
-  transform: 'matrix(-0.28, -0.96, 0.93, -0.37, 0, 0)',
-  transformOrigin: 'center center',
-});
--- a/packages/component/src/components/workspace-avatar/index.tsx
+++ b/packages/component/src/components/workspace-avatar/index.tsx
@ -1,70 +0,0 @@
-import type { Workspace } from '@blocksuite/store';
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import clsx from 'clsx';
-
-import { DefaultAvatar } from './default-avatar';
-import { avatarImageStyle, avatarStyle } from './index.css';
-
-export interface WorkspaceAvatarProps {
-  size?: number;
-  workspace: Workspace | null;
-  className?: string;
-}
-
-export interface BlockSuiteWorkspaceAvatar
-  extends Omit<WorkspaceAvatarProps, 'workspace'> {
-  workspace: Workspace;
-}
-
-export const BlockSuiteWorkspaceAvatar = ({
-  size,
-  workspace,
-  ...props
-}: BlockSuiteWorkspaceAvatar) => {
-  const [avatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
-  const [name] = useBlockSuiteWorkspaceName(workspace);
-
-  return (
-    <RadixAvatar.Root
-      {...props}
-      className={clsx(avatarStyle, props.className)}
-      style={{
-        height: size,
-        width: size,
-      }}
-    >
-      <RadixAvatar.Image className={avatarImageStyle} src={avatar} alt={name} />
-      <RadixAvatar.Fallback>
-        <DefaultAvatar name={name}></DefaultAvatar>
-      </RadixAvatar.Fallback>
-    </RadixAvatar.Root>
-  );
-};
-
-export const WorkspaceAvatar = ({
-  size = 20,
-  workspace,
-  ...props
-}: WorkspaceAvatarProps) => {
-  if (workspace) {
-    return (
-      <BlockSuiteWorkspaceAvatar {...props} size={size} workspace={workspace} />
-    );
-  }
-  return (
-    <RadixAvatar.Root
-      {...props}
-      className={clsx(avatarStyle, props.className)}
-      style={{
-        height: size,
-        width: size,
-      }}
-    >
-      <RadixAvatar.Fallback>
-        <DefaultAvatar name="A"></DefaultAvatar>
-      </RadixAvatar.Fallback>
-    </RadixAvatar.Root>
-  );
-};
--- a/packages/graphql/src/graphql/index.ts
+++ b/packages/graphql/src/graphql/index.ts
@ -336,6 +336,19 @@ mutation leaveWorkspace($workspaceId: String!, $workspaceName: String!, $sendLea
 }`,
 };

+export const removeAvatarMutation = {
+  id: 'removeAvatarMutation' as const,
+  operationName: 'removeAvatar',
+  definitionName: 'removeAvatar',
+  containsFile: false,
+  query: `
+mutation removeAvatar {
+  removeAvatar {
+    success
+  }
+}`,
+};
+
 export const revokeMemberPermissionMutation = {
  id: 'revokeMemberPermissionMutation' as const,
  operationName: 'revokeMemberPermission',
--- a/packages/graphql/src/graphql/remove-avatar.gql
+++ b/packages/graphql/src/graphql/remove-avatar.gql
@ -0,0 +1,5 @@
+mutation removeAvatar {
+  removeAvatar {
+    success
+  }
+}
--- a/packages/graphql/src/schema.ts
+++ b/packages/graphql/src/schema.ts
@ -308,6 +308,13 @@ export type LeaveWorkspaceMutation = {
  leaveWorkspace: boolean;
 };

+export type RemoveAvatarMutationVariables = Exact<{ [key: string]: never }>;
+
+export type RemoveAvatarMutation = {
+  __typename?: 'Mutation';
+  removeAvatar: { __typename?: 'RemoveAvatar'; success: boolean };
+};
+
 export type RevokeMemberPermissionMutationVariables = Exact<{
  workspaceId: Scalars['String']['input'];
  userId: Scalars['String']['input'];
@ -596,6 +603,11 @@ export type Mutations =
      variables: LeaveWorkspaceMutationVariables;
      response: LeaveWorkspaceMutation;
    }
+  | {
+      name: 'removeAvatarMutation';
+      variables: RemoveAvatarMutationVariables;
+      response: RemoveAvatarMutation;
+    }
  | {
      name: 'revokeMemberPermissionMutation';
      variables: RevokeMemberPermissionMutationVariables;
--- a/packages/hooks/src/use-block-suite-workspace-avatar-url.ts
+++ b/packages/hooks/src/use-block-suite-workspace-avatar-url.ts
@ -24,8 +24,12 @@ export function useBlockSuiteWorkspaceAvatarUrl(
    fallbackData: null,
  });
  const setAvatar = useCallback(
-    async (file: File) => {
+    async (file: File | null) => {
      assertExists(blockSuiteWorkspace);
+      if (!file) {
+        blockSuiteWorkspace.meta.setAvatar('');
+        return;
+      }
      const blob = new Blob([file], { type: file.type });
      const blobs = await blockSuiteWorkspace.blobs;
      const blobId = await blobs.set(blob);
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@ -16,7 +16,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.38",
+    "@toeverything/components": "^0.0.41",
    "idb": "^7.1.1",
    "langchain": "^0.0.138",
    "marked": "^7.0.5",
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.38"
+    "@toeverything/components": "^0.0.41"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*"
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@ -17,7 +17,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.38",
+    "@toeverything/components": "^0.0.41",
    "@toeverything/theme": "^0.7.15",
    "clsx": "^2.0.0",
    "foxact": "^0.2.20",
--- a/plugins/outline/package.json
+++ b/plugins/outline/package.json
@ -18,7 +18,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.33",
-    "@toeverything/components": "^0.0.38"
+    "@toeverything/components": "^0.0.41"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*",
--- a/tests/affine-local/e2e/local-first-avatar.spec.ts
+++ b/tests/affine-local/e2e/local-first-avatar.spec.ts
@ -8,7 +8,7 @@ import {
 } from '@affine-test/kit/utils/page-logic';
 import { expect } from '@playwright/test';

-test('should create a page with a local first avatar', async ({
+test('should create a page with a local first avatar and remove it', async ({
  page,
  workspace,
 }) => {
@ -40,6 +40,22 @@ test('should create a page with a local first avatar', async ({
    .getAttribute('src');
  // out user uploaded avatar
  expect(blobUrl).toContain('blob:');
+
+  // Click remove button to remove workspace avatar
+  await page.getByTestId('settings-modal-trigger').click();
+  await page.getByTestId('current-workspace-label').click();
+  await page.getByTestId('workspace-setting-avatar').hover();
+  await page.getByTestId('workspace-setting-remove-avatar-button').click();
+  await page.mouse.click(0, 0);
+  await page.waitForTimeout(1000);
+  await page.getByTestId('workspace-name').click();
+  await page.getByTestId('workspace-card').nth(1).click();
+  const removedAvatarImage = await page
+    .getByTestId('workspace-avatar')
+    .locator('img')
+    .count();
+  expect(removedAvatarImage).toBe(0);
+
  const currentWorkspace = await workspace.current();

  expect(currentWorkspace.flavour).toContain('local');
--- a/yarn.lock
+++ b/yarn.lock
@ -231,7 +231,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.38
+    "@toeverything/components": ^0.0.41
    "@types/marked": ^5.0.1
    idb: ^7.1.1
    jotai: ^2.4.1
@ -282,7 +282,7 @@ __metadata:
    "@sentry/webpack-plugin": ^2.7.0
    "@svgr/webpack": ^8.1.0
    "@swc/core": ^1.3.81
-    "@toeverything/components": ^0.0.38
+    "@toeverything/components": ^0.0.41
    "@types/lodash-es": ^4.17.9
    "@types/webpack-env": ^1.18.1
    async-call-rpc: ^6.3.1
@ -458,7 +458,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.38
+    "@toeverything/components": ^0.0.41
  languageName: unknown
  linkType: soft

@ -484,7 +484,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.38
+    "@toeverything/components": ^0.0.41
    "@toeverything/theme": ^0.7.15
    clsx: ^2.0.0
    foxact: ^0.2.20
@ -580,7 +580,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.33
-    "@toeverything/components": ^0.0.38
+    "@toeverything/components": ^0.0.41
    jotai: ^2.4.1
    react: 18.2.0
    react-dom: 18.2.0
@ -9356,6 +9356,40 @@ __metadata:
  languageName: node
  linkType: hard

+"@radix-ui/react-popover@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@radix-ui/react-popover@npm:1.0.6"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.4
+    "@radix-ui/react-focus-guards": 1.0.1
+    "@radix-ui/react-focus-scope": 1.0.3
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.2
+    "@radix-ui/react-portal": 1.0.3
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    aria-hidden: ^1.1.1
+    react-remove-scroll: 2.5.5
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: fbe4264d0f943d8be1a3ea2fce161f8031fdee72756aaf16251910e62de5030ae81a40e691f2cd65bf3a53d4ecc19c001b87be61d7aef5cc474da81d2d7e964d
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.1.2":
  version: 1.1.2
  resolution: "@radix-ui/react-popper@npm:1.1.2"
@ -12474,20 +12508,21 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/components@npm:^0.0.38":
-  version: 0.0.38
-  resolution: "@toeverything/components@npm:0.0.38"
+"@toeverything/components@npm:^0.0.41":
+  version: 0.0.41
+  resolution: "@toeverything/components@npm:0.0.41"
  dependencies:
    "@blocksuite/icons": ^2.1.33
    "@radix-ui/react-dialog": ^1.0.4
    "@radix-ui/react-dropdown-menu": ^2.0.5
+    "@radix-ui/react-popover": ^1.0.6
    "@radix-ui/react-tooltip": ^1.0.6
  peerDependencies:
    "@radix-ui/react-avatar": ^1
    clsx: ^2
    react: ^18
    react-dom: ^18
-  checksum: 8771f0439be2db0acffa1d6f73a2c49155acf35c5a0538c3391f98f5dfc7961f6e88e48dfc9e5dae2847b3a31a720a58dc79075db024758b74b72bcfe15eadd0
+  checksum: 15ee1cba8ea7880c9aae9fb18f8f8c44a183b64972e29e852d55e097a74ec994c1b2d22d6708746055e741112decffed1db14c345f5300733969bac69ddecf87
  languageName: node
  linkType: hard