refactor: workspace setting store

web/src/App.tsx

@@ -13,7 +13,7 @@ const App = observer(() => {
   const { mode, setMode } = useColorScheme();
   const workspaceProfile = workspaceStore.state.profile;
   const userSetting = userStore.state.userSetting;
-  const workspaceGeneralSetting = workspaceStore.generalSetting;
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   // Redirect to sign up page if no instance owner.
   useEffect(() => {

web/src/components/ActivityCalendar.tsx

 import { Tooltip } from "@mui/joy";
 import dayjs from "dayjs";
-import { useWorkspaceSettingStore } from "@/store/v1";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
+import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
 
@@ -32,10 +30,7 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 const ActivityCalendar = (props: Props) => {
   const t = useTranslate();
   const { month: monthStr, data, onClick } = props;
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const weekStartDayOffset = (
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({})
-  ).weekStartDayOffset;
+  const weekStartDayOffset = workspaceStore.state.generalSetting.weekStartDayOffset;
 
   const year = dayjs(monthStr).toDate().getFullYear();
   const month = dayjs(monthStr).toDate().getMonth();

web/src/components/MemoContent/Link.tsx

 import { Link as MLink, Tooltip } from "@mui/joy";
 import { useState } from "react";
 import { markdownServiceClient } from "@/grpcweb";
-import { useWorkspaceSettingStore } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { LinkMetadata } from "@/types/proto/api/v1/markdown_service";
 import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_setting_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
@@ -21,9 +21,8 @@ const getFaviconWithGoogleS2 = (url: string) => {
 };
 
 const Link: React.FC<Props> = ({ text, url }: Props) => {
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const workspaceMemoRelatedSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED).memoRelatedSetting ||
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED).memoRelatedSetting ||
     WorkspaceMemoRelatedSetting.fromPartial({});
   const [initialized, setInitialized] = useState<boolean>(false);
   const [showTooltip, setShowTooltip] = useState<boolean>(false);

web/src/components/MemoEditor/index.tsx

@@ -14,8 +14,8 @@ import { TAB_SPACE_WIDTH } from "@/helpers/consts";
 import { isValidUrl } from "@/helpers/utils";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useMemoStore, useResourceStore, useWorkspaceSettingStore } from "@/store/v1";
-import { userStore } from "@/store/v2";
+import { useMemoStore, useResourceStore } from "@/store/v1";
+import { userStore, workspaceStore } from "@/store/v2";
 import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
 import { Location, Memo, Visibility } from "@/types/proto/api/v1/memo_service";
 import { Resource } from "@/types/proto/api/v1/resource_service";
@@ -63,7 +63,6 @@ const MemoEditor = observer((props: Props) => {
   const { className, cacheKey, memoName, parentMemoName, autoFocus, onConfirm, onCancel } = props;
   const t = useTranslate();
   const { i18n } = useTranslation();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const memoStore = useMemoStore();
   const resourceStore = useResourceStore();
   const currentUser = useCurrentUser();
@@ -89,7 +88,7 @@ const MemoEditor = observer((props: Props) => {
       )
     : state.relationList.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
   const workspaceMemoRelatedSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting ||
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting ||
     WorkspaceMemoRelatedSetting.fromPartial({});
 
   useEffect(() => {

web/src/components/MemoView.tsx

@@ -5,7 +5,8 @@ import { Link, useLocation } from "react-router-dom";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useUserStore, useWorkspaceSettingStore, useMemoStore, useUserStatsStore } from "@/store/v1";
+import { useUserStore, useMemoStore, useUserStatsStore } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { State } from "@/types/proto/api/v1/common";
 import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
 import { Memo, Visibility } from "@/types/proto/api/v1/memo_service";
@@ -46,13 +47,12 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const userStore = useUserStore();
   const user = useCurrentUser();
   const memoStore = useMemoStore();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const userStatsStore = useUserStatsStore();
   const [showEditor, setShowEditor] = useState<boolean>(false);
   const [creator, setCreator] = useState(userStore.getUserByName(memo.creator));
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const workspaceMemoRelatedSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED).memoRelatedSetting ||
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED).memoRelatedSetting ||
     WorkspaceMemoRelatedSetting.fromPartial({});
   const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
   const commentAmount = memo.relations.filter(

web/src/components/MobileHeader.tsx

 import useWindowScroll from "react-use/lib/useWindowScroll";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { useWorkspaceSettingStore } from "@/store/v1";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
+import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import NavigationDrawer from "./NavigationDrawer";
 
@@ -15,9 +13,7 @@ const MobileHeader = (props: Props) => {
   const { className, children } = props;
   const { sm } = useResponsiveWidth();
   const { y: offsetTop } = useWindowScroll();
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   return (
     <div

web/src/components/ReactionSelector.tsx

@@ -4,7 +4,8 @@ import { useRef, useState } from "react";
 import useClickAway from "react-use/lib/useClickAway";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useMemoStore, useWorkspaceSettingStore } from "@/store/v1";
+import { useMemoStore } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_setting_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
@@ -19,11 +20,10 @@ const ReactionSelector = (props: Props) => {
   const { memo, className } = props;
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const workspaceMemoRelatedSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting ||
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting ||
     WorkspaceMemoRelatedSetting.fromPartial({});
 
   useClickAway(containerRef, () => {

web/src/components/Settings/MemoRelatedSettings.tsx

@@ -4,16 +4,16 @@ import { isEqual, uniq } from "lodash-es";
 import { CheckIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { workspaceSettingNamePrefix, useWorkspaceSettingStore } from "@/store/v1";
+import { workspaceSettingNamePrefix } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_setting_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { useTranslate } from "@/utils/i18n";
 
 const MemoRelatedSettings = () => {
   const t = useTranslate();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const originalSetting = WorkspaceMemoRelatedSetting.fromPartial(
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting || {},
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting || {},
   );
   const [memoRelatedSetting, setMemoRelatedSetting] = useState<WorkspaceMemoRelatedSetting>(originalSetting);
   const [editingReaction, setEditingReaction] = useState<string>("");
@@ -42,7 +42,7 @@ const MemoRelatedSettings = () => {
     }
 
     try {
-      await workspaceSettingStore.setWorkspaceSetting({
+      await workspaceStore.upsertWorkspaceSetting({
         name: `${workspaceSettingNamePrefix}${WorkspaceSettingKey.MEMO_RELATED}`,
         memoRelatedSetting,
       });

web/src/components/Settings/StorageSection.tsx

@@ -5,7 +5,8 @@ import { HelpCircleIcon } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
-import { workspaceSettingNamePrefix, useWorkspaceSettingStore } from "@/store/v1";
+import { workspaceSettingNamePrefix } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import {
   WorkspaceStorageSetting,
   WorkspaceStorageSetting_S3Config,
@@ -16,9 +17,8 @@ import { useTranslate } from "@/utils/i18n";
 
 const StorageSection = () => {
   const t = useTranslate();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const [workspaceStorageSetting, setWorkspaceStorageSetting] = useState<WorkspaceStorageSetting>(
-    WorkspaceStorageSetting.fromPartial(workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
+    WorkspaceStorageSetting.fromPartial(workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
   );
 
   const allowSaveStorageSetting = useMemo(() => {
@@ -27,7 +27,7 @@ const StorageSection = () => {
     }
 
     const origin = WorkspaceStorageSetting.fromPartial(
-      workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {},
+      workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {},
     );
     if (workspaceStorageSetting.storageType === WorkspaceStorageSetting_StorageType.LOCAL) {
       if (workspaceStorageSetting.filepathTemplate.length === 0) {
@@ -45,7 +45,7 @@ const StorageSection = () => {
       }
     }
     return !isEqual(origin, workspaceStorageSetting);
-  }, [workspaceStorageSetting, workspaceSettingStore.getState()]);
+  }, [workspaceStorageSetting, workspaceStore.state]);
 
   const handleMaxUploadSizeChanged = async (event: React.FocusEvent<HTMLInputElement>) => {
     let num = parseInt(event.target.value);
@@ -113,7 +113,7 @@ const StorageSection = () => {
   };
 
   const saveWorkspaceStorageSetting = async () => {
-    await workspaceSettingStore.setWorkspaceSetting({
+    await workspaceStore.upsertWorkspaceSetting({
       name: `${workspaceSettingNamePrefix}${WorkspaceSettingKey.STORAGE}`,
       storageSetting: workspaceStorageSetting,
     });

web/src/components/Settings/WorkspaceSection.tsx

@@ -6,7 +6,8 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import { identityProviderServiceClient } from "@/grpcweb";
-import { workspaceSettingNamePrefix, useWorkspaceSettingStore } from "@/store/v1";
+import { workspaceSettingNamePrefix } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { IdentityProvider } from "@/types/proto/api/v1/idp_service";
 import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
@@ -15,16 +16,15 @@ import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog"
 
 const WorkspaceSection = () => {
   const t = useTranslate();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const originalSetting = WorkspaceGeneralSetting.fromPartial(
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)?.generalSetting || {},
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)?.generalSetting || {},
   );
   const [workspaceGeneralSetting, setWorkspaceGeneralSetting] = useState<WorkspaceGeneralSetting>(originalSetting);
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
 
   useEffect(() => {
     setWorkspaceGeneralSetting(originalSetting);
-  }, [workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)]);
+  }, [workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)]);
 
   const handleUpdateCustomizedProfileButtonClick = () => {
     showUpdateCustomizedProfileDialog();
@@ -41,7 +41,7 @@ const WorkspaceSection = () => {
 
   const handleSaveGeneralSetting = async () => {
     try {
-      await workspaceSettingStore.setWorkspaceSetting({
+      await workspaceStore.upsertWorkspaceSetting({
         name: `${workspaceSettingNamePrefix}${WorkspaceSettingKey.GENERAL}`,
         generalSetting: workspaceGeneralSetting,
       });

web/src/components/UpdateAccountDialog.tsx

@@ -6,9 +6,9 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { convertFileToBase64 } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useUserStore, useWorkspaceSettingStore } from "@/store/v1";
+import { useUserStore } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { User as UserPb } from "@/types/proto/api/v1/user_service";
-import { WorkspaceGeneralSetting, WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import UserAvatar from "./UserAvatar";
@@ -34,9 +34,7 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
     email: currentUser.email,
     description: currentUser.description,
   });
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)?.generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   const handleCloseBtnClick = () => {
     destroy();

web/src/components/UpdateCustomizedProfileDialog.tsx

@@ -3,8 +3,9 @@ import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { workspaceSettingNamePrefix, useWorkspaceSettingStore } from "@/store/v1";
-import { WorkspaceCustomProfile, WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
+import { workspaceSettingNamePrefix } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
+import { WorkspaceCustomProfile } from "@/types/proto/api/v1/workspace_setting_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { useTranslate } from "@/utils/i18n";
 import AppearanceSelect from "./AppearanceSelect";
@@ -15,10 +16,7 @@ type Props = DialogProps;
 
 const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
   const t = useTranslate();
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const workspaceGeneralSetting = WorkspaceGeneralSetting.fromPartial(
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL)?.generalSetting || {},
-  );
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const [customProfile, setCustomProfile] = useState<WorkspaceCustomProfile>(
     WorkspaceCustomProfile.fromPartial(workspaceGeneralSetting.customProfile || {}),
   );
@@ -83,7 +81,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
     }
 
     try {
-      await workspaceSettingStore.setWorkspaceSetting({
+      await workspaceStore.upsertWorkspaceSetting({
         name: `${workspaceSettingNamePrefix}${WorkspaceSettingKey.GENERAL}`,
         generalSetting: {
           ...workspaceGeneralSetting,

web/src/components/UserBanner.tsx

@@ -4,9 +4,7 @@ import { authServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { Routes } from "@/router";
-import { useWorkspaceSettingStore } from "@/store/v1";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
+import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
 import UserAvatar from "./UserAvatar";
@@ -20,9 +18,7 @@ const UserBanner = (props: Props) => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const user = useCurrentUser();
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const title = (user ? user.nickname || user.username : workspaceGeneralSetting.customProfile?.title) || "Memos";
   const avatarUrl = (user ? user.avatarUrl : workspaceGeneralSetting.customProfile?.logoUrl) || "/full-logo.webp";
 

web/src/pages/AdminSignIn.tsx

@@ -2,15 +2,10 @@ import { observer } from "mobx-react-lite";
 import AppearanceSelect from "@/components/AppearanceSelect";
 import LocaleSelect from "@/components/LocaleSelect";
 import PasswordSignInForm from "@/components/PasswordSignInForm";
-import { useWorkspaceSettingStore } from "@/store/v1";
 import { workspaceStore } from "@/store/v2";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 
 const AdminSignIn = observer(() => {
-  const workspaceSettingStore = useWorkspaceSettingStore();
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   const handleLocaleSelectChange = (locale: Locale) => {
     workspaceStore.state.setPartial({ locale });

web/src/pages/MemoDetail.tsx

@@ -11,7 +11,8 @@ import MobileHeader from "@/components/MobileHeader";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { memoNamePrefix, useMemoStore, useWorkspaceSettingStore } from "@/store/v1";
+import { memoNamePrefix, useMemoStore } from "@/store/v1";
+import { workspaceStore } from "@/store/v2";
 import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { WorkspaceMemoRelatedSetting, WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
@@ -24,14 +25,13 @@ const MemoDetail = () => {
   const params = useParams();
   const navigateTo = useNavigateTo();
   const { state: locationState } = useLocation();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const currentUser = useCurrentUser();
   const memoStore = useMemoStore();
   const uid = params.uid;
   const memoName = `${memoNamePrefix}${uid}`;
   const memo = memoStore.getMemoByName(memoName);
   const workspaceMemoRelatedSetting = WorkspaceMemoRelatedSetting.fromPartial(
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting || {},
+    workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.MEMO_RELATED)?.memoRelatedSetting || {},
   );
   const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
   const [showCommentEditor, setShowCommentEditor] = useState(false);

web/src/pages/Setting.tsx

@@ -13,7 +13,6 @@ import SectionMenuItem from "@/components/Settings/SectionMenuItem";
 import StorageSection from "@/components/Settings/StorageSection";
 import WorkspaceSection from "@/components/Settings/WorkspaceSection";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useWorkspaceSettingStore } from "@/store/v1";
 import { workspaceStore } from "@/store/v2";
 import { User_Role } from "@/types/proto/api/v1/user_service";
 import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
@@ -41,7 +40,6 @@ const Setting = observer(() => {
   const t = useTranslate();
   const location = useLocation();
   const user = useCurrentUser();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const [state, setState] = useState<State>({
     selectedSection: "my-account",
   });
@@ -74,7 +72,7 @@ const Setting = observer(() => {
     // Initial fetch for workspace settings.
     (async () => {
       [WorkspaceSettingKey.MEMO_RELATED, WorkspaceSettingKey.STORAGE].forEach(async (key) => {
-        await workspaceSettingStore.fetchWorkspaceSetting(key);
+        await workspaceStore.fetchWorkspaceSetting(key);
       });
     })();
   }, [isHost]);

web/src/pages/SignIn.tsx

@@ -11,20 +11,16 @@ import { identityProviderServiceClient } from "@/grpcweb";
 import { absolutifyLink } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { Routes } from "@/router";
-import { extractIdentityProviderIdFromName, useWorkspaceSettingStore } from "@/store/v1";
+import { extractIdentityProviderIdFromName } from "@/store/v1";
 import { workspaceStore } from "@/store/v2";
 import { IdentityProvider, IdentityProvider_Type } from "@/types/proto/api/v1/idp_service";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { useTranslate } from "@/utils/i18n";
 
 const SignIn = observer(() => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   // Redirect to root page if already signed in.
   useEffect(() => {

web/src/pages/SignUp.tsx

@@ -10,22 +10,18 @@ import LocaleSelect from "@/components/LocaleSelect";
 import { authServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useUserStore, useWorkspaceSettingStore } from "@/store/v1";
+import { useUserStore } from "@/store/v1";
 import { workspaceStore } from "@/store/v2";
-import { WorkspaceGeneralSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
 import { useTranslate } from "@/utils/i18n";
 
 const SignUp = observer(() => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
-  const workspaceSettingStore = useWorkspaceSettingStore();
   const userStore = useUserStore();
   const actionBtnLoadingState = useLoading(false);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const workspaceGeneralSetting =
-    workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({});
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value as string;

web/src/store/v1/index.ts

@@ -2,6 +2,5 @@ export * from "./user";
 export * from "./memo";
 export * from "./resourceName";
 export * from "./resource";
-export * from "./workspaceSetting";
 export * from "./memoFilter";
 export * from "./userStats";

web/src/store/v1/workspaceSetting.ts

-import { create } from "zustand";
-import { combine } from "zustand/middleware";
-import { workspaceSettingServiceClient } from "@/grpcweb";
-import { WorkspaceSetting } from "@/types/proto/api/v1/workspace_setting_service";
-import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
-import { workspaceSettingNamePrefix } from "./resourceName";
-
-interface State {
-  workspaceSettingByName: Record<string, WorkspaceSetting>;
-}
-
-const getDefaultState = (): State => ({
-  workspaceSettingByName: {},
-});
-
-export const useWorkspaceSettingStore = create(
-  combine(getDefaultState(), (set, get) => ({
-    getState: () => {
-      return get();
-    },
-    fetchWorkspaceSetting: async (key: WorkspaceSettingKey) => {
-      const setting = await workspaceSettingServiceClient.getWorkspaceSetting({ name: `${workspaceSettingNamePrefix}${key}` });
-      set({ workspaceSettingByName: { ...get().workspaceSettingByName, [setting.name]: setting } });
-    },
-    getWorkspaceSettingByKey: (key: WorkspaceSettingKey): WorkspaceSetting => {
-      return get().workspaceSettingByName[`${workspaceSettingNamePrefix}${key}`] || WorkspaceSetting.fromPartial({});
-    },
-    setWorkspaceSetting: async (setting: WorkspaceSetting) => {
-      await workspaceSettingServiceClient.setWorkspaceSetting({ setting });
-      set({ workspaceSettingByName: { ...get().workspaceSettingByName, [setting.name]: setting } });
-    },
-  })),
-);

web/src/store/v2/workspace.ts

@@ -13,6 +13,13 @@ class LocalState {
   profile: WorkspaceProfile = WorkspaceProfile.fromPartial({});
   settings: WorkspaceSetting[] = [];
 
+  get generalSetting() {
+    return (
+      this.settings.find((setting) => setting.name === `${workspaceSettingNamePrefix}${WorkspaceSettingKey.GENERAL}`)?.generalSetting ||
+      WorkspaceGeneralSetting.fromPartial({})
+    );
+  }
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -35,10 +42,6 @@ class LocalState {
 const workspaceStore = (() => {
   const state = new LocalState();
 
-  const generalSetting =
-    state.settings.find((setting) => setting.name === `${workspaceSettingNamePrefix}${WorkspaceSettingKey.GENERAL}`)?.generalSetting ||
-    WorkspaceGeneralSetting.fromPartial({});
-
   const fetchWorkspaceSetting = async (settingKey: WorkspaceSettingKey) => {
     const setting = await workspaceSettingServiceClient.getWorkspaceSetting({ name: `${workspaceSettingNamePrefix}${settingKey}` });
     state.setPartial({
@@ -46,10 +49,24 @@ const workspaceStore = (() => {
     });
   };
 
+  const upsertWorkspaceSetting = async (setting: WorkspaceSetting) => {
+    await workspaceSettingServiceClient.setWorkspaceSetting({ setting });
+    state.setPartial({
+      settings: uniqBy([setting, ...state.settings], "name"),
+    });
+  };
+
+  const getWorkspaceSettingByKey = (settingKey: WorkspaceSettingKey) => {
+    return (
+      state.settings.find((setting) => setting.name === `${workspaceSettingNamePrefix}${settingKey}`) || WorkspaceSetting.fromPartial({})
+    );
+  };
+
   return {
     state,
-    generalSetting,
     fetchWorkspaceSetting,
+    upsertWorkspaceSetting,
+    getWorkspaceSettingByKey,
   };
 })();
 
@@ -60,7 +77,7 @@ export const initialWorkspaceStore = async () => {
     await workspaceStore.fetchWorkspaceSetting(key);
   }
 
-  const workspaceGeneralSetting = workspaceStore.generalSetting;
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   workspaceStore.state.setPartial({
     locale: workspaceGeneralSetting.customProfile?.locale,
     appearance: workspaceGeneralSetting.customProfile?.appearance,