diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js --- a/web/modals/threads/members/add-members-modal.react.js +++ b/web/modals/threads/members/add-members-modal.react.js @@ -19,6 +19,7 @@ } from 'lib/utils/action-utils'; import Button from '../../../components/button.react'; +import Label from '../../../components/label.react'; import { useSelector } from '../../../redux/redux-utils'; import SearchModal from '../../search-modal.react'; import AddMembersList from './add-members-list.react'; @@ -48,8 +49,11 @@ const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers); const userSearchIndex = useSelector(userSearchIndexForPotentialMembers); const excludeUserIDs = React.useMemo( - () => threadActualMembers(threadInfo.members), - [threadInfo.members], + () => + threadActualMembers(threadInfo.members).concat( + Array.from(pendingUsersToAdd), + ), + [pendingUsersToAdd, threadInfo.members], ); const userSearchResults = React.useMemo( @@ -108,8 +112,32 @@ threadID, ]); + const pendingUsersWithNames = React.useMemo( + () => + Array.from(pendingUsersToAdd) + .map(userID => [userID, otherUserInfos[userID].username]) + .sort((a, b) => a[1].localeCompare(b[1])), + [otherUserInfos, pendingUsersToAdd], + ); + + const labelItems = React.useMemo(() => { + if (!pendingUsersWithNames.length) { + return null; + } + return ( + <div className={css.addMembersPendingList}> + {pendingUsersWithNames.map(([userID, username]) => ( + <Label key={userID} onClose={() => onSwitchUser(userID)}> + {username} + </Label> + ))} + </div> + ); + }, [onSwitchUser, pendingUsersWithNames]); + return ( <div className={css.addMembersContent}> + {labelItems} <div className={css.addMembersListContainer}> <AddMembersList userListItems={userSearchResults} diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css --- a/web/modals/threads/members/members-modal.css +++ b/web/modals/threads/members/members-modal.css @@ -68,11 +68,18 @@ flex-direction: column; overflow: auto; color: var(--fg); - row-gap: 16px; width: 383px; height: 617px; } +div.addMembersPendingList { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 6px; + padding: 8px; +} + div.addMembersListContainer { overflow: auto; flex: 1; @@ -82,6 +89,7 @@ display: flex; justify-content: end; column-gap: 16px; + margin-top: 16px; } div.addMemberItemsGroupHeader {