fix: rewrite workspacesetting layout

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

@@ -5,6 +5,8 @@ import {
   StyledSettingInputContainer,
   StyledDoneButtonContainer,
   StyledInput,
+  StyledProviderInfo,
+  StyleGeneral,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
@@ -13,12 +15,13 @@ import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
+import { DoneIcon, UsersIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
+import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   // };
 
   return workspace ? (
-    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
-      <StyledSettingAvatarContent>
-        <div
-          style={{
-            float: 'left',
-            marginRight: '20px',
-          }}
-        >
-          <WorkspaceUnitAvatar
-            size={60}
-            name={workspace.name}
-            workspaceUnit={workspace}
-          />
-        </div>
-        {/* TODO: Wait for image sync to complete  */}
-        {/* <Upload
+    <StyleGeneral>
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingAvatarContent>
+          <div
+            style={{
+              float: 'left',
+              marginRight: '20px',
+            }}
+          >
+            <WorkspaceUnitAvatar
+              size={60}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          </div>
+          {/* TODO: Wait for image sync to complete  */}
+          {/* <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           fileChange={fileChange}
         >
           <Button loading={uploading}>{t('Upload')}</Button>
         </Upload> */}
-        {/* TODO: add upload logic */}
-      </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <StyledInput
-          width={284}
-          height={32}
-          value={workspaceName}
-          placeholder={t('Workspace Name')}
-          maxLength={14}
-          minLength={1}
-          disabled={!isOwner}
-          onChange={handleChangeWorkSpaceName}
-        ></StyledInput>
-        {isOwner ? (
-          <StyledDoneButtonContainer
-            onClick={() => {
-              handleUpdateWorkspaceName();
-            }}
-          >
-            <DoneIcon />
-          </StyledDoneButtonContainer>
-        ) : null}
-      </StyledSettingInputContainer>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
-        Local workspace
-      </StyledSettingInputContainer>
+          {/* TODO: add upload logic */}
+        </StyledSettingAvatarContent>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          <StyledInput
+            width={284}
+            height={32}
+            value={workspaceName}
+            placeholder={t('Workspace Name')}
+            maxLength={14}
+            minLength={1}
+            disabled={!isOwner}
+            onChange={handleChangeWorkSpaceName}
+          ></StyledInput>
+          {isOwner ? (
+            <StyledDoneButtonContainer
+              onClick={() => {
+                handleUpdateWorkspaceName();
+              }}
+            >
+              <DoneIcon />
+            </StyledDoneButtonContainer>
+          ) : null}
+        </StyledSettingInputContainer>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          {isOwner ? (
+            currentWorkspace?.provider === 'local' ? (
+              <StyledProviderInfo>
+                <LocalIcon />
+                Local Workspace
+              </StyledProviderInfo>
+            ) : (
+              <StyledProviderInfo>
+                <CloudIcon />
+                All data can be accessed offline
+              </StyledProviderInfo>
+            )
+          ) : (
+            <StyledProviderInfo>
+              <UsersIcon fontSize={20} color={'#FF646B'} />
+              Joined Workspace
+            </StyledProviderInfo>
+          )}
+        </StyledSettingInputContainer>
+      </div>
+
       <StyledDeleteButtonContainer>
         {isOwner ? (
           <>
@@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           </>
         )}
       </StyledDeleteButtonContainer>
-    </div>
+    </StyleGeneral>
   ) : null;
 };