fix: workspace avatar

packages/app/src/components/workspace-avatar/Avatar.tsx

@@ -23,7 +23,11 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
           }}
         >
           <picture>
-            <img src={props.avatar} alt="" />
+            <img
+              style={{ width: sizeStr, height: sizeStr }}
+              src={props.avatar}
+              alt=""
+            />
           </picture>
         </div>
       ) : (

packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import type { WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceAvatar as Avatar } from './Avatar';
+
+const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const avatarId =
+    workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
+  useEffect(() => {
+    if (avatarId && workspaceUnit?.blocksuiteWorkspace?.blobs) {
+      workspaceUnit.blocksuiteWorkspace.blobs.then(blobs => {
+        blobs?.get(avatarId).then(url => setAvatarUrl(url || ''));
+      });
+    } else {
+      setAvatarUrl('');
+    }
+  }, [avatarId]);
+
+  return avatarUrl;
+};
+
+export const WorkspaceUnitAvatar = ({
+  size = 20,
+  name,
+  workspaceUnit,
+}: {
+  size?: number;
+  name?: string;
+  workspaceUnit?: WorkspaceUnit | null;
+}) => {
+  const avatarUrl = useAvatar(workspaceUnit || undefined);
+  return (
+    <Avatar
+      size={size}
+      name={name || workspaceUnit?.name || ''}
+      avatar={avatarUrl}
+    />
+  );
+};

packages/app/src/components/workspace-avatar/index.ts

@@ -0,0 +1,2 @@
+export { WorkspaceAvatar } from './Avatar';
+export { WorkspaceUnitAvatar } from './WorkspaceUnitAvatar';

packages/app/src/components/workspace-modal/index.tsx

@@ -10,7 +10,7 @@ import {
   AddIcon,
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/ConfirmProvider';
@@ -65,11 +65,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                           marginRight: '10px',
                         }}
                       >
-                        <WorkspaceAvatar
-                          size={50}
-                          name={item.name}
-                          avatar={item.avatar ?? ''}
-                        />
+                        <WorkspaceUnitAvatar size={50} workspaceUnit={item} />
                       </div>
 
                       <span

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -1,7 +1,7 @@
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
@@ -23,17 +23,17 @@ export const WorkspaceSelector = () => {
         <Avatar
           alt="Affine"
           data-testid="workspace-avatar"
-          src={currentWorkspace?.avatar}
+          // src={currentWorkspace?.avatar}
         >
           <div
             style={{
               float: 'left',
             }}
           >
-            <WorkspaceAvatar
+            <WorkspaceUnitAvatar
               size={28}
               name={currentWorkspace?.name ?? 'AFFiNE'}
-              avatar={currentWorkspace?.avatar ?? ''}
+              workspaceUnit={currentWorkspace}
             />
           </div>
         </Avatar>