feat: Add search by users, members and labels

client/src/components/Memberships/AddPopup/AddPopup.jsx

@@ -1,15 +1,31 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
-import { Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
+import { useField } from '../../../hooks';
 import UserItem from './UserItem';
 
 import styles from './AddPopup.module.scss';
 
 const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose }) => {
   const [t] = useTranslation();
+  const [searchValue, handleSearchFieldChange] = useField('');
+  const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+  const filteredUsers = useMemo(
+    () =>
+      users.filter(
+        (user) =>
+          user.email.includes(search) ||
+          user.name.toLowerCase().includes(search) ||
+          (user.username && user.username.includes(search)),
+      ),
+    [users, search],
+  );
+
+  const searchField = useRef(null);
 
   const handleUserSelect = useCallback(
     (id) => {
@@ -22,6 +38,10 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
     [onCreate, onClose],
   );
 
+  useEffect(() => {
+    searchField.current.focus();
+  }, []);
+
   return (
     <>
       <Popup.Header>
@@ -30,17 +50,27 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
         })}
       </Popup.Header>
       <Popup.Content>
-        <div className={styles.menu}>
-          {users.map((user) => (
-            <UserItem
-              key={user.id}
-              name={user.name}
-              avatarUrl={user.avatarUrl}
-              isActive={currentUserIds.includes(user.id)}
-              onSelect={() => handleUserSelect(user.id)}
-            />
-          ))}
-        </div>
+        <Input
+          fluid
+          ref={searchField}
+          value={searchValue}
+          placeholder={t('common.searchUsers')}
+          icon="search"
+          onChange={handleSearchFieldChange}
+        />
+        {filteredUsers.length > 0 && (
+          <div className={styles.users}>
+            {filteredUsers.map((user) => (
+              <UserItem
+                key={user.id}
+                name={user.name}
+                avatarUrl={user.avatarUrl}
+                isActive={currentUserIds.includes(user.id)}
+                onSelect={() => handleUserSelect(user.id)}
+              />
+            ))}
+          </div>
+        )}
       </Popup.Content>
     </>
   );

client/src/components/Memberships/AddPopup/AddPopup.module.scss

@@ -1,7 +1,21 @@
 :global(#app) {
-  .menu {
-    border: none;
-    margin: -7px auto -5px;
-    width: 100%;
+  .users {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

client/src/components/Memberships/AddPopup/UserItem.module.scss

@@ -6,6 +6,7 @@
     display: block;
     margin: 0;
     outline: 0;
+    overflow: hidden;
     padding: 4px;
     text-align: left;
     width: 100%;