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/bootstrap/setup.ts

@@ -10,6 +10,7 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 
+import { appConfigProxy } from '../hooks/use-app-config-storage';
 import { performanceLogger } from '../shared';
 
 const performanceSetupLogger = performanceLogger.namespace('setup');
@@ -47,5 +48,12 @@ export function setup() {
     });
   }
 
+  // load persistent config for electron
+  // TODO: should be sync, but it's not necessary for now
+  environment.isDesktop &&
+    appConfigProxy
+      .getSync()
+      .catch(() => console.error('failed to load app config'));
+
   performanceSetupLogger.info('done');
 }

packages/frontend/core/src/hooks/use-app-config-storage.ts

@@ -0,0 +1,83 @@
+import {
+  type AppConfigSchema,
+  AppConfigStorage,
+  defaultAppConfig,
+} from '@toeverything/infra/app-config-storage';
+import { type Dispatch, useEffect, useState } from 'react';
+import { useMemo } from 'react';
+
+/**
+ * Helper class to get/set app config from main process
+ */
+class AppConfigProxy {
+  value: AppConfigSchema = defaultAppConfig;
+
+  async getSync(): Promise<AppConfigSchema> {
+    return (this.value = await window.apis.configStorage.get());
+  }
+
+  async setSync(): Promise<void> {
+    await window.apis.configStorage.set(this.value);
+  }
+
+  get(): AppConfigSchema {
+    return this.value;
+  }
+
+  set(data: AppConfigSchema) {
+    this.value = data;
+    this.setSync().catch(console.error);
+  }
+}
+export const appConfigProxy = new AppConfigProxy();
+
+const storage = environment.isDesktop
+  ? new AppConfigStorage({
+      config: defaultAppConfig,
+      get: () => appConfigProxy.get(),
+      set: v => appConfigProxy.set(v),
+    })
+  : new AppConfigStorage({
+      config: defaultAppConfig,
+      get: () => JSON.parse(localStorage.getItem('app_config') ?? 'null'),
+      set: config => localStorage.setItem('app_config', JSON.stringify(config)),
+    });
+
+export const appConfigStorage = storage;
+
+export function useAppConfigStorage(): [
+  AppConfigSchema,
+  Dispatch<AppConfigSchema>,
+];
+export function useAppConfigStorage(
+  key: keyof AppConfigSchema
+): [AppConfigSchema[typeof key], Dispatch<AppConfigSchema[typeof key]>];
+
+/**
+ * Get reactive app config
+ * @param key
+ * @returns
+ */
+export function useAppConfigStorage(key?: keyof AppConfigSchema) {
+  const [_config, _setConfig] = useState(storage.get());
+
+  useEffect(() => {
+    storage.set(_config);
+  }, [_config]);
+
+  const value = useMemo(() => (key ? _config[key] : _config), [_config, key]);
+
+  const setValue = useMemo(() => {
+    if (key) {
+      return (value: AppConfigSchema[typeof key]) => {
+        _setConfig(cfg => ({ ...cfg, [key]: value }));
+      };
+    } else {
+      return (config: AppConfigSchema) => {
+        _setConfig(config);
+      };
+    }
+  }, [_setConfig, key]);
+
+  return [value, setValue];
+}

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>
+  );
+};

packages/frontend/core/src/router.ts

@@ -65,6 +65,10 @@ export const routes = [
     path: '/desktop-signin',
     lazy: () => import('./pages/desktop-signin'),
   },
+  {
+    path: '/onboarding',
+    lazy: () => import('./pages/onboarding'),
+  },
   {
     path: '*',
     lazy: () => import('./pages/404'),