chore: fix missing observer

web/src/components/ActivityCalendar/ActivityCalendar.tsx

@@ -1,5 +1,6 @@
 import { Tooltip } from "@mui/joy";
 import dayjs from "dayjs";
+import { observer } from "mobx-react-lite";
 import { memo, useMemo } from "react";
 import { workspaceStore } from "@/store/v2";
 import type { ActivityCalendarProps, CalendarDay } from "@/types/statistics";
@@ -67,7 +68,8 @@ const CalendarCell = memo(
 
 CalendarCell.displayName = "CalendarCell";
 
-export const ActivityCalendar = memo((props: ActivityCalendarProps) => {
+export const ActivityCalendar = memo(
+  observer((props: ActivityCalendarProps) => {
     const t = useTranslate();
     const { month: monthStr, data, onClick } = props;
     const weekStartDayOffset = workspaceStore.state.generalSetting.weekStartDayOffset;
@@ -165,6 +167,7 @@ export const ActivityCalendar = memo((props: ActivityCalendarProps) => {
         })}
       </div>
     );
-});
+  }),
+);
 
 ActivityCalendar.displayName = "ActivityCalendar";

web/src/components/BrandBanner.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import UserAvatar from "./UserAvatar";
@@ -7,7 +8,7 @@ interface Props {
   collapsed?: boolean;
 }
 
-const BrandBanner = (props: Props) => {
+const BrandBanner = observer((props: Props) => {
   const { collapsed } = props;
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const title = workspaceGeneralSetting.customProfile?.title || "Memos";
@@ -21,6 +22,6 @@ const BrandBanner = (props: Props) => {
       </div>
     </div>
   );
-};
+});
 
 export default BrandBanner;

web/src/components/MemoActionMenu.tsx

@@ -16,8 +16,7 @@ import toast from "react-hot-toast";
 import { useLocation } from "react-router-dom";
 import { markdownServiceClient } from "@/grpcweb";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { memoStore } from "@/store/v2";
+import { memoStore, userStore } from "@/store/v2";
-import { userStore } from "@/store/v2";
 import { State } from "@/types/proto/api/v1/common";
 import { NodeType } from "@/types/proto/api/v1/markdown_service";
 import { Memo } from "@/types/proto/api/v1/memo_service";

web/src/components/MemoContent/Tag.tsx

@@ -1,9 +1,10 @@
+import { observer } from "mobx-react-lite";
 import { useContext } from "react";
 import { useLocation } from "react-router-dom";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { Routes } from "@/router";
-import memoFilterStore, { MemoFilter } from "@/store/v2/memoFilter";
+import { memoFilterStore } from "@/store/v2";
-import { stringifyFilters } from "@/store/v2/memoFilter";
+import { stringifyFilters, MemoFilter } from "@/store/v2/memoFilter";
 import { cn } from "@/utils";
 import { RendererContext } from "./types";
 
@@ -11,7 +12,7 @@ interface Props {
   content: string;
 }
 
-const Tag: React.FC<Props> = ({ content }: Props) => {
+const Tag = observer(({ content }: Props) => {
   const context = useContext(RendererContext);
   const location = useLocation();
   const navigateTo = useNavigateTo();
@@ -50,6 +51,6 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
       #{content}
     </span>
   );
-};
+});
 
 export default Tag;

web/src/components/MemoFilters.tsx

