feat: warning tips

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

@@ -59,6 +59,14 @@ const StyledFileSystem = styled('div')<{ disabled?: boolean }>({
     },
 });
 
+export const fsApiSupported = () => {
+    try {
+        return 'showOpenFilePicker' in window;
+    } catch (e) {
+        return false;
+    }
+};
+
 export const FileSystem = () => {
     const [selected, onSelected] = useLocalTrigger();
     const [error, setError] = useState(false);
@@ -68,13 +76,7 @@ export const FileSystem = () => {
         setTimeout(() => setError(false), 3000);
     }, []);
 
-    const apiSupported = useMemo(() => {
-        try {
-            return 'showOpenFilePicker' in window;
-        } catch (e) {
-            return false;
-        }
-    }, []);
+    const apiSupported = useMemo(() => fsApiSupported(), []);
 
     if (apiSupported && !selected) {
         return (

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

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { IconButton, styled } from '@toeverything/components/ui';
 import {
     LogoIcon,
@@ -5,16 +7,30 @@ import {
     SearchIcon,
     SideBarViewCloseIcon,
 } from '@toeverything/components/icons';
-import { useShowSettingsSidebar } from '@toeverything/datasource/state';
+import {
+    useShowSettingsSidebar,
+    useLocalTrigger,
+} from '@toeverything/datasource/state';
 
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
-import { FileSystem } from './FileSystem';
+import { fsApiSupported, FileSystem } from './FileSystem';
 import { CurrentPageTitle } from './Title';
 
 export const LayoutHeader = () => {
+    const [isLocalWorkspace] = useLocalTrigger();
     const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
         useShowSettingsSidebar();
 
+    const warningTips = useMemo(() => {
+        if (!fsApiSupported()) {
+            return 'Your browser does not support the local storage feature, please upgrade to the latest version of Chrome or Edge browser';
+        } else if (isLocalWorkspace) {
+            return 'You are in DEMO mode. Changes will NOT be saved unless you SYNC TO DISK';
+        } else {
+            return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data';
+        }
+    }, [isLocalWorkspace]);
+
     return (
         <StyledContainerForHeaderRoot>
             <StyledHeaderRoot>
@@ -53,10 +69,7 @@ export const LayoutHeader = () => {
                 </StyledContainerForEditorBoardSwitcher>
             </StyledHeaderRoot>
             <StyledUnstableTips>
-                <StyledUnstableTipsText>
-                    AFFiNE is currently under active development. This build is
-                    UNSTABLE. Please DO NOT store important data.
-                </StyledUnstableTipsText>
+                <StyledUnstableTipsText>{warningTips}</StyledUnstableTipsText>
             </StyledUnstableTips>
         </StyledContainerForHeaderRoot>
     );