feat: improve experience of setting and load name

packages/app/src/components/workspace-setting/general/general.tsx

@@ -18,13 +18,18 @@ import { Workspace as StoreWorkspaces } from '@blocksuite/store';
 export const GeneralPage = ({
   workspace,
   owner,
-  workspaces,
 }: {
   workspace: Workspace;
   owner: WorkspaceDetails[string]['owner'];
   workspaces: Record<string, StoreWorkspaces | null>;
 }) => {
-  const { user, currentWorkspace, workspacesMeta } = useAppState();
+  const {
+    user,
+    currentWorkspace,
+    workspacesMeta,
+    workspaces,
+    refreshWorkspacesMeta,
+  } = useAppState();
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(
     workspaces[workspace.id]?.meta.name ||
@@ -37,6 +42,7 @@ export const GeneralPage = ({
     setWorkspaceName(newName);
     currentWorkspace?.meta.setName(newName);
     workspaces[workspace.id]?.meta.setName(newName);
+    refreshWorkspacesMeta();
   };
   const currentWorkspaceIndex = workspacesMeta.findIndex(
     meta => meta.id === workspace.id
@@ -66,7 +72,7 @@ export const GeneralPage = ({
           alt="workspace avatar"
           src={workspaces[workspace.id]?.meta.avatar || ''}
         >
-          W
+          {workspaces[workspace.id]?.meta.name[0]}
         </StyledSettingAvatar>
         {/* TODO: add upload logic */}
         {/* {isOwner ? (

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -68,7 +68,6 @@ type WorkspaceSettingProps = {
   onClose?: () => void;
   workspace: Workspace;
   owner: WorkspaceDetails[string]['owner'];
-  workspaces: Record<string, StoreWorkspaces | null>;
 };
 
 const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
@@ -116,9 +115,8 @@ export const WorkspaceSetting = ({
   onClose,
   workspace,
   owner,
-  workspaces,
 }: WorkspaceSettingProps) => {
-  const { user } = useAppState();
+  const { user, workspaces } = useAppState();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
   const handleTabChange = (tab: ActiveTab) => {
     setActiveTab(tab);

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

@@ -12,12 +12,7 @@ import {
 } from './WorkspaceItem';
 import { WorkspaceSetting } from '@/components/workspace-setting';
 import { useCallback, useEffect, useState } from 'react';
-import {
-  downloadWorkspace,
-  getWorkspaceDetail,
-  WorkspaceType,
-} from '@pathfinder/data-services';
-import { Workspace } from '@blocksuite/store';
+import { getWorkspaceDetail, WorkspaceType } from '@pathfinder/data-services';
 
 export type WorkspaceDetails = Record<
   string,
@@ -31,16 +26,15 @@ type SelectorPopperContentProps = {
 export const SelectorPopperContent = ({
   isShow,
 }: SelectorPopperContentProps) => {
-  const { user, workspacesMeta } = useAppState();
+  const { user, workspacesMeta, workspaces, refreshWorkspacesMeta } =
+    useAppState();
   const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
     null
   );
   const [workSpaceDetails, setWorkSpaceDetails] = useState<WorkspaceDetails>(
     {}
   );
-  const [workspaces, setWorkspaces] = useState<
-    Record<string, Workspace | null>
-  >({});
+
   const handleClickSettingWorkspace = (workspaceId: string) => {
     setSettingWorkspaceId(workspaceId);
   };
@@ -81,38 +75,13 @@ export const SelectorPopperContent = ({
     setWorkSpaceDetails(workSpaceDetails);
   }, [user, workspacesMeta]);
 
-  // TODO: add to context
-  const refreshWorkspaces = useCallback(async () => {
-    const workspacesList = await Promise.all(
-      workspacesMeta.map(async ({ id }) => {
-        const workspace = new Workspace({
-          room: id,
-          providers: [],
-        });
-        const updates = await downloadWorkspace({ workspaceId: id });
-        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');
-        return { id, workspace };
-      })
-    );
-    const workspaces: Record<string, Workspace | null> = {};
-
-    workspacesList.forEach(({ id, workspace }) => {
-      workspaces[id] = workspace;
-    });
-
-    setWorkspaces(workspaces);
-  }, [workspacesMeta]);
-
   useEffect(() => {
     if (isShow) {
       setSettingWorkspaceId(null);
+      refreshWorkspacesMeta();
       refreshDetails();
-      refreshWorkspaces();
     }
-  }, [isShow, refreshDetails]);
+  }, [isShow]);
 
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
@@ -142,7 +111,7 @@ export const SelectorPopperContent = ({
                 workspaces[workspace.id]?.meta.name ||
                 (workspace.type === WorkspaceType.Private
                   ? user.name
-                  : `loading...`) // workspace-${workspace.id}
+                  : `loading...`)
               }
               memberCount={workSpaceDetails[workspace.id]?.memberCount || 1}
             />
@@ -162,7 +131,6 @@ export const SelectorPopperContent = ({
               name: user.name,
             }
           }
-          workspaces={workspaces}
         />
       ) : null}
       <StyledDivider />

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

@@ -12,7 +12,6 @@ export const WorkspaceSelector = () => {
   const workspaceMeta = workspacesMeta.find(
     meta => String(meta.id) === String(currentWorkspaceId)
   );
-  console.log('currentWorkspace', currentWorkspace, workspaceMeta);
   return (
     <Popper
       content={<SelectorPopperContent isShow={isShow} />}