feat: optional provider

libs/components/account/src/login/fs.tsx

@@ -46,7 +46,7 @@ const requestPermission = async (workspace: string) => {
 };
 
 export const FileSystem = (props: { onError: () => void }) => {
-    const onSelected = useLocalTrigger();
+    const [, onSelected] = useLocalTrigger();
 
     const apiSupported = useMemo(() => {
         try {
@@ -56,12 +56,6 @@ export const FileSystem = (props: { onError: () => void }) => {
         }
     }, []);
 
-    useEffect(() => {
-        if (process.env['NX_E2E']) {
-            onSelected();
-        }
-    }, []);
-
     return (
         <MuiButton
             variant="outlined"

libs/components/account/src/login/index.tsx

@@ -21,7 +21,7 @@ export function Login() {
             <MuiSnackbar
                 anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                 open={error}
-                message="Login failed, please check if you have permission"
+                message="Request File Permission failed, please check if you have permission"
             />
             <MuiGrid item xs={8}>
                 <Error
@@ -32,7 +32,6 @@ export function Login() {
             </MuiGrid>
 
             <MuiGrid item xs={4}>
-                {' '}
                 <MuiBox
                     style={{
                         display: 'flex',

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

@@ -0,0 +1,112 @@
+/* eslint-disable filename-rules/match */
+import { useCallback, useMemo, useState } from 'react';
+
+import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
+import { useLocalTrigger } from '@toeverything/datasource/state';
+import { CloseIcon } from '@toeverything/components/common';
+
+const cleanupWorkspace = (workspace: string) =>
+    new Promise((resolve, reject) => {
+        const req = indexedDB.deleteDatabase(workspace);
+        req.addEventListener('error', e => reject(e));
+        req.addEventListener('blocked', e => reject(e));
+        req.addEventListener('upgradeneeded', e => reject(e));
+        req.addEventListener('success', e => resolve(e));
+    });
+
+const requestPermission = async (workspace: string) => {
+    await cleanupWorkspace(workspace);
+    const dirHandler = await window.showDirectoryPicker({
+        id: 'AFFiNE_' + workspace,
+        mode: 'readwrite',
+        startIn: 'documents',
+    });
+
+    const fileHandle = await dirHandler.getFileHandle('affine.db', {
+        create: true,
+    });
+    const file = await fileHandle.getFile();
+    const initialData = new Uint8Array(await file.arrayBuffer());
+
+    const exporter = async (contents: Uint8Array) => {
+        try {
+            const writable = await fileHandle.createWritable();
+            await writable.write(contents);
+            await writable.close();
+        } catch (e) {
+            console.log(e);
+        }
+    };
+
+    await services.api.editorBlock.setupDataExporter(
+        workspace,
+        new Uint8Array(initialData),
+        exporter
+    );
+};
+
+const StyledFileSystem = styled('div')<{ disabled?: boolean }>({
+    padding: '10px 12px',
+    fontWeight: 600,
+    fontSize: '14px',
+    color: '#3E6FDB',
+    textTransform: 'uppercase',
+    cursor: 'pointer',
+    '&:hover': {
+        background: '#F5F7F8',
+        borderRadius: '5px',
+    },
+});
+
+export const FileSystem = () => {
+    const [selected, onSelected] = useLocalTrigger();
+    const [error, setError] = useState(false);
+
+    const onError = useCallback(() => {
+        setError(true);
+        setTimeout(() => setError(false), 3000);
+    }, []);
+
+    const apiSupported = useMemo(() => {
+        try {
+            return 'showOpenFilePicker' in window;
+        } catch (e) {
+            return false;
+        }
+    }, []);
+
+    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>
+                    }
+                />
+                <StyledFileSystem
+                    onClick={async () => {
+                        try {
+                            await requestPermission('AFFiNE');
+                            onSelected();
+                        } catch (e) {
+                            onError();
+                        }
+                    }}
+                >
+                    Sync to Disk
+                </StyledFileSystem>
+            </>
+        );
+    }
+    return null;
+};

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

@@ -1,4 +1,4 @@
-import { IconButton, styled, MuiButton } from '@toeverything/components/ui';
+import { IconButton, styled } from '@toeverything/components/ui';
 import {
     LogoIcon,
     SideBarViewIcon,
@@ -7,8 +7,9 @@ import {
 } from '@toeverything/components/icons';
 import { useShowSettingsSidebar } from '@toeverything/datasource/state';
 
-import { CurrentPageTitle } from './Title';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
+import { FileSystem } from './FileSystem';
+import { CurrentPageTitle } from './Title';
 
 export const LayoutHeader = () => {
     const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
@@ -25,6 +26,7 @@ export const LayoutHeader = () => {
                 </FlexContainer>
                 <FlexContainer>
                     <StyledHelper>
+                        <FileSystem />
                         <StyledShare disabled={true}>Share</StyledShare>
                         <div style={{ margin: '0px 12px' }}>
                             <IconButton