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
@@ -1,6 +1,19 @@
div.modalContentContainer {
width: 383px;
height: 617px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ row-gap: 16px;
+}
+
+div.membersListTabs {
+ flex: 1;
+ overflow: hidden;
+}
+
+div.addNewMembers button {
+ width: 100%;
}
div.membersList {
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -4,12 +4,22 @@
import { threadInfoSelector } from 'lib/selectors/thread-selectors';
import { userStoreSearchIndex } from 'lib/selectors/user-selectors';
-import { memberHasAdminPowers, memberIsAdmin } from 'lib/shared/thread-utils';
-import { type RelativeMemberInfo } from 'lib/types/thread-types';
+import {
+ memberHasAdminPowers,
+ memberIsAdmin,
+ threadHasPermission,
+} from 'lib/shared/thread-utils';
+import {
+ type RelativeMemberInfo,
+ threadPermissions,
+} from 'lib/types/thread-types';
+import Button from '../../../components/button.react';
import Tabs from '../../../components/tabs.react';
import { useSelector } from '../../../redux/redux-utils';
+import { useModalContext } from '../../modal-provider.react';
import SearchModal from '../../search-modal.react';
+import AddMembersModal from './add-members-modal.react';
import ThreadMembersList from './members-list.react';
import css from './members-modal.css';
@@ -69,12 +79,36 @@
[adminMembers, threadInfo],
);
+ const { pushModal, popModal } = useModalContext();
+
+ const onClickAddMembers = React.useCallback(() => {
+ pushModal(