diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css --- a/web/settings/relationship/add-users-list.css +++ b/web/settings/relationship/add-users-list.css @@ -1,10 +1,22 @@ .container { - overflow: auto; height: 580px; display: flex; flex-direction: column; } +.userTagsContainer { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.userRowsContainer { + overflow: auto; + display: flex; + flex-direction: column; + flex: 1; +} + .addUserButton { display: flex; flex-direction: row; diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js --- a/web/settings/relationship/add-users-list.react.js +++ b/web/settings/relationship/add-users-list.react.js @@ -8,6 +8,7 @@ import type { GlobalAccountUserInfo } from 'lib/types/user-types.js'; import { useServerCall } from 'lib/utils/action-utils.js'; +import Label from '../../components/label.react.js'; import { useSelector } from '../../redux/redux-utils.js'; import AddUsersListItem from './add-users-list-item.react.js'; import css from './add-users-list.css'; @@ -114,11 +115,30 @@ }, [mergedUserInfos], ); + const deselectUser = React.useCallback( + (userID: string) => + setPendingUsersToAdd(pendingUsers => + pendingUsers.filter(userInfo => userInfo.id !== userID), + ), + [], + ); const pendingUserIDs = React.useMemo( () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)), [pendingUsersToAdd], ); + const userTags = React.useMemo(() => { + if (pendingUsersToAdd.length === 0) { + return null; + } + const tags = pendingUsersToAdd.map(userInfo => ( + + )); + return
{tags}
; + }, [deselectUser, pendingUsersToAdd]); + const filteredUsers = React.useMemo( () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)), [pendingUserIDs, sortedUsers], @@ -135,7 +155,12 @@ )), [filteredUsers, selectUser], ); - return
{userRows}
; + return ( +
+ {userTags} +
{userRows}
+
+ ); } export default AddUsersList;