feat: improve the ui of workspace item

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

@@ -6,6 +6,10 @@ import {
   getWorkspaces,
   Workspace,
   setActiveWorkspace,
+  Login,
+  User,
+  getUserInfo,
+  SignOut,
 } from '@/hooks/mock-data/mock';
 import { CreateWorkspaceModal } from '../create-workspace';
 import {
@@ -13,6 +17,8 @@ import {
   CloudInsyncIcon,
   UsersIcon,
 } from '@blocksuite/icons';
+import { useConfirm } from '@/providers/confirm-provider';
+import { toast } from '@/ui/toast';
 
 interface LoginModalProps {
   open: boolean;
@@ -21,20 +27,29 @@ interface LoginModalProps {
 
 export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
   const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]);
+  const [user, setUser] = useState<User | null>();
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-
+  const { confirm } = useConfirm();
   useEffect(() => {
-    getList();
+    setList();
+    setUserInfo();
   }, []);
 
-  const getList = () => {
+  const setList = () => {
     const data = getWorkspaces();
     setWorkspaceList(data);
   };
+  const setUserInfo = () => {
+    const data = getUserInfo();
+    setUser(data);
+  };
   return (
     <div>
       <Modal open={open} onClose={onClose}>
-        <ModalWrapper width={820} style={{ padding: '10px' }}>
+        <ModalWrapper
+          width={820}
+          style={{ padding: '10px', display: 'flex', flexDirection: 'column' }}
+        >
           <Header>
             <ContentTitle>My Workspaces</ContentTitle>
             <ModalCloseButton
@@ -111,20 +126,47 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                 </Button>
               </li>
             </WorkspaceList>
-          </Content>
-          <Footer>
             <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
               Tips:Workspace is your virtual space to capture, create and plan
               as just one person or together as a team.
             </p>
-            <Button>Sign in AFFiNE Cloud</Button>
+          </Content>
+          <Footer>
+            {!user ? (
+              <Button
+                onClick={() => {
+                  Login();
+                  toast('login success');
+                  setUserInfo();
+                }}
+              >
+                Sign in AFFiNE Cloud
+              </Button>
+            ) : (
+              <Button
+                onClick={() => {
+                  SignOut();
+                  setUserInfo();
+                }}
+              >
+                Sign out of AFFiNE Cloud
+              </Button>
+            )}
           </Footer>
           <CreateWorkspaceModal
             open={createWorkspaceOpen}
             onClose={() => {
               setCreateWorkspaceOpen(false);
-              getList();
+              setList();
               onClose();
+              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 => {
+                confirm && Login();
+              });
             }}
           ></CreateWorkspaceModal>
         </ModalWrapper>
@@ -143,6 +185,7 @@ const Content = styled('div')({
   flexDirection: 'column',
   alignItems: 'center',
   gap: '16px',
+  flex: 1,
 });
 
 const ContentTitle = styled('span')({