refactor: update user setting keys

frontend/web/src/components/setting/PreferenceSection.tsx

@@ -8,8 +8,8 @@ const PreferenceSection: React.FC = () => {
   const { t } = useTranslation();
   const userStore = useUserStore();
   const userSetting = userStore.getCurrentUserSetting();
-  const language = userSetting.locale;
-  const colorTheme = userSetting.colorTheme;
+  const language = userSetting.general?.locale || "EN";
+  const colorTheme = userSetting.general?.colorTheme || "SYSTEM";
 
   const languageOptions = [
     {
@@ -49,9 +49,12 @@ const PreferenceSection: React.FC = () => {
     await userStore.updateUserSetting(
       {
         ...userSetting,
-        locale: locale,
+        general: {
+          ...userSetting.general,
+          locale: locale,
+        },
       } as UserSetting,
-      ["locale"],
+      ["general"],
     );
   };
 
@@ -59,9 +62,12 @@ const PreferenceSection: React.FC = () => {
     await userStore.updateUserSetting(
       {
         ...userSetting,
-        colorTheme: colorTheme,
+        general: {
+          ...userSetting.general,
+          colorTheme: colorTheme,
+        },
       } as UserSetting,
-      ["color_theme"],
+      ["general"],
     );
   };
 

frontend/web/src/i18n.ts

@@ -7,21 +7,21 @@ import zh from "../../locales/zh.json";
 
 i18n.use(initReactI18next).init({
   resources: {
-    en: {
+    EN: {
       translation: en,
     },
-    zh: {
+    ZH: {
       translation: zh,
     },
-    fr: {
+    FR: {
       translation: fr,
     },
-    ja: {
+    JA: {
       translation: ja,
     },
   },
-  lng: "en",
-  fallbackLng: "en",
+  lng: "EN",
+  fallbackLng: "EN",
 });
 
 export default i18n;

frontend/web/src/layouts/Root.tsx

@@ -1,5 +1,4 @@
 import { useColorScheme } from "@mui/joy";
-import { isEqual } from "lodash-es";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
@@ -34,19 +33,11 @@ const Root: React.FC = () => {
       return;
     }
 
-    if (isEqual(currentUserSetting.locale, "ZH")) {
-      i18n.changeLanguage("zh");
-    } else if (isEqual(currentUserSetting.locale, "FR")) {
-      i18n.changeLanguage("fr");
-    } else if (isEqual(currentUserSetting.locale, "JA")) {
-      i18n.changeLanguage("ja");
-    } else {
-      i18n.changeLanguage("en");
-    }
+    i18n.changeLanguage(currentUserSetting.general?.locale || "en");
 
-    if (currentUserSetting.colorTheme === "LIGHT") {
+    if (currentUserSetting.general?.colorTheme === "LIGHT") {
       setMode("light");
-    } else if (currentUserSetting.colorTheme === "DARK") {
+    } else if (currentUserSetting.general?.colorTheme === "DARK") {
       setMode("dark");
     } else {
       setMode("system");

frontend/web/src/stores/user.ts

@@ -129,6 +129,11 @@ const useUserStore = create<UserState>()((set, get) => ({
         updateMask,
       })
     ).userSetting as UserSetting;
+    console.log("1", {
+      id: userId,
+      userSetting,
+      updateMask,
+    });
     const userSettingMap = get().userSettingMapById;
     userSettingMap[userId] = updatedUserSetting;
     set(userSettingMap);