@@ -1,12 +1,13 @@
 import { isEqual } from "lodash-es";
 import { CalendarIcon, CheckCircleIcon, CodeIcon, EyeIcon, HashIcon, LinkIcon, BookmarkIcon, SearchIcon, XIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
-import memoFilterStore from "@/store/v2/memoFilter";
+import { memoFilterStore } from "@/store/v2";
 import { FilterFactor, getMemoFilterKey, MemoFilter, stringifyFilters } from "@/store/v2/memoFilter";
 import { useTranslate } from "@/utils/i18n";
 
-const MemoFilters = () => {
+const MemoFilters = observer(() => {
   const t = useTranslate();
   const [, setSearchParams] = useSearchParams();
   const filters = memoFilterStore.filters;
@@ -60,7 +61,7 @@ const MemoFilters = () => {
       ))}
     </div>
   );
-};
+});
 
 const FactorIcon = ({ factor, className }: { factor: FilterFactor; className?: string }) => {
   const iconMap = {

web/src/components/MemoReactionListView.tsx

@@ -1,4 +1,5 @@
 import { uniq } from "lodash-es";
+import { observer } from "mobx-react-lite";
 import { memo, useEffect, useState } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { userStore } from "@/store/v2";
@@ -14,7 +15,7 @@ interface Props {
   reactions: Reaction[];
 }
 
-const MemoReactionListView = (props: Props) => {
+const MemoReactionListView = observer((props: Props) => {
   const { memo, reactions } = props;
   const currentUser = useCurrentUser();
   const [reactionGroup, setReactionGroup] = useState<Map<string, User[]>>(new Map());
@@ -43,6 +44,6 @@ const MemoReactionListView = (props: Props) => {
       </div>
     )
   );
-};
+});
 
 export default memo(MemoReactionListView);

web/src/components/MemoView.tsx

@@ -6,8 +6,7 @@ import { Link, useLocation } from "react-router-dom";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { memoStore } from "@/store/v2";
+import { memoStore, userStore, workspaceStore } from "@/store/v2";
-import { userStore, workspaceStore } from "@/store/v2";
 import { State } from "@/types/proto/api/v1/common";
 import { Memo, MemoRelation_Type, Visibility } from "@/types/proto/api/v1/memo_service";
 import { cn } from "@/utils";

web/src/components/ReactionSelector.tsx

@@ -5,8 +5,7 @@ import { useRef, useState } from "react";
 import useClickAway from "react-use/lib/useClickAway";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { memoStore } from "@/store/v2";
+import { memoStore, workspaceStore } from "@/store/v2";
-import { workspaceStore } from "@/store/v2";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { cn } from "@/utils";
 

web/src/components/SearchBar.tsx

@@ -1,10 +1,11 @@
 import { SearchIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useState } from "react";
-import memoFilterStore from "@/store/v2/memoFilter";
+import { memoFilterStore } from "@/store/v2";
 import { useTranslate } from "@/utils/i18n";
 import MemoDisplaySettingMenu from "./MemoDisplaySettingMenu";
 
-const SearchBar = () => {
+const SearchBar = observer(() => {
   const t = useTranslate();
   const [queryText, setQueryText] = useState("");
 
@@ -41,6 +42,6 @@ const SearchBar = () => {
       <MemoDisplaySettingMenu className="absolute right-2 top-2" />
     </div>
   );
-};
+});
 
 export default SearchBar;

web/src/components/Settings/MemberSection.tsx

@@ -2,6 +2,7 @@ import { Dropdown, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/jo
 import { Button, Input } from "@usememos/mui";
 import { sortBy } from "lodash-es";
 import { MoreVerticalIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { userServiceClient } from "@/grpcweb";
@@ -16,7 +17,7 @@ interface LocalState {
   creatingUser: User;
 }
 
-const MemberSection = () => {
+const MemberSection = observer(() => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<LocalState>({
@@ -239,6 +240,6 @@ const MemberSection = () => {
       </div>
     </div>
   );
-};
+});
 
 export default MemberSection;

web/src/components/Settings/MemoRelatedSettings.tsx

@@ -2,6 +2,7 @@ import { Switch, Chip, ChipDelete } from "@mui/joy";
 import { Button, Input } from "@usememos/mui";
 import { isEqual, uniq } from "lodash-es";
 import { CheckIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { workspaceSettingNamePrefix } from "@/store/common";
@@ -10,7 +11,7 @@ import { WorkspaceSettingKey } from "@/store/v2/workspace";
 import { WorkspaceMemoRelatedSetting } from "@/types/proto/api/v1/workspace_setting_service";
 import { useTranslate } from "@/utils/i18n";
 
-const MemoRelatedSettings = () => {
+const MemoRelatedSettings = observer(() => {
   const t = useTranslate();
   const [originalSetting, setOriginalSetting] = useState<WorkspaceMemoRelatedSetting>(workspaceStore.state.memoRelatedSetting);
   const [memoRelatedSetting, setMemoRelatedSetting] = useState<WorkspaceMemoRelatedSetting>(originalSetting);
@@ -197,6 +198,6 @@ const MemoRelatedSettings = () => {
       </div>
     </div>
   );
-};
+});
 
 export default MemoRelatedSettings;

web/src/components/Settings/StorageSection.tsx

@@ -2,6 +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 { observer } from "mobx-react-lite";
 import React, { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
@@ -15,7 +16,7 @@ import {
 } from "@/types/proto/api/v1/workspace_setting_service";
 import { useTranslate } from "@/utils/i18n";
 
-const StorageSection = () => {
+const StorageSection = observer(() => {
   const t = useTranslate();
   const [workspaceStorageSetting, setWorkspaceStorageSetting] = useState<WorkspaceStorageSetting>(
     WorkspaceStorageSetting.fromPartial(workspaceStore.getWorkspaceSettingByKey(WorkspaceSettingKey.STORAGE)?.storageSetting || {}),
@@ -223,6 +224,6 @@ const StorageSection = () => {
       </div>
     </div>
   );
-};
+});
 
 export default StorageSection;

web/src/components/TagTree.tsx

@@ -1,4 +1,5 @@
 import { ChevronRightIcon, HashIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import useToggle from "react-use/lib/useToggle";
 import memoFilterStore, { MemoFilter } from "@/store/v2/memoFilter";
@@ -83,7 +84,7 @@ interface TagItemContainerProps {
   tag: Tag;
 }
 
-const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContainerProps) => {
+const TagItemContainer = observer((props: TagItemContainerProps) => {
   const { tag } = props;
   const tagFilters = memoFilterStore.getFiltersByFactor("tagSearch");
   const isActive = tagFilters.some((f: MemoFilter) => f.value === tag.text);
@@ -145,6 +146,6 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       ) : null}
     </>
   );
-};
+});
 
 export default TagTree;

web/src/pages/AdminSignIn.tsx

@@ -1,8 +1,9 @@
+import { observer } from "mobx-react-lite";
 import AuthFooter from "@/components/AuthFooter";
 import PasswordSignInForm from "@/components/PasswordSignInForm";
 import { workspaceStore } from "@/store/v2";
 
-const AdminSignIn = () => {
+const AdminSignIn = observer(() => {
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   return (
@@ -20,6 +21,6 @@ const AdminSignIn = () => {
       <AuthFooter />
     </div>
   );
-};
+});
 
 export default AdminSignIn;

web/src/pages/Archived.tsx

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import { observer } from "mobx-react-lite";
 import { useMemo } from "react";
 import MemoView from "@/components/MemoView";
 import PagedMemoList from "@/components/PagedMemoList";
@@ -8,7 +9,7 @@ import memoFilterStore from "@/store/v2/memoFilter";
 import { Direction, State } from "@/types/proto/api/v1/common";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 
-const Archived = () => {
+const Archived = observer(() => {
   const user = useCurrentUser();
 
   const memoListFilter = useMemo(() => {
@@ -49,6 +50,6 @@ const Archived = () => {
       oldFilter={memoListFilter}
     />
   );
-};
+});
 
 export default Archived;

web/src/pages/AuthCallback.tsx

@@ -1,5 +1,6 @@
 import { last } from "lodash-es";
 import { LoaderIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
@@ -13,7 +14,7 @@ interface State {
   errorMessage: string;
 }
 
-const AuthCallback = () => {
+const AuthCallback = observer(() => {
   const navigateTo = useNavigateTo();
   const [searchParams] = useSearchParams();
   const [state, setState] = useState<State>({
@@ -77,6 +78,6 @@ const AuthCallback = () => {
       )}
     </div>
   );
-};
+});
 
 export default AuthCallback;

web/src/pages/Explore.tsx

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import { observer } from "mobx-react-lite";
 import { useMemo } from "react";
 import MemoView from "@/components/MemoView";
 import PagedMemoList from "@/components/PagedMemoList";
@@ -8,7 +9,7 @@ import memoFilterStore from "@/store/v2/memoFilter";
 import { Direction, State } from "@/types/proto/api/v1/common";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 
-const Explore = () => {
+const Explore = observer(() => {
   const user = useCurrentUser();
 
   const memoListFilter = useMemo(() => {
@@ -59,6 +60,6 @@ const Explore = () => {
       oldFilter={memoListFilter}
     />
   );
-};
+});
 
 export default Explore;

web/src/pages/SignIn.tsx

@@ -1,5 +1,6 @@
 import { Divider } from "@mui/joy";
 import { Button } from "@usememos/mui";
+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 { workspaceStore } from "@/store/v2";
 import { IdentityProvider, IdentityProvider_Type } from "@/types/proto/api/v1/idp_service";
 import { useTranslate } from "@/utils/i18n";
 
-const SignIn = () => {
+const SignIn = observer(() => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
@@ -98,6 +99,6 @@ const SignIn = () => {
       <AuthFooter />
     </div>
   );
-};
+});
 
 export default SignIn;

web/src/pages/SignUp.tsx

@@ -1,5 +1,6 @@
 import { Button, Input } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { ClientError } from "nice-grpc-web";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -12,7 +13,7 @@ import { workspaceStore } from "@/store/v2";
 import { initialUserStore } from "@/store/v2/user";
 import { useTranslate } from "@/utils/i18n";
 
-const SignUp = () => {
+const SignUp = observer(() => {
   const t = useTranslate();
   const navigateTo = useNavigateTo();
   const actionBtnLoadingState = useLoading(false);
@@ -135,6 +136,6 @@ const SignUp = () => {
       <AuthFooter />
     </div>
   );
-};
+});
 
 export default SignUp;