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
@@ -69,3 +69,9 @@
.selectionText {
color: var(--text-background-secondary-default);
}
+
+.previouslySelectedUsersContainer {
+ border-bottom: 1px solid var(--separator-background-primary-default);
+ padding-bottom: 8px;
+ margin-bottom: 8px;
+}
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
@@ -2,7 +2,6 @@
import * as React from 'react';
-import { useENSNames } from 'lib/hooks/ens-cache.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { useSearchUsers } from 'lib/shared/search-utils.js';
import type { SetState } from 'lib/types/hook-types.js';
@@ -15,6 +14,7 @@
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
+import { useSortedENSResolvedUsers } from './user-list-hooks.js';
import Button from '../../components/button.react.js';
import { useSelector } from '../../redux/redux-utils.js';
@@ -90,7 +90,7 @@
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchModeActive]);
- const sortedUsers = React.useMemo(
+ const filteredUsers = React.useMemo(
() =>
Object.keys(mergedUserInfos)
.map(userID => mergedUserInfos[userID])
@@ -100,11 +100,15 @@
(!user.relationshipStatus ||
!excludedStatuses.has(user.relationshipStatus)) &&
!previouslySelectedUsers.has(user.id),
- )
- .sort((user1, user2) => user1.username.localeCompare(user2.username)),
+ ),
[excludedStatuses, mergedUserInfos, viewerID, previouslySelectedUsers],
);
+ const previouslySelectedUsersList = React.useMemo(
+ () => Array.from(previouslySelectedUsers.values()),
+ [previouslySelectedUsers],
+ );
+
const toggleUser = React.useCallback(
(userID: string) => {
setPendingUsersToAdd(pendingUsers => {
@@ -126,7 +130,7 @@
[mergedUserInfos, setPendingUsersToAdd],
);
- const sortedUsersWithENSNames = useENSNames(sortedUsers);
+ const sortedUsersWithENSNames = useSortedENSResolvedUsers(filteredUsers);
const userRows = React.useMemo(
() =>
@@ -141,6 +145,38 @@
[sortedUsersWithENSNames, toggleUser, pendingUsersToAdd],
);
+ const sortedPreviouslySelectedUsersWithENSNames = useSortedENSResolvedUsers(
+ previouslySelectedUsersList,
+ );
+
+ const previouslySelectedUserRows = React.useMemo(() => {
+ if (searchModeActive || previouslySelectedUsers.size === 0) {
+ return null;
+ }
+
+ const sortedPreviouslySelectedUserRows =
+ sortedPreviouslySelectedUsersWithENSNames.map(userInfo => (
+