chore: update user menu items (#2179)

web/src/components/FloatingNavButton.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, IconButton, Menu, MenuButton, MenuItem } from "@mui/joy";
+import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
 import { useNavigate } from "react-router-dom";
 import Icon from "./Icon";
 
@@ -11,13 +11,20 @@ const FloatingNavButton = () => {
         <div className="fixed bottom-6 right-6">
           <MenuButton
             slots={{ root: IconButton }}
-            slotProps={{ root: { className: "!bg-white dark:!bg-zinc-900  drop-shadow", variant: "outlined", color: "neutral" } }}
+            slotProps={{
+              root: { className: "!bg-white dark:!bg-zinc-900 drop-shadow", size: "sm", variant: "outlined", color: "neutral" },
+            }}
           >
-            <Icon.MoreVertical className="w-5 h-auto" />
+            <Icon.MoreVertical className="w-4 h-auto" />
           </MenuButton>
         </div>
         <Menu placement="top-end">
-          <MenuItem onClick={() => navigate("/")}>Back to home</MenuItem>
+          <button
+            className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
+            onClick={() => navigate("/")}
+          >
+            Back to home
+          </button>
         </Menu>
       </Dropdown>
     </>

web/src/components/Settings/MemberSection.tsx

@@ -171,37 +171,35 @@ const PreferencesSection = () => {
                           <Icon.MoreVertical className="w-4 h-auto" />
                         </MenuButton>
                         <Menu>
-                          <>
+                          <button
+                            className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                            onClick={() => handleChangePasswordClick(user)}
+                          >
+                            {t("setting.account-section.change-password")}
+                          </button>
+                          {user.rowStatus === "NORMAL" ? (
                             <button
-                              className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                              onClick={() => handleChangePasswordClick(user)}
+                              className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+                              onClick={() => handleArchiveUserClick(user)}
                             >
-                              {t("setting.account-section.change-password")}
+                              {t("setting.member-section.archive-member")}
                             </button>
-                            {user.rowStatus === "NORMAL" ? (
+                          ) : (
+                            <>
                               <button
                                 className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                                onClick={() => handleArchiveUserClick(user)}
+                                onClick={() => handleRestoreUserClick(user)}
                               >
-                                {t("setting.member-section.archive-member")}
+                                {t("common.restore")}
                               </button>
-                            ) : (
-                              <>
-                                <button
-                                  className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                                  onClick={() => handleRestoreUserClick(user)}
-                                >
-                                  {t("common.restore")}
-                                </button>
-                                <button
-                                  className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
-                                  onClick={() => handleDeleteUserClick(user)}
-                                >
-                                  {t("setting.member-section.delete-member")}
-                                </button>
-                              </>
-                            )}
-                          </>
+                              <button
+                                className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
+                                onClick={() => handleDeleteUserClick(user)}
+                              >
+                                {t("setting.member-section.delete-member")}
+                              </button>
+                            </>
+                          )}
                         </Menu>
                       </Dropdown>
                     )}

web/src/components/UserBanner.tsx

@@ -23,7 +23,7 @@ const UserBanner = () => {
   }, [user]);
 
   const handleMyAccountClick = () => {
-    navigate("/setting");
+    navigate(`/u/${user?.username}`);
   };
 
   const handleAboutBtnClick = () => {
@@ -41,7 +41,7 @@ const UserBanner = () => {
         className="w-auto"
         trigger={
           <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
-            <UserAvatar avatarUrl={user?.avatarUrl} />
+            <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
             <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">
               {user != undefined ? username : systemStatus.customizedProfile.name}
             </span>
@@ -60,7 +60,7 @@ const UserBanner = () => {
                   className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                   onClick={handleMyAccountClick}
                 >
-                  <Icon.User className="w-5 h-auto mr-2 opacity-80" /> {t("setting.my-account")}
+                  <Icon.User className="w-5 h-auto mr-2 opacity-80" /> {t("common.profile")}
                 </button>
                 <a
                   className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"

web/src/locales/en.json

@@ -60,14 +60,15 @@
     "learn-more": "Learn more",
     "beta": "Beta",
     "new": "New",
+    "mark": "Mark",
+    "profile": "Profile",
     "dialog": {
       "error": "Error",
       "help": "Help",
       "info": "Information",
       "success": "Success",
       "warning": "Warning"
-    },
-    "mark": "Mark"
+    }
   },
   "router": {
     "back-to-home": "Back to Home"

web/src/pages/UserProfile.tsx

@@ -1,25 +1,25 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import FloatingNavButton from "@/components/FloatingNavButton";
 import MemoFilter from "@/components/MemoFilter";
 import MemoList from "@/components/MemoList";
 import UserAvatar from "@/components/UserAvatar";
 import useLoading from "@/hooks/useLoading";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 
 const UserProfile = () => {
   const t = useTranslate();
-  const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const loadingState = useLoading();
-  const user = userStore.state.user;
+  const [user, setUser] = useState<User>();
 
   useEffect(() => {
     const currentUsername = userStore.getCurrentUsername();
     userStore
       .getUserByUsername(currentUsername)
-      .then(() => {
+      .then((user) => {
+        setUser(user);
         loadingState.setFinish();
       })
       .catch((error) => {
@@ -28,12 +28,6 @@ const UserProfile = () => {
       });
   }, [userStore.getCurrentUsername()]);
 
-  useEffect(() => {
-    if (user?.setting.locale) {
-      globalStore.setLocale(user.setting.locale);
-    }
-  }, [user?.setting.locale]);
-
   return (
     <>
       <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">

web/src/store/module/user.ts

@@ -71,16 +71,6 @@ export const initialUserState = async () => {
   }
 };
 
-const getUserIdFromPath = () => {
-  const pathname = window.location.pathname;
-  const userIdRegex = /^\/u\/(\d+).*/;
-  const result = pathname.match(userIdRegex);
-  if (result && result.length === 2) {
-    return Number(result[1]);
-  }
-  return undefined;
-};
-
 const getUsernameFromPath = () => {
   const pathname = window.location.pathname;
   const usernameRegex = /^\/u\/(\w+).*/;
@@ -109,7 +99,7 @@ export const useUserStore = () => {
   const state = useAppSelector((state) => state.user);
 
   const isVisitorMode = () => {
-    return state.user === undefined || (getUsernameFromPath() && state.user.username !== getUsernameFromPath());
+    return state.user === undefined || getUsernameFromPath();
   };
 
   return {
@@ -118,7 +108,6 @@ export const useUserStore = () => {
       return store.getState().user;
     },
     isVisitorMode,
-    getUserIdFromPath,
     getUsernameFromPath,
     doSignIn,
     doSignOut,