feat: add onboarding for client (#2144)

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

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">