feat: add download tips banner (#2151)

apps/web/src/atoms/guide.ts

@@ -10,12 +10,15 @@ export type Guide = {
   changeLog: boolean;
   // should show recording tips
   onBoarding: boolean;
+  // should show download client tips
+  downloadClientTip: boolean;
 };
 
 const guidePrimitiveAtom = atomWithStorage<Guide>('helper-guide', {
   quickSearchTips: true,
   changeLog: true,
   onBoarding: true,
+  downloadClientTip: true,
 });
 
 export const guideQuickSearchTipsAtom = atom<
@@ -67,3 +70,18 @@ export const guideOnboardingAtom = atom<
     }));
   }
 );
+export const guideDownloadClientTipAtom = atom<
+  Guide['downloadClientTip'],
+  [open: boolean],
+  void
+>(
+  get => {
+    return get(guidePrimitiveAtom).downloadClientTip;
+  },
+  (_, set, open) => {
+    set(guidePrimitiveAtom, tips => ({
+      ...tips,
+      downloadClientTip: open,
+    }));
+  }
+);

apps/web/src/components/blocksuite/workspace-header/download-tips.tsx

@@ -0,0 +1,22 @@
+import { DownloadTips } from '@affine/component/affine-banner';
+import { getEnvironment } from '@affine/env';
+import { useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import { guideDownloadClientTipAtom } from '../../../atoms/guide';
+
+export const DownloadClientTip = () => {
+  const env = getEnvironment();
+  const [showDownloadClientTips, setShowDownloadClientTips] = useAtom(
+    guideDownloadClientTipAtom
+  );
+  const onCloseDownloadClient = useCallback(() => {
+    setShowDownloadClientTips(false);
+  }, [setShowDownloadClientTips]);
+
+  if (!showDownloadClientTips || env.isDesktop) {
+    return <></>;
+  }
+  return <DownloadTips onClose={onCloseDownloadClient} />;
+};
+export default DownloadClientTip;

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -1,7 +1,7 @@
+import { BrowserWarning } from '@affine/component/affine-banner';
 import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WorkspaceFlavour } from '@affine/workspace/type';
-import { CloseIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useAtom } from 'jotai';
 import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
@@ -14,8 +14,10 @@ import {
   useState,
 } from 'react';
 
+import { guideDownloadClientTipAtom } from '../../../atoms/guide';
 import { useCurrentMode } from '../../../hooks/current/use-current-mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
+import { DownloadClientTip } from './download-tips';
 import EditPage from './header-right-items/edit-page';
 import { EditorOptionMenu } from './header-right-items/editor-option-menu';
 import { HeaderShareMenu } from './header-right-items/share-menu';
@@ -23,8 +25,6 @@ import SyncUser from './header-right-items/sync-user';
 import TrashButtonGroup from './header-right-items/trash-button-group';
 import UserAvatar from './header-right-items/user-avatar';
 import {
-  StyledBrowserWarning,
-  StyledCloseButton,
   StyledHeader,
   StyledHeaderContainer,
   StyledHeaderRightSide,
@@ -37,23 +37,6 @@ const SidebarSwitch = lazy(() =>
   }))
 );
 
-const BrowserWarning = ({
-  show,
-  onClose,
-}: {
-  show: boolean;
-  onClose: () => void;
-}) => {
-  return (
-    <StyledBrowserWarning show={show}>
-      <OSWarningMessage />
-      <StyledCloseButton onClick={onClose}>
-        <CloseIcon />
-      </StyledCloseButton>
-    </StyledBrowserWarning>
-  );
-};
-
 export type BaseHeaderProps<
   Workspace extends AffineOfficialWorkspace = AffineOfficialWorkspace
 > = {
@@ -130,9 +113,15 @@ export const Header = forwardRef<
   PropsWithChildren<HeaderProps> & HTMLAttributes<HTMLDivElement>
 >((props, ref) => {
   const [showWarning, setShowWarning] = useState(false);
+  const [showGuideDownloadClientTip, setShowGuideDownloadClientTip] =
+    useState(false);
+  const [shouldShowGuideDownloadClientTip] = useAtom(
+    guideDownloadClientTipAtom
+  );
   useEffect(() => {
     setShowWarning(shouldShowWarning());
-  }, []);
+    setShowGuideDownloadClientTip(shouldShowGuideDownloadClientTip);
+  }, [shouldShowGuideDownloadClientTip]);
   const [open] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
 
@@ -144,12 +133,18 @@ export const Header = forwardRef<
       data-open={open}
       {...props}
     >
-      <BrowserWarning
-        show={showWarning}
-        onClose={() => {
-          setShowWarning(false);
-        }}
-      />
+      {showGuideDownloadClientTip ? (
+        <DownloadClientTip />
+      ) : (
+        <BrowserWarning
+          show={showWarning}
+          message={<OSWarningMessage />}
+          onClose={() => {
+            setShowWarning(false);
+          }}
+        />
+      )}
+
       <StyledHeader
         hasWarning={showWarning}
         data-testid="editor-header-items"