fix: fix filename and tabname

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

@@ -31,7 +31,6 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
     updateWorkspaceMeta,
   } = useTemporaryHelper();
 
-  console.log('workspaceMetaList: ', workspaceMetaList);
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -164,16 +163,15 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                 confirmText: user ? 'Enable' : 'Sign in and Enable',
                 cancelText: 'Skip',
               }).then(confirm => {
-                if (user) {
-                  console.log('enable cloud');
-                  workspaceId &&
-                    setTimeout(() => {
-                      updateWorkspaceMeta(workspaceId as string, {
-                        type: 'cloud',
-                      });
-                    }, 1000);
-                } else {
-                  confirm && login();
+                if (confirm) {
+                  if (user) {
+                    workspaceId &&
+                      updateWorkspaceMeta(workspaceId, { isPublish: true });
+                  } else {
+                    login();
+                    workspaceId &&
+                      updateWorkspaceMeta(workspaceId, { isPublish: true });
+                  }
                 }
               });
             }}

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

@@ -24,12 +24,15 @@ import {
   Workspace,
 } from '@/hooks/mock-data/mock';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
+import { StyledMemberWarp } from './general/style';
+import { useConfirm } from '@/providers/confirm-provider';
 
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const [members, setMembers] = useState<User[]>([]);
-  const { user, login } = useTemporaryHelper();
+  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
+  const { confirm } = useConfirm();
   // const refreshMembers = useCallback(() => {
   //   getDataCenter()
   //     .then(dc =>
@@ -57,7 +60,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
 
   return (
     <div>
-      {user ? (
+      {workspace.type === 'cloud' ? (
         <>
           <StyledMemberTitleContainer>
             <StyledMemberNameContainer>
@@ -169,20 +172,36 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
           </StyledMemberButtonContainer>
         </>
       ) : (
-        <>
-          <div>
+        <StyledMemberWarp>
+          <div style={{ flex: 1 }}>
             Collaborating with other members requires AFFiNE Cloud service.
           </div>
-          <div>
+          <div style={{ height: '40px' }}>
             <Button
+              type="primary"
+              shape="circle"
               onClick={() => {
-                login();
+                confirm({
+                  title: 'Enable AFFiNE Cloud?',
+                  content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+                  confirmText: user ? 'Enable' : 'Sign in and Enable',
+                  cancelText: 'Skip',
+                }).then(confirm => {
+                  if (confirm) {
+                    if (user) {
+                      updateWorkspaceMeta(workspace.id, { isPublish: true });
+                    } else {
+                      login();
+                      updateWorkspaceMeta(workspace.id, { isPublish: true });
+                    }
+                  }
+                });
               }}
             >
               Enable AFFiNE Cloud
             </Button>
           </div>
-        </>
+        </StyledMemberWarp>
       )}
     </div>
   );

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

@@ -14,15 +14,15 @@ import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { useConfirm } from '@/providers/confirm-provider';
 
 export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
+  console.log('workspace: ', workspace);
   const shareUrl =
     window.location.host + '/workspace/' + workspace.id + '?share=true';
 
-  const { login, updateWorkspaceMeta, user, currentWorkspace } =
-    useTemporaryHelper();
+  const { login, updateWorkspaceMeta, user } = useTemporaryHelper();
   const { confirm } = useConfirm();
 
   const togglePublic = (flag: boolean) => {
-    updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
+    updateWorkspaceMeta(workspace.id, { isPublish: flag });
   };
 
   const copyUrl = () => {
@@ -37,20 +37,22 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
       confirmText: user ? 'Enable' : 'Sign in and Enable',
       cancelText: 'Skip',
     }).then(confirm => {
-      if (user) {
-        updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
-      } else {
-        confirm && login();
-        updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
+      if (confirm) {
+        if (user) {
+          updateWorkspaceMeta(workspace.id, { isPublish: true });
+        } else {
+          login();
+          updateWorkspaceMeta(workspace.id, { isPublish: true });
+        }
       }
     });
   };
   return (
     <>
-      {currentWorkspace.type === 'cloud' ? (
+      {workspace.type === 'cloud' ? (
         <div>
           <StyledPublishContent>
-            {currentWorkspace?.isPublish ? (
+            {workspace?.isPublish ? (
               <>
                 <StyledPublishExplanation>
                   Publishing to web requires AFFiNE Cloud service .
@@ -74,7 +76,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
-          {!currentWorkspace?.isPublish ? (
+          {!workspace.isPublish ? (
             <Button
               onClick={() => {
                 togglePublic(true);

packages/app/src/components/workspace-setting/general/style.ts

@@ -26,3 +26,12 @@ export const StyledSettingAvatarContent = styled('div')(() => {
 export const StyledSettingAvatar = styled(MuiAvatar)(() => {
   return { height: '72px', width: '72px', marginRight: '24px' };
 });
+
+export const StyledMemberWarp = styled('div')(() => {
+  return {
+    display: 'flex',
+    height: '500px',
+    flexDirection: 'column',
+    padding: '60px 0',
+  };
+});

packages/app/src/components/workspace-setting/style.ts

@@ -117,6 +117,7 @@ export const StyledMemberTitleContainer = styled('div')(() => {
     display: 'flex',
     marginTop: '60px',
     fontWeight: '500',
+    flex: 1,
   };
 });
 

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

@@ -75,7 +75,7 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
         <StyledSettingTagIconContainer>
           <UsersIcon />
         </StyledSettingTagIconContainer>
-        Members
+        Collaboration
       </WorkspaceSettingTagItem>
       <WorkspaceSettingTagItem
         isActive={activeTab === ActiveTab.publish}