fix: locale and appearance setting

web/src/App.tsx

@@ -16,6 +16,7 @@ const App = () => {
   const userStore = useUserStore();
   const [loading, setLoading] = useState(true);
   const { appearance, locale, systemStatus } = globalStore.state;
+  const userSetting = userStore.userSetting;
 
   // Redirect to sign up page if no host.
   useEffect(() => {
@@ -81,9 +82,18 @@ const App = () => {
     link.href = systemStatus.customizedProfile.logoUrl || "/logo.webp";
   }, [systemStatus.customizedProfile]);
 
+  useEffect(() => {
+    if (!userSetting) {
+      return;
+    }
+
+    globalStore.setLocale(userSetting.locale);
+    globalStore.setAppearance(userSetting.appearance as Appearance);
+  }, [userSetting?.locale, userSetting?.appearance]);
+
   useEffect(() => {
     const { locale: storageLocale } = storage.get(["locale"]);
-    const currentLocale = userStore.userSetting?.locale || storageLocale || locale;
+    const currentLocale = storageLocale || locale;
     i18n.changeLanguage(currentLocale);
     document.documentElement.setAttribute("lang", currentLocale);
     if (currentLocale === "ar") {
@@ -94,11 +104,11 @@ const App = () => {
     storage.set({
       locale: currentLocale,
     });
-  }, [locale, userStore.userSetting?.locale]);
+  }, [locale]);
 
   useEffect(() => {
     const { appearance: storageAppearance } = storage.get(["appearance"]);
-    let currentAppearance = (userStore.userSetting?.appearance || storageAppearance || appearance) as Appearance;
+    let currentAppearance = (storageAppearance || appearance) as Appearance;
     if (currentAppearance === "system") {
       currentAppearance = getSystemColorScheme();
     }
@@ -106,7 +116,7 @@ const App = () => {
     storage.set({
       appearance: currentAppearance,
     });
-  }, [appearance, userStore.userSetting?.appearance]);
+  }, [appearance]);
 
   useEffect(() => {
     const root = document.documentElement;

web/src/components/Settings/PreferencesSection.tsx

@@ -18,7 +18,6 @@ const PreferencesSection = () => {
   const t = useTranslate();
   const globalStore = useGlobalStore();
   const userStore = useUserStore();
-  const { appearance, locale } = globalStore.state;
   const setting = userStore.userSetting as UserSetting;
   const [telegramUserId, setTelegramUserId] = useState<string>(setting.telegramUserId);
 
@@ -75,11 +74,11 @@ const PreferencesSection = () => {
       <p className="font-medium text-gray-700 dark:text-gray-500">{t("common.basic")}</p>
       <div className="w-full flex flex-row justify-between items-center">
         <span>{t("common.language")}</span>
-        <LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
+        <LocaleSelect value={setting.locale} onChange={handleLocaleSelectChange} />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
         <span>{t("setting.preference-section.theme")}</span>
-        <AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
+        <AppearanceSelect value={setting.appearance as Appearance} onChange={handleAppearanceSelectChange} />
       </div>
       <p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.preference")}</p>
       <div className="w-full flex flex-row justify-between items-center">