Merge branch 'feat/filesystem_and_search' of github.com:toeverything/AFFiNE into feat/filesystem_and_search

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

@@ -0,0 +1 @@
+export * from './workspace-setting';

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

@@ -0,0 +1,136 @@
+import { styled } from '@/styles';
+import { Button } from '@/ui/button';
+import MuiAvatar from '@mui/material/Avatar';
+
+export const StyledSettingContainer = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    padding: '0px',
+    width: '961px',
+    background: theme.colors.popoverBackground,
+    borderRadius: '12px',
+    overflow: 'hidden',
+  };
+});
+
+export const StyledSettingSidebar = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '620px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingContent = styled('div')(({ theme }) => {
+  return {
+    paddingLeft: '48px',
+  };
+});
+
+export const StyledSetting = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '620px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingSidebarHeader = styled('div')(({ theme }) => {
+  {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      textAlign: 'center',
+      marginTop: '37px',
+    };
+  }
+});
+
+export const StyledSettingTabContainer = styled('ul')(({ theme }) => {
+  {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      marginTop: '25px',
+    };
+  }
+});
+
+export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
+  ({ theme, isActive }) => {
+    {
+      return {
+        display: 'flex',
+        marginBottom: '12px',
+        padding: '0 24px',
+        height: '32px',
+        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
+        fontWeight: '400',
+        fontSize: '16px',
+        lineHeight: '32px',
+        cursor: 'pointer',
+      };
+    }
+  }
+);
+
+export const StyledSettingTagIconContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '14.64px',
+    width: '14.47px',
+    fontSize: '14.47px',
+  };
+});
+
+export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
+  ({ marginTop, theme }) => {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      marginTop: marginTop ? `${marginTop}px` : '0px',
+    };
+  }
+);
+
+export const StyledSettingAvatarContent = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '72px',
+  };
+});
+
+export const StyledSettingAvatar = styled(MuiAvatar)(({ theme }) => {
+  return { height: '72px', width: '72px' };
+});
+
+export const StyledAvatarUploadBtn = styled(Button)(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.hoverBackground,
+    color: theme.colors.primaryColor,
+    margin: '0 12px 0 24px',
+  };
+});
+
+export const StyledSettingInputContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+  };
+});
+
+export const StyledDeleteButtonContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '158px',
+  };
+});

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

@@ -0,0 +1,122 @@
+import Modal from '@/ui/modal';
+import {
+  StyledAvatarUploadBtn,
+  StyledDeleteButtonContainer,
+  StyledSettingAvatar,
+  StyledSettingAvatarContent,
+  StyledSettingContainer,
+  StyledSettingContent,
+  StyledSettingH2,
+  StyledSettingInputContainer,
+  StyledSettingSidebar,
+  StyledSettingSidebarHeader,
+  StyledSettingTabContainer,
+  StyledSettingTagIconContainer,
+  WorkspaceSettingTagItem,
+} from './style';
+import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+import { Button } from '@/ui/button';
+import Input from '@/ui/input';
+
+enum ActiveTab {
+  'general' = 'general',
+  'members' = 'members',
+  'publish' = 'publish',
+}
+
+type SettingTabProps = {
+  activeTab: ActiveTab;
+  onTabChange?: (tab: ActiveTab) => 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.members}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.members);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <UsersIcon />
+        </StyledSettingTagIconContainer>
+        Members
+      </WorkspaceSettingTagItem>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.publish}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.publish);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <PublishIcon />
+        </StyledSettingTagIconContainer>
+        Publish
+      </WorkspaceSettingTagItem>
+    </StyledSettingTabContainer>
+  );
+};
+
+export const WorkspaceSetting = () => {
+  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
+  const handleTabChange = (tab: ActiveTab) => {
+    setActiveTab(tab);
+  };
+  return (
+    <Modal open={true}>
+      <StyledSettingContainer>
+        <StyledSettingSidebar>
+          <StyledSettingSidebarHeader>
+            Workspace Settings
+          </StyledSettingSidebarHeader>
+          <WorkspaceSettingTab
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+          />
+        </StyledSettingSidebar>
+        <StyledSettingContent>
+          {activeTab === ActiveTab.general && <GeneralPage />}
+        </StyledSettingContent>
+      </StyledSettingContainer>
+    </Modal>
+  );
+};
+
+const GeneralPage = () => {
+  return (
+    <div>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingAvatarContent>
+        <StyledSettingAvatar alt="workspace avatar">W</StyledSettingAvatar>
+        <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
+        <Button shape="round">remove</Button>
+      </StyledSettingAvatarContent>
+      <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Name"></Input>
+      </StyledSettingInputContainer>
+      <StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input width={327} placeholder="Workspace Owner"></Input>
+      </StyledSettingInputContainer>
+      <StyledDeleteButtonContainer>
+        <Button type="danger" shape="circle">
+          Delete Workspace
+        </Button>
+      </StyledDeleteButtonContainer>
+    </div>
+  );
+};

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

@@ -27,7 +27,7 @@ const workspaces = [
 ];
 
 export const SelectorPopperContent = () => {
-  const { user, workspaces } = useAppState();
+  const { user, workspacesMeta } = useAppState();
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
       <LoginItem />
@@ -43,7 +43,7 @@ export const SelectorPopperContent = () => {
       <PrivateWorkspaceItem />
       <StyledDivider />
       <WorkspaceGroupTitle>Workspace</WorkspaceGroupTitle>
-      {workspaces.map(workspace => {
+      {workspacesMeta.map(workspace => {
         return (
           <WorkspaceItem
             key={workspace.id}

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx

@@ -23,7 +23,6 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
   };
-  console.log('workspaceName', workspaceName);
   return (
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>

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

@@ -8,7 +8,7 @@ export const WorkspaceSelector = () => {
       content={<SelectorPopperContent />}
       zIndex={1000}
       placement="bottom-start"
-      trigger="hover"
+      trigger="click"
     >
       <SelectorWrapper>
         <Avatar alt="Affine" />

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

@@ -57,7 +57,10 @@ export const StyledListItem = styled.button<{
     borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
-      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+      ? {
+          cursor: 'not-allowed',
+          color: theme.colors.borderColor,
+        }
       : {}),
 
     '>svg': {