feat: add show workspace names and members

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

@@ -11,20 +11,72 @@ import {
   LoginItem,
 } from './WorkspaceItem';
 import { WorkspaceSetting } from '@/components/workspace-setting';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
-import { WorkspaceType } from '@pathfinder/data-services';
+import { getWorkspaceDetail, WorkspaceType } from '@pathfinder/data-services';
 
-export const SelectorPopperContent = () => {
+type WorkspaceDetails = Record<
-  const { user, workspacesMeta } = useAppState();
+  string,
+  { memberCount: number; owner: { id: string; name: string } }
+>;
+
+type SelectorPopperContentProps = {
+  isShow: boolean;
+};
+
+export const SelectorPopperContent = ({
+  isShow,
+}: SelectorPopperContentProps) => {
+  const { user, workspacesMeta, workspaces } = useAppState();
   const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
     null
   );
+  const [workSpaceDetails, setWorkSpaceDetails] = useState<WorkspaceDetails>(
+    {}
+  );
   const handleClickSettingWorkspace = (workspaceId: string) => {
     setSettingWorkspaceId(workspaceId);
   };
   const handleCloseWorkSpace = () => {
     setSettingWorkspaceId(null);
   };
+
+  const refreshDetails = useCallback(async () => {
+    const workspaceDetailList = await Promise.all(
+      workspacesMeta?.map(async ({ id, type }) => {
+        if (user) {
+          if (type === WorkspaceType.Private) {
+            return { id, member_count: 1, owner: user };
+          } else {
+            const data = await getWorkspaceDetail({ id });
+            return { id, ...data } || { id, member_count: 0, owner: user };
+          }
+        }
+      })
+    );
+    let workSpaceDetails: WorkspaceDetails = {};
+    workspaceDetailList.forEach(details => {
+      if (details) {
+        const { id, member_count, owner } = details;
+        if (!owner) return;
+        workSpaceDetails[id] = {
+          memberCount: member_count || 1,
+          owner: {
+            id: owner.id,
+            name: owner.name,
+          },
+        };
+      }
+    });
+    setWorkSpaceDetails(workSpaceDetails);
+  }, [user, workspacesMeta]);
+
+  useEffect(() => {
+    if (isShow) {
+      setSettingWorkspaceId(null);
+      refreshDetails();
+    }
+  }, [isShow, refreshDetails]);
+
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
       <LoginItem />
@@ -47,9 +99,13 @@ export const SelectorPopperContent = () => {
               type={workspace.type}
               key={workspace.id}
               id={workspace.id}
-              name={`workspace-${workspace.id}`}
+              icon={workspaces[workspace.id]?.meta.avatar || ''}
-              icon={''}
               onClick={handleClickSettingWorkspace}
+              name={
+                workspaces[workspace.id]?.meta.name ||
+                `workspace-${workspace.id}`
+              }
+              memberCount={workSpaceDetails[workspace.id]?.memberCount || 1}
             />
           );
         })}

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

@@ -1,4 +1,8 @@
-import { createWorkspace } from '@pathfinder/data-services';
+import {
+  createWorkspace,
+  getBlob,
+  uploadBlob,
+} from '@pathfinder/data-services';
 import Modal from '@/ui/modal';
 import Input from '@/ui/input';
 import { Button } from '@/ui/button';
@@ -19,6 +23,14 @@ interface WorkspaceCreateProps {
   onClose: () => void;
 }
 
+const DefaultHeadImgColors = [
+  ['#C6F2F3', '#0C6066'],
+  ['#FFF5AB', '#896406'],
+  ['#FFCCA7', '#8F4500'],
+  ['#FFCECE', '#AF1212'],
+  ['#E3DEFF', '#511AAB'],
+];
+
 export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const [workspaceName, setWorkspaceId] = useState<string>('');
   const [canCreate, setCanCreate] = useState<boolean>(false);
@@ -30,22 +42,34 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
     canvas.height = 100;
     canvas.width = 100;
     const ctx = canvas.getContext('2d');
