chore: filter user & change role & hover check icon color

public/locales/en/member.json

@@ -27,7 +27,7 @@
   "remove_from_channel": "Remove from channel",
   "roles": "Roles",
   "set_admin": "Admin",
-  "set_normal": "Normal User",
+  "set_normal": "User",
 
   "search_not_found": "Not found, or this user is not allowed to be searched.",
   "search_by_id": "Search by ID",

src/assets/index.css

@@ -168,6 +168,9 @@
     background-color: #22ccee;
     color: #fff;
   }
+  .context-menu .item:hover svg {
+    fill: white;
+  }
   .context-menu .item.bottom_line {
     margin-bottom: 9px;
   }

src/components/ManageMembers/MemberList.tsx

@@ -23,13 +23,14 @@ const MemberList: FC<Props> = ({ cid }) => {
   const ref = useRef<HTMLUListElement | null>(null);
   const { t } = useTranslation("member");
   const { t: ct } = useTranslation();
-  const { channels, loginUser } = useAppSelector((store) => {
+  const { userMap, channels, loginUser } = useAppSelector((store) => {
     return {
+      userMap: store.users.byId,
       channels: store.channels,
       loginUser: store.authData.user
     };
   });
-  const { users, input, updateInput } = useFilteredUsers();
+  const { uids, input, updateInput } = useFilteredUsers();
   const { copyEmail, removeFromChannel, removeUser } = useUserOperation({ cid });
   const [updateUser, { isSuccess: updateSuccess }] = useUpdateUserMutation();
 
@@ -54,8 +55,7 @@ const MemberList: FC<Props> = ({ cid }) => {
   };
 
   const channel = cid ? channels.byId[cid] : null;
-  const ids = users.map((u) => u.uid);
-  const uids = channel ? (channel.is_public ? ids : channel.members) : ids;
+  const finalUids = channel ? (channel.is_public ? uids : channel.members) : uids;
   return (
     <>
       <Search input={input} updateInput={updateInput} type="members" />
@@ -63,9 +63,9 @@ const MemberList: FC<Props> = ({ cid }) => {
         className="flex flex-col gap-1 w-full md:w-[512px] mb-44 max-h-[800px] overflow-y-scroll"
         ref={ref}
       >
-        <ViewportList initialPrerender={15} viewportRef={ref} items={uids}>
+        <ViewportList initialPrerender={15} viewportRef={ref} items={finalUids}>
           {(uid) => {
-            const currUser = users.find((u) => u.uid == uid);
+            const currUser = userMap[uid];
             if (!currUser) return null;
             const { name, email, is_admin } = currUser;
             const owner = channel && channel.owner == uid;

src/hooks/useFilteredUsers.ts

@@ -1,23 +1,26 @@
 import { useEffect, useState } from "react";
+import { escapeRegExp } from "lodash";
 
 import { StoredUser } from "@/app/slices/users";
 import { useAppSelector } from "@/app/store";
 
 export default function useFilteredUsers() {
   const [input, setInput] = useState("");
-  const { originUsers, enableContact } = useAppSelector((store) => {
+  const { originUsers, enableContact, isAdmin } = useAppSelector((store) => {
     return {
+      isAdmin: store.authData.user?.is_admin,
       enableContact: store.server.contact_verification_enable,
       originUsers: Object.values(store.users.byId)
     };
   });
   const [filteredUsers, setFilteredUsers] = useState<StoredUser[]>([]);
-  const users = enableContact ? originUsers.filter((u) => u.status == "added") : originUsers;
+  const useContactList = enableContact && !isAdmin;
+  const users = useContactList ? originUsers.filter((u) => u.status == "added") : originUsers;
   useEffect(() => {
     if (!input) {
       setFilteredUsers(users);
     } else {
-      let str = ["", input.toLowerCase(), ""].join(".*");
+      let str = ["", escapeRegExp(input.toLowerCase()), ""].join(".*");
       let reg = new RegExp(str);
       setFilteredUsers(
         users.filter((c) => {
@@ -35,6 +38,7 @@ export default function useFilteredUsers() {
   return {
     input,
     users: filteredUsers,
+    uids: filteredUsers.map((u) => u.uid),
     updateInput
   };
 }