feat: replease type Workspace with WorkspaceInfo

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

@@ -1,5 +1,5 @@
 import { styled } from '@/styles';
-import { Workspace } from '@affine/datacenter';
+import { WorkspaceInfo } 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: Workspace }) => {
+export const ExportPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   return (
     <ExportPageTitleContainer>
       Export Workspace{' '}

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

@@ -23,13 +23,13 @@ import { Empty } from '@/ui/empty';
 //   User,
 //   Workspace,
 // } from '@/hooks/mock-data/mock';
-import { Workspace } from '@affine/datacenter';
+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: Workspace }) => {
+export const MembersPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const [members, setMembers] = useState<[{ name: string; email: string }]>([
     { name: 'affine', email: 'tttt' },

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

@@ -12,9 +12,9 @@ import { toast } from '@/ui/toast';
 import { useConfirm } from '@/providers/ConfirmProvider';
 // import { useAppState } from '@/providers/app-state-provider3';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { Workspace } from '@affine/datacenter';
+import { WorkspaceInfo } from '@affine/datacenter';
 
-export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
+export const PublishPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   const shareUrl =
     window.location.host + '/workspace/' + workspace.id + '?share=true';
   const { publishWorkspace } = useWorkspaceHelper();

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

@@ -7,8 +7,8 @@ import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
-import { Workspace } from '@affine/datacenter';
-export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
+import { WorkspaceInfo } from '@affine/datacenter';
+export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   console.log('workspace: ', workspace);
   const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();
 

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

@@ -1,164 +0,0 @@
-import Modal, { ModalCloseButton } from '@/ui/modal';
-import {
-  StyledSettingContainer,
-  StyledSettingContent,
-  StyledSettingSidebar,
-  StyledSettingSidebarHeader,
-  StyledSettingTabContainer,
-  StyledSettingTagIconContainer,
-  WorkspaceSettingTagItem,
-} from './style';
-import {
-  EditIcon,
-  UsersIcon,
-  PublishIcon,
-  CloudInsyncIcon,
-} from '@blocksuite/icons';
-import { useEffect, useState } from 'react';
-import { GeneralPage } from './general';
-import { MembersPage } from './MembersPage';
-import { PublishPage } from './PublishPage';
-import { ExportPage } from './ExportPage';
-import { SyncPage } from './SyncPage';
-import { useAppState } from '@/providers/app-state-provider';
-
-enum ActiveTab {
-  'general' = 'general',
-  'members' = 'members',
-  'publish' = 'publish',
-  'sync' = 'sync',
-  'export' = 'export',
-}
-
-type SettingTabProps = {
-  activeTab: ActiveTab;
-  onTabChange?: (tab: ActiveTab) => void;
-};
-
-type WorkspaceSettingProps = {
-  isShow: boolean;
-  onClose?: () => void;
-};
-
-const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
-  return (
-    <StyledSettingTabContainer>
-      <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.general}
-        onClick={() => {
-          onTabChange && onTabChange(ActiveTab.general);
-        }}
-      >
-        <StyledSettingTagIconContainer>
-          <EditIcon />
-        </StyledSettingTagIconContainer>
-        General
-      </WorkspaceSettingTagItem>
-
-      <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.sync}
-        onClick={() => {
-          onTabChange && onTabChange(ActiveTab.sync);
-        }}
-      >
-        <StyledSettingTagIconContainer>
-          <CloudInsyncIcon />
-        </StyledSettingTagIconContainer>
-        Sync
-      </WorkspaceSettingTagItem>
-
-      <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.members}
-        onClick={() => {
-          onTabChange && onTabChange(ActiveTab.members);
-        }}
-      >
-        <StyledSettingTagIconContainer>
-          <UsersIcon />
-        </StyledSettingTagIconContainer>
-        Collaboration
-      </WorkspaceSettingTagItem>
-      <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.publish}
-        onClick={() => {
-          onTabChange && onTabChange(ActiveTab.publish);
-        }}
-      >
-        <StyledSettingTagIconContainer>
-          <PublishIcon />
-        </StyledSettingTagIconContainer>
-        Publish
-      </WorkspaceSettingTagItem>
-
-      <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.export}
-        onClick={() => {
-          onTabChange && onTabChange(ActiveTab.export);
-        }}
-      >
-        <StyledSettingTagIconContainer>
-          <PublishIcon />
-        </StyledSettingTagIconContainer>
-        Export
-      </WorkspaceSettingTagItem>
-    </StyledSettingTabContainer>
-  );
-};
-
-export const WorkspaceSetting = ({
-  isShow,
-  onClose,
-}: WorkspaceSettingProps) => {
-  // const { workspaces } = useAppState();
-  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
-  const handleTabChange = (tab: ActiveTab) => {
-    setActiveTab(tab);
-  };
-
-  const { currentMetaWorkSpace } = useAppState();
-  const handleClickClose = () => {
-    onClose && onClose();
-  };
-  const isOwner = true;
-  useEffect(() => {
-    // reset tab when modal is closed
-    if (!isShow) {
-      setActiveTab(ActiveTab.general);
-    }
-  }, [isShow]);
-  return (
-    <Modal open={isShow}>
-      <StyledSettingContainer>
-        <ModalCloseButton onClick={handleClickClose} />
-        {isOwner ? (
-          <StyledSettingSidebar>
-            <StyledSettingSidebarHeader>
-              Workspace Settings
-            </StyledSettingSidebarHeader>
-            <WorkspaceSettingTab
-              activeTab={activeTab}
-              onTabChange={handleTabChange}
-            />
-          </StyledSettingSidebar>
-        ) : null}
-        <StyledSettingContent>
-          {activeTab === ActiveTab.general && currentMetaWorkSpace && (
-            <GeneralPage workspace={currentMetaWorkSpace} />
-          )}
-          {activeTab === ActiveTab.sync && currentMetaWorkSpace && (
-            <SyncPage workspace={currentMetaWorkSpace} />
-          )}
-          {activeTab === ActiveTab.members && currentMetaWorkSpace && (
-            <MembersPage workspace={currentMetaWorkSpace} />
-          )}
-          {activeTab === ActiveTab.publish && currentMetaWorkSpace && (
-            <PublishPage workspace={currentMetaWorkSpace} />
-          )}
-          {activeTab === ActiveTab.export && currentMetaWorkSpace && (
-            <ExportPage workspace={currentMetaWorkSpace} />
-          )}
-        </StyledSettingContent>
-      </StyledSettingContainer>
-    </Modal>
-  );
-};

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

