feat: add browser detect warning

packages/app/src/components/Header/index.tsx

@@ -8,6 +8,9 @@ import {
   StyledHeaderRightSide,
   StyledMoreMenuItem,
   IconButton,
+  StyledHeaderContainer,
+  StyledBrowserWarning,
+  StyledCloseButton,
 } from './styles';
 import { Popover } from '@/ui/popover';
 import { useEditor } from '@/components/editor-provider';
@@ -15,7 +18,8 @@ import EditorModeSwitch from '@/components/editor-mode-switch';
 import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
 import { useModal } from '@/components/global-modal-provider';
-
+import CloseIcon from '@mui/icons-material/Close';
+import { getWarningMessage, shouldShowWarning } from './utils';
 const PopoverContent = () => {
   const { editor, mode, setMode } = useEditor();
   return (
@@ -48,12 +52,25 @@ const PopoverContent = () => {
   );
 };
 
+const BrowserWarning = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <StyledBrowserWarning>
+      {getWarningMessage()}
+      <StyledCloseButton onClick={onClose}>
+        <CloseIcon />
+      </StyledCloseButton>
+    </StyledBrowserWarning>
+  );
+};
+
 export const Header = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
   const { contactModalHandler } = useModal();
   const { editor } = useEditor();
 
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+
   useEffect(() => {
     if (editor) {
       setTitle(editor.model.title || '');
@@ -62,10 +79,14 @@ export const Header = () => {
       });
     }
   }, [editor]);
-
   return (
-    <>
-      <StyledHeader>
+    <StyledHeaderContainer hasWarning={showWarning}>
+      <BrowserWarning
+        onClose={() => {
+          setShowWarning(false);
+        }}
+      />
+      <StyledHeader hasWarning={showWarning}>
         <StyledLogo
           onClick={() => {
             contactModalHandler(true);
@@ -104,6 +125,6 @@ export const Header = () => {
           </Popover>
         </StyledHeaderRightSide>
       </StyledHeader>
-    </>
+    </StyledHeaderContainer>
   );
 };

packages/app/src/components/Header/styles.ts

@@ -1,17 +1,29 @@
-import { displayFlex, styled } from '@/styles';
+import { absoluteCenter, displayFlex, styled } from '@/styles';
 
-export const StyledHeader = styled('div')({
-  height: '60px',
-  width: '100vw',
-  ...displayFlex('space-between', 'center'),
-  background: 'var(--affine-page-background)',
-  transition: 'background-color 0.5s',
-  position: 'fixed',
-  left: '0',
-  top: '0',
-  padding: '0 22px',
-  zIndex: '10',
-});
+export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
+  ({ hasWarning }) => {
+    return {
+      position: 'relative',
+      height: hasWarning ? '96px' : '60px',
+    };
+  }
+);
+export const StyledHeader = styled.div<{ hasWarning: boolean }>(
+  ({ hasWarning, theme }) => {
+    return {
+      height: '60px',
+      width: '100vw',
+      ...displayFlex('space-between', 'center'),
+      background: 'var(--affine-page-background)',
+      transition: 'background-color 0.5s',
+      position: 'fixed',
+      left: '0',
+      top: hasWarning ? '36px' : '0',
+      padding: '0 22px',
+      zIndex: theme.zIndex.modal,
+    };
+  }
+);
 
 export const StyledTitle = styled('div')(({ theme }) => ({
   width: '720px',
@@ -83,3 +95,37 @@ export const IconButton = styled('div')(({ theme }) => {
     },
   };
 });
+
+export const StyledBrowserWarning = styled.div(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.warningBackground,
+    color: theme.colors.warningColor,
+    height: '36px',
+    width: '100vw',
+    fontSize: theme.font.sm,
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    ...displayFlex('center', 'center'),
+  };
+});
+
+export const StyledCloseButton = styled.div(({ theme }) => {
+  return {
+    width: '36px',
+    height: '36px',
+    color: theme.colors.iconColor,
+    cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+    position: 'absolute',
+    right: '15px',
+    top: '0',
+
+    svg: {
+      width: '15px',
+      height: '15px',
+      position: 'relative',
+      zIndex: 1,
+    },
+  };
+});

packages/app/src/components/Header/utils.tsx

@@ -0,0 +1,33 @@
+// Inspire by https://stackoverflow.com/a/4900484/8415727
+const getChromeVersion = () => {
+  const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+  return raw ? parseInt(raw[2], 10) : false;
+};
+const getIsChrome = () => {
+  return (
+    /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)
+  );
+};
+const minimumChromeVersion = 102;
+
+export const shouldShowWarning = () => {
+  return !getIsChrome() || getChromeVersion() < minimumChromeVersion;
+};
+
+export const getWarningMessage = () => {
+  if (!getIsChrome()) {
+    return (
+      <span>
+        We recommend the <strong>Chrome</strong> browser for optimal experience.
+      </span>
+    );
+  }
+  if (getChromeVersion() < minimumChromeVersion) {
+    return (
+      <span>
+        Please upgrade to the latest version of Chrome for the best experience.
+      </span>
+    );
+  }
+  return '';
+};