fix: leader banner visible in new navigation

.changeset/lovely-walls-itch.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Removes the room leader banner from the chat header in the new navigation.

apps/meteor/client/views/room/body/RoomBody.tsx

@@ -6,11 +6,9 @@ import { memo, useCallback, useMemo, useRef } from 'react';
 
 import DropTargetOverlay from './DropTargetOverlay';
 import JumpToRecentMessageButton from './JumpToRecentMessageButton';
-import { RoomRoles } from '../../../../app/models/client';
 import { isTruthy } from '../../../../lib/isTruthy';
 import { CustomScrollbars } from '../../../components/CustomScrollbars';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
-import { useReactiveQuery } from '../../../hooks/useReactiveQuery';
 import Announcement from '../Announcement';
 import { BubbleDate } from '../BubbleDate';
 import { MessageList } from '../MessageList';
@@ -32,7 +30,6 @@ import { useFileUpload } from './hooks/useFileUpload';
 import { useGetMore } from './hooks/useGetMore';
 import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved';
 import { useHasNewMessages } from './hooks/useHasNewMessages';
-import { useLeaderBanner } from './hooks/useLeaderBanner';
 import { useListIsAtBottom } from './hooks/useListIsAtBottom';
 import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl';
 import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
@@ -84,8 +81,6 @@ const RoomBody = (): ReactElement => {
 		return subscribed;
 	}, [allowAnonymousRead, canPreviewChannelRoom, room, subscribed]);
 
-	const useRealName = useSetting('UI_Use_Real_Name', false);
-
 	const innerBoxRef = useRef<HTMLDivElement | null>(null);
 
 	const {
@@ -102,8 +97,6 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef);
 
