feat: Place the room topic next to the room title

.changeset/plenty-baboons-kneel.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Places the room topic next to the room title
+> This change is being tested under `Enhanced navigation experience` feature preview, in order to check it you need to enabled it

apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx

@@ -9,6 +9,7 @@ import ParentRoomWithData from './ParentRoomWithData';
 import ParentTeam from './ParentTeam';
 import RoomTitle from './RoomTitle';
 import RoomToolbox from './RoomToolbox';
+import RoomTopic from './RoomTopic';
 import Encrypted from './icons/Encrypted';
 import Favorite from './icons/Favorite';
 import Translate from './icons/Translate';
@@ -47,6 +48,7 @@ const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => {
 					{isRoomFederated(room) && <FederatedRoomOriginServer room={room} />}
 					<Encrypted room={room} />
 					<Translate room={room} />
+					<RoomTopic room={room} />
 					{slots?.insideContent}
 				</HeaderContentRow>
 			</HeaderContent>

apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx

@@ -46,7 +46,7 @@ const RoomTitle = ({ room }: RoomTitleProps) => {
 			mie={4}
 		>
 			<HeaderIconWithRoom room={room} />
-			<HeaderTitle is='h1'>{room.name}</HeaderTitle>
+			<HeaderTitle>{room.name}</HeaderTitle>
 		</HeaderTitleButton>
 	);
 };

apps/meteor/client/views/room/body/RoomTopic.spec.tsx → apps/meteor/client/views/room/HeaderV2/RoomTopic.spec.tsx

@@ -3,7 +3,7 @@ import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { render, screen } from '@testing-library/react';
 
-import { RoomTopic } from './RoomTopic';
+import RoomTopic from './RoomTopic';
 import FakeRoomProvider from '../../../../tests/mocks/client/FakeRoomProvider';
 import { createFakeRoom, createFakeSubscription, createFakeUser } from '../../../../tests/mocks/data';
 
@@ -36,7 +36,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -56,7 +56,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -75,7 +75,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -96,7 +96,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -115,7 +115,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -137,7 +137,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -159,7 +159,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()
@@ -179,7 +179,7 @@ describe('RoomTopic', () => {
 
 		render(
 			<FakeRoomProvider roomOverrides={room} subscriptionOverrides={subscription}>
-				<RoomTopic room={room} user={user} />
+				<RoomTopic room={room} />
 			</FakeRoomProvider>,
 			{
 				wrapper: mockAppRoot()

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

@@ -1,18 +1,16 @@
-import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import type { IRoom } from '@rocket.chat/core-typings';
 import { isDirectMessageRoom, isPrivateRoom, isPublicRoom, isTeamRoom } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
-import { RoomBanner, RoomBannerContent } from '@rocket.chat/ui-client';
 import { useUserId, useTranslation, useRouter, useUserPresence } from '@rocket.chat/ui-contexts';
 
 import MarkdownText from '../../../components/MarkdownText';
 import { useCanEditRoom } from '../contextualBar/Info/hooks/useCanEditRoom';
 
 type RoomTopicProps = {
 	room: IRoom;
-	user: IUser | null;
 };
 
-export const RoomTopic = ({ room }: RoomTopicProps) => {
+const RoomTopic = ({ room }: RoomTopicProps) => {
 	const t = useTranslation();
 	const canEdit = useCanEditRoom(room);
 	const userId = useUserId();
@@ -26,21 +24,19 @@ export const RoomTopic = ({ room }: RoomTopicProps) => {
 	const topic = isDirectMessageRoom(room) && (room.uids?.length ?? 0) < 3 ? directUserData?.statusText : room.topic;
 	const canEditTopic = canEdit && (isPublicRoom(room) || isPrivateRoom(room));
 
-	if (!topic && !canEdit) {
+	if (!topic && !canEditTopic) {
 		return null;
 	}
 
-	return (
-		<RoomBanner className='rcx-header-section rcx-topic-section' role='note'>
-			<RoomBannerContent>
-				{!topic && canEditTopic ? (
-					<Box is='a' href={href}>
-						{t('Add_topic')}
-					</Box>
-				) : (
-					<MarkdownText parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />
-				)}
-			</RoomBannerContent>
-		</RoomBanner>
-	);
+	if (!topic && canEditTopic) {
+		return (
+			<Box is='a' href={href}>
+				{t('Add_topic')}
+			</Box>
+		);
+	}
+
+	return <MarkdownText color='default' parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />;
 };
+
+export default RoomTopic;

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

@@ -25,7 +25,6 @@ import { useDateScroll } from '../hooks/useDateScroll';
 import { useMessageListNavigation } from '../hooks/useMessageListNavigation';
 import { useRetentionPolicy } from '../hooks/useRetentionPolicy';
 import RoomForeword from './RoomForeword/RoomForeword';
-import { RoomTopic } from './RoomTopic';
 import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
 import { useBannerSection } from './hooks/useBannerSection';
@@ -193,7 +192,6 @@ const RoomBody = (): ReactElement => {
 		<>
 			<Box position='relative' w='full'>
 				<Box animated className={[wrapperStyle, hideSection && 'animated-hidden'].filter(isTruthy)} ref={sectionWrapperRef}>
-					<RoomTopic room={room} user={user} />
 					{!isLayoutEmbedded && room.announcement && <RoomAnnouncement announcement={room.announcement} announcementDetails={undefined} />}
 				</Box>
 			</Box>

packages/ui-client/src/components/HeaderV2/Header.tsx

@@ -10,7 +10,16 @@ const Header = (props: HeaderProps) => {
 	const { isMobile } = useLayout();
 
 	return (
-		<Box rcx-room-header is='header' display='flex' justifyContent='center' flexDirection='column' overflow='hidden' flexShrink={0}>
+		<Box
+			rcx-room-header
+			is='header'
+			color='default'
+			display='flex'
+			justifyContent='center'
+			flexDirection='column'
+			overflow='hidden'
+			flexShrink={0}
+		>
 			<Box
 				pi={isMobile ? 'x12' : 'x16'}
 				height='x44'

packages/ui-client/src/components/HeaderV2/HeaderTitle.tsx

@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 type HeaderTitleProps = ComponentPropsWithoutRef<typeof Box>;
 
-const HeaderTitle = (props: HeaderTitleProps) => <Box color='default' mi={4} is='h1' fontScale='h4' withTruncatedText {...props} />;
+const HeaderTitle = (props: HeaderTitleProps) => <Box color='titles-labels' mi={4} is='h1' fontScale='h4' withTruncatedText {...props} />;
 
 export default HeaderTitle;