Merge remote-tracking branch 'refs/remotes/origin/feat/datacenter-dev'

Conflicts: packages/app/src/components/create-workspace/index.tsx packages/data-center/package.json packages/data-center/src/index.ts pnpm-lock.yaml
2026-02-21 08:17:10 +08:00 · 2023-01-12 17:11:27 +08:00
parent 06be432b5a 4fe2febda3
commit 6a9b3b2fd3
76 changed files with 1477 additions and 3796 deletions
--- a/packages/app/next.config.js
+++ b/packages/app/next.config.js
@@ -15,6 +15,8 @@ const profileTarget = {
  local: '127.0.0.1:3000',
 };

+// 100.77.180.48:11001
+
 const getRedirectConfig = profile => {
  const target = profileTarget[profile || 'dev'] || profileTarget['dev'];

--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -11,10 +11,10 @@
  "dependencies": {
    "@affine/datacenter": "workspace:*",
    "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.4.0-20230110112105-ef07332",
-    "@blocksuite/editor": "0.4.0-20230110112105-ef07332",
+    "@blocksuite/blocks": "0.3.1-20230109032243-37ad3ba",
+    "@blocksuite/editor": "0.3.1-20230109032243-37ad3ba",
    "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/store": "0.4.0-20230110112105-ef07332",
+    "@blocksuite/store": "0.3.1-20230109032243-37ad3ba",
    "@emotion/css": "^11.10.0",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
--- a/packages/app/src/components/create-workspace/index.tsx
+++ b/packages/app/src/components/create-workspace/index.tsx
@@ -1,5 +1,4 @@
 import { styled } from '@/styles';
-import { useRouter } from 'next/router';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
@@ -7,6 +6,9 @@ import Input from '@/ui/input';
 import { KeyboardEvent } from 'react';
 import { useTranslation } from '@affine/i18n';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useRouter } from 'next/router';
+import { toast } from '@/ui/toast';
+
 interface ModalProps {
  open: boolean;
  onClose: () => void;
@@ -18,11 +20,11 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
  const router = useRouter();
  const handleCreateWorkspace = async () => {
    const workspace = await createWorkspace(workspaceName);
-    if (workspace && workspace.room) {
-      router.replace(`/workspace/${workspace.room}`);
+    if (workspace && workspace.id) {
+      router.replace(`/workspace/${workspace.id}`);
      onClose();
    } else {
-      console.log('create error');
+      toast('create error');
    }
  };
  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
--- a/packages/app/src/components/editor/index.tsx
+++ b/packages/app/src/components/editor/index.tsx
@@ -31,7 +31,6 @@ export const Editor = ({ page, workspace, setEditor }: Props) => {

    const editor = new EditorContainer();
    editor.page = page;
-
    editorContainer.current?.appendChild(editor);
    if (page.isEmpty) {
      const isFirstPage = workspace?.meta.pageMetas.length === 1;
--- a/packages/app/src/components/header/QuickSearchButton.tsx
+++ b/packages/app/src/components/header/QuickSearchButton.tsx
@@ -4,6 +4,20 @@ import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useTranslation } from '@affine/i18n';
+import { styled } from '@/styles';
+
+const StyledIconButtonWithAnimate = styled(IconButton)(() => {
+  return {
+    svg: {
+      transition: 'transform 0.15s ease-in-out',
+    },
+    ':hover': {
+      svg: {
+        transform: 'translateY(3px)',
+      },
+    },
+  };
+});
 export const QuickSearchButton = ({
  onClick,
  ...props
@@ -12,7 +26,7 @@ export const QuickSearchButton = ({
  const { t } = useTranslation();
  return (
    <Tooltip content={t('Switch to')} placement="bottom">
-      <IconButton
+      <StyledIconButtonWithAnimate
        data-testid="header-quickSearchButton"
        {...props}
        onClick={e => {
@@ -21,7 +35,7 @@ export const QuickSearchButton = ({
        }}
      >
        <ArrowDownIcon />
-      </IconButton>
+      </StyledIconButtonWithAnimate>
    </Tooltip>
  );
 };
--- a/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx
+++ b/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from '@affine/i18n';

 export const TrashButtonGroup = () => {
  const { permanentlyDeletePage } = usePageHelper();
-  const { currentWorkspaceId } = useAppState();
+  const { currentWorkspace } = useAppState();
  const { toggleDeletePage } = usePageHelper();
  const { confirm } = useConfirm();
  const router = useRouter();
@@ -38,7 +38,7 @@ export const TrashButtonGroup = () => {
            confirmType: 'danger',
          }).then(confirm => {
            if (confirm) {
-              router.push(`/workspace/${currentWorkspaceId}/all`);
+              router.push(`/workspace/${currentWorkspace?.id}/all`);
              permanentlyDeletePage(id);
            }
          });
--- a/packages/app/src/components/import/index.tsx
+++ b/packages/app/src/components/import/index.tsx
@@ -22,11 +22,11 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
  const { currentWorkspace } = useAppState();
  const { t } = useTranslation();
  const _applyTemplate = function (pageId: string, template: Template) {
-    const page = currentWorkspace?.getPage(pageId);
+    const page = currentWorkspace?.blocksuiteWorkspace?.getPage(pageId);

    const title = template.name;
    if (page) {
-      currentWorkspace?.setPageMeta(page.id, { title });
+      currentWorkspace?.blocksuiteWorkspace?.setPageMeta(page.id, { title });
      if (page && page.root === null) {
        setTimeout(() => {
          const editor = document.querySelector('editor-container');
--- a/packages/app/src/components/loading/styled.ts
+++ b/packages/app/src/components/loading/styled.ts
@@ -1,19 +1,22 @@
 import { styled } from '@/styles';

 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-export const StyledLoadingWrapper = styled.div<{ size?: number }>(
-  ({ size = 40 }) => {
-    return {
-      width: size * 4,
-      height: size * 4,
-      position: 'relative',
-    };
-  }
-);
+export const StyledLoadingWrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return !['size'].includes(prop);
+  },
+})<{ size?: number }>(({ size = 40 }) => {
+  return {
+    width: size * 4,
+    height: size * 4,
+    position: 'relative',
+  };
+});
 export const StyledLoading = styled.div`
  position: absolute;
  left: 25%;
-  top: 25%;
+  top: 50%;
+  transform: rotateX(55deg) rotateZ(-45deg);
  @keyframes slide {
    0% {
      transform: translate(var(--sx), var(--sy));
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -51,7 +51,7 @@ const FavoriteTag = ({
        style={{
          color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
        }}
-        className="favorite-button"
+        className={favorite ? '' : 'favorite-button'}
      >
        {favorite ? (
          <FavouritedIcon data-testid="favourited-icon" />
@@ -67,13 +67,15 @@ export const PageList = ({
  pageList,
  showFavoriteTag = false,
  isTrash = false,
+  isPublic = false,
 }: {
  pageList: PageMeta[];
  showFavoriteTag?: boolean;
  isTrash?: boolean;
+  isPublic?: boolean;
 }) => {
  const router = useRouter();
-  const { currentWorkspaceId } = useAppState();
+  const { currentWorkspace } = useAppState();
  const { t } = useTranslation();
  if (pageList.length === 0) {
    return <Empty />;
@@ -98,9 +100,15 @@ export const PageList = ({
              <StyledTableRow
                key={`${pageMeta.id}-${index}`}
                onClick={() => {
-                  router.push(
-                    `/workspace/${currentWorkspaceId}/${pageMeta.id}`
-                  );
+                  if (isPublic) {
+                    router.push(
+                      `/public-workspace/${router.query.workspaceId}/${pageMeta.id}`
+                    );
+                  } else {
+                    router.push(
+                      `/workspace/${currentWorkspace?.id}/${pageMeta.id}`
+                    );
+                  }
                }}
              >
                <TableCell>
@@ -124,19 +132,21 @@ export const PageList = ({
                  dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                  backupKey={isTrash ? 'trashDate' : 'createDate'}
                />
-                <TableCell
-                  style={{ padding: 0 }}
-                  data-testid={`more-actions-${pageMeta.id}`}
-                  onClick={e => {
-                    e.stopPropagation();
-                  }}
-                >
-                  {isTrash ? (
-                    <TrashOperationCell pageMeta={pageMeta} />
-                  ) : (
-                    <OperationCell pageMeta={pageMeta} />
-                  )}
-                </TableCell>
+                {!isPublic ? (
+                  <TableCell
+                    style={{ padding: 0 }}
+                    data-testid={`more-actions-${pageMeta.id}`}
+                    onClick={e => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    {isTrash ? (
+                      <TrashOperationCell pageMeta={pageMeta} />
+                    ) : (
+                      <OperationCell pageMeta={pageMeta} />
+                    )}
+                  </TableCell>
+                ) : null}
              </StyledTableRow>
            );
          })}
--- a/packages/app/src/components/quick-search/Input.tsx
+++ b/packages/app/src/components/quick-search/Input.tsx
@@ -17,10 +17,8 @@ export const Input = (props: {
  const [isComposition, setIsComposition] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
-  const { currentWorkspaceId, workspaceList, currentWorkspace } = useAppState();
-  const isPublish = workspaceList.find(
-    meta => String(meta.id) === String(currentWorkspaceId)
-  )?.isPublish;
+  const { currentWorkspace } = useAppState();
+
  useEffect(() => {
    inputRef.current?.addEventListener(
      'blur',
@@ -79,8 +77,8 @@ export const Input = (props: {
          }
        }}
        placeholder={
-          isPublish
-            ? `Search in ${currentWorkspace?.meta.name}`
+          currentWorkspace?.isPublish
+            ? `Search in ${currentWorkspace?.blocksuiteWorkspace?.meta.name}`
            : 'Quick Search...'
        }
      />
--- a/packages/app/src/components/quick-search/Results.tsx
+++ b/packages/app/src/components/quick-search/Results.tsx
@@ -9,7 +9,6 @@ import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './NoResultSVG';
 import { useTranslation } from '@affine/i18n';
 import usePageHelper from '@/hooks/use-page-helper';
-import usePageMetaList from '@/hooks/use-page-meta-list';
 export const Results = (props: {
  query: string;
  loading: boolean;
@@ -21,12 +20,11 @@ export const Results = (props: {
  const setLoading = props.setLoading;
  const setShowCreatePage = props.setShowCreatePage;
  const { triggerQuickSearchModal } = useModal();
-  const pageMetaList = usePageMetaList();
  const { openPage } = usePageHelper();
  const router = useRouter();
-  const { currentWorkspaceId } = useAppState();
+  const { currentWorkspace, pageList } = useAppState();
  const { search } = usePageHelper();
-  const List = useSwitchToConfig(currentWorkspaceId);
+  const List = useSwitchToConfig(currentWorkspace?.id);
  const [results, setResults] = useState(new Map<string, string | undefined>());
  const { t } = useTranslation();
  useEffect(() => {
@@ -37,12 +35,12 @@ export const Results = (props: {
  }, [query, setResults, setLoading]);
  const pageIds = [...results.values()];

-  const resultsPageMeta = pageMetaList.filter(
+  const resultsPageMeta = pageList.filter(
    page => pageIds.indexOf(page.id) > -1 && !page.trash
  );

  useEffect(() => {
-    setShowCreatePage(resultsPageMeta.length ? false : true);
+    setShowCreatePage(!resultsPageMeta.length);
    //Determine whether to display the  ‘+ New page’
  }, [resultsPageMeta, setShowCreatePage]);
  return loading ? null : (
--- a/packages/app/src/components/quick-search/config.ts
+++ b/packages/app/src/components/quick-search/config.ts
@@ -1,15 +1,16 @@
+import { FC, SVGProps } from 'react';
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
 import { useTranslation } from '@affine/i18n';

 export const useSwitchToConfig = (
-  currentWorkspaceId: string
+  currentWorkspaceId?: string
 ): {
  title: string;
  href: string;
-  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  icon: FC<SVGProps<SVGSVGElement>>;
 }[] => {
  const { t } = useTranslation();
-  const List = [
+  return [
    {
      title: t('All pages'),
      href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
@@ -28,5 +29,4 @@ export const useSwitchToConfig = (
      icon: TrashIcon,
    },
  ];
-  return List;
 };
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -22,15 +22,13 @@ const isMac = () => {
  return getUaHelper().isMacOs;
 };
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
-  const { currentMetaWorkSpace } = useAppState();
+  const { currentWorkspace } = useAppState();

  const [query, setQuery] = useState('');
  const [loading, setLoading] = useState(true);
  const [showCreatePage, setShowCreatePage] = useState(true);
  const { triggerQuickSearchModal } = useModal();

-  const isPublish = currentMetaWorkSpace?.isPublish;
-
  // Add  ‘⌘+K’ shortcut keys as switches
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
@@ -96,7 +94,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                setShowCreatePage={setShowCreatePage}
              />
            </StyledContent>
-            {isPublish ? (
+            {currentWorkspace?.isPublish ? (
              <></>
            ) : showCreatePage ? (
              <>
--- a/packages/app/src/components/workspace-avatar/index.tsx
+++ b/packages/app/src/components/workspace-avatar/index.tsx
@@ -1,7 +1,4 @@
-import { useAppState } from '@/providers/app-state-provider';
 import { stringToColour } from '@/utils';
-import { useEffect, useState } from 'react';
-
 interface IWorkspaceAvatar {
  size: number;
  name: string;
@@ -25,7 +22,9 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
            overflow: 'hidden',
          }}
        >
-          <img src={props.avatar} alt="" />
+          <picture>
+            <img src={props.avatar} alt="" />
+          </picture>
        </div>
      ) : (
        <div
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -2,7 +2,6 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
-import { SignOut } from '@/hooks/mock-data/mock';
 import { CreateWorkspaceModal } from '../create-workspace';
 import {
  CloudUnsyncedIcon,
@@ -10,12 +9,11 @@ import {
  UsersIcon,
  AddIcon,
 } from '@blocksuite/icons';
-// import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { useUserHelper } from '@/hooks/use-user-helper';
+import { useConfirm } from '@/providers/ConfirmProvider';

 interface WorkspaceModalProps {
  open: boolean;
@@ -24,9 +22,9 @@ interface WorkspaceModalProps {

 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
  const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-  // const { confirm } = useConfirm();
-  const { workspaceList, currentWorkspace } = useAppState();
-  const { login, user } = useUserHelper();
+  const { confirm } = useConfirm();
+  const { workspaceList, currentWorkspace, login, user, logout } =
+    useAppState();
  const router = useRouter();
  return (
    <div>
@@ -55,7 +53,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                      router.replace(`/workspace/${item.id}`);
                      onClose();
                    }}
-                    active={item.id === currentWorkspace.room}
+                    active={item.id === currentWorkspace?.id}
                    key={index}
                  >
                    <span style={{ width: '100px' }}>
@@ -101,7 +99,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                      {item.provider === 'affine' && (
                        <CloudInsyncIcon fontSize={24} />
                      )}
-                      {item.isPublish && <UsersIcon fontSize={24} />}
+                      {item.published && <UsersIcon fontSize={24} />}
                    </span>
                    {/* {item.isLocal ? 'isLocal' : ''}/ */}
                  </WorkspaceItem>
@@ -137,9 +135,9 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
          <Footer>
            {!user ? (
              <Button
-                onClick={() => {
-                  login();
-                  toast('login success');
+                onClick={async () => {
+                  await login();
+                  toast('Login success');
                }}
              >
                Sign in AFFiNE Cloud
@@ -147,7 +145,20 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
            ) : (
              <Button
                onClick={() => {
-                  SignOut();
+                  confirm({
+                    title: 'Sign out?',
+                    content: `All data has been stored in the cloud. `,
+                    confirmText: 'Sign out',
+                    cancelText: 'Cancel',
+                  }).then(async confirm => {
+                    if (confirm) {
+                      if (user) {
+                        await logout();
+                        router.replace(`/workspace`);
+                        toast('Enabled success');
+                      }
+                    }
+                  });
                }}
              >
                Sign out of AFFiNE Cloud
--- a/packages/app/src/components/workspace-setting/ExportPage.tsx
+++ b/packages/app/src/components/workspace-setting/ExportPage.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@/styles';
-import { WorkspaceInfo } from '@affine/datacenter';
+import { WorkspaceUnit } from '@affine/datacenter';

 export const ExportPageTitleContainer = styled('div')(() => {
  return {
@@ -9,7 +9,7 @@ export const ExportPageTitleContainer = styled('div')(() => {
    flex: 1,
  };
 });
-export const ExportPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
+export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  return (
    <ExportPageTitleContainer>
      Export Workspace{' '}
--- a/packages/app/src/components/workspace-setting/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/MembersPage.tsx
@@ -1,207 +0,0 @@
-import {
-  StyledMemberAvatar,
-  StyledMemberButtonContainer,
-  StyledMemberEmail,
-  StyledMemberInfo,
-  StyledMemberListContainer,
-  StyledMemberListItem,
-  StyledMemberName,
-  StyledMemberNameContainer,
-  StyledMemberRoleContainer,
-  StyledMemberTitleContainer,
-  StyledMoreVerticalButton,
-  StyledPublishExplanation,
-} from './style';
-import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
-import { useEffect, useState } from 'react';
-import { Button, IconButton } from '@/ui/button';
-import { InviteMembers } from '../invite-members/index';
-import { Menu, MenuItem } from '@/ui/menu';
-import { Empty } from '@/ui/empty';
-// import {
-//   deleteMember,
-//   getMembers,
-//   User,
-//   Workspace,
-// } from '@/hooks/mock-data/mock';
-import { WorkspaceInfo } from '@affine/datacenter';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
-import { StyledMemberWarp } from './general/style';
-import { useConfirm } from '@/providers/ConfirmProvider';
-
-// import { useAppState } from '@/providers/app-state-provider';
-export const MembersPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
-  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
-  const [members, setMembers] = useState<[{ name: string; email: string }]>([
-    { name: 'affine', email: 'tttt' },
-  ]);
-  console.log('setMembers: ', setMembers);
-  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
-  const { confirm } = useConfirm();
-  // const refreshMembers = useCallback(() => {
-  //   getDataCenter()
-  //     .then(dc =>
-  //       dc.apis.getWorkspaceMembers({
-  //         id: workspace.id,
-  //       })
-  //     )
-  //     .then(data => {
-  //       setMembers(data);
-  //     })
-  //     .catch(err => {
-  //       console.log(err);
-  //     });
-  // }, [workspace.id]);
-  const setMembersList = () => {
-    // setMembers([]);
-    // const members = getMembers(workspace.id);
-    // members && setMembers(members);
-  };
-  useEffect(() => {
-    setMembersList();
-    // refreshMembers();
-  });
-
-  return (
-    <div>
-      {workspace.provider === 'cloud' ? (
-        <>
-          <StyledMemberTitleContainer>
-            <StyledMemberNameContainer>
-              Users({members.length})
-            </StyledMemberNameContainer>
-            <StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
-          </StyledMemberTitleContainer>
-          <StyledMemberListContainer>
-            {members.length ? (
-              members.map((member, index) => {
-                return (
-                  <StyledMemberListItem key={index}>
-                    <StyledMemberNameContainer>
-                      <StyledMemberAvatar alt="member avatar">
-                        <EmailIcon></EmailIcon>
-                      </StyledMemberAvatar>
-
-                      <StyledMemberInfo>
-                        <StyledMemberName>{member.name}</StyledMemberName>
-
-                        <StyledMemberEmail>{member.email}</StyledMemberEmail>
-                      </StyledMemberInfo>
-                    </StyledMemberNameContainer>
-                    <StyledMemberRoleContainer>
-                      {/* {member.accepted
-                        ? member.type !== 99
-                          ? 'Member'
-                          : 'Workspace Owner'
-                        : 'Pending'} */}
-                      Pending
-                    </StyledMemberRoleContainer>
-                    <StyledMoreVerticalButton>
-                      <Menu
-                        content={
-                          <>
-                            <MenuItem
-                              onClick={() => {
-                                // deleteMember(workspace.id, 0);
-                                setMembersList();
-                                // confirm({
-                                //   title: 'Delete Member?',
-                                //   content: `will delete member`,
-                                //   confirmText: 'Delete',
-                                //   confirmType: 'danger',
-                                // }).then(confirm => {
-                                // getDataCenter()
-                                //   .then(dc =>
-                                //     dc.apis.removeMember({
-                                //       permissionId: member.id,
-                                //     })
-                                //   )
-                                //   .then(() => {
-                                //     // console.log('data: ', data);
-                                //     toast('Moved to Trash');
-                                //     // refreshMembers();
-                                //   });
-                                // });
-                              }}
-                              icon={<TrashIcon />}
-                            >
-                              Delete
-                            </MenuItem>
-                          </>
-                        }
-                        placement="bottom-end"
-                        disablePortal={true}
-                      >
-                        <IconButton>
-                          <MoreVerticalIcon />
-                        </IconButton>
-                      </Menu>
-                    </StyledMoreVerticalButton>
-                  </StyledMemberListItem>
-                );
-              })
-            ) : (
-              <Empty
-                width={648}
-                sx={{ marginTop: '60px' }}
-                height={300}
-              ></Empty>
-            )}
-          </StyledMemberListContainer>
-          <StyledMemberButtonContainer>
-            <Button
-              onClick={() => {
-                setIsInviteModalShow(true);
-              }}
-              type="primary"
-              shape="circle"
-            >
-              Invite Members
-            </Button>
-            <InviteMembers
-              onClose={() => {
-                setIsInviteModalShow(false);
-              }}
-              onInviteSuccess={() => {
-                setMembersList();
-                setIsInviteModalShow(false);
-                // refreshMembers();
-              }}
-              workspaceId={workspace.id}
-              open={isInviteModalShow}
-            ></InviteMembers>
-          </StyledMemberButtonContainer>
-        </>
-      ) : (
-        <StyledMemberWarp>
-          <>Collaborating with other members requires AFFiNE Cloud service.</>
-          <StyledPublishExplanation>
-            <Button
-              type="primary"
-              shape="circle"
-              onClick={() => {
-                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>
-          </StyledPublishExplanation>
-        </StyledMemberWarp>
-      )}
-    </div>
-  );
-};
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@@ -9,20 +9,16 @@ import {
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { toast } from '@/ui/toast';
-import { useConfirm } from '@/providers/ConfirmProvider';
 // import { useAppState } from '@/providers/app-state-provider3';
+import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { WorkspaceInfo } from '@affine/datacenter';

-export const PublishPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
-  const shareUrl =
-    window.location.host + '/workspace/' + workspace.id + '?share=true';
-  const { publishWorkspace } = useWorkspaceHelper();
+export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
+  const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
+  const { publishWorkspace, enableWorkspace } = useWorkspaceHelper();

-  const { confirm } = useConfirm();
-
-  const togglePublic = (flag: boolean) => {
-    workspace.id && publishWorkspace(workspace?.id, flag);
+  const togglePublic = async (flag: boolean) => {
+    await publishWorkspace(workspace.id.toString(), flag);
  };

  const copyUrl = () => {
@@ -30,30 +26,15 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
    toast('Copied url to clipboard');
  };

-  const enableAffineCloud = () => {
-    confirm({
-      title: 'Enable AFFiNE Cloud?',
-      content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-      confirmText:
-        workspace.provider === 'local' ? 'Enable' : 'Sign in and Enable',
-      cancelText: 'Skip',
-    }).then(confirm => {
-      if (confirm) {
-        // if (user) {
-        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        // } else {
-        //   login();
-        //   updateWorkspaceMeta(workspace.id, { type: 'cloud' });
-        // }
-      }
-    });
+  const enableAffineCloud = async () => {
+    await enableWorkspace();
  };
  return (
    <>
-      {workspace.provider === 'cloud' ? (
+      {workspace.provider === 'affine' ? (
        <div>
          <StyledPublishContent>
-            {workspace?.isPublish ? (
+            {workspace?.published ? (
              <>
                <StyledPublishExplanation>
                  Publishing to web requires AFFiNE Cloud service .
@@ -75,7 +56,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
              </StyledPublishExplanation>
            )}
          </StyledPublishContent>
-          {workspace.isPublish ? (
+          {workspace.published ? (
            <Button
              onClick={() => {
                togglePublic(false);
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -6,20 +6,10 @@ import {
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
-import { WorkspaceInfo } from '@affine/datacenter';
+import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { useAppState } from '@/providers/app-state-provider';
-import { useConfirm } from '@/providers/ConfirmProvider';
-import { toast } from '@/ui/toast';
-import { useUserHelper } from '@/hooks/use-user-helper';
-import { useRouter } from 'next/router';
-export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
-  // console.log('workspace: ', workspace);
+export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const { enableWorkspace } = useWorkspaceHelper();
-  const { currentWorkspace } = useAppState();
-  const { confirm } = useConfirm();
-  const { user, login } = useUserHelper();
-  const router = useRouter();
  return (
    <div>
      <StyledPublishContent>
@@ -33,22 +23,8 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {

            <StyledPublishCopyContainer>
              <Button
-                onClick={() => {
-                  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(async confirm => {
-                    if (confirm) {
-                      // if (user) {
-                      //   await login();
-                      // }
-                      const id = await enableWorkspace(currentWorkspace);
-                      router.push(`/workspace/${id}`);
-                      toast('Enabled success');
-                    }
-                  });
+                onClick={async () => {
+                  await enableWorkspace();
                }}
                type="primary"
                shape="circle"
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -14,42 +14,29 @@ import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import { WorkspaceInfo } from '@affine/datacenter';
+import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
+export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const [showDelete, setShowDelete] = useState<boolean>(false);
  const [showLeave, setShowLeave] = useState<boolean>(false);
  const [uploading, setUploading] = useState<boolean>(false);
  const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
  const { updateWorkspace } = useWorkspaceHelper();
-  const isOwner = true;
  const handleChangeWorkSpaceName = (newName: string) => {
    setWorkspaceName(newName);
  };
-  const handleClickDelete = () => {
-    setShowDelete(true);
-  };
-  const handleCloseDelete = () => {
-    setShowDelete(false);
-  };
-
-  const handleClickLeave = () => {
-    setShowLeave(true);
-  };
-  const handleCloseLeave = () => {
-    setShowLeave(false);
-  };
  const handleUpdateWorkspaceName = () => {
-    console.log('currentWorkspace: ', currentWorkspace);
-    updateWorkspace({ name: workspaceName }, currentWorkspace);
+    currentWorkspace &&
+      updateWorkspace({ name: workspaceName }, currentWorkspace);
  };

  const fileChange = async (file: File) => {
-    // console.log('file: ', file);
-    // setUploading(true);
+    setUploading(true);
    const blob = new Blob([file], { type: file.type });
-    updateWorkspace({ avatarBlob: blob }, currentWorkspace);
+    currentWorkspace &&
+      (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
+    setUploading(false);
  };

  return workspace ? (
@@ -84,16 +71,19 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
          placeholder="Workspace Name"
          maxLength={14}
          minLength={1}
+          disabled={!isOwner}
          onChange={handleChangeWorkSpaceName}
        ></Input>
-        <TextButton
-          onClick={() => {
-            handleUpdateWorkspaceName();
-          }}
-          style={{ marginLeft: '0px' }}
-        >
-          ✔️
-        </TextButton>
+        {isOwner ? (
+          <TextButton
+            onClick={() => {
+              handleUpdateWorkspaceName();
+            }}
+            style={{ marginLeft: '0px' }}
+          >
+            ✔️
+          </TextButton>
+        ) : null}
      </StyledSettingInputContainer>
      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
      <StyledSettingInputContainer>
@@ -102,25 +92,39 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
      <StyledDeleteButtonContainer>
        {isOwner ? (
          <>
-            <Button type="danger" shape="circle" onClick={handleClickDelete}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowDelete(true);
+              }}
+            >
              Delete Workspace
            </Button>
            <WorkspaceDelete
              open={showDelete}
-              onClose={handleCloseDelete}
+              onClose={() => {
+                setShowDelete(false);
+              }}
              workspace={workspace}
            />
          </>
        ) : (
          <>
-            <Button type="danger" shape="circle" onClick={handleClickLeave}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowLeave(true);
+              }}
+            >
              Leave Workspace
            </Button>
            <WorkspaceLeave
              open={showLeave}
-              onClose={handleCloseLeave}
-              workspaceName={workspaceName}
-              workspaceId={workspace.id}
+              onClose={() => {
+                setShowLeave(false);
+              }}
            />
          </>
        )}
--- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
@@ -12,17 +12,14 @@ import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useRouter } from 'next/router';
-import {
-  deleteWorkspace,
-  getWorkspaces,
-  // Workspace,
-} from '@/hooks/mock-data/mock';
-import { WorkspaceInfo } from '@affine/datacenter';
+
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';

 interface WorkspaceDeleteProps {
  open: boolean;
  onClose: () => void;
-  workspace: WorkspaceInfo;
+  workspace: WorkspaceUnit;
 }

 export const WorkspaceDelete = ({
@@ -32,23 +29,15 @@ export const WorkspaceDelete = ({
 }: WorkspaceDeleteProps) => {
  const [deleteStr, setDeleteStr] = useState<string>('');
  const router = useRouter();
-
+  const { deleteWorkSpace } = useWorkspaceHelper();
  const handlerInputChange = (workspaceName: string) => {
    setDeleteStr(workspaceName);
  };

  const handleDelete = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.deleteWorkspace({ id: workspaceId });
-    // router.push(`/workspace/${nextWorkSpaceId}`);
-    deleteWorkspace(workspace.id);
-    const workspaceList = getWorkspaces();
-    if (workspaceList.length) {
-      router.push(`/workspace/${workspaceList[0].id}`);
-    } else {
-      router.push(`/workspace`);
-    }
+    await deleteWorkSpace();
    onClose();
+    router.push(`/workspace`);
  };

  return (
--- a/packages/app/src/components/workspace-setting/general/leave/Leave.tsx
+++ b/packages/app/src/components/workspace-setting/general/leave/Leave.tsx
@@ -7,29 +7,19 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';

 interface WorkspaceDeleteProps {
  open: boolean;
  onClose: () => void;
-  workspaceName: string;
-  workspaceId: string;
 }

-export const WorkspaceLeave = ({
-  open,
-  onClose,
-  workspaceId,
-}: WorkspaceDeleteProps) => {
-  console.log('workspaceId: ', workspaceId);
-  // const router = useRouter();
-  // const { refreshWorkspacesMeta } = useAppState();
+export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
+  const { leaveWorkSpace } = useWorkspaceHelper();
  const handleLeave = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.leaveWorkspace({ id: workspaceId });
-    // // router.push(`/workspace/${nextWorkSpaceId}`);
-    // refreshWorkspacesMeta();
+    await leaveWorkSpace();
    onClose();
  };

--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -26,11 +26,3 @@ 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',
-    flexDirection: 'column',
-    padding: '40px 0',
-  };
-});
--- a/packages/app/src/components/workspace-setting/index.ts
+++ b/packages/app/src/components/workspace-setting/index.ts
@@ -1,5 +1,5 @@
 export * from './general';
 export * from './ExportPage';
-export * from './MembersPage';
+export * from './member';
 export * from './SyncPage';
 export * from './PublishPage';
--- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
@@ -4,9 +4,9 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { useState } from 'react';
-// import { getDataCenter } from '@affine/datacenter';
 import { Avatar } from '@mui/material';
-import { setMember } from '@/hooks/mock-data/mock';
+import useMembers from '@/hooks/use-members';
+import { User } from '@affine/datacenter';
 interface LoginModalProps {
  open: boolean;
  onClose: () => void;
@@ -43,46 +43,27 @@ export const debounce = <T extends (...args: any) => any>(
 };

 const gmailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@gmail\.com$/;
-export const InviteMembers = ({
+export const InviteMemberModal = ({
  open,
  onClose,
-  workspaceId,
  onInviteSuccess,
 }: LoginModalProps) => {
  const [email, setEmail] = useState<string>('');
  const [showMember, setShowMember] = useState<boolean>(false);
  const [showTip, setShowTip] = useState<boolean>(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [userData, setUserData] = useState<any>({});
+  const [userData, setUserData] = useState<User | null>(null);
+  const { inviteMember, getUserByEmail } = useMembers();
  const inputChange = (value: string) => {
    setShowMember(true);
    if (gmailReg.test(value)) {
      setEmail(value);
      setShowTip(false);
-      setUserData({
-        name: 'wxl',
-        avatar: 'https://avatars.githubusercontent.com/u/20501502?v=4',
-        email: value,
+      getUserByEmail(value).then(data => {
+        if (data?.name) {
+          setUserData(data);
+          setShowTip(false);
+        }
      });
-      // debounce(
-      //   () => {
-      //     getDataCenter()
-      //       .then(dc =>
-      //         dc.apis.getUserByEmail({
-      //           email: value,
-      //           workspace_id: workspaceId,
-      //         })
-      //       )
-      //       .then(data => {
-      //         if (data?.name) {
-      //           setUserData(data);
-      //           setShowTip(false);
-      //         }
-      //       });
-      //   },
-      //   300,
-      //   true
-      // )();
    } else {
      setShowTip(true);
    }
@@ -118,8 +99,8 @@ export const InviteMembers = ({
                    <NoFind>Non-Gmail is not supported</NoFind>
                  ) : (
                    <Member>
-                      {userData?.avatar_url ? (
-                        <Avatar src={userData?.avatar_url}></Avatar>
+                      {userData?.avatar ? (
+                        <Avatar src={userData?.avatar}></Avatar>
                      ) : (
                        <MemberIcon>
                          <EmailIcon></EmailIcon>
@@ -139,19 +120,9 @@ export const InviteMembers = ({
            <Button
              shape="circle"
              type="primary"
-              onClick={() => {
-                setMember(workspaceId, userData);
+              onClick={async () => {
+                await inviteMember(email);
                onInviteSuccess();
-                // getDataCenter()
-                //   .then(dc => dc.apis.inviteMember({ id: workspaceId, email }))
-                //   .then(() => {
-                //     onClose();
-                //     onInviteSuccess && onInviteSuccess();
-                //   })
-                //   .catch(err => {
-                //     // toast('Invite failed');
-                //     console.log(err);
-                //   });
              }}
            >
              Invite
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -0,0 +1,173 @@
+import {
+  StyledMemberAvatar,
+  StyledMemberButtonContainer,
+  StyledMemberEmail,
+  StyledMemberInfo,
+  StyledMemberListContainer,
+  StyledMemberListItem,
+  StyledMemberName,
+  StyledMemberNameContainer,
+  StyledMemberRoleContainer,
+  StyledMemberTitleContainer,
+  StyledMoreVerticalButton,
+  StyledPublishExplanation,
+  StyledMemberWarp,
+} from './style';
+import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+import { Button, IconButton } from '@/ui/button';
+import { InviteMemberModal } from './InviteMemberModal';
+import { Menu, MenuItem } from '@/ui/menu';
+import { Empty } from '@/ui/empty';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useConfirm } from '@/providers/ConfirmProvider';
+import { toast } from '@/ui/toast';
+import useMembers from '@/hooks/use-members';
+import Loading from '@/components/loading';
+import { Wrapper } from '@/ui/layout';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+
+export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
+  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
+  const { members, removeMember, loaded } = useMembers();
+  const { enableWorkspace } = useWorkspaceHelper();
+  const { confirm } = useConfirm();
+
+  if (workspace.provider === 'affine') {
+    return (
+      <>
+        <StyledMemberListContainer>
+          {!loaded && (
+            <Wrapper justifyContent="center">
+              <Loading size={25} />
+            </Wrapper>
+          )}
+          {loaded && members.length === 0 && (
+            <Empty width={648} sx={{ marginTop: '60px' }} height={300} />
+          )}
+          {loaded && members.length && (
+            <>
+              <StyledMemberTitleContainer>
+                <StyledMemberNameContainer>
+                  Users({members.length})
+                </StyledMemberNameContainer>
+                <StyledMemberRoleContainer>
+                  Access level
+                </StyledMemberRoleContainer>
+              </StyledMemberTitleContainer>
+              {members.map((member, index) => {
+                const user = Object.assign(
+                  {
+                    avatar_url: '',
+                    email: '',
+                    id: '',
+                    name: '',
+                  },
+                  member.user
+                );
+                return (
+                  <StyledMemberListItem key={index}>
+                    <StyledMemberNameContainer>
+                      <StyledMemberAvatar
+                        alt="member avatar"
+                        src={user.avatar_url}
+                      >
+                        <EmailIcon />
+                      </StyledMemberAvatar>
+
+                      <StyledMemberInfo>
+                        <StyledMemberName>{user.name}</StyledMemberName>
+                        <StyledMemberEmail>
+                          {member.user.email}
+                        </StyledMemberEmail>
+                      </StyledMemberInfo>
+                    </StyledMemberNameContainer>
+                    <StyledMemberRoleContainer>
+                      {member.accepted
+                        ? member.type !== 99
+                          ? 'Member'
+                          : 'Workspace Owner'
+                        : 'Pending'}
+                    </StyledMemberRoleContainer>
+                    <StyledMoreVerticalButton>
+                      <Menu
+                        content={
+                          <>
+                            <MenuItem
+                              onClick={async () => {
+                                const confirmRemove = await confirm({
+                                  title: 'Delete Member?',
+                                  content: `will delete member`,
+                                  confirmText: 'Delete',
+                                  confirmType: 'danger',
+                                });
+
+                                if (!confirmRemove) {
+                                  return;
+                                }
+                                await removeMember(member.id);
+                                toast(`${user.name} has been removed`);
+                              }}
+                              icon={<TrashIcon />}
+                            >
+                              Delete
+                            </MenuItem>
+                          </>
+                        }
+                        placement="bottom-end"
+                        disablePortal={true}
+                      >
+                        <IconButton>
+                          <MoreVerticalIcon />
+                        </IconButton>
+                      </Menu>
+                    </StyledMoreVerticalButton>
+                  </StyledMemberListItem>
+                );
+              })}
+            </>
+          )}
+        </StyledMemberListContainer>
+        <StyledMemberButtonContainer>
+          <Button
+            onClick={() => {
+              setIsInviteModalShow(true);
+            }}
+            type="primary"
+            shape="circle"
+          >
+            Invite Members
+          </Button>
+          <InviteMemberModal
+            onClose={() => {
+              setIsInviteModalShow(false);
+            }}
+            onInviteSuccess={() => {
+              setIsInviteModalShow(false);
+              // refreshMembers();
+            }}
+            workspaceId={workspace.id}
+            open={isInviteModalShow}
+          ></InviteMemberModal>
+        </StyledMemberButtonContainer>
+      </>
+    );
+  }
+
+  return (
+    <StyledMemberWarp>
+      <>Collaborating with other members requires AFFiNE Cloud service.</>
+      <StyledPublishExplanation>
+        <Button
+          type="primary"
+          shape="circle"
+          onClick={async () => {
+            await enableWorkspace();
+          }}
+        >
+          Enable AFFiNE Cloud
+        </Button>
+      </StyledPublishExplanation>
+    </StyledMemberWarp>
+  );
+};
--- a/packages/app/src/components/workspace-setting/member/index.ts
+++ b/packages/app/src/components/workspace-setting/member/index.ts
@@ -0,0 +1 @@
+export * from './MembersPage';
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -0,0 +1,106 @@
+import { styled } from '@/styles';
+import MuiAvatar from '@mui/material/Avatar';
+
+export const StyledMemberTitleContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    marginTop: '60px',
+    fontWeight: '500',
+    flex: 1,
+  };
+});
+
+export const StyledMemberAvatar = styled(MuiAvatar)(() => {
+  return { height: '40px', width: '40px' };
+});
+
+export const StyledMemberNameContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '402px',
+  };
+});
+
+export const StyledMemberRoleContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '222px',
+  };
+});
+
+export const StyledMemberListContainer = styled('ul')(() => {
+  return {
+    marginTop: '15px',
+    overflowY: 'scroll',
+  };
+});
+
+export const StyledMemberListItem = styled('li')(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    height: '72px',
+  };
+});
+
+export const StyledMemberInfo = styled('div')(() => {
+  return {
+    paddingLeft: '12px',
+  };
+});
+
+export const StyledMemberName = styled('div')(({ theme }) => {
+  return {
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '16px',
+    color: theme.colors.textColor,
+  };
+});
+
+export const StyledMemberEmail = styled('div')(({ theme }) => {
+  return {
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '22px',
+    color: theme.colors.iconColor,
+  };
+});
+
+export const StyledMemberButtonContainer = styled('div')(() => {
+  return {
+    marginTop: '14px',
+  };
+});
+
+export const StyledMoreVerticalButton = styled('button')(() => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '24px',
+    height: '24px',
+    cursor: 'pointer',
+  };
+});
+
+export const StyledPublishExplanation = styled('div')(() => {
+  return {
+    paddingRight: '48px',
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
+    flex: 1,
+    marginTop: '60px',
+  };
+});
+
+export const StyledMemberWarp = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '40px 0',
+  };
+});
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -1,8 +1,6 @@
 import { styled } from '@/styles';
-import { Button } from '@/ui/button';
-import MuiAvatar from '@mui/material/Avatar';

-export const StyledSettingContainer = styled('div')(({ theme }) => {
+export const StyledSettingContainer = styled('div')(() => {
  return {
    display: 'flex',
    padding: '50px',
@@ -12,7 +10,7 @@ export const StyledSettingContainer = styled('div')(({ theme }) => {
  };
 });

-export const StyledSettingSidebar = styled('div')(({ theme }) => {
+export const StyledSettingSidebar = styled('div')(() => {
  {
    return {
      flexShrink: 0,
@@ -96,99 +94,6 @@ export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
  }
 );

-export const StyledAvatarUploadBtn = styled(Button)(({ theme }) => {
-  return {
-    backgroundColor: theme.colors.hoverBackground,
-    color: theme.colors.primaryColor,
-    margin: '0 12px 0 24px',
-  };
-});
-
-export const StyledMemberTitleContainer = styled('div')(() => {
-  return {
-    display: 'flex',
-    marginTop: '60px',
-    fontWeight: '500',
-    flex: 1,
-  };
-});
-
-export const StyledMemberAvatar = styled(MuiAvatar)(() => {
-  return { height: '40px', width: '40px' };
-});
-
-export const StyledMemberNameContainer = styled('div')(() => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    width: '402px',
-  };
-});
-
-export const StyledMemberRoleContainer = styled('div')(() => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    width: '222px',
-  };
-});
-
-export const StyledMemberListContainer = styled('ul')(() => {
-  return {
-    marginTop: '15px',
-    overflowY: 'scroll',
-  };
-});
-
-export const StyledMemberListItem = styled('li')(() => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    height: '72px',
-  };
-});
-
-export const StyledMemberInfo = styled('div')(() => {
-  return {
-    paddingLeft: '12px',
-  };
-});
-
-export const StyledMemberName = styled('div')(({ theme }) => {
-  return {
-    fontWeight: '400',
-    fontSize: '18px',
-    lineHeight: '16px',
-    color: theme.colors.textColor,
-  };
-});
-
-export const StyledMemberEmail = styled('div')(({ theme }) => {
-  return {
-    fontWeight: '400',
-    fontSize: '16px',
-    lineHeight: '22px',
-    color: theme.colors.iconColor,
-  };
-});
-
-export const StyledMemberButtonContainer = styled('div')(() => {
-  return {
-    marginTop: '14px',
-  };
-});
-
-export const StyledMoreVerticalButton = styled('button')(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '24px',
-    height: '24px',
-    cursor: 'pointer',
-  };
-});
-
 export const StyledPublishExplanation = styled('div')(() => {
  return {
    paddingRight: '48px',
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -5,7 +5,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
  const [workspaceListShow, setWorkspaceListShow] = useState(false);
-  const { currentMetaWorkSpace, workspaceList } = useAppState();
+  const { currentWorkspace, workspaceList } = useAppState();

  useEffect(() => {
    if (workspaceList.length === 0) {
@@ -23,7 +23,7 @@ export const WorkspaceSelector = () => {
        <Avatar
          alt="Affine"
          data-testid="workspace-avatar"
-          src={currentMetaWorkSpace?.avatar}
+          src={currentWorkspace?.avatar}
        >
          <div
            style={{
@@ -32,13 +32,13 @@ export const WorkspaceSelector = () => {
          >
            <WorkspaceAvatar
              size={28}
-              name={currentMetaWorkSpace?.name ?? 'AFFiNE'}
-              avatar={currentMetaWorkSpace?.avatar ?? ''}
+              name={currentWorkspace?.name ?? 'AFFiNE'}
+              avatar={currentWorkspace?.avatar ?? ''}
            />
          </div>
        </Avatar>
        <WorkspaceName data-testid="workspace-name">
-          {currentMetaWorkSpace?.name ?? 'AFFiNE'}
+          {currentWorkspace?.name ?? 'AFFiNE'}
        </WorkspaceName>
      </SelectorWrapper>
      <WorkspaceModal
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -5,14 +5,12 @@ import {
  StyledLink,
  StyledListItem,
  StyledListItemForWorkspace,
-  // StyledListItemForWorkspace,
  StyledNewPageButton,
  StyledSliderBar,
  StyledSliderBarWrapper,
  StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-// import { WorkspaceSelector } from './WorkspaceSelector';
 import Collapse from '@mui/material/Collapse';
 import {
  ArrowDownIcon,
@@ -30,15 +28,13 @@ import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
 import { IconButton } from '@/ui/button';
 import useLocalStorage from '@/hooks/use-local-storage';
-import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
-// import { WorkspaceSetting } from '@/components/workspace-setting';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceSelector } from './WorkspaceSelector/WorkspaceSelector';

 const FavoriteList = ({ showList }: { showList: boolean }) => {
  const { openPage } = usePageHelper();
-  const pageList = usePageMetaList();
+  const { pageList } = useAppState();
  const router = useRouter();
  const { t } = useTranslation();
  const favoriteList = pageList.filter(p => p.favorite && !p.trash);
@@ -71,13 +67,13 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
  const { triggerQuickSearchModal, triggerImportModal } = useModal();
  const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const { currentWorkspaceId } = useAppState();
+  const { currentWorkspace } = useAppState();
  const { openPage, createPage } = usePageHelper();
  const router = useRouter();
  const { t } = useTranslation();
  const [showTip, setShowTip] = useState(false);
  const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true);
-
+  const currentWorkspaceId = currentWorkspace?.id;
  const paths = {
    all: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
    favorite: currentWorkspaceId
--- a/packages/app/src/hooks/mock-data/mock.ts
+++ b/packages/app/src/hooks/mock-data/mock.ts
@@ -1,160 +0,0 @@
-export interface Workspace {
-  name: string; // 名称
-  id: string; //唯一标识
-  isPublish?: boolean; // 是否公开
-  isLocal?: boolean; // 是否全部数据都在本地
-  avatar?: string; // 封面
-  type: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的
-  workspaceOwner?: User; // 本地工作空间的拥有者
-}
-
-export interface User {
-  name: string;
-  id: string;
-  email: string;
-  avatar: string;
-}
-
-export function updateWorkspaceMeta(
-  workspaceId: string,
-  workspaceData: {
-    name?: string;
-    avatar?: string;
-    type?: 'local' | 'cloud' | 'join';
-  }
-) {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-    if (workspace.id === workspaceId) {
-      workspaceData.name && (workspace.name = workspaceData.name);
-      workspaceData.avatar && (workspace.avatar = workspaceData.avatar);
-      workspaceData.type && (workspace.type = workspaceData.type);
-      return workspaceData;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  const activeWorkspace = getActiveWorkspace();
-  workspaceData.name && (activeWorkspace.name = workspaceData.name);
-  workspaceData.avatar && (activeWorkspace.avatar = workspaceData.avatar);
-
-  workspaceData.type && (activeWorkspace.type = workspaceData.type);
-  console.log(workspaceData);
-  setActiveWorkspace(activeWorkspace);
-}
-export function createWorkspace(workspaceName: string) {
-  const workspaceId = 'workspace-' + Date.now();
-  const workspaceData = {
-    name: workspaceName,
-    id: workspaceId,
-    isPublish: false,
-    isLocal: true,
-    avatar: '',
-    type: 'local',
-  } as Workspace;
-  const workspacesMeta = getWorkspaces();
-  workspacesMeta.push(workspaceData);
-  localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
-  setActiveWorkspace(workspaceData);
-  return { workspaceId };
-}
-
-export function getWorkspaces(): Workspace[] {
-  const workspacesMeta = JSON.parse(
-    localStorage.getItem('affine-workspace') ?? '[]'
-  );
-  return workspacesMeta;
-}
-
-export function deleteWorkspace(workspaceId: string) {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.filter(() => {
-    return workspaceId !== workspaceId;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-}
-
-export function getMembers(id: string): User[] {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  return memberMap[id] || [];
-}
-
-export function setMember(workspaceId: string, member: User) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  memberMap[workspaceId] = memberMap[workspaceId] || [];
-  memberMap[workspaceId].push(member);
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-
-export function deleteMember(workspaceId: string, index: number) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  const memberList = memberMap[workspaceId];
-  memberList.splice(index, 1);
-  memberMap[workspaceId] = memberList;
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-export function leaveWorkspace() {
-  return true;
-}
-
-export function setWorkspacePublish(id: string, isPublish: boolean): boolean {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-    if (workspace.id === id) {
-      workspace.isPublish = isPublish;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  return isPublish;
-}
-
-export function getWorkspaceById(id: string) {
-  const workspacesMeta = getWorkspaces();
-  return workspacesMeta.find((workspace: Workspace) => {
-    return workspace.id === id;
-  });
-}
-
-export function getPagesByWorkspaceId(workspaceId: string) {
-  if (!workspaceId) return [];
-  const workspacesMeta = [];
-  for (let i = 0; i < 10; i++) {
-    workspacesMeta.push({
-      id: 'page-' + i,
-      name: 'page ' + i,
-    });
-  }
-}
-
-export function getActiveWorkspace(): Workspace {
-  return JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}');
-}
-
-export function setActiveWorkspace(workspaceData: Workspace) {
-  console.log('workspaceData: ', workspaceData);
-  localStorage.setItem(
-    'affine-active-workspace',
-    JSON.stringify(workspaceData)
-  );
-}
-
-export function getUserInfo(): User {
-  return JSON.parse(localStorage.getItem('affine-user') ?? 'null');
-}
-
-export function Login(): void {
-  localStorage.setItem(
-    'affine-user',
-    JSON.stringify({
-      name: 'Diamond',
-      id: 'ttt',
-      email: 'diamond.shx@gmail.com',
-      avatar: 'string',
-    })
-  );
-}
-
-export function SignOut(): void {
-  localStorage.removeItem('affine-user');
-}
--- a/packages/app/src/hooks/use-change-page-meta.ts
+++ b/packages/app/src/hooks/use-change-page-meta.ts
@@ -11,7 +11,7 @@ export const useChangePageMeta = () => {

  return useCallback<ChangePageMeta>(
    (pageId, pageMeta) => {
-      currentWorkspace?.setPageMeta(pageId, {
+      currentWorkspace?.blocksuiteWorkspace?.setPageMeta(pageId, {
        ...pageMeta,
      });
    },
--- a/packages/app/src/hooks/use-current-page-meta.ts
+++ b/packages/app/src/hooks/use-current-page-meta.ts
@@ -9,7 +9,7 @@ export const useCurrentPageMeta = (): PageMeta | null => {
      return null;
    }
    return (
-      (currentWorkspace.meta.pageMetas.find(
+      (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
        p => p.id === currentPage.id
      ) as PageMeta) ?? null
    );
@@ -22,9 +22,11 @@ export const useCurrentPageMeta = (): PageMeta | null => {
  useEffect(() => {
    setCurrentPageMeta(pageMetaHandler);

-    const dispose = currentWorkspace?.meta.pagesUpdated.on(() => {
-      setCurrentPageMeta(pageMetaHandler);
-    }).dispose;
+    const dispose = currentWorkspace?.blocksuiteWorkspace?.meta.pagesUpdated.on(
+      () => {
+        setCurrentPageMeta(pageMetaHandler);
+      }
+    ).dispose;

    return () => {
      dispose?.();
--- a/packages/app/src/hooks/use-ensure-workspace.ts
+++ b/packages/app/src/hooks/use-ensure-workspace.ts
@@ -1,15 +1,15 @@
 import { useState, useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-const defaultOutLineWorkspaceId = 'affine';
-// 'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {
  const [workspaceLoaded, setWorkspaceLoaded] = useState(false);
  const { workspaceList, loadWorkspace, user } = useAppState();
-  console.log('workspaceList: ', workspaceList);
  const router = useRouter();
+  const [activeWorkspaceId, setActiveWorkspaceId] = useState(
+    router.query.workspaceId as string
+  );

  // const defaultOutLineWorkspaceId = '99ce7eb7';
  // console.log(defaultOutLineWorkspaceId);
@@ -18,7 +18,8 @@ export const useEnsureWorkspace = () => {
    // If workspaceList is empty, we need to create a default workspace but not jump to 404
    if (
      workspaceList.length &&
-      router.query.workspaceId &&
+      // FIXME: router is not ready when this hook is called
+      location.pathname.startsWith(`/workspace/${router.query.workspaceId}`) &&
      workspaceList.findIndex(
        meta => meta.id.toString() === router.query.workspaceId
      ) === -1
@@ -35,18 +36,17 @@ export const useEnsureWorkspace = () => {
    //   router.push('/404');
    //   return;
    // }
-
-    const workspaceId = user
-      ? (router.query.workspaceId as string) || workspaceList[0]?.id
-      : (router.query.workspaceId as string) || defaultOutLineWorkspaceId;
-
+    const workspaceId =
+      (router.query.workspaceId as string) || workspaceList[0]?.id;
    loadWorkspace(workspaceId).finally(() => {
      setWorkspaceLoaded(true);
+      setActiveWorkspaceId(activeWorkspaceId);
    });
-  }, [loadWorkspace, router, user, workspaceList]);
+  }, [loadWorkspace, router, user, workspaceList, activeWorkspaceId]);

  return {
    workspaceLoaded,
+    activeWorkspaceId,
  };
 };

--- a/packages/app/src/hooks/use-init-workspace.ts
+++ b/packages/app/src/hooks/use-init-workspace.ts
@@ -1,34 +0,0 @@
-import { useRouter } from 'next/router';
-import { useAppState } from '@/providers/app-state-provider';
-import { useEffect, useRef, useState } from 'react';
-
-export const useInitWorkspace = (disabled?: boolean) => {
-  const [loading, setLoading] = useState(true);
-  // Do not set as a constant, or it will trigger a hell of re-rendering
-  const defaultOutLineWorkspaceId = useRef(new Date().getTime().toString());
-
-  const router = useRouter();
-  const { workspaceList, loadWorkspace, currentWorkspace, currentWorkspaceId } =
-    useAppState();
-  const workspaceId =
-    (router.query.workspaceId as string) ||
-    workspaceList?.[0]?.id ||
-    defaultOutLineWorkspaceId.current;
-
-  useEffect(() => {
-    if (disabled) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    loadWorkspace(workspaceId).finally(() => {
-      setLoading(false);
-    });
-  }, [workspaceId, disabled, loadWorkspace]);
-
-  return {
-    workspaceId,
-    workspace: workspaceId === currentWorkspaceId ? currentWorkspace : null,
-    loading,
-  };
-};
--- a/packages/app/src/hooks/use-members.ts
+++ b/packages/app/src/hooks/use-members.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Member } from '@affine/datacenter';
+import { useAppState } from '@/providers/app-state-provider';
+export const useMembers = () => {
+  const { dataCenter, currentWorkspace } = useAppState();
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const refreshMembers = useCallback(async () => {
+    if (!currentWorkspace || !dataCenter) return;
+    const members = await dataCenter.getMembers(currentWorkspace.id);
+    setMembers(members);
+  }, [dataCenter, currentWorkspace]);
+
+  useEffect(() => {
+    const init = async () => {
+      await refreshMembers();
+      setLoaded(true);
+    };
+    init();
+  }, [refreshMembers]);
+
+  const inviteMember = async (email: string) => {
+    currentWorkspace &&
+      dataCenter &&
+      (await dataCenter.inviteMember(currentWorkspace?.id, email));
+  };
+
+  const removeMember = async (permissionId: number) => {
+    if (!currentWorkspace || !dataCenter) {
+      return;
+    }
+    setLoaded(false);
+    await dataCenter.removeMember(currentWorkspace.id, permissionId);
+    await refreshMembers();
+    setLoaded(true);
+  };
+
+  const getUserByEmail = async (email: string) => {
+    if (!currentWorkspace) return null;
+    return dataCenter?.getUserByEmail(currentWorkspace.id, email);
+  };
+  return {
+    members,
+    removeMember,
+    inviteMember,
+    getUserByEmail,
+    loaded,
+  };
+};
+
+export default useMembers;
--- a/packages/app/src/hooks/use-page-helper.ts
+++ b/packages/app/src/hooks/use-page-helper.ts
@@ -1,9 +1,10 @@
-import { Workspace, uuidv4 } from '@blocksuite/store';
+import { uuidv4 } from '@blocksuite/store';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
 import { PageMeta, useAppState } from '@/providers/app-state-provider';
 import { EditorContainer } from '@blocksuite/editor';
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useRouter } from 'next/router';
+import { WorkspaceUnit } from '@affine/datacenter';

 export type EditorHandlers = {
  createPage: (params?: {
@@ -27,13 +28,15 @@ export type EditorHandlers = {
  ) => Promise<EditorContainer['mode']>;
 };

-const getPageMeta = (workspace: Workspace | null, pageId: string) => {
-  return workspace?.meta.pageMetas.find(p => p.id === pageId);
+const getPageMeta = (workspace: WorkspaceUnit | null, pageId: string) => {
+  return workspace?.blocksuiteWorkspace?.meta.pageMetas.find(
+    p => p.id === pageId
+  );
 };
 export const usePageHelper = (): EditorHandlers => {
  const router = useRouter();
  const changePageMeta = useChangePageMeta();
-  const { currentWorkspace, editor, currentWorkspaceId } = useAppState();
+  const { currentWorkspace, editor } = useAppState();

  return {
    createPage: ({
@@ -44,11 +47,15 @@ export const usePageHelper = (): EditorHandlers => {
        if (!currentWorkspace) {
          return resolve(null);
        }
-        currentWorkspace.createPage(pageId);
-        currentWorkspace.signals.pageAdded.once(addedPageId => {
-          currentWorkspace.setPageMeta(addedPageId, { title });
-          resolve(addedPageId);
-        });
+        currentWorkspace.blocksuiteWorkspace?.createPage(pageId);
+        currentWorkspace.blocksuiteWorkspace?.signals.pageAdded.once(
+          addedPageId => {
+            currentWorkspace.blocksuiteWorkspace?.setPageMeta(addedPageId, {
+              title,
+            });
+            resolve(addedPageId);
+          }
+        );
      });
    },
    toggleFavoritePage: async pageId => {
@@ -78,7 +85,7 @@ export const usePageHelper = (): EditorHandlers => {
    },
    search: (query: QueryContent) => {
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return currentWorkspace!.search(query);
+      return currentWorkspace!.blocksuiteWorkspace!.search(query);
    },
    changePageMode: async (pageId, mode) => {
      const pageMeta = getPageMeta(currentWorkspace, pageId);
@@ -96,17 +103,17 @@ export const usePageHelper = (): EditorHandlers => {
    permanentlyDeletePage: pageId => {
      // TODO:  workspace.meta.removePage or workspace.removePage?
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      currentWorkspace!.meta.removePage(pageId);
+      currentWorkspace!.blocksuiteWorkspace?.meta.removePage(pageId);
    },
    openPage: (pageId, query = {}, newTab = false) => {
      pageId = pageId.replace('space:', '');

      if (newTab) {
-        window.open(`/workspace/${currentWorkspaceId}/${pageId}`, '_blank');
+        window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
        return Promise.resolve(true);
      }
      return router.push({
-        pathname: `/workspace/${currentWorkspaceId}/${pageId}`,
+        pathname: `/workspace/${currentWorkspace?.id}/${pageId}`,
        query,
      });
    },
@@ -116,7 +123,7 @@ export const usePageHelper = (): EditorHandlers => {
      }

      return (
-        (currentWorkspace.meta.pageMetas.find(
+        (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
          page => page.id === pageId
        ) as PageMeta) || null
      );
--- a/packages/app/src/hooks/use-page-meta-list.ts
+++ b/packages/app/src/hooks/use-page-meta-list.ts
@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react';
-import { PageMeta } from '@/providers/app-state-provider';
-import { useAppState } from '@/providers/app-state-provider';
-
-export const usePageMetaList = () => {
-  const { currentWorkspace } = useAppState();
-  const [pageList, setPageList] = useState<PageMeta[]>([]);
-
-  useEffect(() => {
-    if (!currentWorkspace) {
-      return;
-    }
-    setPageList(currentWorkspace.meta.pageMetas as PageMeta[]);
-    const dispose = currentWorkspace.meta.pagesUpdated.on(() => {
-      setPageList(currentWorkspace.meta.pageMetas as PageMeta[]);
-    }).dispose;
-    return () => {
-      dispose();
-    };
-  }, [currentWorkspace]);
-
-  return pageList;
-};
-
-export default usePageMetaList;
--- a/packages/app/src/hooks/use-user-helper.ts
+++ b/packages/app/src/hooks/use-user-helper.ts
@@ -1,28 +0,0 @@
-import { useAppState } from '@/providers/app-state-provider';
-import { User } from '@affine/datacenter';
-import { useEffect, useState } from 'react';
-
-export const useUserHelper = () => {
-  const { dataCenter } = useAppState();
-  const [user, setUser] = useState<User | undefined>(undefined);
-  useEffect(() => {
-    dataCenter
-      .getUserInfo()
-      .then(user => {
-        setUser(user);
-      })
-      .catch(e => {
-        setUser(undefined);
-      });
-  }, []);
-
-  const login = async () => {
-    await dataCenter.login();
-    const user = await dataCenter.getUserInfo();
-    setUser(user);
-  };
-  return {
-    user,
-    login,
-  };
-};
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -1,14 +1,18 @@
 import { useAppState } from '@/providers/app-state-provider';
-import { Workspace } from '@blocksuite/store';
+import { useConfirm } from '@/providers/ConfirmProvider';
+import { toast } from '@/ui/toast';
+import { WorkspaceUnit } from '@affine/datacenter';
+import router from 'next/router';
+
 export const useWorkspaceHelper = () => {
-  const { dataCenter } = useAppState();
+  const { confirm } = useConfirm();
+  const { dataCenter, currentWorkspace, user, login } = useAppState();
  const createWorkspace = async (name: string) => {
    const workspaceInfo = await dataCenter.createWorkspace({
      name: name,
    });
-    if (workspaceInfo && workspaceInfo.room) {
-      const workspace = await dataCenter.loadWorkspace(workspaceInfo.room);
-      return workspace;
+    if (workspaceInfo && workspaceInfo.id) {
+      return await dataCenter.loadWorkspace(workspaceInfo.id);
    }
    return null;
  };
@@ -16,31 +20,56 @@ export const useWorkspaceHelper = () => {
  // const updateWorkspace = async (workspace: Workspace) => {};

  const publishWorkspace = async (workspaceId: string, publish: boolean) => {
-    dataCenter.setWorkspacePublish(workspaceId, publish);
+    await dataCenter.setWorkspacePublish(workspaceId, publish);
  };

  const updateWorkspace = async (
    { name, avatarBlob }: { name?: string; avatarBlob?: Blob },
-    workspace: Workspace
+    workspace: WorkspaceUnit
  ) => {
    if (name) {
      await dataCenter.updateWorkspaceMeta({ name }, workspace);
    }
    if (avatarBlob) {
-      const blobId = await dataCenter.setBlob(workspace, avatarBlob);
-      await dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
+      // const blobId = await dataCenter.setBlob(workspace, avatarBlob);
+      // await dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
    }
  };

-  const enableWorkspace = async (workspace: Workspace) => {
-    const newWorkspaceId = await dataCenter.enableWorkspaceCloud(workspace);
-    // console.log('newWorkspace: ', newWorkspace);
-    return newWorkspaceId;
+  const enableWorkspace = async () => {
+    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(async confirm => {
+      if (confirm && currentWorkspace) {
+        if (!user) {
+          await login();
+        }
+        const workspace = await dataCenter.enableWorkspaceCloud(
+          currentWorkspace
+        );
+        workspace && router.push(`/workspace/${workspace.id}/setting`);
+        toast('Enabled success');
+      }
+    });
  };
+
+  const deleteWorkSpace = async () => {
+    currentWorkspace &&
+      (await dataCenter.deleteWorkspace(currentWorkspace?.id));
+  };
+  const leaveWorkSpace = async () => {
+    currentWorkspace && (await dataCenter.leaveWorkspace(currentWorkspace?.id));
+  };
+
  return {
    createWorkspace,
    publishWorkspace,
    updateWorkspace,
    enableWorkspace,
+    deleteWorkSpace,
+    leaveWorkSpace,
  };
 };
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -21,7 +21,6 @@ import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
 import '@affine/i18n';
-import TemporaryHelperProvider from '@/providers/temporary-helper-provider';

 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
  ssr: false,
@@ -55,10 +54,8 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
      <Logger />
      <ProviderComposer
        contexts={[
-          <TemporaryHelperProvider key="TemporaryHelperProvider" />,
          <ThemeProvider key="ThemeProvider" />,
          <AppStateProvider key="appStateProvider" />,
-          // <AppStateProvider2 key="appStateProvider2" />,
          <ModalProvider key="ModalProvider" />,
          <ConfirmProvider key="ConfirmProvider" />,
        ]}
--- a/packages/app/src/pages/new-workspace/index.tsx
+++ b/packages/app/src/pages/new-workspace/index.tsx
@@ -1,47 +0,0 @@
-import { WorkspaceModal } from '@/components/workspace-modal';
-import { getWorkspaces } from '@/hooks/mock-data/mock';
-import { useEffect, useState } from 'react';
-import { styled } from '@/styles';
-import Button from '@/ui/button/Button';
-
-const Page = () => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const data = getWorkspaces();
-    if (!data.length) {
-      setOpen(true);
-    }
-  }, []);
-  return (
-    <Workspace>
-      <h1>workspace</h1>
-      <div>
-        <Button
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          View Workspace List
-        </Button>
-      </div>
-      <WorkspaceModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-      ></WorkspaceModal>
-    </Workspace>
-  );
-};
-export default Page;
-
-const Workspace = styled.div(({ theme }) => {
-  return {
-    height: '100vh',
-    background: theme.colors.pageBackground,
-    color: '#FFFFFF',
-    fontSize: '18px',
-    fontWeight: 500,
-  };
-});
--- a/packages/app/src/pages/playground/templates.tsx
+++ b/packages/app/src/pages/playground/templates.tsx
@@ -37,11 +37,11 @@ const All = () => {
  const { openPage, createPage } = usePageHelper();
  const { currentWorkspace } = useAppState();
  const _applyTemplate = function (pageId: string, template: Template) {
-    const page = currentWorkspace?.getPage(pageId);
+    const page = currentWorkspace?.blocksuiteWorkspace?.getPage(pageId);

    const title = template.name;
    if (page) {
-      currentWorkspace?.setPageMeta(page.id, { title });
+      currentWorkspace?.blocksuiteWorkspace?.setPageMeta(page.id, { title });
      if (page && page.root === null) {
        setTimeout(async () => {
          const editor = document.querySelector('editor-container');
--- a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -0,0 +1,69 @@
+import { ReactElement, useEffect, useState } from 'react';
+import { useAppState } from '@/providers/app-state-provider';
+import type { NextPageWithLayout } from '../..//_app';
+import { styled } from '@/styles';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { Page as PageStore, Workspace } from '@blocksuite/store';
+const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
+  ssr: false,
+});
+const Page: NextPageWithLayout = () => {
+  const [workspace, setWorkspace] = useState<Workspace>();
+  const [page, setPage] = useState<PageStore>();
+  const { dataCenter } = useAppState();
+  const router = useRouter();
+  useEffect(() => {
+    dataCenter
+      .loadPublicWorkspace(router.query.workspaceId as string)
+      .then(data => {
+        if (data && data.blocksuiteWorkspace) {
+          setWorkspace(data.blocksuiteWorkspace);
+          if (
+            router.query.pageId &&
+            data.blocksuiteWorkspace.meta.pageMetas.find(
+              p => p.id === router.query.pageId
+            )
+          ) {
+            const page = data.blocksuiteWorkspace?.getPage(
+              router.query.pageId as string
+            );
+            page && setPage(page);
+          } else {
+            router.push('/404');
+          }
+        }
+      })
+      .catch(() => {
+        router.push('/404');
+      });
+  }, [router, dataCenter]);
+  return (
+    <PageContainer>
+      {workspace && page && (
+        <DynamicBlocksuite
+          page={page}
+          workspace={workspace}
+          setEditor={editor => {
+            editor.readonly = true;
+          }}
+        />
+      )}
+    </PageContainer>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <div>{page}</div>;
+};
+
+export default Page;
+
+export const PageContainer = styled.div(({ theme }) => {
+  return {
+    height: 'calc(100vh)',
+    padding: '78px 72px',
+    overflowY: 'auto',
+    backgroundColor: theme.colors.pageBackground,
+  };
+});
--- a/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx
+++ b/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx
@@ -0,0 +1,36 @@
+import { PageList } from '@/components/page-list';
+import { ReactElement, useEffect, useState } from 'react';
+import { PageMeta, useAppState } from '@/providers/app-state-provider';
+import { useRouter } from 'next/router';
+import { PageContainer } from './[pageId]';
+const All = () => {
+  const { dataCenter } = useAppState();
+  const router = useRouter();
+  const [pageList, setPageList] = useState<PageMeta[]>([]);
+  useEffect(() => {
+    dataCenter
+      .loadPublicWorkspace(router.query.workspaceId as string)
+      .then(data => {
+        setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]);
+      })
+      .catch(() => {
+        router.push('/404');
+      });
+  }, [router, dataCenter]);
+
+  return (
+    <PageContainer>
+      <PageList
+        pageList={pageList.filter(p => !p.trash)}
+        showFavoriteTag={false}
+        isPublic={true}
+      />
+    </PageContainer>
+  );
+};
+
+All.getLayout = function getLayout(page: ReactElement) {
+  return <div>{page}</div>;
+};
+
+export default All;
--- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
  PropsWithChildren,
  ReactElement,
@@ -31,10 +30,10 @@ const Page: NextPageWithLayout = () => {
      <EditorHeader />
      <MobileModal />

-      {currentPage && (
+      {currentPage && currentWorkspace?.blocksuiteWorkspace && (
        <DynamicBlocksuite
          page={currentPage}
-          workspace={currentWorkspace}
+          workspace={currentWorkspace.blocksuiteWorkspace}
          setEditor={setEditorHandler}
        />
      )}
@@ -52,9 +51,10 @@ const PageDefender = ({ children }: PropsWithChildren) => {
  useEffect(() => {
    const initPage = async () => {
      const pageId = router.query.pageId as string;
-      const isPageExist = !!currentWorkspace!.meta.pageMetas.find(
-        p => p.id === pageId
-      );
+      const isPageExist =
+        currentWorkspace?.blocksuiteWorkspace?.meta?.pageMetas.find(
+          p => p.id === pageId
+        );
      if (!isPageExist) {
        await createPage({ pageId });
      }
--- a/packages/app/src/pages/workspace/[workspaceId]/all.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/all.tsx
@@ -1,18 +1,18 @@
 import { PageList } from '@/components/page-list';
 import { AllPagesIcon } from '@blocksuite/icons';
-import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
 const All = () => {
-  const pageMetaList = usePageMetaList();
+  const { pageList } = useAppState();
  const { t } = useTranslation();
  return (
    <>
      <PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
      <PageList
-        pageList={pageMetaList.filter(p => !p.trash)}
+        pageList={pageList.filter(p => !p.trash)}
        showFavoriteTag={true}
      />
    </>
--- a/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
@@ -1,19 +1,19 @@
 import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
 import { FavouritesIcon } from '@blocksuite/icons';
-import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
 export const Favorite = () => {
-  const pageMetaList = usePageMetaList();
+  const { pageList } = useAppState();
  const { t } = useTranslation();
  return (
    <>
      <PageListHeader icon={<FavouritesIcon />}>
        {t('Favourites')}
      </PageListHeader>
-      <PageList pageList={pageMetaList.filter(p => p.favorite && !p.trash)} />
+      <PageList pageList={pageList.filter(p => p.favorite && !p.trash)} />
    </>
  );
 };
--- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
@@ -7,31 +7,32 @@ import usePageHelper from '@/hooks/use-page-helper';

 const WorkspaceIndex = () => {
  const router = useRouter();
-  const { currentWorkspaceId, currentWorkspace } = useAppState();
+  const { currentWorkspace } = useAppState();
  const { createPage } = usePageHelper();
-  const { workspaceLoaded } = useEnsureWorkspace();
+  const { workspaceLoaded, activeWorkspaceId } = useEnsureWorkspace();

  useEffect(() => {
    const initPage = async () => {
      if (!workspaceLoaded) {
        return;
      }
-      const savedPageId = currentWorkspace?.meta.pageMetas[0]?.id;
+      const savedPageId =
+        currentWorkspace?.blocksuiteWorkspace?.meta.pageMetas[0]?.id;
      if (savedPageId) {
-        router.replace(`/workspace/${currentWorkspaceId}/${savedPageId}`);
+        router.replace(`/workspace/${activeWorkspaceId}/${savedPageId}`);
        return;
      }

      const pageId = await createPage();
-      router.replace(`/workspace/${currentWorkspaceId}/${pageId}`);
+      router.replace(`/workspace/${activeWorkspaceId}/${pageId}`);
    };
    initPage();
  }, [
    currentWorkspace,
-    currentWorkspaceId,
    createPage,
    router,
    workspaceLoaded,
+    activeWorkspaceId,
  ]);

  return <PageLoading />;
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
@@ -23,14 +23,14 @@ import {
 } from '@/components/workspace-setting';
 import { useAppState } from '@/providers/app-state-provider';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { WorkspaceInfo } from '@affine/datacenter';
+import { WorkspaceUnit } from '@affine/datacenter';

 type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export';

 const tabMap: {
  name: TabNames;
  icon: ReactNode;
-  panelRender: (workspace: WorkspaceInfo) => ReactNode;
+  panelRender: (workspace: WorkspaceUnit) => ReactNode;
 }[] = [
  {
    name: 'general',
@@ -60,7 +60,7 @@ const tabMap: {
 ];

 const WorkspaceSetting = () => {
-  const { currentMetaWorkSpace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();

  const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
  const handleTabChange = (tab: TabNames) => {
@@ -70,7 +70,20 @@ const WorkspaceSetting = () => {
  const activeTabPanelRender = tabMap.find(
    tab => tab.name === activeTab
  )?.panelRender;
-
+  let tableArr: {
+    name: TabNames;
+    icon: ReactNode;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = tabMap;
+  if (!isOwner) {
+    tableArr = [
+      {
+        name: 'general',
+        icon: <EditIcon />,
+        panelRender: workspace => <GeneralPage workspace={workspace} />,
+      },
+    ];
+  }
  return (
    <StyledSettingContainer>
      <StyledSettingSidebar>
@@ -78,7 +91,7 @@ const WorkspaceSetting = () => {
          Workspace Settings
        </StyledSettingSidebarHeader>
        <StyledSettingTabContainer>
-          {tabMap.map(({ icon, name }) => {
+          {tableArr.map(({ icon, name }) => {
            return (
              <WorkspaceSettingTagItem
                key={name}
@@ -98,7 +111,7 @@ const WorkspaceSetting = () => {
      </StyledSettingSidebar>

      <StyledSettingContent>
-        {currentMetaWorkSpace && activeTabPanelRender?.(currentMetaWorkSpace)}
+        {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
      </StyledSettingContent>
    </StyledSettingContainer>
  );
--- a/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
@@ -1,17 +1,17 @@
 import { PageListHeader } from '@/components/header';
 import { PageList } from '@/components/page-list';
 import { TrashIcon } from '@blocksuite/icons';
-import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
 export const Trash = () => {
-  const pageMetaList = usePageMetaList();
+  const { pageList } = useAppState();
  const { t } = useTranslation();
  return (
    <>
      <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
-      <PageList pageList={pageMetaList.filter(p => p.trash)} isTrash={true} />
+      <PageList pageList={pageList.filter(p => p.trash)} isTrash={true} />
    </>
  );
 };
--- a/packages/app/src/pages/workspace/index.tsx
+++ b/packages/app/src/pages/workspace/index.tsx
@@ -6,14 +6,14 @@ import { PageLoading } from '@/components/loading';

 export const WorkspaceIndex = () => {
  const router = useRouter();
-  const { currentWorkspaceId } = useAppState();
+  const { currentWorkspace } = useAppState();
  const { workspaceLoaded } = useEnsureWorkspace();

  useEffect(() => {
    if (workspaceLoaded) {
-      router.push(`/workspace/${currentWorkspaceId}`);
+      router.push(`/workspace/${currentWorkspace?.id}`);
    }
-  }, [currentWorkspaceId, router, workspaceLoaded]);
+  }, [currentWorkspace, router, workspaceLoaded]);

  return <PageLoading />;
 };
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@@ -8,7 +8,7 @@ import {
  PageMeta,
 } from './interface';
 import { createDefaultWorkspace } from './utils';
-import { WorkspaceInfo } from '@affine/datacenter';
+import { User } from '@affine/datacenter';

 type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;

@@ -20,63 +20,61 @@ export const AppStateProvider = ({
  children,
 }: PropsWithChildren<AppStateContextProps>) => {
  const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
-
  useEffect(() => {
-    const init = async () => {
+    const initState = async () => {
      const dataCenter = await getDataCenter();
-
+      // Ensure datacenter has at least one workspace
      if (dataCenter.workspaces.length === 0) {
        await createDefaultWorkspace(dataCenter);
      }
-      const currentWorkspace = await dataCenter.loadWorkspace(
-        dataCenter.workspaces[0].id
-      );
-      const currentMetaWorkSpace = dataCenter.workspaces.find(item => {
-        return item.id === currentWorkspace.room;
-      });

      setAppState({
        dataCenter,
        user: (await dataCenter.getUserInfo()) || null,
        workspaceList: dataCenter.workspaces,
-        currentWorkspaceId: dataCenter.workspaces[0].id,
-        currentWorkspace,
-        pageList: currentWorkspace.meta.pageMetas as PageMeta[],
+        currentWorkspace: null,
+        pageList: [],
        currentPage: null,
        editor: null,
        synced: true,
-        currentMetaWorkSpace: currentMetaWorkSpace ?? null,
+        isOwner: false,
      });
    };

-    init();
+    initState();
  }, []);

  useEffect(() => {
-    if (!appState?.currentWorkspace) {
+    if (!appState?.currentWorkspace?.blocksuiteWorkspace) {
      return;
    }
    const currentWorkspace = appState.currentWorkspace;
-    const dispose = currentWorkspace.meta.pagesUpdated.on(() => {
-      setAppState({
-        ...appState,
-        pageList: currentWorkspace.meta.pageMetas as PageMeta[],
-      });
-    }).dispose;
+    const dispose = currentWorkspace?.blocksuiteWorkspace?.meta.pagesUpdated.on(
+      () => {
+        setAppState({
+          ...appState,
+          pageList: currentWorkspace.blocksuiteWorkspace?.meta
+            .pageMetas as PageMeta[],
+        });
+      }
+    ).dispose;
    return () => {
-      dispose();
+      dispose && dispose();
    };
  }, [appState]);

  useEffect(() => {
    const { dataCenter } = appState;
    // FIXME: onWorkspacesChange should have dispose function
-    dataCenter?.onWorkspacesChange(() => {
-      setAppState({
-        ...appState,
-        workspaceList: dataCenter.workspaces,
-      });
-    });
+    dataCenter?.onWorkspacesChange(
+      () => {
+        setAppState({
+          ...appState,
+          workspaceList: dataCenter.workspaces,
+        });
+      },
+      { immediate: false }
+    );
  }, [appState]);

  const loadPage = useRef<AppStateFunction['loadPage']>();
@@ -85,7 +83,7 @@ export const AppStateProvider = ({
    if (pageId === currentPage?.id) {
      return;
    }
-    const page = currentWorkspace?.getPage(pageId) || null;
+    const page = currentWorkspace?.blocksuiteWorkspace?.getPage(pageId) || null;
    setAppState({
      ...appState,
      currentPage: page,
@@ -94,28 +92,30 @@ export const AppStateProvider = ({

  const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
  loadWorkspace.current = async (workspaceId: string) => {
-    const { dataCenter, workspaceList, currentWorkspaceId, currentWorkspace } =
-      appState;
-    if (!workspaceList.find(v => v.id === workspaceId)) {
+    const { dataCenter, workspaceList, currentWorkspace, user } = appState;
+    if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
      return null;
    }
-    if (workspaceId === currentWorkspaceId) {
+    if (workspaceId === currentWorkspace?.id) {
      return currentWorkspace;
    }
-    const workspace = await dataCenter.loadWorkspace(workspaceId);
-    const currentMetaWorkSpace = dataCenter.workspaces.find(
-      (item: WorkspaceInfo) => {
-        return item.id === workspace.room;
-      }
-    );
+    const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+    let isOwner;
+    if (workspace.provider === 'local') {
+      // isOwner is useful only in the cloud
+      isOwner = true;
+    } else {
+      isOwner = workspace?.owner && user?.id === workspace?.owner?.id;
+    }
+    const pageList =
+      (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
    setAppState({
      ...appState,
      currentWorkspace: workspace,
-      currentWorkspaceId: workspaceId,
-      currentMetaWorkSpace: currentMetaWorkSpace ?? null,
-      pageList: currentWorkspace.meta.pageMetas as PageMeta[],
+      pageList: pageList,
      currentPage: null,
      editor: null,
+      isOwner,
    });

    return workspace;
@@ -130,6 +130,26 @@ export const AppStateProvider = ({
    });
  };

+  const login = async () => {
+    const { dataCenter } = appState;
+    await dataCenter.login();
+    const user = (await dataCenter.getUserInfo()) as User;
+    setAppState({
+      ...appState,
+      user,
+    });
+    return user;
+  };
+
+  const logout = async () => {
+    const { dataCenter } = appState;
+    await dataCenter.logout();
+    setAppState({
+      ...appState,
+      user: null,
+    });
+  };
+
  return (
    <AppState.Provider
      value={{
@@ -137,6 +157,8 @@ export const AppStateProvider = ({
        setEditor,
        loadPage: loadPage.current,
        loadWorkspace: loadWorkspace.current,
+        login,
+        logout,
      }}
    >
      {children}
--- a/packages/app/src/providers/app-state-provider/interface.ts
+++ b/packages/app/src/providers/app-state-provider/interface.ts
@@ -1,9 +1,8 @@
-import { DataCenter, User, WorkspaceInfo } from '@affine/datacenter';
+import { DataCenter, User, WorkspaceUnit } from '@affine/datacenter';
 import type { EditorContainer } from '@blocksuite/editor';

 import type {
  Page as StorePage,
-  Workspace as StoreWorkspace,
  PageMeta as StorePageMeta,
 } from '@blocksuite/store';
 import { MutableRefObject } from 'react';
@@ -18,21 +17,23 @@ export interface PageMeta extends StorePageMeta {
 export type AppStateValue = {
  dataCenter: DataCenter;
  user: User | null;
-  workspaceList: WorkspaceInfo[];
-  currentWorkspace: StoreWorkspace;
-  currentMetaWorkSpace: WorkspaceInfo | null;
-  currentWorkspaceId: string;
+  workspaceList: WorkspaceUnit[];
+  currentWorkspace: WorkspaceUnit | null;
  pageList: PageMeta[];
  currentPage: StorePage | null;
  editor?: EditorContainer | null;
  synced: boolean;
+  isOwner?: boolean;
 };

 export type AppStateFunction = {
  setEditor: MutableRefObject<(page: EditorContainer) => void>;

-  loadWorkspace: (workspaceId: string) => Promise<StoreWorkspace | null>;
+  loadWorkspace: (workspaceId: string) => Promise<WorkspaceUnit | null>;
  loadPage: (pageId: string) => void;
+
+  login: () => Promise<User>;
+  logout: () => Promise<void>;
 };

 export type AppStateContext = AppStateValue & AppStateFunction;
--- a/packages/app/src/providers/app-state-provider/utils.ts
+++ b/packages/app/src/providers/app-state-provider/utils.ts
@@ -4,7 +4,6 @@ const DEFAULT_WORKSPACE_NAME = 'affine';

 export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
  return dataCenter.createWorkspace({
-    avatar: 'test',
    name: DEFAULT_WORKSPACE_NAME,
  });
 };
--- a/packages/app/src/providers/temporary-helper-provider.tsx
+++ b/packages/app/src/providers/temporary-helper-provider.tsx
@@ -1,183 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import { getWorkspaces, User, Workspace } from '@/hooks/mock-data/mock';
-
-type TemporaryContextValue = {
-  workspaceMetaList: Workspace[];
-  currentWorkspace: Workspace | null;
-  user: User | null;
-
-  updateWorkspaceMeta: (
-    workspaceId: string,
-    workspaceData: {
-      name?: string;
-      avatar?: string;
-      isPublish?: boolean;
-      type?: 'local' | 'cloud' | 'join';
-    }
-  ) => void;
-
-  createWorkspace: (workspaceName: string) => Workspace;
-
-  deleteWorkspace: (workspaceId: string) => void;
-
-  setWorkspacePublish: (id: string, isPublish: boolean) => void;
-
-  setActiveWorkspace: (workspaceData: Workspace) => void;
-
-  login: () => void;
-
-  signOut: () => void;
-};
-type TemporaryContextProps = PropsWithChildren<Record<string, unknown>>;
-
-export const TemporaryContext = createContext<TemporaryContextValue>({
-  workspaceMetaList: [],
-  currentWorkspace: null,
-  user: null,
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  updateWorkspaceMeta: () => {},
-
-  createWorkspace: () => {
-    return {} as Workspace;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  deleteWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setWorkspacePublish: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setActiveWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  login: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  signOut: () => {},
-});
-
-export const useTemporaryHelper = () => useContext(TemporaryContext);
-
-export const TemporaryHelperProvider = ({
-  children,
-}: PropsWithChildren<TemporaryContextProps>) => {
-  const [workspaceMetaList, setWorkspaceMetaList] = useState<Workspace[]>([]);
-  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
-    null
-  );
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    setWorkspaceMetaList(getWorkspaces());
-    setCurrentWorkspace(
-      JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
-    );
-  }, []);
-
-  return (
-    <TemporaryContext.Provider
-      value={{
-        workspaceMetaList,
-        currentWorkspace,
-        user,
-
-        updateWorkspaceMeta: (workspaceId, workspaceData) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === workspaceId) {
-                const workspaceObj = Object.assign(workspace, workspaceData);
-                return workspaceObj;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(newWorkspacesMeta);
-          if (workspaceId === currentWorkspace?.id) {
-            setCurrentWorkspace(
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              newWorkspacesMeta.find(v => v.id === currentWorkspace.id)
-            );
-          }
-        },
-        createWorkspace: workspaceName => {
-          const workspaceData = {
-            name: workspaceName,
-            id: 'workspace-' + Date.now(),
-            isPublish: false,
-            isLocal: true,
-            avatar: '',
-            type: 'local',
-          } as Workspace;
-          const workspacesMeta = getWorkspaces();
-          workspacesMeta.push(workspaceData);
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(workspacesMeta)
-          );
-
-          setWorkspaceMetaList([...workspacesMeta]);
-          return workspaceData;
-        },
-        deleteWorkspace: workspaceId => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.filter(() => {
-            return workspaceId !== workspaceId;
-          });
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-
-        setWorkspacePublish: (id, isPublish) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === id) {
-                workspace.isPublish = isPublish;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-        setActiveWorkspace(workspaceData) {
-          localStorage.setItem(
-            'affine-active-workspace',
-            JSON.stringify(workspaceData)
-          );
-          setCurrentWorkspace(workspaceData);
-        },
-
-        login: () => {
-          const userInfo = {
-            name: 'Diamond',
-            id: 'ttt',
-            email: 'diamond.shx@gmail.com',
-            avatar: 'string',
-          };
-          localStorage.setItem('affine-user', JSON.stringify(userInfo));
-          setUser(userInfo);
-        },
-
-        signOut(): void {
-          localStorage.removeItem('affine-user');
-          setUser(null);
-        },
-      }}
-    >
-      {children}
-    </TemporaryContext.Provider>
-  );
-};
-
-export default TemporaryHelperProvider;
--- a/packages/app/src/ui/table/styles.ts
+++ b/packages/app/src/ui/table/styles.ts
@@ -9,7 +9,7 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
      tableLayout,
      width: '100%',
      borderCollapse: 'separate',
-      borderSpacing: '0 25px',
+      borderSpacing: '0',
    };
  }
 );
@@ -52,7 +52,6 @@ export const StyledTableHead = styled.thead(() => {

 export const StyledTableRow = styled.tr(({ theme }) => {
  return {
-    marginBottom: '25px',
    td: {
      transition: 'background .15s',
    },
--- a/packages/data-center/package.json
+++ b/packages/data-center/package.json
@@ -26,9 +26,8 @@
    "typescript": "^4.8.4"
  },
  "dependencies": {
-    "@blocksuite/blocks": "0.4.0-20230110112105-ef07332",
-    "@blocksuite/store": "0.4.0-20230110112105-ef07332",
-    "@tauri-apps/api": "^1.2.0",
+    "@blocksuite/blocks": "0.3.1-20230109032243-37ad3ba",
+    "@blocksuite/store": "0.3.1-20230109032243-37ad3ba",
    "debug": "^4.3.4",
    "encoding": "^0.1.13",
    "firebase": "^9.15.0",
@@ -37,8 +36,7 @@
    "ky-universal": "^0.11.0",
    "lib0": "^0.2.58",
    "swr": "^2.0.0",
-    "y-protocols": "^1.0.5",
-    "yjs": "^13.5.44"
+    "y-protocols": "^1.0.5"
  },
  "peerDependencies": {
    "@blocksuite/blocks": "0.3.1-*",
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -13,7 +13,7 @@ import assert from 'assert';
 import { getLogger } from './logger';
 import { createBlocksuiteWorkspace } from './utils/index.js';
 import { MessageCenter } from './message';
-import type { WorkspaceUnit } from './workspace-unit';
+import { WorkspaceUnit } from './workspace-unit';

 /**
 * @class DataCenter
@@ -105,12 +105,7 @@ export class DataCenter {
      'There is no provider. You should add provider first.'
    );

-    const workspaceMeta = await this._mainProvider.createWorkspaceInfo(params);
-
-    const workspace = createBlocksuiteWorkspace(workspaceMeta.id);
-
-    await this._mainProvider.createWorkspace(workspace, workspaceMeta);
-    const workspaceUnit = this._workspaceUnitCollection.find(workspaceMeta.id);
+    const workspaceUnit = await this._mainProvider.createWorkspace(params);
    return workspaceUnit;
  }

@@ -131,8 +126,8 @@ export class DataCenter {
   * @param {string} workspaceId workspace id
   */
  private _getBlocksuiteWorkspace(workspaceId: string) {
-    const workspaceInfo = this._workspaceUnitCollection.find(workspaceId);
-    assert(workspaceInfo, 'Workspace not found');
+    // const workspaceInfo = this._workspaceUnitCollection.find(workspaceId);
+    // assert(workspaceInfo, 'Workspace not found');
    return (
      // this._workspaceInstances.get(workspaceId) ||
      createBlocksuiteWorkspace(workspaceId)
@@ -178,12 +173,36 @@ export class DataCenter {
    this._workspaceInstances.set(workspaceId, workspace);
    await provider.warpWorkspace(workspace);
    this._workspaceUnitCollection.workspaces.forEach(workspaceUnit => {
-      workspaceUnit.setBlocksuiteWorkspace(null);
+      const provider = this.providerMap.get(workspaceUnit.provider);
+      assert(provider);
+      provider.closeWorkspace(workspaceUnit.id);
    });
    workspaceUnit.setBlocksuiteWorkspace(workspace);
    return workspaceUnit;
  }

+  public async loadPublicWorkspace(workspaceId: string) {
+    // FIXME: hard code for public workspace
+    const provider = this.providerMap.get('affine');
+    assert(provider);
+    const blocksuiteWorkspace = this._getBlocksuiteWorkspace(workspaceId);
+    await provider.loadPublicWorkspace(blocksuiteWorkspace);
+
+    const workspaceUnitForPublic = new WorkspaceUnit({
+      id: workspaceId,
+      name: blocksuiteWorkspace.meta.name,
+      avatar: blocksuiteWorkspace.meta.avatar,
+      owner: undefined,
+      published: true,
+      provider: 'affine',
+      memberCount: 1,
+      syncMode: 'core',
+    });
+
+    workspaceUnitForPublic.setBlocksuiteWorkspace(blocksuiteWorkspace);
+    return workspaceUnitForPublic;
+  }
+
  /**
   * get user info by provider id
   * @param {string} providerId the provider name of workspace
@@ -309,55 +328,33 @@ export class DataCenter {
    }
  }

-  private async _transWorkspaceProvider(
-    workspace: BlocksuiteWorkspace,
-    providerId: string
+  public async enableProvider(
+    workspaceUnit: WorkspaceUnit,
+    providerId = 'affine'
  ) {
-    assert(workspace.room, 'No workspace id');
-    const workspaceInfo = this._workspaceUnitCollection.find(workspace.room);
-    assert(workspaceInfo, 'Workspace not found');
-    if (workspaceInfo.provider === providerId) {
+    if (workspaceUnit.provider === providerId) {
      this._logger('Workspace provider is same');
      return;
    }
-    const currentProvider = this.providerMap.get(workspaceInfo.provider);
-    assert(currentProvider, 'Provider not found');
-    const newProvider = this.providerMap.get(providerId);
-    assert(newProvider, `provide '${providerId}' is not registered`);
-    this._logger(`create ${providerId} workspace: `, workspaceInfo.name);
-    const newWorkspaceInfo = await newProvider.createWorkspaceInfo({
-      name: workspaceInfo.name,
-      // avatar: workspaceInfo.avatar,
-    });
-    const newWorkspace = createBlocksuiteWorkspace(newWorkspaceInfo.id);
-    // TODO optimize this function
-    await newProvider.createWorkspace(newWorkspace, {
-      ...newWorkspaceInfo,
-      name: workspaceInfo.name,
-      avatar: workspaceInfo.avatar,
-    });
+    const provider = this.providerMap.get(providerId);
+    assert(provider);
+    const newWorkspaceUnit = await provider.extendWorkspace(workspaceUnit);

-    assert(newWorkspace, 'Create workspace failed');
-    this._logger(
-      `update workspace data from ${workspaceInfo.provider} to ${providerId}`
-    );
-    await newProvider.assign(newWorkspace, workspace);
-    assert(newWorkspace, 'Create workspace failed');
-    await currentProvider.deleteWorkspace(workspace.room);
-    return newWorkspace.room;
+    // Currently we only allow enable one provider, so after enable new provider,
+    // delete the old workspace from its provider.
+    const oldProvider = this.providerMap.get(workspaceUnit.provider);
+    assert(oldProvider);
+    await oldProvider.deleteWorkspace(workspaceUnit.id);
+
+    return newWorkspaceUnit;
  }

  /**
   * Enable workspace cloud
   * @param {string} id ID of workspace.
   */
-  public async enableWorkspaceCloud(workspace: WorkspaceUnit) {
-    assert(workspace?.id, 'No workspace to enable cloud');
-    assert(workspace.blocksuiteWorkspace);
-    return await this._transWorkspaceProvider(
-      workspace.blocksuiteWorkspace,
-      'affine'
-    );
+  public async enableWorkspaceCloud(workspaceUnit: WorkspaceUnit) {
+    return this.enableProvider(workspaceUnit);
  }

  /**
@@ -425,6 +422,18 @@ export class DataCenter {
    return [];
  }

+  /**
+   * accept invitation
+   * @param {string} inviteCode
+   */
+  async acceptInvitation(inviteCode: string, providerStr = 'affine') {
+    const provider = this.providerMap.get(providerStr);
+    if (provider) {
+      return await provider.acceptInvitation(inviteCode);
+    }
+    return [];
+  }
+
  onMessage(cb: (message: Message) => void) {
    return this._messageCenter.onMessage(cb);
  }
--- a/packages/data-center/src/index.ts
+++ b/packages/data-center/src/index.ts
@@ -26,7 +26,8 @@ const _initializeDataCenter = () => {
 export const getDataCenter = _initializeDataCenter();

 export type { DataCenter };
-export type { AccessTokenMessage } from './provider/affine/apis';
+export * from './provider/affine/apis';
 export { WorkspaceUnit } from './workspace-unit';
 export { getLogger } from './logger';
 export * from './message';
+export * from './types';
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -6,17 +6,30 @@ import type {
 } from '../base';
 import type { User } from '../../types';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
-import { BlockSchema } from '@blocksuite/blocks/models';
 import { storage } from './storage.js';
 import assert from 'assert';
 import { WebsocketProvider } from './sync.js';
 // import { IndexedDBProvider } from '../local/indexeddb';
-import { getApis } from './apis/index.js';
+import { getApis, Workspace } from './apis/index.js';
 import type { Apis, WorkspaceDetail, Callback } from './apis';
 import { setDefaultAvatar } from '../utils.js';
-import { MessageCode } from '../../message';
+import { MessageCode } from '../../message/index.js';
 import { token } from './apis/token.js';
 import { WebsocketClient } from './channel';
+import {
+  loadWorkspaceUnit,
+  createWorkspaceUnit,
+  syncToCloud,
+} from './utils.js';
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
+import type { SyncMode } from '../../workspace-unit';
+
+type ChannelMessage = {
+  ws_list: Workspace[];
+  ws_details: Record<string, WorkspaceDetail>;
+  metadata: Record<string, { avatar: string; name: string }>;
+};

 export interface AffineProviderConstructorParams
  extends ProviderConstructorParams {
@@ -24,7 +37,7 @@ export interface AffineProviderConstructorParams
 }

 const {
-  Y: { applyUpdate, encodeStateAsUpdate },
+  Y: { encodeStateAsUpdate },
 } = BlocksuiteWorkspace;

 export class AffineProvider extends BaseProvider {
@@ -33,21 +46,12 @@ export class AffineProvider extends BaseProvider {
  private _onTokenRefresh?: Callback = undefined;
  private _wsMap: Map<string, WebsocketProvider> = new Map();
  private _apis: Apis;
-  private _channel: WebsocketClient;
+  private _channel?: WebsocketClient;
  // private _idbMap: Map<string, IndexedDBProvider> = new Map();

  constructor({ apis, ...params }: AffineProviderConstructorParams) {
    super(params);
    this._apis = apis || getApis();
-    this._channel = new WebsocketClient(
-      `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${
-        window.location.host
-      }/global/sync/`,
-      this._logger
-    );
-    if (token.isLogin) {
-      this._connectChannel();
-    }
  }

  override async init() {
@@ -76,14 +80,59 @@ export class AffineProvider extends BaseProvider {
    } else {
      storage.setItem('token', this._apis.token.refresh);
    }
+
+    if (token.isLogin) {
+      this._connectChannel();
+    }
  }

  private _connectChannel() {
-    this._channel.connect();
+    if (!this._channel) {
+      this._channel = new WebsocketClient(
+        `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${
+          window.location.host
+        }/api/global/sync/`,
+        this._logger,
+        {
+          params: {
+            token: this._apis.token.refresh,
+          },
+        }
+      );
+    }
+    this._channel.on('message', (msg: ChannelMessage) => {
+      this._handlerAffineListMessage(msg);
+    });
+  }

-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this._channel.on('message', (message: any) => {
-      console.log('message', message);
+  private _handlerAffineListMessage({ ws_details, metadata }: ChannelMessage) {
+    this._logger('receive server message');
+    Object.entries(ws_details).forEach(async ([id, detail]) => {
+      const { name, avatar } = metadata[id];
+      assert(name);
+      const workspace = {
+        name: name,
+        avatar,
+        owner: {
+          name: detail.owner.name,
+          id: detail.owner.id,
+          email: detail.owner.email,
+          avatar: detail.owner.avatar_url,
+        },
+        published: detail.public,
+        memberCount: detail.member_count,
+        provider: 'affine',
+        syncMode: 'core' as SyncMode,
+      };
+      if (this._workspaces.get(id)) {
+        this._workspaces.update(id, workspace);
+      } else {
+        const workspaceUnit = await loadWorkspaceUnit(
+          { id, ...workspace },
+          this._apis
+        );
+        this._workspaces.add(workspaceUnit);
+      }
    });
  }

@@ -104,16 +153,19 @@ export class AffineProvider extends BaseProvider {
    return ws;
  }

-  private async _applyCloudUpdates(blocksuiteWorkspace: BlocksuiteWorkspace) {
-    const { doc, room: workspaceId } = blocksuiteWorkspace;
+  private async _applyCloudUpdates(
+    blocksuiteWorkspace: BlocksuiteWorkspace,
+    published = false
+  ) {
+    const { room: workspaceId } = blocksuiteWorkspace;
    assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
-    const updates = await this._apis.downloadWorkspace(workspaceId);
-    if (updates && updates.byteLength) {
-      await new Promise(resolve => {
-        doc.once('update', resolve);
-        BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
-      });
-    }
+    const updates = await this._apis.downloadWorkspace(workspaceId, published);
+    await applyUpdate(blocksuiteWorkspace, new Uint8Array(updates));
+  }
+
+  override async loadPublicWorkspace(blocksuiteWorkspace: BlocksuiteWorkspace) {
+    await this._applyCloudUpdates(blocksuiteWorkspace, true);
+    return blocksuiteWorkspace;
  }

  override async warpWorkspace(workspace: BlocksuiteWorkspace) {
@@ -145,78 +197,25 @@ export class AffineProvider extends BaseProvider {
      return [];
    }
    const workspacesList = await this._apis.getWorkspaces();
-    const workspaces: WorkspaceMeta0[] = workspacesList.map(w => {
-      return {
-        ...w,
-        memberCount: 0,
-        name: '',
-        provider: 'affine',
-        syncMode: 'core',
-      };
-    });
-    const workspaceInstances = workspaces.map(({ id }) => {
-      const workspace =
-        this._workspacesCache.get(id) ||
-        new BlocksuiteWorkspace({
-          room: id,
-        }).register(BlockSchema);
-      this._workspacesCache.set(id, workspace);
-      if (workspace) {
-        return new Promise<BlocksuiteWorkspace>(resolve => {
-          this._apis.downloadWorkspace(id).then(data => {
-            applyUpdate(workspace.doc, new Uint8Array(data));
-            resolve(workspace);
-          });
-        });
-      } else {
-        return Promise.resolve(null);
-      }
-    });
-
-    (await Promise.all(workspaceInstances)).forEach((workspace, i) => {
-      if (workspace) {
-        workspaces[i] = {
-          ...workspaces[i],
-          name: workspace.meta.name,
-          avatar: workspace.meta.avatar,
-        };
-      }
-    });
-    const getDetailList = workspacesList.map(w => {
-      const { id } = w;
-      return new Promise<{ id: string; detail: WorkspaceDetail | null }>(
-        resolve => {
-          this._apis.getWorkspaceDetail({ id }).then(data => {
-            resolve({ id, detail: data || null });
-          });
-        }
-      );
-    });
-    const ownerList = await Promise.all(getDetailList);
-    (await Promise.all(ownerList)).forEach(detail => {
-      if (detail) {
-        const { id, detail: workspaceDetail } = detail;
-        if (workspaceDetail) {
-          const { owner, member_count } = workspaceDetail;
-          const currentWorkspace = workspaces.find(w => w.id === id);
-          if (currentWorkspace) {
-            currentWorkspace.owner = {
-              id: owner.id,
-              name: owner.name,
-              avatar: owner.avatar_url,
-              email: owner.email,
-            };
-            currentWorkspace.memberCount = member_count;
-          }
-        }
-      }
-    });
-
-    workspaces.forEach(workspace => {
-      this._workspaces.add(workspace);
-    });
-
-    return workspaces;
+    const workspaceUnits = await Promise.all(
+      workspacesList.map(w => {
+        return loadWorkspaceUnit(
+          {
+            id: w.id,
+            name: '',
+            avatar: undefined,
+            owner: undefined,
+            published: w.public,
+            memberCount: 1,
+            provider: 'affine',
+            syncMode: 'core',
+          },
+          this._apis
+        );
+      })
+    );
+    this._workspaces.add(workspaceUnits);
+    return workspaceUnits;
  }

  override async auth() {
@@ -229,7 +228,7 @@ export class AffineProvider extends BaseProvider {
      }
    }
    const user = await this._apis.signInWithGoogle?.();
-    if (!this._channel.connected) {
+    if (!this._channel?.connected) {
      this._connectChannel();
    }
    if (!user) {
@@ -238,6 +237,7 @@ export class AffineProvider extends BaseProvider {
  }

  public override async getUserInfo(): Promise<User | undefined> {
+    await this.init();
    const user = this._apis.token.user;
    await this.init;
    return user
@@ -302,52 +302,29 @@ export class AffineProvider extends BaseProvider {
    // return workspace;
  }

-  public override async createWorkspaceInfo(
+  public override async createWorkspace(
    meta: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
+  ): Promise<WorkspaceUnit | undefined> {
    const { id } = await this._apis.createWorkspace(meta);

-    const workspaceInfo: WorkspaceMeta0 = {
+    const workspaceUnit = await createWorkspaceUnit({
+      id,
      name: meta.name,
-      id: id,
-      published: false,
-      avatar: '',
+      avatar: undefined,
      owner: await this.getUserInfo(),
-      syncMode: 'core',
-      memberCount: 1,
-      provider: 'affine',
-    };
-    return workspaceInfo;
-  }
-
-  public override async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    const workspaceId = blocksuiteWorkspace.room;
-    assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
-    this._logger('Creating affine workspace');
-
-    this._applyCloudUpdates(blocksuiteWorkspace);
-    this.linkLocal(blocksuiteWorkspace);
-
-    const workspaceInfo: WorkspaceMeta0 = {
-      name: meta.name,
-      id: workspaceId,
      published: false,
-      avatar: '',
-      owner: undefined,
-      syncMode: 'core',
      memberCount: 1,
      provider: 'affine',
-    };
+      syncMode: 'core',
+    });

-    if (!blocksuiteWorkspace.meta.avatar) {
-      await setDefaultAvatar(blocksuiteWorkspace);
-      workspaceInfo.avatar = blocksuiteWorkspace.meta.avatar;
-    }
-    this._workspaces.add(workspaceInfo);
-    return blocksuiteWorkspace;
+    await syncToCloud(
+      workspaceUnit.blocksuiteWorkspace!,
+      this._apis.token.refresh
+    );
+    this._workspaces.add(workspaceUnit);
+
+    return workspaceUnit;
  }

  public override async publish(id: string, isPublish: boolean): Promise<void> {
@@ -358,38 +335,52 @@ export class AffineProvider extends BaseProvider {
    workspace_id: string,
    email: string
  ): Promise<User | null> {
-    const user = await this._apis.getUserByEmail({ workspace_id, email });
-    return user
+    const users = await this._apis.getUserByEmail({ workspace_id, email });
+    return users?.length
      ? {
-          id: user.id,
-          name: user.name,
-          avatar: user.avatar_url,
-          email: user.email,
+          id: users[0].id,
+          name: users[0].name,
+          avatar: users[0].avatar_url,
+          email: users[0].email,
        }
      : null;
  }

-  public override async assign(
-    to: BlocksuiteWorkspace,
-    from: BlocksuiteWorkspace
-  ): Promise<BlocksuiteWorkspace> {
-    assert(to.room, 'Blocksuite Workspace without room(workspaceId).');
-    const ws = this._getWebsocketProvider(to);
-    applyUpdate(to.doc, encodeStateAsUpdate(from.doc));
-    // TODO: upload blobs and make sure doc is synced
-    await new Promise<void>((resolve, reject) => {
-      ws.once('synced', () => {
-        setTimeout(() => resolve(), 1000);
-      });
-      ws.once('lost-connection', () => reject());
-      ws.once('connection-error', () => reject());
+  public override async extendWorkspace(
+    workspaceUnit: WorkspaceUnit
+  ): Promise<WorkspaceUnit> {
+    const { id } = await this._apis.createWorkspace({
+      name: workspaceUnit.name,
    });
-    return to;
+    const newWorkspaceUnit = new WorkspaceUnit({
+      id,
+      name: workspaceUnit.name,
+      avatar: undefined,
+      owner: await this.getUserInfo(),
+      published: false,
+      memberCount: 1,
+      provider: 'affine',
+      syncMode: 'core',
+    });
+
+    const blocksuiteWorkspace = createBlocksuiteWorkspace(id);
+    assert(workspaceUnit.blocksuiteWorkspace);
+    await applyUpdate(
+      blocksuiteWorkspace,
+      encodeStateAsUpdate(workspaceUnit.blocksuiteWorkspace.doc)
+    );
+
+    await syncToCloud(blocksuiteWorkspace, this._apis.token.refresh);
+
+    newWorkspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+    this._workspaces.add(newWorkspaceUnit);
+    return newWorkspaceUnit;
  }

  public override async logout(): Promise<void> {
    token.clear();
-    this._channel.disconnect();
+    this._channel?.disconnect();
    this._wsMap.forEach(ws => ws.disconnect());
    storage.removeItem('token');
  }
@@ -397,4 +388,8 @@ export class AffineProvider extends BaseProvider {
  public override async getWorkspaceMembers(id: string) {
    return this._apis.getWorkspaceMembers({ id });
  }
+
+  public override async acceptInvitation(invitingCode: string): Promise<void> {
+    await this._apis.acceptInviting({ invitingCode });
+  }
 }
--- a/packages/data-center/src/provider/affine/apis/user.ts
+++ b/packages/data-center/src/provider/affine/apis/user.ts
@@ -15,7 +15,7 @@ export interface User {

 export async function getUserByEmail(
  params: GetUserByEmailParams
-): Promise<User | null> {
+): Promise<User[] | null> {
  const searchParams = new URLSearchParams({ ...params });
-  return client.get('api/user', { searchParams }).json<User | null>();
+  return client.get('api/user', { searchParams }).json<User[] | null>();
 }
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -84,7 +84,10 @@ export interface CreateWorkspaceParams {
 export async function createWorkspace(
  params: CreateWorkspaceParams
 ): Promise<{ id: string }> {
-  return client.post('api/workspace', { json: params }).json();
+  // FIXME: avatar should be optional
+  return client
+    .post('api/workspace', { json: { ...params, avatar: '123' } })
+    .json();
 }

 export interface UpdateWorkspaceParams {
@@ -169,7 +172,11 @@ export async function leaveWorkspace({ id }: LeaveWorkspaceParams) {
 }

 export async function downloadWorkspace(
-  workspaceId: string
+  workspaceId: string,
+  published = false
 ): Promise<ArrayBuffer> {
+  if (published) {
+    return bareClient.get(`api/public/doc/${workspaceId}`).arrayBuffer();
+  }
  return client.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
 }
--- a/packages/data-center/src/provider/affine/channel.ts
+++ b/packages/data-center/src/provider/affine/channel.ts
@@ -1,6 +1,7 @@
 import * as websocket from 'lib0/websocket';
 import { Logger } from 'src/types';
 import { token } from './apis/token';
+import * as url from 'lib0/url';

 const RECONNECT_INTERVAL_TIME = 5000;
 const MAX_RECONNECT_TIMES = 50;
@@ -10,11 +11,21 @@ export class WebsocketClient extends websocket.WebsocketClient {
  private _reconnectInterval: number | null = null;
  private _logger: Logger;
  constructor(
-    url: string,
+    serverUrl: string,
    logger: Logger,
-    options?: { binaryType: 'arraybuffer' | 'blob' | null }
+    options?: ConstructorParameters<typeof websocket.WebsocketClient>[1] & {
+      params: Record<string, string>;
+    }
  ) {
-    super(url, options);
+    const params = options?.params || {};
+    // ensure that url is always ends with /
+    while (serverUrl[serverUrl.length - 1] === '/') {
+      serverUrl = serverUrl.slice(0, serverUrl.length - 1);
+    }
+    const encodedParams = url.encodeQueryParams(params);
+    const newUrl =
+      serverUrl + '/' + (encodedParams.length === 0 ? '' : '?' + encodedParams);
+    super(newUrl, options);
    this._logger = logger;
    this._setupChannel();
  }
--- a/packages/data-center/src/provider/affine/utils.ts
+++ b/packages/data-center/src/provider/affine/utils.ts
@@ -0,0 +1,90 @@
+import assert from 'assert';
+import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import type { WorkspaceUnitCtorParams } from '../../workspace-unit';
+import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import type { Apis } from './apis';
+import { WebsocketProvider } from './sync.js';
+import { setDefaultAvatar } from '../utils.js';
+import { applyUpdate } from '../../utils/index.js';
+
+export const loadWorkspaceUnit = async (
+  params: WorkspaceUnitCtorParams,
+  apis: Apis
+) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  const updates = await apis.downloadWorkspace(
+    workspaceUnit.id,
+    params.published
+  );
+  applyUpdate(blocksuiteWorkspace, new Uint8Array(updates));
+
+  const details = await apis.getWorkspaceDetail({ id: workspaceUnit.id });
+  const owner = details?.owner;
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+  workspaceUnit.update({
+    name: blocksuiteWorkspace.meta.name,
+    avatar: blocksuiteWorkspace.meta.avatar,
+    memberCount: details?.member_count || 1,
+    owner: owner
+      ? {
+          id: owner.id,
+          name: owner.name,
+          avatar: owner.avatar_url,
+          email: owner.email,
+        }
+      : undefined,
+  });
+
+  return workspaceUnit;
+};
+
+export const syncToCloud = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace,
+  refreshToken: string
+) => {
+  const workspaceId = blocksuiteWorkspace.room;
+  assert(workspaceId, 'Blocksuite workspace without room(workspaceId).');
+
+  const wsUrl = `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${
+    window.location.host
+  }/api/sync/`;
+
+  const ws = new WebsocketProvider(
+    wsUrl,
+    workspaceId,
+    blocksuiteWorkspace.doc,
+    {
+      params: { token: refreshToken },
+    }
+  );
+
+  await new Promise((resolve, reject) => {
+    ws.once('synced', () => {
+      // FIXME: we don't when send local data to cloud successfully, so hack to wait 1s.
+      // Server will support this by add a new api.
+      setTimeout(resolve, 1000);
+    });
+    ws.once('lost-connection', () => reject());
+    ws.once('connection-error', () => reject());
+  });
+};
+
+export const createWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  blocksuiteWorkspace.meta.setName(workspaceUnit.name);
+  if (!workspaceUnit.avatar) {
+    await setDefaultAvatar(blocksuiteWorkspace);
+    workspaceUnit.update({ avatar: blocksuiteWorkspace.meta.avatar });
+  }
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
--- a/packages/data-center/src/provider/base.ts
+++ b/packages/data-center/src/provider/base.ts
@@ -1,8 +1,8 @@
-import { Workspace as BlocksuiteWorkspace, uuidv4 } from '@blocksuite/store';
+import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
 import { MessageCenter } from '../message';
 import { Logger, User } from '../types';
 import type { WorkspaceUnitCollectionScope } from '../workspace-unit-collection';
-import type { WorkspaceUnitCtorParams } from '../workspace-unit';
+import type { WorkspaceUnitCtorParams, WorkspaceUnit } from '../workspace-unit';
 import { Member } from './affine/apis';

 const defaultLogger = () => {
@@ -44,12 +44,6 @@ export class BaseProvider {
    return;
  }

-  public async createWorkspaceInfo(
-    params: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
-    throw new Error(`provider: ${this.id} createWorkspaceInfo Not implemented`);
-  }
-
  /**
   * auth provider
   */
@@ -75,10 +69,19 @@ export class BaseProvider {
    return workspace;
  }

+  /**
+   * @deprecated Temporary for public workspace
+   * @param blocksuiteWorkspace
+   * @returns
+   */
+  public async loadPublicWorkspace(blocksuiteWorkspace: BlocksuiteWorkspace) {
+    return blocksuiteWorkspace;
+  }
+
  /**
   * load workspaces
   **/
-  public async loadWorkspaces(): Promise<WorkspaceMeta0[]> {
+  public async loadWorkspaces(): Promise<WorkspaceUnit[]> {
    throw new Error(`provider: ${this.id} loadWorkSpace Not implemented`);
  }

@@ -174,13 +177,18 @@ export class BaseProvider {

  /**
   * create workspace by workspace meta
-   * @param {WorkspaceMeta} meta
+   * @param {CreateWorkspaceInfoParams} meta
   */
  public async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    return blocksuiteWorkspace;
+    meta: CreateWorkspaceInfoParams
+  ): Promise<WorkspaceUnit | undefined> {
+    throw new Error(`provider: ${this.id} createWorkspace not implemented`);
+  }
+
+  public async extendWorkspace(
+    workspaceUnit: WorkspaceUnit
+  ): Promise<WorkspaceUnit | undefined> {
+    throw new Error(`provider: ${this.id} extendWorkspace not implemented`);
  }

  /**
@@ -205,16 +213,6 @@ export class BaseProvider {
    return workspace;
  }

-  /**
-   * merge one workspaces to another
-   * @param workspace
-   * @returns
-   */
-  public async assign(to: BlocksuiteWorkspace, from: BlocksuiteWorkspace) {
-    from;
-    return to;
-  }
-
  /**
   * get workspace members
   * @param {string} workspaceId
@@ -224,4 +222,14 @@ export class BaseProvider {
    workspaceId;
    return Promise.resolve([]);
  }
+
+  /**
+   * accept invitation
+   * @param {string} inviteCode
+   * @returns
+   */
+  public async acceptInvitation(inviteCode: string): Promise<void> {
+    inviteCode;
+    return;
+  }
 }
--- a/packages/data-center/src/provider/local/indexeddb/utils.ts
+++ b/packages/data-center/src/provider/local/indexeddb/utils.ts
@@ -1,10 +1,13 @@
 import assert from 'assert';
 import * as idb from 'lib0/indexeddb.js';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
+import { applyUpdate } from '../../../utils/index.js';

-const { encodeStateAsUpdate } = BlocksuiteWorkspace.Y;
+const { encodeStateAsUpdate, mergeUpdates } = BlocksuiteWorkspace.Y;

-export const initStore = async (blocksuiteWorkspace: BlocksuiteWorkspace) => {
+export const writeUpdatesToLocal = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace
+) => {
  const workspaceId = blocksuiteWorkspace.room;
  assert(workspaceId);
  await idb.deleteDB(workspaceId);
@@ -18,3 +21,21 @@ export const initStore = async (blocksuiteWorkspace: BlocksuiteWorkspace) => {
    await idb.addAutoKey(updatesStore, currState);
  }
 };
+
+export const applyLocalUpdates = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace
+) => {
+  const workspaceId = blocksuiteWorkspace.room;
+  assert(workspaceId, 'Blocksuite workspace without room(workspaceId).');
+  const db = await idb.openDB(workspaceId, db =>
+    idb.createStores(db, [['updates', { autoIncrement: true }], ['custom']])
+  );
+
+  const [updatesStore] = idb.transact(db, ['updates']); // , 'readonly')
+  if (updatesStore) {
+    const updates = await idb.getAll(updatesStore);
+    const mergedUpdates = mergeUpdates(updates);
+    await applyUpdate(blocksuiteWorkspace, mergedUpdates);
+  }
+  return blocksuiteWorkspace;
+};
--- a/packages/data-center/src/provider/local/local.spec.ts
+++ b/packages/data-center/src/provider/local/local.spec.ts
@@ -16,12 +16,10 @@ test.describe.serial('local provider', () => {
  let workspaceId: string | undefined;

  test('create workspace', async () => {
-    const workspaceInfo = await provider.createWorkspaceInfo({
+    const workspaceUnit = await provider.createWorkspace({
      name: workspaceName,
    });
-    workspaceId = workspaceInfo.id;
-    const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceId);
-    await provider.createWorkspace(blocksuiteWorkspace, workspaceInfo);
+    workspaceId = workspaceUnit?.id;

    expect(workspaceMetaCollection.workspaces.length).toEqual(1);
    expect(workspaceMetaCollection.workspaces[0].name).toEqual(workspaceName);
--- a/packages/data-center/src/provider/local/local.ts
+++ b/packages/data-center/src/provider/local/local.ts
@@ -8,9 +8,9 @@ import type {
 import { varStorage as storage } from 'lib0/storage';
 import { Workspace as BlocksuiteWorkspace, uuidv4 } from '@blocksuite/store';
 import { IndexedDBProvider } from './indexeddb/indexeddb.js';
-import { initStore } from './indexeddb/utils.js';
 import assert from 'assert';
-import { setDefaultAvatar } from '../utils.js';
+import { loadWorkspaceUnit, createWorkspaceUnit } from './utils.js';
+import type { WorkspaceUnit } from '../../workspace-unit';

 const WORKSPACE_KEY = 'workspaces';

@@ -22,21 +22,12 @@ export class LocalProvider extends BaseProvider {
    super(params);
  }

-  private _storeWorkspaces(workspaces: WorkspaceMeta0[]) {
+  private _storeWorkspaces(workspaceUnits: WorkspaceUnit[]) {
    storage.setItem(
      WORKSPACE_KEY,
      JSON.stringify(
-        workspaces.map(w => {
-          return {
-            id: w.id,
-            name: w.name,
-            avatar: w.avatar,
-            owner: w.owner,
-            published: w.published,
-            memberCount: w.memberCount,
-            provider: w.provider,
-            syncMode: w.syncMode,
-          };
+        workspaceUnits.map(w => {
+          return w.toJSON();
        })
      )
    );
@@ -61,20 +52,23 @@ export class LocalProvider extends BaseProvider {
    return workspace;
  }

-  override loadWorkspaces(): Promise<WorkspaceMeta0[]> {
+  override async loadWorkspaces(): Promise<WorkspaceUnit[]> {
    const workspaceStr = storage.getItem(WORKSPACE_KEY);
-    let workspaces: WorkspaceMeta0[] = [];
    if (workspaceStr) {
      try {
-        workspaces = JSON.parse(workspaceStr) as WorkspaceMeta0[];
-        workspaces.forEach(workspace => {
-          this._workspaces.add(workspace);
-        });
+        const workspaceMetas = JSON.parse(workspaceStr) as WorkspaceMeta0[];
+        const workspaceUnits = await Promise.all(
+          workspaceMetas.map(meta => {
+            return loadWorkspaceUnit(meta);
+          })
+        );
+        this._workspaces.add(workspaceUnits);
+        return workspaceUnits;
      } catch (error) {
        this._logger(`Failed to parse workspaces from storage`);
      }
    }
-    return Promise.resolve(workspaces);
+    return [];
  }

  public override async deleteWorkspace(id: string): Promise<void> {
@@ -96,10 +90,10 @@ export class LocalProvider extends BaseProvider {
    this._storeWorkspaces(this._workspaces.list());
  }

-  public override async createWorkspaceInfo(
+  public override async createWorkspace(
    meta: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
-    const workspaceInfo: WorkspaceMeta0 = {
+  ): Promise<WorkspaceUnit | undefined> {
+    const workspaceUnit = await createWorkspaceUnit({
      name: meta.name,
      id: uuidv4(),
      published: false,
@@ -108,35 +102,10 @@ export class LocalProvider extends BaseProvider {
      syncMode: 'core',
      memberCount: 1,
      provider: 'local',
-    };
-    return Promise.resolve(workspaceInfo);
-  }
-
-  public override async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    const workspaceId = blocksuiteWorkspace.room;
-    assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
-    this._logger('Creating affine workspace');
-
-    const workspaceInfo: WorkspaceMeta0 = {
-      ...meta,
-    };
-
-    blocksuiteWorkspace.meta.setName(meta.name);
-
-    if (!meta.avatar) {
-      await setDefaultAvatar(blocksuiteWorkspace);
-      workspaceInfo.avatar = blocksuiteWorkspace.meta.avatar;
-    }
-
-    await initStore(blocksuiteWorkspace);
-
-    this._workspaces.add(workspaceInfo);
+    });
+    this._workspaces.add(workspaceUnit);
    this._storeWorkspaces(this._workspaces.list());
-
-    return blocksuiteWorkspace;
+    return workspaceUnit;
  }

  public override async clear(): Promise<void> {
--- a/packages/data-center/src/provider/local/utils.ts
+++ b/packages/data-center/src/provider/local/utils.ts
@@ -0,0 +1,34 @@
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import type { WorkspaceUnitCtorParams } from '../../workspace-unit';
+import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import { applyLocalUpdates, writeUpdatesToLocal } from './indexeddb/utils.js';
+import { setDefaultAvatar } from '../utils.js';
+
+export const loadWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  await applyLocalUpdates(blocksuiteWorkspace);
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
+
+export const createWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+  blocksuiteWorkspace.meta.setName(workspaceUnit.name);
+  if (!workspaceUnit.avatar) {
+    await setDefaultAvatar(blocksuiteWorkspace);
+    workspaceUnit.update({ avatar: blocksuiteWorkspace.meta.avatar });
+  }
+
+  await writeUpdatesToLocal(blocksuiteWorkspace);
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
--- a/packages/data-center/src/utils/index.ts
+++ b/packages/data-center/src/utils/index.ts
@@ -45,3 +45,25 @@ export async function getDefaultHeadImgBlob(
    }
  });
 }
+
+export const applyUpdate = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace,
+  updates: Uint8Array
+) => {
+  if (updates && updates.byteLength) {
+    await new Promise(resolve => {
+      // FIXME: if we merge two empty doc, there will no update event.
+      // So we set a timer to cancel update listener.
+      const doc = blocksuiteWorkspace.doc;
+      const timer = setTimeout(() => {
+        doc.off('update', resolve);
+        resolve(undefined);
+      }, 1000);
+      doc.once('update', () => {
+        clearTimeout(timer);
+        setTimeout(resolve, 100);
+      });
+      BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
+    });
+  }
+};
--- a/packages/data-center/src/workspace-unit-collection.spec.ts
+++ b/packages/data-center/src/workspace-unit-collection.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { WorkspaceUnitCollection } from './workspace-unit-collection.js';
 import type { WorkspaceUnitCollectionChangeEvent } from './workspace-unit-collection';
+import { WorkspaceUnit } from './workspace-unit.js';

 test.describe.serial('workspace meta collection observable', () => {
  const workspaceUnitCollection = new WorkspaceUnitCollection();
@@ -14,13 +15,15 @@ test.describe.serial('workspace meta collection observable', () => {
        expect(event.added?.[0]?.id).toEqual('123');
      }
    );
-    scope.add({
+    const workspaceUnit = new WorkspaceUnit({
      id: '123',
      name: 'test',
+      avatar: undefined,
      memberCount: 1,
      provider: '',
      syncMode: 'core',
    });
+    scope.add(workspaceUnit);
  });

  test('list workspace', () => {
--- a/packages/data-center/src/workspace-unit-collection.ts
+++ b/packages/data-center/src/workspace-unit-collection.ts
@@ -1,19 +1,18 @@
 import { Observable } from 'lib0/observable';
-import { WorkspaceUnit } from './workspace-unit.js';
 import type {
-  WorkspaceUnitCtorParams,
+  WorkspaceUnit,
  UpdateWorkspaceUnitParams,
 } from './workspace-unit';

 export interface WorkspaceUnitCollectionScope {
  get: (workspaceId: string) => WorkspaceUnit | undefined;
  list: () => WorkspaceUnit[];
-  add: (workspace: WorkspaceUnitCtorParams) => void;
+  add: (workspace: WorkspaceUnit | WorkspaceUnit[]) => void;
  remove: (workspaceId: string) => boolean;
  clear: () => void;
  update: (
    workspaceId: string,
-    workspaceMeta: UpdateWorkspaceUnitParams
+    workspaceUnit: UpdateWorkspaceUnitParams
  ) => void;
 }

@@ -59,19 +58,23 @@ export class WorkspaceUnitCollection {
      return this._workspaceUnitMap.get(workspaceId);
    };

-    const add = (workspace: WorkspaceUnitCtorParams) => {
-      if (this._workspaceUnitMap.has(workspace.id)) {
-        throw new Error(`Duplicate workspace id.`);
-      }
+    const add = (workspaceUnit: WorkspaceUnit | WorkspaceUnit[]) => {
+      const workspaceUnits = Array.isArray(workspaceUnit)
+        ? workspaceUnit
+        : [workspaceUnit];

-      const workspaceUnit = new WorkspaceUnit(workspace);
-      this._workspaceUnitMap.set(workspace.id, workspaceUnit);
-
-      scopedWorkspaceIds.add(workspace.id);
+      workspaceUnits.forEach(workspaceUnit => {
+        if (this._workspaceUnitMap.has(workspaceUnit.id)) {
+          // FIXME: multiple add same workspace
+          return;
+        }
+        this._workspaceUnitMap.set(workspaceUnit.id, workspaceUnit);
+        scopedWorkspaceIds.add(workspaceUnit.id);
+      });

      this._events.emit('change', [
        {
-          added: [workspaceUnit],
+          added: workspaceUnits,
        } as WorkspaceUnitCollectionChangeEvent,
      ]);
    };
@@ -106,10 +109,7 @@ export class WorkspaceUnitCollection {
      });
    };

-    const update = (
-      workspaceId: string,
-      workspaceMeta: UpdateWorkspaceUnitParams
-    ) => {
+    const update = (workspaceId: string, meta: UpdateWorkspaceUnitParams) => {
      if (!scopedWorkspaceIds.has(workspaceId)) {
        return true;
      }
@@ -119,7 +119,7 @@ export class WorkspaceUnitCollection {
        return true;
      }

-      workspaceUnit.update(workspaceMeta);
+      workspaceUnit.update(meta);

      this._events.emit('change', [
        {
--- a/packages/data-center/src/workspace-unit.ts
+++ b/packages/data-center/src/workspace-unit.ts
@@ -37,6 +37,16 @@ export class WorkspaceUnit {
    this.update(params);
  }

+  get isPublish() {
+    console.error('Suggest changing to published');
+    return this.published;
+  }
+
+  get isLocal() {
+    console.error('Suggest changing to syncMode');
+    return this.syncMode === 'all';
+  }
+
  get blocksuiteWorkspace() {
    return this._blocksuiteWorkspace;
  }
@@ -52,13 +62,16 @@ export class WorkspaceUnit {
    Object.assign(this, params);
  }

-  get isPublish() {
-    console.error('Suggest changing to published');
-    return this.published;
-  }
-
-  get isLocal() {
-    console.error('Suggest changing to syncMode');
-    return this.syncMode === 'all';
+  toJSON(): Omit<WorkspaceUnitCtorParams, 'blocksuiteWorkspace'> {
+    return {
+      id: this.id,
+      name: this.name,
+      avatar: this.avatar,
+      owner: this.owner,
+      published: this.published,
+      memberCount: this.memberCount,
+      provider: this.provider,
+      syncMode: this.syncMode,
+    };
  }
 }