refactor: adjust tauri codes (#4332)

* fix: some bugs

* refactor: delete code that is no longer needed

Author: qinluhe

frontend/.vscode/tasks.json

@@ -257,7 +257,7 @@
       "label": "AF: Tauri UI Dev",
       "type": "shell",
       "isBackground": true,
-      "command": "pnpm sync:i18n && pnpm run dev",
+      "command": "pnpm run tauri:dev",
       "options": {
         "cwd": "${workspaceFolder}/appflowy_tauri"
       }
@@ -297,6 +297,6 @@
       "options": {
         "cwd": "${workspaceFolder}/appflowy_flutter"
       }
-    },
+    }
   ]
 }

frontend/appflowy_tauri/package.json

@@ -51,7 +51,7 @@
     "quill-delta": "^5.1.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-calendar": "^4.1.0",
+    "react-big-calendar": "^1.8.5",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.23.0",
     "react-dom": "^18.2.0",

frontend/appflowy_tauri/pnpm-lock.yaml

@@ -1,31 +1,39 @@
 import { useAppDispatch, useAppSelector } from '$app/stores/store';
 import { useCallback, useEffect, useMemo } from 'react';
-import { UserSettingController } from '$app/stores/effects/user/user_setting_controller';
 import { currentUserActions } from '$app_reducers/current-user/slice';
 import { Theme as ThemeType, ThemeMode } from '$app/stores/reducers/current-user/slice';
 import { createTheme } from '@mui/material/styles';
 import { getDesignTokens } from '$app/utils/mui';
 import { useTranslation } from 'react-i18next';
+import { ThemeModePB } from '@/services/backend';
+import { UserService } from '$app/application/user/user.service';
 
 export function useUserSetting() {
   const dispatch = useAppDispatch();
   const { i18n } = useTranslation();
-  const currentUser = useAppSelector((state) => state.currentUser);
-  const userSettingController = useMemo(() => {
-    if (!currentUser?.id) return;
-    const controller = new UserSettingController(currentUser.id);
 
-    return controller;
-  }, [currentUser?.id]);
+  const handleSystemThemeChange = useCallback(() => {
+    const mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.Dark : ThemeMode.Light;
+
+    dispatch(currentUserActions.setUserSetting({ themeMode: mode }));
+  }, [dispatch]);
 
   const loadUserSetting = useCallback(async () => {
-    if (!userSettingController) return;
-    const settings = await userSettingController.getAppearanceSetting();
+    const settings = await UserService.getAppearanceSetting();
 
     if (!settings) return;
     dispatch(currentUserActions.setUserSetting(settings));
+
+    if (settings.themeMode === ThemeModePB.System) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      handleSystemThemeChange();
+
+      mediaQuery.addEventListener('change', handleSystemThemeChange);
+    }
+
     await i18n.changeLanguage(settings.language);
-  }, [dispatch, i18n, userSettingController]);
+  }, [dispatch, handleSystemThemeChange, i18n]);
 
   useEffect(() => {
     void loadUserSetting();
@@ -35,12 +43,26 @@ export function useUserSetting() {
     return state.currentUser.userSetting || {};
   });
 
+  useEffect(() => {
+    const html = document.documentElement;
+
+    html?.setAttribute('data-dark-mode', String(themeMode === ThemeMode.Dark));
+    html?.setAttribute('data-theme', themeType);
+  }, [themeType, themeMode]);
+
+  useEffect(() => {
+    return () => {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      mediaQuery.removeEventListener('change', handleSystemThemeChange);
+    };
+  }, [dispatch, handleSystemThemeChange]);
+
   const muiTheme = useMemo(() => createTheme(getDesignTokens(themeMode)), [themeMode]);
 
   return {
     muiTheme,
     themeMode,
     themeType,
-    userSettingController,
   };
 }