feat: add workspace route

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

@@ -1 +1 @@
-export * from './Delete';
+export { WorkspaceDelete } from './Delete';

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

@@ -1 +1 @@
-export * from './General';
+export { GeneralPage } from './General';

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

@@ -1 +1 @@
-export * from './Leave';
+export { WorkspaceLeave } from './Leave';

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

@@ -4,22 +4,15 @@ import MuiAvatar from '@mui/material/Avatar';
 
 export const StyledSettingContainer = styled('div')(({ theme }) => {
   return {
-    position: 'relative',
     display: 'flex',
-    padding: '0px',
+    padding: '50px',
-    width: '961px',
+    flexDirection: 'column',
-    background: theme.colors.popoverBackground,
-    borderRadius: '12px',
-    overflow: 'hidden',
   };
 });
 
 export const StyledSettingSidebar = styled('div')(({ theme }) => {
   {
     return {
-      width: '212px',
-      height: '620px',
-      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
       flexShrink: 0,
       flexGrow: 0,
     };
@@ -59,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
   {
     return {
       display: 'flex',
-      flexDirection: 'column',
       marginTop: '25px',
     };
   }

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

@@ -32,7 +32,7 @@ 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 { WorkspaceSetting } from '@/components/workspace-setting';
 import { useTranslation } from 'react-i18next';
 import { WorkspaceSelector } from './WorkspaceSelector/WorkspaceSelector';
 
@@ -78,14 +78,15 @@ 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
       ? `/workspace/${currentWorkspaceId}/favorite`
       : '',
     trash: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
+    setting: currentWorkspaceId
+      ? `/workspace/${currentWorkspaceId}/setting`
+      : '',
   };
 
   return (
@@ -154,18 +155,22 @@ export const WorkSpaceSliderBar = () => {
           <FavoriteList showList={showSubFavorite} />
           <StyledListItem
             onClick={() => {
-              setShowWorkspaceSetting(true);
+              // setShowWorkspaceSetting(true);
             }}
           >
-            <SettingsIcon /> Setting
+            <StyledLink href={{ pathname: paths.setting }}>
+              <FavouritesIcon />
+              {t('Setting')}
+            </StyledLink>
+            <SettingsIcon />
           </StyledListItem>
 
-          <WorkspaceSetting
+          {/* <WorkspaceSetting
             isShow={showWorkspaceSetting}
             onClose={() => {
               setShowWorkspaceSetting(false);
             }}
-          />
+          /> */}
 
           <StyledListItem
             onClick={() => {

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -0,0 +1,159 @@
+import Modal, { ModalCloseButton } from '@/ui/modal';
+import {
+  StyledSettingContainer,
+  StyledSettingContent,
+  StyledSettingSidebar,
+  StyledSettingSidebarHeader,
+  StyledSettingTabContainer,
+  StyledSettingTagIconContainer,
+  WorkspaceSettingTagItem,
+} from '../../../components/workspace-setting/style';
+import {
+  EditIcon,
+  UsersIcon,
+  PublishIcon,
+  CloudInsyncIcon,
+} from '@blocksuite/icons';
+import { ReactElement, useEffect, useState } from 'react';
+import { GeneralPage } from '../../../components/workspace-setting/general';
+import { MembersPage } from '../../../components/workspace-setting/MembersPage';
+import { PublishPage } from '../../../components/workspace-setting/PublishPage';
+import { ExportPage } from '../../../components/workspace-setting/ExportPage';
+import { SyncPage } from '../../../components/workspace-setting/SyncPage';
+import { useAppState } from '@/providers/app-state-provider';
+import WorkspaceLayout from '@/components/workspace-layout';
+
+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>
+  );
+};
+
+const WorkspaceSetting = ({ isShow, onClose }: WorkspaceSettingProps) => {
+  // const { workspaces } = useAppState();
+  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
+  const handleTabChange = (tab: ActiveTab) => {
+    setActiveTab(tab);
+  };
+
+  const { currentMetaWorkSpace } = useAppState();
+  useEffect(() => {
+    // reset tab when modal is closed
+    if (!isShow) {
+      setActiveTab(ActiveTab.general);
+    }
+  }, [isShow]);
+  return (
+    <StyledSettingContainer>
+      <StyledSettingSidebar>
+        <StyledSettingSidebarHeader>
+          Workspace Settings
+        </StyledSettingSidebarHeader>
+        <WorkspaceSettingTab
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+        />
+      </StyledSettingSidebar>
+
+      <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>
+  );
+};
+WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
+export default WorkspaceSetting;