refactor: guide atoms (#2196)

apps/web/src/components/affine/sidebar-switch/index.tsx

@@ -5,11 +5,6 @@ import { useTranslation } from '@affine/i18n';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 
-import {
-  useGuideHidden,
-  useGuideHiddenUntilNextUpdate,
-  useUpdateTipsOnVersionChange,
-} from '../../../hooks/use-is-first-load';
 import { SidebarSwitchIcon } from './icons';
 import { StyledSidebarSwitch } from './style';
 type SidebarSwitchProps = {
@@ -18,18 +13,14 @@ type SidebarSwitchProps = {
 };
 
 // fixme: the following code is not correct, SSR will fail because hydrate will not match the client side render
-//  in `StyledSidebarSwitch` component
+//  in `StyledSidebarSwitch` a component
 export const SidebarSwitch = ({
   visible = true,
   tooltipContent,
   ...props
 }: SidebarSwitchProps) => {
-  useUpdateTipsOnVersionChange();
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const [tooltipVisible, setTooltipVisible] = useState(false);
-  const [guideHidden, setGuideHidden] = useGuideHidden();
-  const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
-    useGuideHiddenUntilNextUpdate();
   const { t } = useTranslation();
   const checkIsMac = () => {
     const env = getEnvironment();
@@ -59,22 +50,7 @@ export const SidebarSwitch = ({
         onClick={useCallback(() => {
           setOpen(open => !open);
           setTooltipVisible(false);
-          if (!guideHiddenUntilNextUpdate['quickSearchTips']) {
-            setGuideHiddenUntilNextUpdate({
-              ...guideHiddenUntilNextUpdate,
-              quickSearchTips: true,
-            });
-            setTimeout(() => {
-              setGuideHidden({ ...guideHidden, quickSearchTips: false });
-            }, 200);
-          }
-        }, [
-          guideHidden,
-          guideHiddenUntilNextUpdate,
-          setGuideHidden,
-          setGuideHiddenUntilNextUpdate,
-          setOpen,
-        ])}
+        }, [setOpen])}
         onMouseEnter={useCallback(() => {
           setTooltipVisible(true);
         }, [])}

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

@@ -4,12 +4,12 @@ import { getEnvironment } from '@affine/env';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import { forwardRef, useCallback, useRef } from 'react';
 
 import { currentEditorAtom, openQuickSearchModalAtom } from '../../../atoms';
-import { useGuideHidden } from '../../../hooks/use-is-first-load';
+import { guideQuickSearchTipsAtom } from '../../../atoms/guide';
 import { useElementResizeEffect } from '../../../hooks/use-workspaces';
 import { QuickSearchButton } from '../../pure/quick-search-button';
 import { EditorModeSwitch } from './editor-mode-switch';
@@ -39,7 +39,6 @@ export const WorkspaceHeader = forwardRef<
   );
   assertExists(pageMeta);
   const title = pageMeta.title;
-  const [isTipsHidden, setTipsHidden] = useGuideHidden();
   const isMac = () => {
     const env = getEnvironment();
     return env.isBrowser && env.isMacOs;
@@ -47,14 +46,18 @@ export const WorkspaceHeader = forwardRef<
 
   const popperRef: PopperProps['popperRef'] = useRef(null);
 
+  const [showQuickSearchTips, setShowQuickSearchTips] = useAtom(
+    guideQuickSearchTipsAtom
+  );
+
   useElementResizeEffect(
     useAtomValue(currentEditorAtom),
     useCallback(() => {
-      if (isTipsHidden.quickSearchTips || !popperRef.current) {
+      if (showQuickSearchTips || !popperRef.current) {
         return;
       }
       popperRef.current.update();
-    }, [isTipsHidden.quickSearchTips])
+    }, [showQuickSearchTips])
   );
 
   const TipsContent = (
@@ -77,9 +80,7 @@ export const WorkspaceHeader = forwardRef<
       </div>
       <StyledQuickSearchTipButton
         data-testid="quick-search-got-it"
-        onClick={() =>
-          setTipsHidden({ ...isTipsHidden, quickSearchTips: true })
-        }
+        onClick={() => setShowQuickSearchTips(false)}
       >
         Got it
       </StyledQuickSearchTipButton>
@@ -107,7 +108,7 @@ export const WorkspaceHeader = forwardRef<
               content={TipsContent}
               placement="bottom"
               popperRef={popperRef}
-              open={!isTipsHidden.quickSearchTips}
+              open={showQuickSearchTips}
               offset={[0, -5]}
             >
               <StyledSearchArrowWrapper>

apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx

@@ -1,30 +1,15 @@
 import ChangeLogComponent from '@affine/component/changeLog';
+import { useAtom } from 'jotai';
 import { useCallback } from 'react';
 
-import {
-  useGuideHidden,
-  useGuideHiddenUntilNextUpdate,
-} from '../../../../hooks/use-is-first-load';
+import { guideChangeLogAtom } from '../../../../atoms/guide';
 
 export const ChangeLog = () => {
-  const [guideHidden, setGuideHidden] = useGuideHidden();
-  const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
-    useGuideHiddenUntilNextUpdate();
+  const [showChangeLogTips, setShowChangeLogTips] = useAtom(guideChangeLogAtom);
   const onCloseWhatsNew = useCallback(() => {
-    setTimeout(() => {
-      setGuideHiddenUntilNextUpdate({
-        ...guideHiddenUntilNextUpdate,
-        changeLog: true,
-      });
-      setGuideHidden({ ...guideHidden, changeLog: true });
-    }, 300);
-  }, [
-    guideHidden,
-    guideHiddenUntilNextUpdate,
-    setGuideHidden,
-    setGuideHiddenUntilNextUpdate,
-  ]);
-  if (guideHiddenUntilNextUpdate.changeLog) {
+    setShowChangeLogTips(false);
+  }, [setShowChangeLogTips]);
+  if (!showChangeLogTips) {
     return <></>;
   }
   return <ChangeLogComponent onCloseWhatsNew={onCloseWhatsNew} />;