snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/navbar/NavBarControls/NavBarControlsMenu.tsx

@@ -0,0 +1,48 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useOmnichannelEnabled } from '../../views/omnichannel/hooks/useOmnichannelEnabled';
+
+export type NavBarControlsMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {
+	omnichannelItems: GenericMenuItemProps[];
+	isPressed: boolean;
+	callItem?: GenericMenuItemProps;
+	callHistoryItem?: GenericMenuItemProps;
+};
+
+const NavBarControlsMenu = ({ omnichannelItems, isPressed, callItem, callHistoryItem, ...props }: NavBarControlsMenuProps) => {
+	const { t } = useTranslation();
+	const showOmnichannel = useOmnichannelEnabled();
+
+	const sections = [
+		{
+			title: t('Voice_Call'),
+			items: callItem || callHistoryItem ? ([callItem, callHistoryItem].filter(Boolean) as GenericMenuItemProps[]) : [],
+		},
+		{
+			title: t('Omnichannel'),
+			items: showOmnichannel ? omnichannelItems : [],
+		},
+	].filter((section) => section.items.length > 0);
+
+	if (sections.length === 0) {
+		return null;
+	}
+
+	return (
+		<GenericMenu
+			sections={sections}
+			title={t('Voice_and_omnichannel')}
+			is={NavBarItem}
+			placement='bottom-start'
+			icon='kebab'
+			pressed={isPressed}
+			{...props}
+		/>
+	);
+};
+
+export default NavBarControlsMenu;

apps/meteor/client/navbar/NavBarControls/NavBarControlsSection.tsx

@@ -0,0 +1,44 @@
+import { NavBarSection, NavBarGroup } from '@rocket.chat/fuselage';
+import { useUser, useLayout } from '@rocket.chat/ui-contexts';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
+import { useTranslation } from 'react-i18next';
+
+import NavBarControlsWithData from './NavBarControlsWithData';
+import { useOmnichannelEnabled } from '../../views/omnichannel/hooks/useOmnichannelEnabled';
+import NavBarOmnichannelGroup from '../NavBarOmnichannelGroup';
+import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from '../NavBarSettingsToolbar';
+import NavBarVoipGroup from '../NavBarVoipGroup';
+
+const NavBarControlsSection = () => {
+	const { t } = useTranslation();
+	const user = useUser();
+	const { isMobile } = useLayout();
+
+	const showOmnichannel = useOmnichannelEnabled();
+	const callAction = useMediaCallAction();
+
+	if (isMobile) {
+		return (
+			<NavBarSection>
+				{(showOmnichannel || callAction) && <NavBarControlsWithData />}
+				<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
+					<NavBarItemAdministrationMenu />
+					{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
+				</NavBarGroup>
+			</NavBarSection>
+		);
+	}
+
+	return (
+		<NavBarSection>
+			{callAction && <NavBarVoipGroup />}
+			{showOmnichannel && <NavBarOmnichannelGroup />}
+			<NavBarGroup aria-label={t('Workspace_and_user_preferences')}>
+				<NavBarItemAdministrationMenu />
+				{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
+			</NavBarGroup>
+		</NavBarSection>
+	);
+};
+
+export default NavBarControlsSection;

apps/meteor/client/navbar/NavBarControls/NavBarControlsWithData.tsx

@@ -0,0 +1,96 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
+import { useCallback, type HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NavBarControlsMenu from './NavBarControlsMenu';
+import { useOmnichannelContactAction } from '../NavBarOmnichannelGroup/hooks/useOmnichannelContactAction';
+import { useOmnichannelLivechatToggle } from '../NavBarOmnichannelGroup/hooks/useOmnichannelLivechatToggle';
+import { useOmnichannelQueueAction } from '../NavBarOmnichannelGroup/hooks/useOmnichannelQueueAction';
+
+type NavBarControlsMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarControlsWithData = (props: NavBarControlsMenuProps) => {
+	const { t } = useTranslation();
+	const callAction = useMediaCallAction();
+
+	const router = useRouter();
+	const openCallHistory = useCallback(() => {
+		router.navigate('/call-history');
+	}, [router]);
+
+	const {
+		isEnabled: queueEnabled,
+		icon: queueIcon,
+		title: queueTitle,
+		handleGoToQueue,
+		isPressed: isQueuePressed,
+	} = useOmnichannelQueueAction();
+
+	const {
+		title: contactCenterTitle,
+		icon: contactCenterIcon,
+		handleGoToContactCenter,
+		isPressed: isContactPressed,
+	} = useOmnichannelContactAction();
+
+	const {
+		title: omnichannelLivechatTogglerTitle,
+		icon: omnichannelLivechatTogglerIcon,
+		handleAvailableStatusChange,
+	} = useOmnichannelLivechatToggle();
+
+	const callItem = callAction
+		? {
+				id: 'rcx-media-call',
+				icon: callAction.icon,
+				content: callAction.title,
+				onClick: () => callAction.action(),
+			}
+		: undefined;
+
+	const callHistoryItem = callAction
+		? {
+				id: 'rcx-media-call-history',
+				icon: 'clock' as const,
+				content: t('Call_history'),
+				onClick: openCallHistory,
+			}
+		: undefined;
+
+	const omnichannelItems = [
+		queueEnabled && {
+			id: 'omnichannelQueue',
+			icon: queueIcon,
+			content: queueTitle,
+			onClick: handleGoToQueue,
+		},
+		{
+			id: 'omnichannelContact',
+			icon: contactCenterIcon,
+			content: contactCenterTitle,
+			onClick: handleGoToContactCenter,
+		},
+		{
+			id: 'omnichannelLivechatToggler',
+			icon: omnichannelLivechatTogglerIcon,
+			content: omnichannelLivechatTogglerTitle,
+			onClick: handleAvailableStatusChange,
+		},
+	].filter(Boolean) as GenericMenuItemProps[];
+
+	const isPressed = isQueuePressed || isContactPressed;
+
+	return (
+		<NavBarControlsMenu
+			callHistoryItem={callHistoryItem}
+			callItem={callItem}
+			omnichannelItems={omnichannelItems}
+			isPressed={isPressed}
+			{...props}
+		/>
+	);
+};
+
+export default NavBarControlsWithData;