@@ -9,26 +9,18 @@ import { StyledSettingH2 } from '../style';
 import { useState } from 'react';
 import { Button, TextButton } from '@/ui/button';
 import Input from '@/ui/input';
-// import { useAppState } from '@/providers/app-state-provider';
+import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
-// import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
-import { Workspace } from '@affine/datacenter';
-export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
-  // const { refreshWorkspacesMeta } = useAppState();
-  const { updateWorkspaceMeta } = useTemporaryHelper();
+import { WorkspaceInfo } from '@affine/datacenter';
+export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
-  const [workspaceName, setWorkspaceName] = useState<string>('');
-  // const debouncedRefreshWorkspacesMeta = debounce(() => {
-  //   refreshWorkspacesMeta();
-  // }, 100);
+  const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
   const isOwner = true;
-
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
   };
@@ -46,7 +38,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
     setShowLeave(false);
   };
   const handleUpdateWorkspaceName = () => {
-    workspace && updateWorkspaceMeta(workspace.id, { name: workspaceName });
+    // workspace && currentWorkspace(workspace.id, { name: workspaceName });
   };
 
   const fileChange = async (file: File) => {
@@ -73,8 +65,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
         <div
           style={{
             float: 'left',
-
-            marginRight: '5px',
+            marginRight: '20px',
           }}
         >
           <WorkspaceAvatar size={60} name={workspace.name} />
@@ -101,7 +92,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
           onClick={() => {
             handleUpdateWorkspaceName();
           }}
-          style={{ marginLeft: '10px' }}
+          style={{ marginLeft: '0px' }}
         >
           ✔️
         </TextButton>

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

@@ -17,12 +17,12 @@ import {
   getWorkspaces,
   // Workspace,
 } from '@/hooks/mock-data/mock';
-import { Workspace } from '@affine/datacenter';
+import { WorkspaceInfo } from '@affine/datacenter';
 
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
-  workspace: Workspace;
+  workspace: WorkspaceInfo;
 }
 
 export const WorkspaceDelete = ({

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

@@ -1 +1,4 @@
-export * from './WorkspaceSetting';
+export * from './general';
+export * from './ExportPage';
+export * from './MembersPage';
+export * from './SyncPage';

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

@@ -42,7 +42,7 @@ export const StyledSettingSidebarHeader = styled('div')(() => {
       fontWeight: '500',
       fontSize: '18px',
       lineHeight: '26px',
-      textAlign: 'center',
+      textAlign: 'left',
       marginTop: '37px',
     };
   }

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -12,7 +12,7 @@
 // } from './WorkspaceItem';
 // import { WorkspaceSetting } from '@/components/workspace-setting';
 // import { useCallback, useEffect, useState } from 'react';
-// import { Workspace } from '@affine/datacenter';
+// import { WorkspaceInfo } from '@affine/datacenter';
 // import { useModal } from '@/providers/GlobalModalProvider';
 
 // export type WorkspaceDetails = Record<

packages/app/src/hooks/use-workspace-helper.ts

@@ -1,4 +1,5 @@
 import { useAppState } from '@/providers/app-state-provider';
+import { WorkspaceInfo } from '@affine/datacenter';
 
 export const useWorkspaceHelper = () => {
   const { dataCenter } = useAppState();
@@ -20,8 +21,12 @@ export const useWorkspaceHelper = () => {
     dataCenter.setWorkspacePublish(workspaceId, publish);
   };
 
+  const updateWorkspace = async (workspace: WorkspaceInfo) => {
+    console.log('workspace: ', workspace);
+  };
   return {
     createWorkspace,
     publishWorkspace,
+    updateWorkspace,
   };
 };