1.adjust code style.

libs/components/layout/src/header/FileSystem.tsx

@@ -4,7 +4,7 @@ import { CloseIcon } from '@toeverything/components/common';
 import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
 import { useLocalTrigger } from '@toeverything/datasource/state';
-import { useTranslation } from 'react-i18next';
+
 const cleanupWorkspace = (workspace: string) =>
     new Promise((resolve, reject) => {
         const req = indexedDB.deleteDatabase(workspace);
@@ -75,25 +75,39 @@ export const FileSystem = () => {
         setError(true);
         setTimeout(() => setError(false), 3000);
     }, []);
-    const { t } = useTranslation();
+
     const apiSupported = useMemo(() => fsApiSupported(), []);
 
     if (apiSupported && !selected) {
         return (
-            <MuiSnackbar
-                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-                open={error}
-                message="Request File Permission failed, please check if you have permission"
-                sx={{ marginTop: '3em' }}
-                action={
-                    <IconButton
-                        aria-label="close"
-                        onClick={() => setError(false)}
-                    >
-                        <CloseIcon />
-                    </IconButton>
-                }
-            />
+            <>
+                <MuiSnackbar
+                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                    open={error}
+                    message="Request File Permission failed, please check if you have permission"
+                    sx={{ marginTop: '3em' }}
+                    action={
+                        <IconButton
+                            aria-label="close"
+                            onClick={() => setError(false)}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                    }
+                />
+                <StyledFileSystem
+                    onClick={async () => {
+                        try {
+                            await requestPermission('AFFiNE');
+                            onSelected();
+                        } catch (e) {
+                            onError();
+                        }
+                    }}
+                >
+                    Sync to Disk
+                </StyledFileSystem>
+            </>
         );
     }
     return null;

libs/components/layout/src/header/LayoutHeader.tsx

@@ -14,7 +14,7 @@ import {
 
 import { useTranslation } from 'react-i18next';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
-import { FileSystem, fsApiSupported } from './FileSystem';
+import { fsApiSupported } from './FileSystem';
 import { CurrentPageTitle } from './Title';
 
 export const LayoutHeader = () => {
@@ -44,7 +44,6 @@ export const LayoutHeader = () => {
                 </FlexContainer>
                 <FlexContainer>
                     <StyledHelper>
-                        <FileSystem />
                         <StyledShare disabled={true}>{t('Share')}</StyledShare>
                         <div style={{ margin: '0px 12px' }}>
                             <IconButton

libs/components/layout/src/header/PageSettingPortal.tsx

@@ -58,8 +58,6 @@ function PageSettingPortal() {
     const navigate = useNavigate();
     const { user } = useUserAndSpaces();
     const BooleanFullWidthChecked = useFlag('BooleanFullWidthChecked', false);
-    const BooleanExportWorkspace = useFlag('BooleanExportWorkspace', false);
-    const BooleanImportWorkspace = useFlag('BooleanImportWorkspace', false);
     const BooleanExportHtml = useFlag('BooleanExportHtml', false);
     const BooleanExportPdf = useFlag('BooleanExportPdf', false);
     const BooleanExportMarkdown = useFlag('BooleanExportMarkdown', false);
@@ -217,18 +215,14 @@ function PageSettingPortal() {
                             />
                         )}
                         <Divider />
-                        {BooleanImportWorkspace && (
-                            <ListButton
-                                content="Import Workspace"
-                                onClick={handleImportWorkspace}
-                            />
-                        )}
-                        {BooleanExportWorkspace && (
-                            <ListButton
-                                content="Export Workspace"
-                                onClick={handleExportWorkspace}
-                            />
-                        )}
+                        <ListButton
+                            content="Import Workspace"
+                            onClick={handleImportWorkspace}
+                        />
+                        <ListButton
+                            content="Export Workspace"
+                            onClick={handleExportWorkspace}
+                        />
 
                         <p className="textDescription">
                             Last edited by {user && user.nickname}