refactor: context menu in profile blocks

public/locales/en/member.json

@@ -26,8 +26,8 @@
   "remove_account_desc": "Are you sure remove this account?",
   "remove_from_channel": "Remove from channel",
   "roles": "Roles",
-  "set_admin": "Set as admin",
-  "set_normal": "Set as normal user",
+  "set_admin": "Admin",
+  "set_normal": "Normal User",
 
   "search_not_found": "Not found, or this user is not allowed to be searched.",
   "search_by_id": "Search by ID",

public/locales/zh/member.json

@@ -25,8 +25,8 @@
   "remove_account_desc": "确定永久注销该账号？",
   "remove_from_channel": "从频道移除",
   "roles": "设置角色",
-  "set_admin": "设置为管理员",
-  "set_normal": "设置为普通用户",
+  "set_admin": "管理员",
+  "set_normal": "普通用户",
 
   "search_not_found": "用户不存在，或者不允许搜索",
   "search_by_id": "用户ID",

src/components/ContextMenu.tsx

@@ -50,7 +50,7 @@ const WrapWithSubmenu = ({
             } = sub;
             return (
               <li
-                className={`item ${underline ? "bottom_line" : ""} ${danger ? "danger" : ""}`}
+                className={`item group ${underline ? "bottom_line" : ""} ${danger ? "danger" : ""}`}
                 key={title}
                 onClick={(evt) => {
                   evt.stopPropagation();

src/components/Profile/index.tsx

@@ -11,6 +11,7 @@ import IconCall from "@/assets/icons/call.svg";
 import IconMessage from "@/assets/icons/message.svg";
 import IconMore from "@/assets/icons/more.svg";
 import Avatar from "../Avatar";
+import ContextMenu, { Item } from "../ContextMenu";
 
 interface Props {
   uid: number;
@@ -91,33 +92,47 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
           trigger="click"
           hideOnClick={true}
           content={
-            <ul className="context-menu">
-              {agoraEnabled && type == "card" && (
-                <li className="item" onClick={startCall}>
-                  {t("call")}
-                </li>
-              )}
-              {canCopyEmail && (
-                <li className="item" onClick={copyEmail.bind(undefined, email)}>
-                  {t("copy_email")}
-                </li>
-              )}
-              {canUpdateRole && (
-                <li className="item" onClick={updateRole}>
-                  {isAdmin ? t("set_normal") : t("set_admin")}
-                </li>
-              )}
-              {canRemoveFromChannel && (
-                <li className="item danger" onClick={removeFromChannel.bind(null, uid)}>
-                  {t("remove_from_channel")}
-                </li>
-              )}
-              {canRemoveFromServer && (
-                <li className="item danger" onClick={removeUser.bind(null, uid)}>
-                  {t("remove")}
-                </li>
-              )}
-            </ul>
+            <ContextMenu
+              items={
+                [
+                  agoraEnabled &&
+                    type == "card" && {
+                      title: t("call"),
+                      handler: startCall
+                    },
+                  canCopyEmail && {
+                    title: t("copy_email"),
+                    handler: copyEmail
+                  },
+                  canUpdateRole && {
+                    title: t("roles"),
+                    handler: updateRole,
+                    subs: [
+                      {
+                        title: t("set_normal"),
+                        checked: !isAdmin,
+                        handler: updateRole
+                      },
+                      {
+                        title: t("set_admin"),
+                        checked: isAdmin,
+                        handler: updateRole
+                      }
+                    ]
+                  },
+                  canRemoveFromChannel && {
+                    title: t("remove_from_channel"),
+                    danger: true,
+                    handler: removeFromChannel
+                  },
+                  canRemoveFromServer && {
+                    title: t("remove"),
+                    handler: removeUser,
+                    danger: true
+                  }
+                ].filter(Boolean) as Item[]
+              }
+            />
           }
         >
           <li className={`${iconClass} icon ${hasMore ? "" : "text-gray-500"}`}>