-	const { wrapperRef: leaderBannerWrapperRef, hideLeaderHeader, innerRef: leaderBannerInnerRef } = useLeaderBanner();
-
 	const {
 		uploads,
 		handleUploadFiles,
@@ -129,14 +122,13 @@ const RoomBody = (): ReactElement => {
 		restoreScrollPositionInnerRef,
 		isAtBottomInnerRef,
 		newMessagesScrollRef,
-		leaderBannerInnerRef,
 		unreadBarInnerRef,
 		getMoreInnerRef,
 		selectAndScrollRef,
 		messageListRef,
 	);
 
-	const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef, leaderBannerWrapperRef);
+	const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef);
 
 	const handleNavigateToPreviousMessage = useCallback((): void => {
 		chat.messageEditing.toPreviousMessage();
@@ -182,23 +174,6 @@ const RoomBody = (): ReactElement => {
 	useReadMessageWindowEvents();
 	useQuoteMessageByUrl();
 
-	const { data: roomLeader } = useReactiveQuery(['rooms', room._id, 'leader', { not: user?._id }], () => {
-		const leaderRoomRole = RoomRoles.findOne({
-			'rid': room._id,
-			'roles': 'leader',
-			'u._id': { $ne: user?._id },
-		});
-
-		if (!leaderRoomRole) {
-			return null;
-		}
-
-		return {
-			...leaderRoomRole.u,
-			name: useRealName ? leaderRoomRole.u.name || leaderRoomRole.u.username : leaderRoomRole.u.username,
-		};
-	});
-
 	return (
 		<>
 			{!isLayoutEmbedded && room.announcement && <Announcement announcement={room.announcement} announcementDetails={undefined} />}
@@ -238,7 +213,7 @@ const RoomBody = (): ReactElement => {
 								<BubbleDate ref={bubbleRef} {...bubbleDate} />
 							</Box>
 
-							<div className={['messages-box', roomLeader && !hideLeaderHeader && 'has-leader'].filter(isTruthy).join(' ')}>
+							<div className='messages-box'>
 								<JumpToRecentMessageButton visible={hasNewMessages} onClick={handleNewMessageButtonClick} text={t('New_messages')} />
 								<JumpToRecentMessageButton
 									visible={hasMoreNextMessages}

apps/meteor/client/views/room/body/RoomBodyV2.tsx

@@ -87,7 +87,7 @@ const RoomBody = (): ReactElement => {
 	const innerBoxRef = useRef<HTMLDivElement | null>(null);
 
 	const {
-		wrapperRef: unreadBarWrapperRef,
+		wrapperRef,
 		innerRef: unreadBarInnerRef,
 		handleUnreadBarJumpToButtonClick,
 		handleMarkAsReadButtonClick,
@@ -134,8 +134,6 @@ const RoomBody = (): ReactElement => {
 		messageListRef,
 	);
 
-	const wrapperBoxRefs = useMergedRefs(unreadBarWrapperRef);
-
 	const handleNavigateToPreviousMessage = useCallback((): void => {
 		chat.messageEditing.toPreviousMessage();
 	}, [chat.messageEditing]);
@@ -208,7 +206,7 @@ const RoomBody = (): ReactElement => {
 					onClick={hideFlexTab && handleCloseFlexTab}
 				>
 					<div className='messages-container-wrapper'>
-						<div className='messages-container-main' ref={wrapperBoxRefs} {...fileUploadTriggerProps}>
+						<div className='messages-container-main' ref={wrapperRef} {...fileUploadTriggerProps}>
 							<DropTargetOverlay {...fileUploadOverlayProps} />
 							<Box position='absolute' w='full'>
 								{uploads.length > 0 && (

apps/meteor/client/views/room/body/RoomTopic.tsx

@@ -2,65 +2,45 @@ import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import { isTeamRoom } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { RoomBanner, RoomBannerContent } from '@rocket.chat/ui-client';
-import { useSetting, useUserId, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import { useUserId, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 
-import { RoomRoles } from '../../../../app/models/client';
 import MarkdownText from '../../../components/MarkdownText';
 import { usePresence } from '../../../hooks/usePresence';
-import { useReactiveQuery } from '../../../hooks/useReactiveQuery';
-import RoomLeader from '../HeaderV2/RoomLeader';
 import { useCanEditRoom } from '../contextualBar/Info/hooks/useCanEditRoom';
 
 type RoomTopicProps = {
 	room: IRoom;
 	user: IUser | null;
 };
 
-export const RoomTopic = ({ room, user }: RoomTopicProps) => {
+export const RoomTopic = ({ room }: RoomTopicProps) => {
 	const t = useTranslation();
 	const canEdit = useCanEditRoom(room);
 	const userId = useUserId();
 	const directUserId = room.uids?.filter((uid) => uid !== userId).shift();
 	const directUserData = usePresence(directUserId);
-	const useRealName = useSetting('UI_Use_Real_Name', false);
 	const router = useRouter();
 
 	const currentRoute = router.getLocationPathname();
 	const href = isTeamRoom(room) ? `${currentRoute}/team-info` : `${currentRoute}/channel-settings`;
 
-	const { data: roomLeader } = useReactiveQuery(['rooms', room._id, 'leader', { not: user?._id }], () => {
-		const leaderRoomRole = RoomRoles.findOne({
-			'rid': room._id,
-			'roles': 'leader',
-			'u._id': { $ne: user?._id },
-		});
-
-		if (!leaderRoomRole) {
-			return null;
-		}
-
-		return {
-			...leaderRoomRole.u,
-			name: useRealName ? leaderRoomRole.u.name || leaderRoomRole.u.username : leaderRoomRole.u.username,
-		};
-	});
-
 	const topic = room.t === 'd' && (room.uids?.length ?? 0) < 3 ? directUserData?.statusText : room.topic;
 
-	if (!topic && !roomLeader) return null;
+	if (!topic && !canEdit) {
+		return null;
+	}
 
 	return (
 		<RoomBanner className='rcx-header-section rcx-topic-section' role='note'>
 			<RoomBannerContent>
-				{roomLeader && !topic && canEdit ? (
+				{!topic && canEdit ? (
 					<Box is='a' href={href}>
 						{t('Add_topic')}
 					</Box>
 				) : (
 					<MarkdownText parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />
 				)}
 			</RoomBannerContent>
-			{roomLeader && <RoomLeader {...roomLeader} />}
 		</RoomBanner>
 	);
 };

apps/meteor/client/views/room/body/hooks/useBannerSection.ts

@@ -19,14 +19,14 @@ export const useBannerSection = () => {
 		node.addEventListener(
 			'scroll',
 			withThrottling({ wait: 100 })((event) => {
-				const roomLeader = wrapperBoxRef.current?.querySelector('.rcx-header-section');
+				const bannerSection = wrapperBoxRef.current?.querySelector('.rcx-header-section');
 
-				if (roomLeader) {
+				if (bannerSection) {
 					if (isAtBottom(node, 0)) {
 						setHideSection(false);
 					} else if (event.target.scrollTop < lastScrollTopRef) {
 						setHideSection(true);
-					} else if (!isAtBottom(node, 100) && event.target.scrollTop > parseFloat(getComputedStyle(roomLeader).height)) {
+					} else if (!isAtBottom(node, 100) && event.target.scrollTop > parseFloat(getComputedStyle(bannerSection).height)) {
 						setHideSection(true);
 					}
 				}