feat: Remove room header avatar (#35615)

.changeset/hungry-wasps-remember.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Removes the avatar in the room header 
+> 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/HeaderSkeleton.tsx

@@ -1,13 +1,10 @@
 import { Skeleton } from '@rocket.chat/fuselage';
 
-import { Header, HeaderAvatar, HeaderContent, HeaderContentRow } from '../../../components/Header';
+import { Header, HeaderContent, HeaderContentRow } from '../../../components/Header';
 
 const HeaderSkeleton = () => {
 	return (
 		<Header>
-			<HeaderAvatar>
-				<Skeleton variant='rect' width={28} height={28} />
-			</HeaderAvatar>
 			<HeaderContent>
 				<HeaderContentRow>
 					<Skeleton width='25%' />

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

@@ -1,6 +1,5 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
-import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactNode } from 'react';
 import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +12,7 @@ import RoomToolbox from './RoomToolbox';
 import Encrypted from './icons/Encrypted';
 import Favorite from './icons/Favorite';
 import Translate from './icons/Translate';
-import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header';
+import { Header, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header';
 
 export type RoomHeaderProps = {
 	room: IRoom;
@@ -38,9 +37,6 @@ const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => {
 	return (
 		<Header>
 			{slots?.start}
-			<HeaderAvatar>
-				<RoomAvatar room={room} size='x28' />
-			</HeaderAvatar>
 			{slots?.preContent}
 			<HeaderContent>
 				<HeaderContentRow>

apps/meteor/tests/e2e/feature-preview.spec.ts

@@ -171,6 +171,13 @@ test.describe.serial('feature preview', () => {
 			await page.goto(embeddedLayoutURL);
 			await expect(page.locator('role=navigation[name="header"]')).not.toBeVisible();
 		});
+
+		test('should not display avatar in room header', async ({ page }) => {
+			await page.goto('/home');
+
+			await poHomeChannel.sidebar.openChat(targetChannel);
+			await expect(page.locator('main').locator('header').getByRole('figure')).not.toBeVisible();
+		});
 	});
 
 	test.describe('Sidepanel', () => {

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

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