feat(electron): onboarding at first launch logic for client and web (#5183)

- Added a simple abstraction of persistent storage class.
- Different persistence solutions are provided for web and client.
    - web: stored in localStorage
    - client: stored in the application directory as `.json` file
- Define persistent app-config schema
- Add a new hook that can interactive with persistent-app-config reactively

packages/frontend/core/src/pages/index.tsx

@@ -2,9 +2,11 @@ import { Menu } from '@affine/component/ui/menu';
 import { workspaceListAtom } from '@affine/workspace/atom';
 import { useAtomValue } from 'jotai';
 import { lazy, useEffect } from 'react';
+import { type LoaderFunction, redirect } from 'react-router-dom';
 
 import { createFirstAppData } from '../bootstrap/first-app-data';
 import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
+import { appConfigStorage } from '../hooks/use-app-config-storage';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '../shared';
 
@@ -14,6 +16,13 @@ const AllWorkspaceModals = lazy(() =>
   }))
 );
 
+export const loader: LoaderFunction = async () => {
+  if (!environment.isDesktop && appConfigStorage.get('onBoarding')) {
+    return redirect('/onboarding');
+  }
+  return null;
+};
+
 export const Component = () => {
   const list = useAtomValue(workspaceListAtom);
   const { openPage } = useNavigateHelper();

packages/frontend/core/src/pages/onboarding.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@affine/component/ui/button';
+import { redirect } from 'react-router-dom';
+
+import {
+  appConfigStorage,
+  useAppConfigStorage,
+} from '../hooks/use-app-config-storage';
+import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
+
+export const loader = () => {
+  if (!environment.isDesktop && !appConfigStorage.get('onBoarding')) {
+    // onboarding is off, redirect to index
+    return redirect('/');
+  }
+
+  return null;
+};
+
+export const Component = () => {
+  const { jumpToIndex } = useNavigateHelper();
+  const [onBoarding, setOnboarding] = useAppConfigStorage('onBoarding');
+
+  const openApp = () => {
+    if (environment.isDesktop) {
+      window.apis.ui.handleOpenMainApp().catch(err => {
+        console.log('failed to open main app', err);
+      });
+    } else {
+      jumpToIndex(RouteLogic.REPLACE);
+      setOnboarding(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        gap: '8px',
+        height: '100vh',
+      }}
+    >
+      <Button onClick={() => setOnboarding(!onBoarding)}>
+        Toggle onboarding
+      </Button>
+      onboarding page, onboarding mode is {onBoarding ? 'on' : 'off'}
+      <Button onClick={openApp}>Enter App</Button>
+    </div>
+  );
+};