feat: add onboarding for client (#2144)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/pure/OnboardingModal.tsx

@@ -0,0 +1,45 @@
+import { TourModal } from '@affine/component/tour-modal';
+import { useAtom } from 'jotai';
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { openOnboardingModalAtom } from '../../atoms';
+import { guideOnboardingAtom } from '../../atoms/guide';
+
+type OnboardingModalProps = {
+  onClose: () => void;
+  open: boolean;
+};
+
+const getHelperGuide = (): { onBoarding: boolean } | null => {
+  const helperGuide = localStorage.getItem('helper-guide');
+  if (helperGuide) {
+    return JSON.parse(helperGuide);
+  }
+  return null;
+};
+
+export const OnboardingModal: React.FC<OnboardingModalProps> = ({
+  open,
+  onClose,
+}) => {
+  const [, setShowOnboarding] = useAtom(guideOnboardingAtom);
+  const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
+  const onCloseTourModal = useCallback(() => {
+    setShowOnboarding(false);
+    onClose();
+  }, [onClose, setShowOnboarding]);
+
+  const shouldShow = useMemo(() => {
+    const helperGuide = getHelperGuide();
+    return helperGuide?.onBoarding ?? true;
+  }, []);
+
+  useEffect(() => {
+    if (shouldShow) {
+      setOpenOnboarding(true);
+    }
+  }, [shouldShow, setOpenOnboarding]);
+  return <TourModal open={open} onClose={onCloseTourModal} />;
+};
+
+export default OnboardingModal;

apps/web/src/components/pure/help-island/index.tsx

@@ -1,8 +1,11 @@
 import { MuiFade, Tooltip } from '@affine/component';
+import { getEnvironment } from '@affine/env';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
+import { useAtom } from 'jotai';
 import { lazy, Suspense, useState } from 'react';
 
+import { openOnboardingModalAtom } from '../../../atoms';
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
 import {
@@ -11,19 +14,25 @@ import {
   StyledIsland,
   StyledTriggerWrapper,
 } from './style';
-
+const env = getEnvironment();
 const ContactModal = lazy(() =>
   import('@affine/component/contact-modal').then(({ ContactModal }) => ({
     default: ContactModal,
   }))
 );
-
-export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
+const DEFAULT_SHOW_LIST: IslandItemNames[] = [
+  'whatNew',
+  'contact',
+  'shortcuts',
+];
+const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST, 'guide'];
+export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts' | 'guide';
 export const HelpIsland = ({
-  showList = ['whatNew', 'contact', 'shortcuts'],
+  showList = env.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST,
 }: {
   showList?: IslandItemNames[];
 }) => {
+  const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
   const [spread, setShowSpread] = useState(false);
   // const { triggerShortcutsModal, triggerContactModal } = useModal();
   // const blockHub = useGlobalState(store => store.blockHub);
@@ -98,6 +107,19 @@ export const HelpIsland = ({
               </StyledIconWrapper>
             </Tooltip>
           )}
+          {showList.includes('guide') && (
+            <Tooltip content={'Easy Guide'} placement="left-end">
+              <StyledIconWrapper
+                data-testid="easy-guide"
+                onClick={() => {
+                  setShowSpread(false);
+                  setOpenOnboarding(true);
+                }}
+              >
+                <HelpIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
         </StyledAnimateWrapper>
 
         <Tooltip content={t['Help and Feedback']()} placement="left-end">