-    if (ctx) {
+    return new Promise<string>((resolve, reject) => {
-      // TODO: add a image list
+      if (ctx) {
-      ctx.fillStyle = '#FFDE03';
+        const randomNumber = Math.floor(Math.random() * 5);
-      ctx.fillRect(0, 0, 100, 100);
+        const randomColor = DefaultHeadImgColors[randomNumber];
-      ctx.font = "600 50px 'PingFang SC', 'Microsoft Yahei'";
+        ctx.fillStyle = randomColor[0];
-      ctx.fillStyle = '#FFF';
+        ctx.fillRect(0, 0, 100, 100);
-      ctx.textAlign = 'center';
+        ctx.font = "600 50px 'PingFang SC', 'Microsoft Yahei'";
-      ctx.textBaseline = 'middle';
+        ctx.fillStyle = randomColor[1];
-      ctx.fillText(workspaceName[0], 50, 50);
+        ctx.textAlign = 'center';
-      const blob = canvas.toBlob(blob => {}, 'image/png');
+        ctx.textBaseline = 'middle';
-    }
+        ctx.fillText(workspaceName[0], 50, 50);
+        canvas.toBlob(blob => {
+          if (blob) {
+            const blobId = uploadBlob({ blob });
+            resolve(blobId);
+          } else {
+            reject();
+          }
+        }, 'image/png');
+      } else {
+        reject();
+      }
+    });
   };
