feat:update workspace avatar

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

@@ -1,4 +1,6 @@
+import { useAppState } from '@/providers/app-state-provider';
 import { stringToColour } from '@/utils';
+import { useEffect, useState } from 'react';
 
 interface IWorkspaceAvatar {
   size: number;
@@ -9,8 +11,35 @@ interface IWorkspaceAvatar {
 export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
   const size = props.size || 20;
   const sizeStr = size + 'px';
+  const { dataCenter, currentWorkspace } = useAppState();
+  dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
+    console.log(res);
+    setAvatar(res ?? '');
+  });
+  const [avatar, setAvatar] = useState<string>(props.avatar);
+
+  useEffect(() => {
+    dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
+      setAvatar(res ?? '');
+    });
+  }, [props.avatar]);
+
   return (
     <>
+      {avatar ? (
+        <div
+          style={{
+            width: sizeStr,
+            height: sizeStr,
+            border: '1px solid #fff',
+            color: '#fff',
+            borderRadius: '50%',
+            overflow: 'hidden',
+          }}
+        >
+          <img src={avatar} alt="" />
+        </div>
+      ) : (
         <div
           style={{
             width: sizeStr,
@@ -26,6 +55,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
         >
           {(props.name || 'AFFiNE').substring(0, 1)}
         </div>
+      )}
     </>
   );
 };

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

@@ -67,7 +67,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                           marginRight: '10px',
                         }}
                       >
-                        <WorkspaceAvatar size={50} name={item.name} />
+                        <WorkspaceAvatar
+                          size={50}
+                          name={item.name}
+                          avatar={item.avatar ?? ''}
+                        />
                       </div>
 
                       <span