From 65a49a5ac9311fcde92f05758add26f0b62596cd Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Fri, 20 Dec 2024 08:53:08 -0300
Subject: [PATCH 01/10] feat: Room roles visibility in members panel

---
 apps/meteor/app/api/server/v1/rooms.ts        |  5 +++
 .../client/views/hooks/useMembersList.ts      |  5 ++-
 .../RoomMembers/MembersListDivider.tsx        | 18 ++++++++
 .../contextualBar/RoomMembers/RoomMembers.tsx | 43 +++++++++++++++----
 .../actions/useChangeOwnerAction.tsx          | 29 +++++++++++++
 packages/i18n/src/locales/en.i18n.json        |  2 +
 6 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx

diff --git a/apps/meteor/app/api/server/v1/rooms.ts b/apps/meteor/app/api/server/v1/rooms.ts
index 589b7af3d883..73cba79b1a39 100644
--- a/apps/meteor/app/api/server/v1/rooms.ts
+++ b/apps/meteor/app/api/server/v1/rooms.ts
@@ -13,6 +13,7 @@ import {
 	isRoomsOpenProps,
 	isRoomsMembersOrderedByRoleProps,
 } from '@rocket.chat/rest-typings';
+import { MembershipCache } from 'matrix-appservice-bridge';
 import { Meteor } from 'meteor/meteor';
 
 import { isTruthy } from '../../../../lib/isTruthy';
@@ -903,6 +904,10 @@ API.v1.addRoute(
 				sort,
 			});
 
