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,23 +11,51 @@ 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 (
     <>
-      <div
+      {avatar ? (
-        style={{
+        <div
-          width: sizeStr,
+          style={{
-          height: sizeStr,
+            width: sizeStr,
-          border: '1px solid #fff',
+            height: sizeStr,
-          color: '#fff',
+            border: '1px solid #fff',
-          fontSize: Math.ceil(0.5 * size) + 'px',
+            color: '#fff',
-          background: stringToColour(props.name || 'AFFiNE'),
+            borderRadius: '50%',
-          borderRadius: '50%',
+            overflow: 'hidden',
-          textAlign: 'center',
+          }}
-          lineHeight: size + 'px',
+        >
-        }}
+          <img src={avatar} alt="" />
-      >
+        </div>
-        {(props.name || 'AFFiNE').substring(0, 1)}
+      ) : (
-      </div>
+        <div
+          style={{
+            width: sizeStr,
+            height: sizeStr,
+            border: '1px solid #fff',
+            color: '#fff',
+            fontSize: Math.ceil(0.5 * size) + 'px',
+            background: stringToColour(props.name || 'AFFiNE'),
+            borderRadius: '50%',
+            textAlign: 'center',
+            lineHeight: size + 'px',
+          }}
+        >
+          {(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