-  const handleCreateWorkspace = () => {
+  const handleCreateWorkspace = async () => {
     setCanCreate(true);
-    createDefaultHeadImg(workspaceName);
+    const blobId = await createDefaultHeadImg(workspaceName);
-    createWorkspace({ name: workspaceName, avatar: '' })
+    createWorkspace({ name: workspaceName, avatar: `/api/blob/${blobId}` })
       .then(data => {
         // @ts-ignore
         router.push(`/workspace/${data.created_at}`);

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

@@ -1,13 +1,15 @@
 import { SettingsIcon } from '@blocksuite/icons';
 import { styled } from '@/styles';
 import { IconButton } from '@/ui/button';
+import { MouseEventHandler } from 'react';
 
 type SettingProps = {
   onClick?: () => void;
 };
 
 export const FooterSetting = ({ onClick }: SettingProps) => {
-  const handleClick = () => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
     onClick && onClick();
   };
   return (
@@ -15,7 +17,7 @@ export const FooterSetting = ({ onClick }: SettingProps) => {
       className="footer-setting"
       onClick={e => {
         e.stopPropagation();
-        handleClick();
+        handleClick(e);
       }}
     >
       <SettingsIcon />

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

@@ -2,12 +2,16 @@ import { UsersIcon } from '@blocksuite/icons';
 import { styled } from '@/styles';
 import { IconButton } from '@/ui/button';
 
-export const FooterUsers = () => {
+type FooterUsersProps = {
+  memberCount: number;
+};
+
+export const FooterUsers = ({ memberCount = 1 }: FooterUsersProps) => {
   return (
     <Wrapper className="footer-users">
       <>
         <UsersIcon />
-        <Tip>99+</Tip>
+        <Tip>{memberCount > 99 ? '99+' : memberCount}</Tip>
       </>
     </Wrapper>
   );

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

@@ -14,6 +14,7 @@ interface WorkspaceItemProps {
   name: string;
   icon: string;
   type: WorkspaceType;
+  memberCount: number;
   onClick?: (workspaceId: string) => void;
 }
 
@@ -23,6 +24,7 @@ export const WorkspaceItem = ({
   icon,
   type,
   onClick,
+  memberCount,
 }: WorkspaceItemProps) => {
   const router = useRouter();
 
@@ -44,7 +46,7 @@ export const WorkspaceItem = ({
         <Name title={name}>{name}</Name>
       </WorkspaceItemContent>
       <Footer>
-        <FooterUsers />
+        <FooterUsers memberCount={memberCount} />
         <FooterSetting onClick={handleClickSetting} />
       </Footer>
     </StyledWrapper>

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

@@ -1,14 +1,18 @@
 import { Popper } from '@/ui/popper';
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { SelectorPopperContent } from './SelectorPopperContent';
+import { useState } from 'react';
 
 export const WorkspaceSelector = () => {
+  const [isShow, setIsShow] = useState(false);
+
   return (
     <Popper
-      content={<SelectorPopperContent />}
+      content={<SelectorPopperContent isShow={isShow} />}
       zIndex={1000}
       placement="bottom-start"
       trigger="click"
+      onVisibleChange={setIsShow}
     >
       <SelectorWrapper>
         <Avatar alt="Affine" />

packages/app/src/providers/app-state-provider/context.ts

@@ -10,12 +10,12 @@ export type LoadWorkspaceHandler = (
   workspaceId: string,
   websocket?: boolean
 ) => Promise<StoreWorkspace | null> | null;
-
 export type CreateEditorHandler = (page: StorePage) => EditorContainer | null;
 
 export interface AppStateValue {
   user: AccessTokenMessage | null;
   workspacesMeta: Workspace[];
+  workspaces: Record<string, StoreWorkspace | null>;
 
   currentWorkspaceId: string;
   currentWorkspace: StoreWorkspace | null;
@@ -59,6 +59,7 @@ export const AppState = createContext<AppStateContext>({
   loadWorkspace: undefined,
   loadPage: undefined,
   createPage: undefined,
+  workspaces: {},
 });
 
 export const useAppState = () => {

packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx

@@ -101,6 +101,11 @@ const DynamicBlocksuite = ({
             resolve(workspace);
           });
         } else {
+          const updates = await downloadWorkspace({ workspaceId });
+          updates &&
+            Workspace.Y.applyUpdate(workspace.doc, new Uint8Array(updates));
+          // if after update, the space:meta is empty, then we need to get map with doc
+          workspace.doc.getMap('space:meta');
           resolve(workspace);
         }
       });

packages/app/src/providers/app-state-provider/provider.tsx

@@ -5,6 +5,8 @@ import {
   authorizationEvent,
   AccessTokenMessage,
   getWorkspaces,
+  WorkspaceType,
+  getWorkspaceDetail,
 } from '@pathfinder/data-services';
 import { AppState } from './context';
 import type {
@@ -26,6 +28,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     currentWorkspace: null,
     currentPage: null,
     editor: null,
+    workspaces: {},
   });
 
   const [loadWorkspaceHandler, _setLoadWorkspaceHandler] =
@@ -129,14 +132,21 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
   useEffect(() => {
     const callback = async (user: AccessTokenMessage | null) => {
       const workspacesMeta = user ? await getWorkspaces() : [];
-      const workspaces = await Promise.all(
+      const workspacesList = await Promise.all(
         workspacesMeta?.map(async ({ id }) => {
           const workspace = (await loadWorkspaceHandler?.(id)) || null;
-          return workspace;
+          return { id, workspace };
         })
       );
+
+      let workspaces: Record<string, Workspace | null> = {};
+
+      workspacesList.forEach(({ id, workspace }) => {
+        workspaces[id] = workspace;
+      });
+
       // TODO: add meta info to workspace meta
-      setState(state => ({ ...state, user: user, workspacesMeta }));
+      setState(state => ({ ...state, user: user, workspacesMeta, workspaces }));
     };
     authorizationEvent.onChange(callback);
 

packages/data-services/src/request/request/authorization/authorization.ts

@@ -57,6 +57,7 @@ function parseAccessToken(token: string): AccessTokenMessage | null {
     const message: AccessTokenMessage = JSON.parse(
       b64DecodeUnicode(token.split('.')[1])
     );
+    message.id = message.id.toString();
     return message;
   } catch (error) {
     return null;

packages/data-services/src/request/request/authorization/types.ts

@@ -2,7 +2,7 @@ export interface AccessTokenMessage {
   create_at: number;
   exp: number;
   email: string;
-  id: number;
+  id: string;
   name: string;
   avatar_url: string;
 }

packages/data-services/src/sdks/user.ts

@@ -42,7 +42,7 @@ export interface GetUserByEmailParams {
 }
 
 export interface User {
-  id: number;
+  id: string;
   name: string;
   email: string;
   avatar_url: string;

packages/data-services/src/sdks/workspace.ts

@@ -46,7 +46,9 @@ export async function getWorkspaceDetail(
     url: `/api/workspace/${params.id}`,
     method: 'GET',
   });
-
+  if (data.data?.owner.id) {
+    data.data.owner.id = String(data.data?.owner.id);
+  }
   return data.data;
 }
 
@@ -199,3 +201,20 @@ export async function downloadWorkspace(
 
   return data.data;
 }
+
+export async function uploadBlob(params: { blob: Blob }): Promise<string> {
+  const data = await request({
+    url: '/api/blob',
+    method: 'PUT',
+    data: params.blob,
+  });
+  return data.data;
+}
+
+export async function getBlob(params: { blobId: string }): Promise<string> {
+  const data = await request({
+    url: `/api/blob/${params.blobId}`,
+    method: 'GET',
+  });
+  return data.data;
+}