feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

apps/core/src/components/pure/footer/index.tsx

@@ -1,39 +1,42 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloudWorkspaceIcon } from '@blocksuite/icons';
-import { Button } from '@toeverything/components/button';
-import { useSetAtom } from 'jotai';
-import { type CSSProperties, forwardRef } from 'react';
+import { signIn } from 'next-auth/react';
+import { type CSSProperties, type FC, forwardRef, useCallback } from 'react';
 
-import { openDisableCloudAlertModalAtom } from '../../../atoms';
+import { useCurrenLoginStatus } from '../../../hooks/affine/use-curren-login-status';
+// import { openDisableCloudAlertModalAtom } from '../../../atoms';
 import { stringToColour } from '../../../utils';
-import { StyledFooter } from './styles';
-
-export const Footer = () => {
-  const t = useAFFiNEI18N();
-  const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
+import { StyledFooter, StyledSignInButton } from './styles';
+export const Footer: FC = () => {
+  const loginStatus = useCurrenLoginStatus();
 
+  // const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
   return (
     <StyledFooter data-testid="workspace-list-modal-footer">
-      <Button
-        data-testid="sign-in-button"
-        type="plain"
-        icon={
-          <CloudWorkspaceIcon
-            style={{ color: 'var(--affine-primary-color)' }}
-          />
-        }
-        onClick={async () => {
-          if (!runtimeConfig.enableCloud) {
-            setOpen(true);
-          }
-        }}
-      >
-        {t['Sign in']()}
-      </Button>
+      {loginStatus === 'authenticated' ? null : <SignInButton />}
     </StyledFooter>
   );
 };
 
+const SignInButton = () => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <StyledSignInButton
+      data-testid="sign-in-button"
+      onClick={useCallback(() => {
+        signIn().catch(console.error);
+      }, [])}
+    >
+      <div className="circle">
+        <CloudWorkspaceIcon />
+      </div>
+
+      {t['Sign in']()}
+    </StyledSignInButton>
+  );
+};
+
 interface WorkspaceAvatarProps {
   size: number;
   name: string | undefined;

apps/core/src/components/pure/footer/styles.ts

@@ -1,4 +1,19 @@
-import { displayFlex, styled, textEllipsis } from '@affine/component';
+import {
+  displayFlex,
+  displayInlineFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
+
+export const StyledSplitLine = styled('div')(() => {
+  return {
+    width: '1px',
+    height: '20px',
+    background: 'var(--affine-border-color)',
+    marginRight: '24px',
+  };
+});
+
 export const StyleWorkspaceInfo = styled('div')(() => {
   return {
     marginLeft: '15px',
@@ -110,3 +125,28 @@ export const StyledModalHeader = styled('div')(() => {
     ...displayFlex('space-between', 'center'),
   };
 });
+
+export const StyledSignInButton = styled('button')(() => {
+  return {
+    fontWeight: 600,
+    paddingLeft: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: '15px',
+    borderRadius: '8px',
+    '&:hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+    '.circle': {
+      width: '40px',
+      height: '40px',
+      borderRadius: '20px',
+      color: 'var(--affine-primary-color)',
+      fontSize: '24px',
+      flexShrink: 0,
+      marginRight: '16px',
+      ...displayInlineFlex('center', 'center'),
+    },
+  };
+});

apps/core/src/components/pure/workspace-list-modal/index.tsx

@@ -8,19 +8,27 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import {
+  AccountIcon,
   CloudWorkspaceIcon,
   ImportIcon,
   MoreHorizontalIcon,
   PlusIcon,
+  SignOutIcon,
 } from '@blocksuite/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { Popover } from '@mui/material';
 import { IconButton } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
 import { useSetAtom } from 'jotai';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { signOut, useSession } from 'next-auth/react';
 import { useCallback } from 'react';
 
-import { openDisableCloudAlertModalAtom } from '../../../atoms';
+import {
+  authAtom,
+  openDisableCloudAlertModalAtom,
+  openSettingModalAtom,
+} from '../../../atoms';
 import type { AllWorkspace } from '../../../shared';
 import {
   StyledCreateWorkspaceCardPill,
@@ -39,6 +47,7 @@ import {
   StyledSignInCardPillTextCotainer,
   StyledSignInCardPillTextPrimary,
   StyledSignInCardPillTextSecondary,
+  StyledWorkspaceFlavourTitle,
 } from './styles';
 
 interface WorkspaceModalProps {
@@ -56,18 +65,31 @@ interface WorkspaceModalProps {
 
 const AccountMenu = () => {
   const t = useAFFiNEI18N();
+  const setOpen = useSetAtom(openSettingModalAtom);
   return (
     <div>
-      <div>Unlimted</div>
+      {/* <div>Unlimted</div>
       <Divider size="thinner" dividerColor="var(--affine-border-color)" />
       <MenuItem icon={<ImportIcon />} data-testid="editor-option-menu-import">
         {t['com.affine.workspace.cloud.join']()}
-      </MenuItem>
-      <MenuItem icon={<ImportIcon />} data-testid="editor-option-menu-import">
+      </MenuItem> */}
+      <MenuItem
+        icon={<AccountIcon />}
+        data-testid="editor-option-menu-import"
+        onClick={useCallback(() => {
+          setOpen(prev => ({ ...prev, open: true, activeTab: 'account' }));
+        }, [setOpen])}
+      >
         {t['com.affine.workspace.cloud.account.settings']()}
       </MenuItem>
-      <Divider size="thinner" dividerColor="var(--affine-border-color)" />
-      <MenuItem icon={<ImportIcon />} data-testid="editor-option-menu-import">
+      <Divider />
+      <MenuItem
+        icon={<SignOutIcon />}
+        data-testid="editor-option-menu-import"
+        onClick={useCallback(() => {
+          signOut().catch(console.error);
+        }, [])}
+      >
         {t['com.affine.workspace.cloud.account.logout']()}
       </MenuItem>
     </div>
@@ -89,31 +111,16 @@ const CloudWorkSpaceList = ({
       <StyledModalHeader>
         <StyledModalHeaderLeft>
           <StyledModalTitle>
-            {t['com.affine.workspace.cloud.sync']()}
+            {t['com.affine.workspace.cloud']()}
           </StyledModalTitle>
         </StyledModalHeaderLeft>
-
-        <StyledOperationWrapper>
-          <Menu
-            placement="bottom-end"
-            trigger={['click']}
-            content={<AccountMenu />}
-            zIndex={1000}
-          >
-            <IconButton
-              data-testid="previous-image-button"
-              icon={<MoreHorizontalIcon />}
-              type="plain"
-            />
-          </Menu>
-        </StyledOperationWrapper>
       </StyledModalHeader>
       <StyledModalContent>
         <WorkspaceList
           disabled={disabled}
           items={
             workspaces.filter(
-              ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
+              ({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
             ) as (AffineCloudWorkspace | LocalWorkspace)[]
           }
           currentWorkspaceId={currentWorkspaceId}
@@ -129,7 +136,6 @@ const CloudWorkSpaceList = ({
             [onMoveWorkspace]
           )}
         />
-        <Divider size="thinner" dividerColor="var(--affine-border-color)" />
       </StyledModalContent>
     </>
   );
@@ -148,11 +154,18 @@ export const WorkspaceListModal = ({
   onMoveWorkspace,
 }: WorkspaceModalProps) => {
   const t = useAFFiNEI18N();
-  const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
+  const setOpen = useSetAtom(authAtom);
+  const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
   // TODO: AFFiNE Cloud support
-  const isLoggedIn = false;
+  const { data: session, status } = useSession();
+  const isLoggedIn = status === 'authenticated' ? true : false;
   const anchorEl = document.getElementById('current-workspace');
-
+  const cloudWorkspaces = workspaces.filter(
+    ({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
+  ) as (AffineCloudWorkspace | LocalWorkspace)[];
+  const localWorkspaces = workspaces.filter(
+    ({ flavour }) => flavour === WorkspaceFlavour.LOCAL
+  ) as (AffineCloudWorkspace | LocalWorkspace)[];
   return (
     <Popover
       sx={{
@@ -164,6 +177,7 @@ export const WorkspaceListModal = ({
           flexDirection: 'column',
           boxShadow: 'var(--affine-shadow-2)',
           backgroundColor: 'var(--affine-background-overlay-panel-color)',
+          padding: '16px 12px',
         },
         maxHeight: '90vh',
       }}
@@ -171,63 +185,92 @@ export const WorkspaceListModal = ({
       anchorEl={anchorEl}
       onClose={onClose}
     >
-      <StyledModalHeaderContent>
-        <StyledSignInCardPill>
-          <MenuItem
-            style={{
-              height: 'auto',
-              padding: '8px 12px',
-            }}
-            onClick={async () => {
-              if (!runtimeConfig.enableCloud) {
-                setOpen(true);
-              }
-            }}
-            data-testid="cloud-signin-button"
-          >
-            <StyledCreateWorkspaceCardPillContent>
-              <StyledCreateWorkspaceCardPillIcon>
-                <CloudWorkspaceIcon />
-              </StyledCreateWorkspaceCardPillIcon>
-              <StyledSignInCardPillTextCotainer>
-                <StyledSignInCardPillTextPrimary>
-                  {t['com.affine.workspace.cloud.auth']()}
-                </StyledSignInCardPillTextPrimary>
-                <StyledSignInCardPillTextSecondary>
-                  Sync with AFFiNE Cloud
-                </StyledSignInCardPillTextSecondary>
-              </StyledSignInCardPillTextCotainer>
-            </StyledCreateWorkspaceCardPillContent>
-          </MenuItem>
-        </StyledSignInCardPill>
-        <Divider size="thinner" dividerColor="var(--affine-border-color)" />
-      </StyledModalHeaderContent>
+      {!isLoggedIn ? (
+        <StyledModalHeaderContent>
+          <StyledSignInCardPill>
+            <MenuItem
+              style={{
+                height: 'auto',
+                padding: '0px 12px',
+              }}
+              onClick={async () => {
+                if (!runtimeConfig.enableCloud) {
+                  setDisableCloudOpen(true);
+                } else {
+                  setOpen(state => ({
+                    ...state,
+                    openModal: true,
+                  }));
+                }
+              }}
+              data-testid="cloud-signin-button"
+            >
+              <StyledCreateWorkspaceCardPillContent>
+                <StyledCreateWorkspaceCardPillIcon>
+                  <CloudWorkspaceIcon />
+                </StyledCreateWorkspaceCardPillIcon>
+                <StyledSignInCardPillTextCotainer>
+                  <StyledSignInCardPillTextPrimary>
+                    {t['com.affine.workspace.cloud.auth']()}
+                  </StyledSignInCardPillTextPrimary>
+                  <StyledSignInCardPillTextSecondary>
+                    {t['com.affine.workspace.cloud.description']()}
+                  </StyledSignInCardPillTextSecondary>
+                </StyledSignInCardPillTextCotainer>
+              </StyledCreateWorkspaceCardPillContent>
+            </MenuItem>
+          </StyledSignInCardPill>
+          <Divider style={{ margin: '12px 0px' }} />
+        </StyledModalHeaderContent>
+      ) : (
+        <StyledModalHeaderContent>
+          <StyledModalHeader>
+            <StyledModalTitle>{session?.user.email}</StyledModalTitle>
+            <StyledOperationWrapper>
+              <Menu
+                placement="bottom-end"
+                trigger={['click']}
+                content={<AccountMenu />}
+                zIndex={1000}
+              >
+                <IconButton
+                  data-testid="more-button"
+                  icon={<MoreHorizontalIcon />}
+                  type="plain"
+                />
+              </Menu>
+            </StyledOperationWrapper>
+          </StyledModalHeader>
+          <Divider style={{ margin: '12px 0px' }} />
+        </StyledModalHeaderContent>
+      )}
       <StyledModalBody>
-        {isLoggedIn ? (
-          <CloudWorkSpaceList
-            disabled={disabled}
-            open={open}
-            onClose={onClose}
-            workspaces={workspaces}
-            onClickWorkspace={onClickWorkspace}
-            onClickWorkspaceSetting={onClickWorkspaceSetting}
-            onNewWorkspace={onNewWorkspace}
-            onAddWorkspace={onAddWorkspace}
-            currentWorkspaceId={currentWorkspaceId}
-            onMoveWorkspace={onMoveWorkspace}
-          />
+        {isLoggedIn && cloudWorkspaces.length !== 0 ? (
+          <>
+            <CloudWorkSpaceList
+              disabled={disabled}
+              open={open}
+              onClose={onClose}
+              workspaces={workspaces}
+              onClickWorkspace={onClickWorkspace}
+              onClickWorkspaceSetting={onClickWorkspaceSetting}
+              onNewWorkspace={onNewWorkspace}
+              onAddWorkspace={onAddWorkspace}
+              currentWorkspaceId={currentWorkspaceId}
+              onMoveWorkspace={onMoveWorkspace}
+            />
+            <Divider style={{ margin: '12px 0px', minHeight: '1px' }} />
+          </>
         ) : null}
         <StyledModalHeader>
-          <StyledModalTitle>{t['Local Workspace']()}</StyledModalTitle>
+          <StyledWorkspaceFlavourTitle>
+            {t['com.affine.workspace.local']()}
+          </StyledWorkspaceFlavourTitle>
         </StyledModalHeader>
         <StyledModalContent>
           <WorkspaceList
             disabled={disabled}
-            items={
-              workspaces.filter(
-                ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
-              ) as (AffineCloudWorkspace | LocalWorkspace)[]
-            }
+            items={localWorkspaces}
             currentWorkspaceId={currentWorkspaceId}
             onClick={onClickWorkspace}
             onSettingClick={onClickWorkspaceSetting}

apps/core/src/components/pure/workspace-list-modal/styles.ts

@@ -70,7 +70,6 @@ export const StyledCreateWorkspaceCard = styled('div')(() => {
 });
 export const StyledCreateWorkspaceCardPillContainer = styled('div')(() => {
   return {
-    padding: '12px',
     borderRadius: '10px',
     display: 'flex',
     margin: '-8px -4px',
@@ -173,6 +172,7 @@ export const StyledModalContent = styled('div')({
   flexWrap: 'wrap',
   flexDirection: 'column',
   width: '100%',
+  gap: '4px',
 });
 
 export const StyledModalFooterContent = styled('div')({
@@ -180,7 +180,7 @@ export const StyledModalFooterContent = styled('div')({
   flexWrap: 'wrap',
   flexDirection: 'column',
   width: '100%',
-  padding: '12px',
+  marginTop: '12px',
   backgroundColor: 'var(--affine-background-overlay-panel-color)',
 });
 
@@ -189,7 +189,6 @@ export const StyledModalHeaderContent = styled('div')({
   flexWrap: 'wrap',
   flexDirection: 'column',
   width: '100%',
-  padding: '12px 12px 0px 12px',
   backgroundColor: 'var(--affine-background-overlay-panel-color)',
 });
 
@@ -219,19 +218,27 @@ export const StyledModalHeader = styled('div')(() => {
     left: 0,
     top: 0,
     borderRadius: '24px 24px 0 0',
-    padding: '12px 14px',
+    padding: '0px 14px',
     ...displayFlex('space-between', 'center'),
   };
 });
 
 export const StyledModalBody = styled('div')(() => {
   return {
-    padding: '0px 12px',
     display: 'inline-flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    gap: '12px',
+    gap: '4px',
     flex: 1,
     overflowY: 'auto',
   };
 });
+
+export const StyledWorkspaceFlavourTitle = styled('div')(() => {
+  return {
+    fontSize: '12px',
+    fontWeight: 600,
+    color: 'var(--affine-text-secondary-color)',
+    lineHeight: '20px',
+  };
+});