feat: add onboarding for client (#2144)

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

apps/web/src/providers/ModalProvider.tsx

@@ -1,3 +1,4 @@
+import { getEnvironment } from '@affine/env';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { arrayMove } from '@dnd-kit/sortable';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
@@ -9,6 +10,7 @@ import {
   currentWorkspaceIdAtom,
   openCreateWorkspaceModalAtom,
   openDisableCloudAlertModalAtom,
+  openOnboardingModalAtom,
   openWorkspacesModalAtom,
 } from '../atoms';
 import { useAffineLogIn } from '../hooks/affine/use-affine-log-in';
@@ -37,6 +39,11 @@ const TmpDisableAffineCloudModal = lazy(() =>
     })
   )
 );
+const OnboardingModalAtom = lazy(() =>
+  import('../components/pure/OnboardingModal').then(module => ({
+    default: module.OnboardingModal,
+  }))
+);
 
 export function Modals() {
   const [openWorkspacesModal, setOpenWorkspacesModal] = useAtom(
@@ -49,6 +56,9 @@ export function Modals() {
   const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
     openDisableCloudAlertModalAtom
   );
+  const [openOnboardingModal, setOpenOnboardingModal] = useAtom(
+    openOnboardingModalAtom
+  );
 
   const router = useRouter();
   const { jumpToSubPath } = useRouterHelper(router);
@@ -59,7 +69,10 @@ export function Modals() {
   const [, setCurrentWorkspace] = useCurrentWorkspace();
   const { createLocalWorkspace } = useAppHelper();
   const [transitioning, transition] = useTransition();
-
+  const env = getEnvironment();
+  const onCloseOnboardingModal = useCallback(() => {
+    setOpenOnboardingModal(false);
+  }, [setOpenOnboardingModal]);
   return (
     <>
       <Suspense>
@@ -70,6 +83,15 @@ export function Modals() {
           }, [setOpenDisableCloudAlertModal])}
         />
       </Suspense>
+      {env.isDesktop && (
+        <Suspense>
+          <OnboardingModalAtom
+            open={openOnboardingModal}
+            onClose={onCloseOnboardingModal}
+          />
+        </Suspense>
+      )}
+
       <Suspense>
         <WorkspaceListModal
           disabled={transitioning}