fix: state mismatch in Storage and System pages (#4719)

* fix: sync storage setting state

* fix: sync customProfile state

web/src/components/Settings/StorageSection.tsx

@@ -2,7 +2,7 @@ import { Divider, List, ListItem, Radio, RadioGroup, Tooltip, Switch } from "@mu
 import { Button, Input } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { HelpCircleIcon } from "lucide-react";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import { workspaceSettingNamePrefix } from "@/store/v1";
@@ -21,6 +21,12 @@ const StorageSection = () => {
     WorkspaceStorageSetting.fromPartial(workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
   );
 
+  useEffect(() => {
+    setWorkspaceStorageSetting(
+      WorkspaceStorageSetting.fromPartial(workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
+    );
+  }, [workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)]);
+
   const allowSaveStorageSetting = useMemo(() => {
     if (workspaceStorageSetting.uploadSizeLimitMb <= 0) {
       return false;

web/src/components/Settings/WorkspaceSection.tsx

@@ -2,6 +2,7 @@ import { Select, Option, Divider, Switch } from "@mui/joy";
 import { Button, Textarea } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { ExternalLinkIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
@@ -14,7 +15,7 @@ import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_
 import { useTranslate } from "@/utils/i18n";
 import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
 
-const WorkspaceSection = () => {
+const WorkspaceSection = observer(() => {
   const t = useTranslate();
   const originalSetting = WorkspaceGeneralSetting.fromPartial(
     workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)?.generalSetting || {},
@@ -23,7 +24,7 @@ const WorkspaceSection = () => {
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
 
   useEffect(() => {
-    setWorkspaceGeneralSetting(originalSetting);
+    setWorkspaceGeneralSetting({ ...workspaceGeneralSetting, customProfile: originalSetting.customProfile });
   }, [workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)]);
 
   const handleUpdateCustomizedProfileButtonClick = () => {
@@ -162,6 +163,6 @@ const WorkspaceSection = () => {
       </div>
     </div>
   );
-};
+});
 
 export default WorkspaceSection;