refactor: workspace setting store

2 weeks ago · 11b9c240e9
parent e27f6f0c52
commit 11b9c240e9
21 changed files with 73 additions and 124 deletions
--- a/web/src/App.tsx
+++ b/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(() => {
--- a/web/src/components/ActivityCalendar.tsx
+++ b/web/src/components/ActivityCalendar.tsx
@ -1,8 +1,6 @@
 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();
--- a/web/src/components/MemoContent/Link.tsx
+++ b/web/src/components/MemoContent/Link.tsx
@ -1,7 +1,7 @@
 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);
--- a/web/src/components/MemoEditor/index.tsx
+++ b/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(() => {
--- a/web/src/components/MemoView.tsx
+++ b/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(
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@ -1,8 +1,6 @@
 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
--- a/web/src/components/ReactionSelector.tsx
+++ b/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, () => {
--- a/web/src/components/Settings/MemoRelatedSettings.tsx
+++ b/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,
      });
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/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,
    });
--- a/web/src/components/Settings/WorkspaceSection.tsx
+++ b/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,
      });
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/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();
--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/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,
--- a/web/src/components/UserBanner.tsx
+++ b/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";

--- a/web/src/pages/AdminSignIn.tsx
+++ b/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 });
--- a/web/src/pages/MemoDetail.tsx
+++ b/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);
--- a/web/src/pages/Setting.tsx
+++ b/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]);
--- a/web/src/pages/SignIn.tsx
+++ b/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(() => {
--- a/web/src/pages/SignUp.tsx
+++ b/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;
--- a/web/src/store/v1/index.ts
+++ b/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";
--- a/web/src/store/v1/workspaceSetting.ts
+++ b/web/src/store/v1/workspaceSetting.ts
@ -1,33 +0,0 @@
-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 } });
-    },
-  })),
-);
--- a/web/src/store/v2/workspace.ts
+++ b/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,