feat: global avatar

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

@@ -21,6 +21,7 @@ import {
 } from '@blocksuite/icons';
 import { useConfirm } from '@/providers/confirm-provider';
 import { toast } from '@/ui/toast';
+import { stringToColour } from '@/utils';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
@@ -45,26 +46,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
     const data = getUserInfo();
     setUser(data);
   };
-  const stringToColour = function (str: string) {
-    str = str || 'affine';
-    let colour = '#';
-    let hash = 0;
-    // str to hash
-    for (
-      let i = 0;
-      i < str.length;
-      hash = str.charCodeAt(i++) + ((hash << 5) - hash)
-    );
 
-    // int/hash to hex
-    for (
-      let i = 0;
-      i < 3;
-      colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
-    );
-
-    return colour;
-  };
   return (
     <div>
       <Modal open={open} onClose={onClose}>

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

@@ -1,9 +1,9 @@
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
-import { AffineIcon } from '../icons/icons';
+// import { AffineIcon } from '../icons/icons';
 import { WorkspaceModal } from '@/components/workspace-modal';
 import { getActiveWorkspace, getWorkspaces } from '@/hooks/mock-data/mock';
-
+import { stringToColour } from '@/utils';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
   const [workspace, setWorkSpace] = useState(getActiveWorkspace());
@@ -34,7 +34,23 @@ export const WorkspaceSelector = () => {
           data-testid="workspace-avatar"
           src={workspace.avatar}
         >
-          <AffineIcon />
+          <div
+            style={{
+              float: 'left',
+              width: '28px',
+              height: '28px',
+              border: '1px solid #fff',
+              color: '#fff',
+              fontSize: '14px',
+              padding: '5px 0 0 5px;',
+              background: stringToColour(workspace?.name ?? 'AFFiNE'),
+              borderRadius: '50%',
+              textAlign: 'center',
+              lineHeight: '28px',
+            }}
+          >
+            {(workspace?.name ?? 'AFFiNE').substring(0, 1)}
+          </div>
         </Avatar>
         <WorkspaceName data-testid="workspace-name">
           {workspace?.name ?? 'AFFiNE'}

packages/app/src/utils/colors.ts

@@ -0,0 +1,20 @@
+export function stringToColour(str: string) {
+  str = str || 'affine';
+  let colour = '#';
+  let hash = 0;
+  // str to hash
+  for (
+    let i = 0;
+    i < str.length;
+    hash = str.charCodeAt(i++) + ((hash << 5) - hash)
+  );
+
+  // int/hash to hex
+  for (
+    let i = 0;
+    i < 3;
+    colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
+  );
+
+  return colour;
+}

packages/app/src/utils/index.ts

@@ -3,3 +3,5 @@ export { isDev } from './env';
 export * from './useragent';
 
 export * from './tools';
+
+export * from './colors';