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')({

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

@@ -16,7 +16,7 @@ import { Workspace as StoreWorkspace } from '@blocksuite/store';
 import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import { Workspace } from '@/hooks/mock-data/mock';
+import { getUserInfo, Workspace } from '@/hooks/mock-data/mock';
 
 export const GeneralPage = ({
   workspace,
@@ -30,6 +30,7 @@ export const GeneralPage = ({
     workspaces,
     refreshWorkspacesMeta,
   } = useAppState();
+  // const user = getUserInfo();
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
@@ -38,11 +39,9 @@ export const GeneralPage = ({
     refreshWorkspacesMeta();
   }, 100);
   const isOwner = true;
+
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
-    currentWorkspace?.meta.setName(newName);
-    workspaces[workspace.id]?.meta.setName(newName);
-    debouncedRefreshWorkspacesMeta();
   };
   const currentWorkspaceIndex = workspacesMeta.findIndex(
     meta => meta.id === workspace.id

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

@@ -43,7 +43,11 @@ import { toast } from '@/ui/toast';
 import { Empty } from '@/ui/empty';
 import { useAppState } from '@/providers/app-state-provider';
 import { GeneralPage } from './general';
-import { getActiveWorkspace, Workspace } from '@/hooks/mock-data/mock';
+import {
+  getActiveWorkspace,
+  setWorkspacePublish,
+  Workspace,
+} from '@/hooks/mock-data/mock';
 
 enum ActiveTab {
   'general' = 'general',
@@ -112,6 +116,7 @@ export const WorkspaceSetting = ({
   };
 
   const workspace = getActiveWorkspace();
+  console.log('workspace: ', workspace);
   const handleClickClose = () => {
     onClose && onClose();
   };
@@ -123,7 +128,7 @@ export const WorkspaceSetting = ({
     }
   }, [isShow]);
   return (
-    <Modal open={false}>
+    <Modal open={isShow}>
       <StyledSettingContainer>
         <ModalCloseButton onClick={handleClickClose} />
         {isOwner ? (
@@ -287,23 +292,16 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
 };
 
 const PublishPage = ({ workspace }: { workspace: Workspace }) => {
-  const shareUrl = window.location.host + '/workspace/' + workspace.id;
+  const shareUrl =
+    window.location.host + '/workspace/' + workspace.id + '?share=true';
   const [publicStatus, setPublicStatus] = useState<boolean | null>(
     workspace.isPublish ?? false
   );
   const togglePublic = (flag: boolean) => {
-    getDataCenter()
+    const isPublic = setWorkspacePublish(workspace.id, flag);
-      .then(dc =>
+    setPublicStatus(isPublic);
-        dc.apis.updateWorkspace({
-          id: workspace.id,
-          public: flag,
-        })
-      )
-      .then(data => {
-        setPublicStatus(data?.public);
-        toast('Updated Public Status Success');
-      });
   };
+
   const copyUrl = () => {
     navigator.clipboard.writeText(shareUrl);
     toast('Copied url to clipboard');

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

@@ -76,6 +76,8 @@ export const WorkSpaceSliderBar = () => {
   const [showTip, setShowTip] = useState(false);
   const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true);
 
+  const [showWorkspaceSetting, setShowWorkspaceSetting] = useState(false);
+
   const paths = {
     all: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
     favorite: currentWorkspaceId
@@ -150,16 +152,16 @@ export const WorkSpaceSliderBar = () => {
           <FavoriteList showList={showSubFavorite} />
           <StyledListItem
             onClick={() => {
-              console.log('ttt');
+              setShowWorkspaceSetting(true);
             }}
           >
             <SettingsIcon /> Setting
           </StyledListItem>
 
           <WorkspaceSetting
-            isShow={true}
+            isShow={showWorkspaceSetting}
             onClose={() => {
-              console.log(1231231);
+              setShowWorkspaceSetting(false);
             }}
           />
 

packages/app/src/components/workspace-slider-bar/style.ts

@@ -62,6 +62,7 @@ export const StyledListItem = styled.div<{
     color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
     paddingLeft: '12px',
     borderRadius: '5px',
+    cursor: 'pointer',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
       ? {

packages/app/src/hooks/mock-data/mock.ts

@@ -8,7 +8,7 @@ export interface Workspace {
   workspaceOwner?: User; // 本地工作空间的拥有者
 }
 
-interface User {
+export interface User {
   name: string;
   id: string;
   email: string;
@@ -109,3 +109,23 @@ export function setActiveWorkspace(workspaceData: 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');
+}

packages/app/src/ui/confirm/Confirm.tsx

@@ -11,6 +11,7 @@ export type ConfirmProps = {
   title?: string;
   content?: string;
   confirmText?: string;
+  cancelText?: string;
   // TODO: Confirm button's color should depend on confirm type
   confirmType?: 'primary' | 'warning' | 'danger';
   onConfirm?: () => void;
@@ -24,6 +25,7 @@ export const Confirm = ({
   confirmType,
   onConfirm,
   onCancel,
+  cancelText = 'Cancel',
 }: ConfirmProps) => {
   const [open, setOpen] = useState(true);
   return (
@@ -48,7 +50,7 @@ export const Confirm = ({
             }}
             style={{ marginRight: '24px' }}
           >
-            Cancel
+            {cancelText}
           </Button>
           <Button
             type={confirmType}