+			members.forEach((member) => {
+				console.log(member.roles);
+			});
+
 			return API.v1.success({
 				members,
 				count: members.length,
diff --git a/apps/meteor/client/views/hooks/useMembersList.ts b/apps/meteor/client/views/hooks/useMembersList.ts
index 84c95c2d373b..dfd6e769f8a6 100644
--- a/apps/meteor/client/views/hooks/useMembersList.ts
+++ b/apps/meteor/client/views/hooks/useMembersList.ts
@@ -11,8 +11,8 @@ type MembersListOptions = {
 
 const endpointsByRoomType = {
 	d: '/v1/im.members',
-	p: '/v1/groups.members',
-	c: '/v1/channels.members',
+	p: '/v1/rooms.membersOrderedByRole',
+	c: '/v1/rooms.membersOrderedByRole',
 } as const;
 
 export const useMembersList = (options: MembersListOptions) => {
@@ -27,6 +27,7 @@ export const useMembersList = (options: MembersListOptions) => {
 				roomId: options.rid,
 				offset: start,
 				count: 20,
+				rolesOrder: ['owner', 'moderator'],
 				...(options.debouncedText && { filter: options.debouncedText }),
 				...(options.type !== 'all' && { status: [options.type] }),
 			});
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
new file mode 100644
index 000000000000..4d2208fdca05
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
@@ -0,0 +1,18 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type MembersListDividerProps = {
+	title: TranslationKey;
+};
+
+export const MembersListDivider = ({ title }: MembersListDividerProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box key={title} backgroundColor='room' height={36} fontScale='p2m' color='defaut' paddingBlock={8} paddingInlineStart={12}>
+			<Box>{t(title)}</Box>
+		</Box>
+	);
+};
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index 9ace69a77b02..a34e0cc6bc40 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -1,12 +1,13 @@
-import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import type { IRoom, IUser, IRole } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Icon, TextInput, Select, Throbber, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
 import { useAutoFocus, useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement, FormEventHandler, ComponentProps, MouseEvent } from 'react';
 import { useMemo } from 'react';
-import { Virtuoso } from 'react-virtuoso';
+import { GroupedVirtuoso } from 'react-virtuoso';
 
+import { MembersListDivider } from './MembersListDivider';
 import RoomMembersRow from './RoomMembersRow';
 import {
 	ContextualbarHeader,
@@ -21,7 +22,7 @@ import {
 import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars';
 import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
 
-type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'>;
+type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles: IRole['_id'] };
 
 type RoomMembersProps = {
 	rid: IRoom['_id'];
@@ -86,6 +87,32 @@ const RoomMembers = ({
 
 	const useRealName = useSetting('UI_Use_Real_Name', false);
 
+	const { counts, titles } = useMemo(() => {
+		const owners = members.filter((member) => member.roles?.includes('owner'));
+		const moderators = members.filter((member) => !member.roles?.includes('owner') && member.roles?.includes('moderator'));
+		const normalMembers = members.filter((member) => !member.roles?.includes('owner') && !member.roles?.includes('moderator'));
+
+		const counts = [];
+		const titles = [];
+
+		if (owners.length > 0) {
+			counts.push(owners.length);
+			titles.push(<MembersListDivider title='Owners' />);
+		}
+
+		if (moderators.length > 0) {
+			counts.push(moderators.length);
+			titles.push(<MembersListDivider title='Moderators' />);
+		}
+
+		if (members.length > 0) {
+			counts.push(normalMembers.length);
+			titles.push(<MembersListDivider title='Members' />);
+		}
+
+		return { counts, titles };
+	}, [members]);
+
 	return (
 		<>
 			<ContextualbarHeader data-qa-id='RoomHeader-Members'>
@@ -129,18 +156,18 @@ const RoomMembers = ({
 						</Box>
 
 						<Box w='full' h='full' overflow='hidden' flexShrink={1}>
-							<Virtuoso
+							<GroupedVirtuoso
 								style={{
 									height: '100%',
 									width: '100%',
 								}}
-								totalCount={total}
 								overscan={50}
-								data={members}
+								groupCounts={counts}
+								groupContent={(index): ReactElement => titles[index]}
 								// eslint-disable-next-line react/no-multi-comp
 								components={{ Scroller: VirtuosoScrollbars, Footer: () => <InfiniteListAnchor loadMore={loadMoreMembers} /> }}
-								itemContent={(index, data): ReactElement => (
-									<RowComponent useRealName={useRealName} data={itemData} user={data} index={index} reload={reload} />
+								itemContent={(index): ReactElement => (
+									<RowComponent useRealName={useRealName} data={itemData} user={members[index]} index={index} reload={reload} />
 								)}
 							/>
 						</Box>
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index 9a0f78110c8f..1d17582d5e38 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -58,7 +58,12 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 	const setModal = useSetModal();
 	const { _id: loggedUserId = '' } = useUser() || {};
 	const loggedUserIsOwner = useUserHasRoomRole(loggedUserId, rid, 'owner');
+<<<<<<< HEAD
 	const dispatchToastMessage = useToastMessageDispatch();
+=======
+	const closeModal = useCallback(() => setModal(null), [setModal]);
+	const queryClient = useQueryClient();
+>>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 	if (!room) {
 		throw Error('Room not provided');
@@ -86,12 +91,29 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		},
 	});
 
+<<<<<<< HEAD
 	const handleChangeOwner = useCallback(() => {
 		if (!isRoomFederated(room)) {
 			return toggleOwnerMutation.mutateAsync({ roomId: rid, userId: uid });
 		}
 
 		const changingOwnRole = uid === loggedUserId;
+=======
+	const handleConfirm = useCallback(async () => {
+		await changeOwner({ roomId: rid, userId: uid });
+		queryClient.invalidateQueries({ queryKey: ['members'] });
+		closeModal();
+	}, [changeOwner, rid, uid, queryClient, closeModal]);
+
+	const handleChangeOwner = useCallback(
+		async ({ userId }) => {
+			if (!isRoomFederated(room)) {
+				await changeOwner({ roomId: rid, userId: uid });
+				queryClient.invalidateQueries({ queryKey: ['members'] });
+				return;
+			}
+			const changingOwnRole = userId === loggedUserId;
+>>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 		const closeModal = () => {
 			setModal(null);
@@ -102,6 +124,7 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 			closeModal();
 		};
 
+<<<<<<< HEAD
 		if (changingOwnRole && loggedUserIsOwner) {
 			return setModal(
 				getWarningModalForFederatedRooms(
@@ -130,6 +153,12 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 	}, [room, loggedUserId, loggedUserIsOwner, toggleOwnerMutation, rid, uid, t, setModal]);
 
 	const changeOwnerAction = useEffectEvent(async () => handleChangeOwner());
+=======
+			changeOwner({ roomId: rid, userId: uid });
+		},
+		[room, loggedUserId, loggedUserIsOwner, changeOwner, rid, uid, queryClient, setModal, closeModal, handleConfirm, t],
+	);
+>>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 	const changeOwnerOption = useMemo(
 		() =>
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index d8fa2449a212..c0c0edf537a8 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -3833,6 +3833,7 @@
   "mobile-upload-file_description": "Permission to allow file upload on mobile devices",
   "Mobile_Push_Notifications_Default_Alert": "Push Notifications Default Alert",
   "Moderation": "Moderation",
+  "Moderators": "Moderators",
   "Moderation_Show_reports": "Show reports",
   "Moderation_See_reports": "See reports",
   "Moderation_Go_to_message": "Go to message",
@@ -4269,6 +4270,7 @@
   "Override_URL_to_which_files_are_uploaded_This_url_also_used_for_downloads_unless_a_CDN_is_given": "Override URL to which files are uploaded. This url also used for downloads unless a CDN is given",
   "Override_Destination_Channel": "Allow to overwrite destination channel in the body parameters",
   "Owner": "Owner",
+  "Owners": "Owners",
   "Play": "Play",
   "Page_not_exist_or_not_permission": "The page does not exist or you may not have access permission",
   "Page_not_found": "Page not found",

From b4304808020dd6347470c961fac6035f2f01612e Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Wed, 15 Jan 2025 19:52:18 +0530
Subject: [PATCH 02/10] resolve conflicts

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .../actions/useChangeOwnerAction.tsx          | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index 1d17582d5e38..9a0f78110c8f 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -58,12 +58,7 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 	const setModal = useSetModal();
 	const { _id: loggedUserId = '' } = useUser() || {};
 	const loggedUserIsOwner = useUserHasRoomRole(loggedUserId, rid, 'owner');
-<<<<<<< HEAD
 	const dispatchToastMessage = useToastMessageDispatch();
-=======
-	const closeModal = useCallback(() => setModal(null), [setModal]);
-	const queryClient = useQueryClient();
->>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 	if (!room) {
 		throw Error('Room not provided');
@@ -91,29 +86,12 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		},
 	});
 
-<<<<<<< HEAD
 	const handleChangeOwner = useCallback(() => {
 		if (!isRoomFederated(room)) {
 			return toggleOwnerMutation.mutateAsync({ roomId: rid, userId: uid });
 		}
 
 		const changingOwnRole = uid === loggedUserId;
-=======
-	const handleConfirm = useCallback(async () => {
-		await changeOwner({ roomId: rid, userId: uid });
-		queryClient.invalidateQueries({ queryKey: ['members'] });
-		closeModal();
-	}, [changeOwner, rid, uid, queryClient, closeModal]);
-
-	const handleChangeOwner = useCallback(
-		async ({ userId }) => {
-			if (!isRoomFederated(room)) {
-				await changeOwner({ roomId: rid, userId: uid });
-				queryClient.invalidateQueries({ queryKey: ['members'] });
-				return;
-			}
-			const changingOwnRole = userId === loggedUserId;
->>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 		const closeModal = () => {
 			setModal(null);
@@ -124,7 +102,6 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 			closeModal();
 		};
 
-<<<<<<< HEAD
 		if (changingOwnRole && loggedUserIsOwner) {
 			return setModal(
 				getWarningModalForFederatedRooms(
@@ -153,12 +130,6 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 	}, [room, loggedUserId, loggedUserIsOwner, toggleOwnerMutation, rid, uid, t, setModal]);
 
 	const changeOwnerAction = useEffectEvent(async () => handleChangeOwner());
-=======
-			changeOwner({ roomId: rid, userId: uid });
-		},
-		[room, loggedUserId, loggedUserIsOwner, changeOwner, rid, uid, queryClient, setModal, closeModal, handleConfirm, t],
-	);
->>>>>>> 89ab3a4f1b (feat: Room roles visibility in members panel)
 
 	const changeOwnerOption = useMemo(
 		() =>

From 15f7d2a2655bd0055af5af69bf97a5fbd0b3a1ab Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Thu, 16 Jan 2025 02:39:03 +0530
Subject: [PATCH 03/10] showing roles count

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 apps/meteor/app/api/server/v1/rooms.ts         |  5 -----
 .../client/views/hooks/useMembersList.ts       |  1 -
 .../RoomMembers/MembersListDivider.tsx         | 18 +++++++++++++++---
 .../contextualBar/RoomMembers/RoomMembers.tsx  | 12 ++++++------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/app/api/server/v1/rooms.ts b/apps/meteor/app/api/server/v1/rooms.ts
index 73cba79b1a39..589b7af3d883 100644
--- a/apps/meteor/app/api/server/v1/rooms.ts
+++ b/apps/meteor/app/api/server/v1/rooms.ts
@@ -13,7 +13,6 @@ import {
 	isRoomsOpenProps,
 	isRoomsMembersOrderedByRoleProps,
 } from '@rocket.chat/rest-typings';
-import { MembershipCache } from 'matrix-appservice-bridge';
 import { Meteor } from 'meteor/meteor';
 
 import { isTruthy } from '../../../../lib/isTruthy';
@@ -904,10 +903,6 @@ API.v1.addRoute(
 				sort,
 			});
 
-			members.forEach((member) => {
-				console.log(member.roles);
-			});
-
 			return API.v1.success({
 				members,
 				count: members.length,
diff --git a/apps/meteor/client/views/hooks/useMembersList.ts b/apps/meteor/client/views/hooks/useMembersList.ts
index dfd6e769f8a6..021f1473d898 100644
--- a/apps/meteor/client/views/hooks/useMembersList.ts
+++ b/apps/meteor/client/views/hooks/useMembersList.ts
@@ -27,7 +27,6 @@ export const useMembersList = (options: MembersListOptions) => {
 				roomId: options.rid,
 				offset: start,
 				count: 20,
-				rolesOrder: ['owner', 'moderator'],
 				...(options.debouncedText && { filter: options.debouncedText }),
 				...(options.type !== 'all' && { status: [options.type] }),
 			});
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
index 4d2208fdca05..a4ae591cd761 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
@@ -1,18 +1,30 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type MembersListDividerProps = {
 	title: TranslationKey;
+	count: number;
 };
 
-export const MembersListDivider = ({ title }: MembersListDividerProps) => {
+export const MembersListDivider = ({ title, count }: MembersListDividerProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box key={title} backgroundColor='room' height={36} fontScale='p2m' color='defaut' paddingBlock={8} paddingInlineStart={12}>
+		<Box
+			key={title}
+			backgroundColor='room'
+			height={36}
+			fontScale='p2m'
+			color='defaut'
+			paddingBlock={8}
+			paddingInline={16}
+			display='flex'
+			flexDirection='row'
+			justifyContent='space-between'
+		>
 			<Box>{t(title)}</Box>
+			<Box>{count}</Box>
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index a34e0cc6bc40..c577c8ecd3b1 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -22,7 +22,7 @@ import {
 import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars';
 import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
 
-type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles: IRole['_id'] };
+type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles?: IRole['_id'] };
 
 type RoomMembersProps = {
 	rid: IRoom['_id'];
@@ -97,17 +97,17 @@ const RoomMembers = ({
 
 		if (owners.length > 0) {
 			counts.push(owners.length);
-			titles.push(<MembersListDivider title='Owners' />);
+			titles.push(<MembersListDivider title='Owners' count={owners.length} />);
 		}
 
 		if (moderators.length > 0) {
 			counts.push(moderators.length);
-			titles.push(<MembersListDivider title='Moderators' />);
+			titles.push(<MembersListDivider title='Moderators' count={moderators.length} />);
 		}
 
-		if (members.length > 0) {
+		if (normalMembers.length > 0) {
 			counts.push(normalMembers.length);
-			titles.push(<MembersListDivider title='Members' />);
+			titles.push(<MembersListDivider title='Members' count={normalMembers.length} />);
 		}
 
 		return { counts, titles };
@@ -149,7 +149,7 @@ const RoomMembers = ({
 
 				{!loading && members.length > 0 && (
 					<>
-						<Box pi={18} pb={12}>
+						<Box pi={16} pb={12}>
 							<Box is='span' color='hint' fontScale='p2'>
 								{t('Showing_current_of_total', { current: members.length, total })}
 							</Box>

From 9789a47c69fe40c283ff958df23f3d86b4cb0568 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Thu, 16 Jan 2025 03:16:20 +0530
Subject: [PATCH 04/10] ui improvements according to figma design

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .../room/contextualBar/RoomMembers/MembersListDivider.tsx   | 4 +++-
 .../views/room/contextualBar/RoomMembers/RoomMembers.tsx    | 6 +++---
 .../room/contextualBar/RoomMembers/RoomMembersItem.tsx      | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
index a4ae591cd761..8e9abf5c567d 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/MembersListDivider.tsx
@@ -18,10 +18,12 @@ export const MembersListDivider = ({ title, count }: MembersListDividerProps) =>
 			fontScale='p2m'
 			color='defaut'
 			paddingBlock={8}
-			paddingInline={16}
+			paddingInline={24}
 			display='flex'
 			flexDirection='row'
 			justifyContent='space-between'
+			borderBlockEndWidth={1}
+			borderBlockEndColor='extra-light'
 		>
 			<Box>{t(title)}</Box>
 			<Box>{count}</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index c577c8ecd3b1..729a8b2229d5 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -132,7 +132,7 @@ const RoomMembers = ({
 					<Select onChange={(value): void => setType(value as 'online' | 'all')} value={type} options={options} />
 				</Box>
 			</ContextualbarSection>
-			<ContextualbarContent p={12}>
+			<ContextualbarContent p={0} pb={12}>
 				{loading && (
 					<Box pi={24} pb={12}>
 						<Throbber size='x12' />
@@ -140,7 +140,7 @@ const RoomMembers = ({
 				)}
 
 				{error && (
-					<Box pi={12} pb={12}>
+					<Box pi={24} pb={12}>
 						<Callout type='danger'>{error.message}</Callout>
 					</Box>
 				)}
@@ -149,7 +149,7 @@ const RoomMembers = ({
 
 				{!loading && members.length > 0 && (
 					<>
-						<Box pi={16} pb={12}>
+						<Box pi={24} pb={12}>
 							<Box is='span' color='hint' fontScale='p2'>
 								{t('Showing_current_of_total', { current: members.length, total })}
 							</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
index 59084ed20b96..5cca6da9f5a4 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
@@ -50,7 +50,7 @@ const RoomMembersItem = ({
 	const [nameOrUsername, displayUsername] = getUserDisplayNames(name, username, useRealName);
 
 	return (
-		<Option data-username={username} data-userid={_id} onClick={onClickView} {...handleMenuEvent}>
+		<Option data-username={username} data-userid={_id} onClick={onClickView} style={{ paddingInline: 24 }} {...handleMenuEvent}>
 			<OptionAvatar>
 				<UserAvatar username={username || ''} size='x28' />
 			</OptionAvatar>

From 6c4036325e4765d6fb481dcd1284d7a6aa305229 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Thu, 16 Jan 2025 17:55:19 +0530
Subject: [PATCH 05/10] adds changeset

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .changeset/chilled-beers-run.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/chilled-beers-run.md

diff --git a/.changeset/chilled-beers-run.md b/.changeset/chilled-beers-run.md
new file mode 100644
index 000000000000..8e3c1c7adb64
--- /dev/null
+++ b/.changeset/chilled-beers-run.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Groups members by their roles in the room's member list for improved clarity

From 1bc9a911987e3096216bad683232b01d10bc2497 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Thu, 16 Jan 2025 21:38:55 +0530
Subject: [PATCH 06/10] minor fix

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .../client/views/room/contextualBar/RoomMembers/RoomMembers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index 729a8b2229d5..5f156a4f1d4e 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -22,7 +22,7 @@ import {
 import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars';
 import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
 
-type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles?: IRole['_id'] };
+export type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles?: IRole['_id'][] };
 
 type RoomMembersProps = {
 	rid: IRoom['_id'];

From f2fa68373c310da561de939946876634895db01b Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Fri, 17 Jan 2025 20:17:39 +0530
Subject: [PATCH 07/10] added reactivity when changing user roles

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .../client/views/hooks/useMembersList.ts      | 103 +++++++++++++++++-
 1 file changed, 101 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useMembersList.ts b/apps/meteor/client/views/hooks/useMembersList.ts
index 021f1473d898..37edcde7949d 100644
--- a/apps/meteor/client/views/hooks/useMembersList.ts
+++ b/apps/meteor/client/views/hooks/useMembersList.ts
@@ -1,5 +1,8 @@
-import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import type { IRole, IUser, AtLeast } from '@rocket.chat/core-typings';
+import { useEndpoint, useSetting, useStream } from '@rocket.chat/ui-contexts';
+import type { InfiniteData, QueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 
 type MembersListOptions = {
 	rid: string;
@@ -15,8 +18,104 @@ const endpointsByRoomType = {
 	c: '/v1/rooms.membersOrderedByRole',
 } as const;
 
+type RoomMember = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles?: IRole['_id'][] };
+
+const getSortedMembers = (members: RoomMember[], useRealName = false) => {
+	return members.sort((a, b) => {
+		const aRoles = a.roles ?? [];
+		const bRoles = b.roles ?? [];
+		const isOwnerA = aRoles.includes('owner');
+		const isOwnerB = bRoles.includes('owner');
+		const isModeratorA = aRoles.includes('moderator');
+		const isModeratorB = bRoles.includes('moderator');
+
+		if (isOwnerA !== isOwnerB) {
+			return isOwnerA ? -1 : 1;
+		}
+
+		if (isModeratorA !== isModeratorB) {
+			return isModeratorA ? -1 : 1;
+		}
+
+		if (a.status === 'online' && b.status !== 'online') {
+			return -1;
+		}
+
+		if (a.status !== 'online' && b.status === 'online') {
+			return 1;
+		}
+
+		if (useRealName && a.name && b.name) {
+			return a.name.localeCompare(b.name);
+		}
+
+		const aUsername = a.username ?? '';
+		const bUsername = b.username ?? '';
+		return aUsername.localeCompare(bUsername);
+	});
+};
+
+const updateMemberInCache = (
+	options: MembersListOptions,
+	queryClient: QueryClient,
+	memberId: string,
+	role: AtLeast<IRole, '_id'>,
+	type: 'removed' | 'changed' | 'added',
+	useRealName = false,
+) => {
+	queryClient.setQueryData(
+		[options.roomType, 'members', options.rid, options.type, options.debouncedText],
+		(oldData: InfiniteData<{ members: RoomMember[] }>) => {
+			if (!oldData) {
+				return oldData;
+			}
+
+			const newPages = oldData.pages.map((page) => {
+				const members = page.members.map((member) => {
+					if (member._id === memberId) {
+						member.roles = member.roles ?? [];
+						if (type === 'added' && !member.roles.includes(role._id)) {
+							member.roles.push(role._id);
+						} else if (type === 'removed') {
+							member.roles = member.roles.filter((roleId) => roleId !== role._id);
+						}
+					}
+					return member;
+				});
+				return {
+					...page,
+					members: getSortedMembers(members, useRealName),
+				};
+			});
+
+			return {
+				...oldData,
+				pages: newPages,
+			};
+		},
+	);
+};
+
 export const useMembersList = (options: MembersListOptions) => {
 	const getMembers = useEndpoint('GET', endpointsByRoomType[options.roomType]);
+	const useRealName = useSetting('UI_Use_Real_Name');
+	const queryClient = useQueryClient();
+
+	const subscribeToNotifyLoggedIn = useStream('notify-logged');
+	useEffect(() => {
+		const unsubscribe = subscribeToNotifyLoggedIn('roles-change', ({ type, ...role }) => {
+			if (!role.scope) {
+				return;
+			}
+
+			if (!role.u?._id) {
+				return;
+			}
+
+			updateMemberInCache(options, queryClient, role.u._id, role as any, type, !!useRealName);
+		});
+		return unsubscribe;
+	}, [options, queryClient, subscribeToNotifyLoggedIn, useRealName]);
 
 	return useInfiniteQuery({
 		queryKey: [options.roomType, 'members', options.rid, options.type, options.debouncedText],

From 3cd195682c1a8aa3da4fa2717fe1eb8242eb1870 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Fri, 17 Jan 2025 21:17:54 +0530
Subject: [PATCH 08/10] changeset changes

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 .changeset/chilled-beers-run.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/chilled-beers-run.md b/.changeset/chilled-beers-run.md
index 8e3c1c7adb64..efc57189b5ea 100644
--- a/.changeset/chilled-beers-run.md
+++ b/.changeset/chilled-beers-run.md
@@ -1,6 +1,6 @@
 ---
-'@rocket.chat/i18n': patch
-'@rocket.chat/meteor': patch
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
 ---
 
 Groups members by their roles in the room's member list for improved clarity

From 32ff1d4fa7268817b627c10f30e696539d86b732 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Fri, 17 Jan 2025 21:32:12 +0530
Subject: [PATCH 09/10] requested changes

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 apps/meteor/client/views/hooks/useMembersList.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useMembersList.ts b/apps/meteor/client/views/hooks/useMembersList.ts
index 37edcde7949d..a73c238ac808 100644
--- a/apps/meteor/client/views/hooks/useMembersList.ts
+++ b/apps/meteor/client/views/hooks/useMembersList.ts
@@ -98,7 +98,7 @@ const updateMemberInCache = (
 
 export const useMembersList = (options: MembersListOptions) => {
 	const getMembers = useEndpoint('GET', endpointsByRoomType[options.roomType]);
-	const useRealName = useSetting('UI_Use_Real_Name');
+	const useRealName = useSetting<boolean>('UI_Use_Real_Name', false);
 	const queryClient = useQueryClient();
 
 	const subscribeToNotifyLoggedIn = useStream('notify-logged');
@@ -112,7 +112,7 @@ export const useMembersList = (options: MembersListOptions) => {
 				return;
 			}
 
-			updateMemberInCache(options, queryClient, role.u._id, role as any, type, !!useRealName);
+			updateMemberInCache(options, queryClient, role.u._id, role as any, type, useRealName);
 		});
 		return unsubscribe;
 	}, [options, queryClient, subscribeToNotifyLoggedIn, useRealName]);

From bf908f94deeeace7ab2673a49d9db13fc67f4b2e Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Fri, 17 Jan 2025 21:40:46 +0530
Subject: [PATCH 10/10] changes requested

Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
---
 apps/meteor/client/views/hooks/useMembersList.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useMembersList.ts b/apps/meteor/client/views/hooks/useMembersList.ts
index a73c238ac808..1d9bf534eea3 100644
--- a/apps/meteor/client/views/hooks/useMembersList.ts
+++ b/apps/meteor/client/views/hooks/useMembersList.ts
@@ -37,12 +37,8 @@ const getSortedMembers = (members: RoomMember[], useRealName = false) => {
 			return isModeratorA ? -1 : 1;
 		}
 
-		if (a.status === 'online' && b.status !== 'online') {
-			return -1;
-		}
-
-		if (a.status !== 'online' && b.status === 'online') {
-			return 1;
+		if ((a.status === 'online' || b.status === 'online') && a.status !== b.status) {
+			return a.status === 'online' ? -1 : 1;
 		}
 
 		if (useRealName && a.name && b.name) {
@@ -112,7 +108,7 @@ export const useMembersList = (options: MembersListOptions) => {
 				return;
 			}
 
-			updateMemberInCache(options, queryClient, role.u._id, role as any, type, useRealName);
+			updateMemberInCache(options, queryClient, role.u._id, role as IRole, type, useRealName);
 		});
 		return unsubscribe;
 	}, [options, queryClient, subscribeToNotifyLoggedIn, useRealName]);