Chore: Move Header to ui-client

apps/meteor/app/livestream/client/tabBar.tsx

@@ -3,9 +3,9 @@ import React, { useMemo } from 'react';
 import { Option, Badge } from '@rocket.chat/fuselage';
 import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import { isRoomFederated } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 
 import { addAction } from '../../../client/views/room/lib/Toolbox';
-import Header from '../../../client/components/Header';
 
 addAction('livestream', ({ room }) => {
 	const enabled = useSetting('Livestream_enabled');
@@ -28,13 +28,13 @@ addAction('livestream', ({ room }) => {
 							'disabled': true,
 						}),
 						renderAction: (props): ReactNode => (
-							<Header.ToolBoxAction {...props}>
+							<Header.ToolBox.Action {...props}>
 								{isLive ? (
-									<Header.Badge title={t('Livestream_live_now')} variant='danger'>
+									<Header.ToolBox.ActionBadge title={t('Livestream_live_now')} variant='danger'>
 										!
-									</Header.Badge>
+									</Header.ToolBox.ActionBadge>
 								) : null}
-							</Header.ToolBoxAction>
+							</Header.ToolBox.Action>
 						),
 						renderOption: ({ label: { title, icon }, ...props }: any): ReactNode => (
 							<Option label={title} title={title} icon={icon} {...props}>

apps/meteor/app/threads/client/flextab/threadlist.tsx

@@ -4,9 +4,9 @@ import type { BadgeProps } from '@rocket.chat/fuselage';
 import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import { useSetting } from '@rocket.chat/ui-contexts';
+import { Header } from '@rocket.chat/ui-client';
 
 import { addAction } from '../../../../client/views/room/lib/Toolbox';
-import Header from '../../../../client/components/Header';
 
 const getVariant = (tunreadUser: number, tunreadGroup: number): BadgeProps['variant'] => {
 	if (tunreadUser > 0) {
@@ -45,9 +45,9 @@ addAction('thread', (options) => {
 							const unread = tunread > 99 ? '99+' : tunread;
 							const variant = getVariant(tunreadUser, tunreadGroup);
 							return (
-								<Header.ToolBoxAction {...props}>
-									{unread > 0 && <Header.Badge variant={variant}>{unread}</Header.Badge>}
-								</Header.ToolBoxAction>
+								<Header.ToolBox.Action {...props}>
+									{unread > 0 && <Header.ToolBox.ActionBadge variant={variant}>{unread}</Header.ToolBox.ActionBadge>}
+								</Header.ToolBox.Action>
 							);
 						},
 						order: 2,

apps/meteor/app/videobridge/client/tabBar.tsx

@@ -95,6 +95,7 @@ addAction('start-call', ({ room }) => {
 						}),
 						full: true,
 						order: live ? -1 : 4,
+						featured: true,
 				  }
 				: null,
 		[groups, enableOption, live, handleOpenVideoConf, ownUser, federated],

apps/meteor/client/components/Page/PageHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, IconButton } from '@rocket.chat/fuselage';
+import { Header as TemplateHeader } from '@rocket.chat/ui-client';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useContext, FC, ComponentProps, ReactNode } from 'react';
 
 import BurgerMenu from '../BurgerMenu';
-import TemplateHeader from '../Header';
 import PageContext from './PageContext';
 
 type PageHeaderProps = {

apps/meteor/client/components/avatar/BaseAvatar.tsx

@@ -7,10 +7,10 @@ const BaseAvatar: FC<BaseAvatarProps> = ({ size, ...props }) => {
 	const [error, setError] = useState<unknown>(false);
 
 	if (error) {
-		return <Skeleton variant='rect' {...props} />;
+		return <Skeleton aria-hidden variant='rect' {...props} />;
 	}
 
-	return <Avatar onError={setError} size={size} {...props} />;
+	return <Avatar aria-hidden onError={setError} size={size} {...props} />;
 };
 
 export default BaseAvatar;

apps/meteor/client/views/room/Header/Header.tsx

@@ -1,9 +1,9 @@
 import type { IRoom, IVoipRoom } from '@rocket.chat/core-typings';
+import { Header as TemplateHeader } from '@rocket.chat/ui-client';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import React, { memo, ReactElement, useMemo } from 'react';
 
 import BurgerMenu from '../../../components/BurgerMenu';
-import TemplateHeader from '../../../components/Header';
 import DirectRoomHeader from './DirectRoomHeader';
 import OmnichannelRoomHeader from './Omnichannel/OmnichannelRoomHeader';
 import VoipRoomHeader from './Omnichannel/VoipRoomHeader';

apps/meteor/client/views/room/Header/HeaderIconWithRoom.tsx

@@ -1,7 +1,7 @@
 import { IRoom, isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 import React, { ReactElement } from 'react';
 
-import Header from '../../../components/Header';
 import { OmnichannelRoomIcon } from '../../../components/RoomIcon/OmnichannelRoomIcon';
 import { useRoomIcon } from '../../../hooks/useRoomIcon';
 

apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx

@@ -1,9 +1,8 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { Header } from '@rocket.chat/ui-client';
 import { useCurrentRoute, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import Header from '../../../../components/Header';
-
 export const BackButton = ({ routeName }: { routeName?: string }): ReactElement => {
 	const t = useTranslation();
 	const [route = '', params] = useCurrentRoute();
@@ -20,5 +19,5 @@ export const BackButton = ({ routeName }: { routeName?: string }): ReactElement
 		}
 	});
 
-	return <Header.ToolBoxAction title={t('Back')} icon='back' onClick={back} />;
+	return <Header.ToolBox.Action title={t('Back')} icon='back' onClick={back} />;
 };

apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx

@@ -1,8 +1,8 @@
+import { Header as TemplateHeader } from '@rocket.chat/ui-client';
 import { useLayout, useCurrentRoute } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
 
 import BurgerMenu from '../../../../components/BurgerMenu';
-import TemplateHeader from '../../../../components/Header';
 import { useOmnichannelRoom } from '../../contexts/RoomContext';
 import { ToolboxActionConfig } from '../../lib/Toolbox';
 import { ToolboxContext, useToolboxContext } from '../../lib/Toolbox/ToolboxContext';

apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx

@@ -1,9 +1,9 @@
 import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
-import { Box, ButtonGroup } from '@rocket.chat/fuselage';
+import { Box } from '@rocket.chat/fuselage';
+import { Header } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { memo, FC, ComponentProps } from 'react';
 
-import Header from '../../../../../components/Header';
 import { useQuickActions } from './hooks/useQuickActions';
 
 type QuickActionsProps = {
@@ -16,24 +16,23 @@ const QuickActions: FC<QuickActionsProps> = ({ room, className }) => {
 	const { visibleActions, actionDefault } = useQuickActions(room);
 
 	return (
-		<ButtonGroup mi='x4' medium>
+		<Header.ToolBox aria-label={t('Omnichannel_quick_actions')}>
 			{visibleActions.map(({ id, color, icon, title, action = actionDefault }, index) => {
 				const props = {
 					id,
 					icon,
 					color,
-					'title': t(title),
+					title: t(title),
 					className,
 					index,
-					'primary': false,
-					'data-quick-actions': index,
+					primary: false,
 					action,
-					'key': id,
+					key: id,
 				};
 
-				return <Header.ToolBoxAction {...props} />;
+				return <Header.ToolBox.Action {...props} />;
 			})}
-		</ButtonGroup>
+		</Header.ToolBox>
 	);
 };
 

apps/meteor/client/views/room/Header/Omnichannel/QuickActions/hooks/useQuickActions.tsx

@@ -283,10 +283,8 @@ export const useQuickActions = (
 
 	const visibleActions = actions.filter(({ id }) => hasPermissionButtons(id));
 
-	const actionDefault = useMutableCallback((e) => {
-		const index = e.currentTarget.getAttribute('data-quick-actions');
-		const { id } = visibleActions[index];
-		openModal(id);
+	const actionDefault = useMutableCallback((actionId) => {
+		openModal(actionId);
 	});
 
 	const getAction = useMutableCallback((id) => {

apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx

@@ -1,10 +1,10 @@
 import { IVoipRoom } from '@rocket.chat/core-typings';
+import { Header as TemplateHeader } from '@rocket.chat/ui-client';
 import { useLayout, useCurrentRoute } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
 
 import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
 import BurgerMenu from '../../../../components/BurgerMenu';
-import TemplateHeader from '../../../../components/Header';
 import { ToolboxActionConfig } from '../../lib/Toolbox';
 import { ToolboxContext, useToolboxContext } from '../../lib/Toolbox/ToolboxContext';
 import RoomHeader, { RoomHeaderProps } from '../RoomHeader';

apps/meteor/client/views/room/Header/ParentRoom.tsx

@@ -1,7 +1,7 @@
 import type { IRoom } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 import React, { ReactElement } from 'react';
 
-import Header from '../../../components/Header';
 import { useRoomIcon } from '../../../hooks/useRoomIcon';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 

apps/meteor/client/views/room/Header/ParentRoomWithEndpointData.tsx

@@ -1,7 +1,7 @@
 import type { IRoom } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 import React, { ReactElement } from 'react';
 
-import Header from '../../../components/Header';
 import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint';
 import ParentRoom from './ParentRoom';
 

apps/meteor/client/views/room/Header/ParentTeam.tsx

@@ -1,9 +1,9 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
-import Header from '../../../components/Header';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import { goToRoomById } from '../../../lib/utils/goToRoomById';

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

@@ -1,7 +1,8 @@
 import type { IRoom } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
-import Header from '../../../components/Header';
 import MarkdownText from '../../../components/MarkdownText';
 import RoomAvatar from '../../../components/avatar/RoomAvatar';
 import ParentRoomWithData from './ParentRoomWithData';
@@ -29,37 +30,42 @@ export type RoomHeaderProps = {
 	};
 };
 
-const RoomHeader: FC<RoomHeaderProps> = ({ room, topic = '', slots = {} }) => (
-	<Header>
-		{slots?.start}
-		<Header.Avatar>
-			<RoomAvatar room={room} />
-		</Header.Avatar>
-		{slots?.preContent}
-		<Header.Content>
-			<Header.Content.Row>
-				<RoomTitle room={room} />
-				<Favorite room={room} />
-				{room.prid && <ParentRoomWithData room={room} />}
-				{room.teamId && !room.teamMain && <ParentTeam room={room} />}
-				<Encrypted room={room} />
-				<Translate room={room} />
-				{slots?.insideContent}
-			</Header.Content.Row>
-			<Header.Content.Row>
-				<Header.Subtitle>
-					{topic && <MarkdownText parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />}
-				</Header.Subtitle>
-			</Header.Content.Row>
-		</Header.Content>
-		{slots?.posContent}
-		<Header.ToolBox>
-			{slots?.toolbox?.pre}
-			{slots?.toolbox?.content || <ToolBox room={room} />}
-			{slots?.toolbox?.pos}
-		</Header.ToolBox>
-		{slots?.end}
-	</Header>
-);
+const RoomHeader: FC<RoomHeaderProps> = ({ room, topic = '', slots = {} }) => {
+	const t = useTranslation();
+	return (
+		<Header>
+			{slots?.start}
+			<Header.Avatar>
+				<RoomAvatar room={room} />
+			</Header.Avatar>
+			{slots?.preContent}
+			<Header.Content>
+				<Header.Content.Row>
+					<RoomTitle room={room} />
+					<Favorite room={room} />
+					{room.prid && <ParentRoomWithData room={room} />}
+					{room.teamId && !room.teamMain && <ParentTeam room={room} />}
+					<Encrypted room={room} />
+					<Translate room={room} />
+					{slots?.insideContent}
+				</Header.Content.Row>
+				{topic && (
+					<Header.Content.Row>
+						<Header.Subtitle is='h2'>
+							<MarkdownText parseEmoji={true} variant='inlineWithoutBreaks' withTruncatedText content={topic} />
+						</Header.Subtitle>
+					</Header.Content.Row>
+				)}
+			</Header.Content>
+			{slots?.posContent}
+			<Header.ToolBox aria-label={t('Toolbox_room_actions')}>
+				{slots?.toolbox?.pre}
+				{slots?.toolbox?.content || <ToolBox room={room} />}
+				{slots?.toolbox?.pos}
+			</Header.ToolBox>
+			{slots?.end}
+		</Header>
+	);
+};
 
 export default RoomHeader;

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

@@ -1,7 +1,7 @@
 import type { IRoom } from '@rocket.chat/core-typings';
+import { Header } from '@rocket.chat/ui-client';
 import React, { ReactElement } from 'react';
 
-import Header from '../../../components/Header';
 import HeaderIconWithRoom from './HeaderIconWithRoom';
 
 type RoomTitleProps = {
@@ -11,7 +11,7 @@ type RoomTitleProps = {
 const RoomTitle = ({ room }: RoomTitleProps): ReactElement => (
 	<>
 		<HeaderIconWithRoom room={room} />
-		<Header.Title>{room.name}</Header.Title>
+		<Header.Title is='h1'>{room.name}</Header.Title>
 	</>
 );