feat: newNavigation Feature preview

apps/meteor/client/NavBarV2/NavBar.tsx

@@ -0,0 +1,71 @@
+import { useToolbar } from '@react-aria/toolbar';
+import { NavBar as NavBarComponent, NavBarSection, NavBarGroup, NavBarDivider } from '@rocket.chat/fuselage';
+import { usePermission, useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import React, { useRef } from 'react';
+
+import { useIsCallEnabled, useIsCallReady } from '../contexts/CallContext';
+import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled';
+import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink';
+import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
+import {
+	NavBarItemOmniChannelCallDialPad,
+	NavBarItemOmnichannelContact,
+	NavBarItemOmnichannelLivechatToggle,
+	NavBarItemOmnichannelQueue,
+	NavBarItemOmnichannelCallToggle,
+} from './NavBarOmnichannelToolbar';
+import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar';
+import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar';
+
+export const NavBar = () => {
+	const t = useTranslation();
+	const user = useUser();
+
+	const hasAuditLicense = useHasLicenseModule('auditing') === true;
+
+	const showOmnichannel = useOmnichannelEnabled();
+	const hasManageAppsPermission = usePermission('manage-apps');
+	const hasAccessMarketplacePermission = usePermission('access-marketplace');
+	const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission;
+
+	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
+	const isCallEnabled = useIsCallEnabled();
+	const isCallReady = useIsCallReady();
+
+	const pagesToolbarRef = useRef(null);
+	const { toolbarProps: pagesToolbarProps } = useToolbar({ 'aria-label': t('Pages') }, pagesToolbarRef);
+
+	const omnichannelToolbarRef = useRef(null);
+	const { toolbarProps: omnichannelToolbarProps } = useToolbar({ 'aria-label': t('Omnichannel') }, omnichannelToolbarRef);
+
+	return (
+		<NavBarComponent aria-label='header'>
+			<NavBarSection>
+				<NavBarGroup role='toolbar' ref={pagesToolbarRef} {...pagesToolbarProps}>
+					<NavBarItemHomePage title={t('Home')} />
+					<NavBarItemDirectoryPage title={t('Directory')} />
+					{showMarketplace && <NavBarItemMarketPlaceMenu />}
+					{hasAuditLicense && <NavBarItemAuditMenu />}
+				</NavBarGroup>
+				{showOmnichannel && (
+					<>
+						<NavBarDivider />
+						<NavBarGroup role='toolbar' ref={omnichannelToolbarRef} {...omnichannelToolbarProps}>
+							{showOmnichannelQueueLink && <NavBarItemOmnichannelQueue title={t('Queue')} />}
+							{isCallReady && <NavBarItemOmniChannelCallDialPad />}
+							<NavBarItemOmnichannelContact title={t('Contacts')} />
+							{isCallEnabled && <NavBarItemOmnichannelCallToggle />}
+							<NavBarItemOmnichannelLivechatToggle />
+						</NavBarGroup>
+					</>
+				)}
+			</NavBarSection>
+			<NavBarSection>
+				<NavBarGroup aria-label={t('Workspace_and_user_settings')}>
+					<NavBarItemAdministrationMenu />
+					{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
+				</NavBarGroup>
+			</NavBarSection>
+		</NavBarComponent>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelCallDialPad.tsx

@@ -0,0 +1,26 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useVoipOutboundStates } from '../../contexts/CallContext';
+import { useDialModal } from '../../hooks/useDialModal';
+
+export const NavBarItemOmniChannelCallDialPad = ({ ...props }): ReactElement => {
+	const t = useTranslation();
+
+	const { openDialModal } = useDialModal();
+
+	const { outBoundCallsAllowed, outBoundCallsEnabledForUser } = useVoipOutboundStates();
+
+	return (
+		<NavBarItem
+			icon='dialpad'
+			onClick={(): void => openDialModal()}
+			disabled={!outBoundCallsEnabledForUser}
+			aria-label={t('Open_Dialpad')}
+			data-tooltip={outBoundCallsAllowed ? t('New_Call') : t('New_Call_Premium_Only')}
+			{...props}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelCallToggle.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useIsCallReady, useIsCallError } from '../../contexts/CallContext';
+import { OmnichannelCallToggleError } from './OmnichannelCallToggleError';
+import { OmnichannelCallToggleLoading } from './OmnichannelCallToggleLoading';
+import { OmnichannelCallToggleReady } from './OmnichannelCallToggleReady';
+
+export const NavBarItemOmnichannelCallToggle = ({ ...props }): ReactElement => {
+	const isCallReady = useIsCallReady();
+	const isCallError = useIsCallError();
+	if (isCallError) {
+		return <OmnichannelCallToggleError {...props} />;
+	}
+
+	if (!isCallReady) {
+		return <OmnichannelCallToggleLoading {...props} />;
+	}
+
+	return <OmnichannelCallToggleReady {...props} />;
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelCallToggleError.tsx

@@ -0,0 +1,9 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+export const OmnichannelCallToggleError = ({ ...props }): ReactElement => {
+	const t = useTranslation();
+	return <NavBarItem icon='phone' danger data-tooltip={t('Error')} disabled {...props} />;
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelCallToggleLoading.tsx

@@ -0,0 +1,9 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+export const OmnichannelCallToggleLoading = ({ ...props }): ReactElement => {
+	const t = useTranslation();
+	return <NavBarItem icon='phone' data-tooltip={t('Loading')} aria-label={t('VoIP_Toggle')} disabled {...props} />;
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelCallToggleReady.tsx

@@ -0,0 +1,63 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React, { useCallback } from 'react';
+
+import { useCallerInfo, useCallRegisterClient, useCallUnregisterClient, useVoipNetworkStatus } from '../../contexts/CallContext';
+
+export const OmnichannelCallToggleReady = ({ ...props }): ReactElement => {
+	const t = useTranslation();
+
+	const caller = useCallerInfo();
+	const unregister = useCallUnregisterClient();
+	const register = useCallRegisterClient();
+
+	const networkStatus = useVoipNetworkStatus();
+	const registered = !['ERROR', 'INITIAL', 'UNREGISTERED'].includes(caller.state);
+	const inCall = ['IN_CALL'].includes(caller.state);
+
+	const onClickVoipButton = useCallback((): void => {
+		if (registered) {
+			unregister();
+			return;
+		}
+		register();
+	}, [registered, register, unregister]);
+
+	const getTitle = (): string => {
+		if (networkStatus === 'offline') {
+			return t('Waiting_for_server_connection');
+		}
+
+		if (inCall) {
+			return t('Cannot_disable_while_on_call');
+		}
+
+		if (registered) {
+			return t('Turn_off_answer_calls');
+		}
+
+		return t('Turn_on_answer_calls');
+	};
+
+	const getIcon = (): 'phone-issue' | 'phone' | 'phone-disabled' => {
+		if (networkStatus === 'offline') {
+			return 'phone-issue';
+		}
+		return registered ? 'phone' : 'phone-disabled';
+	};
+
+	return (
+		<NavBarItem
+			icon={getIcon()}
+			disabled={inCall}
+			aria-checked={registered}
+			aria-label={t('VoIP_Toggle')}
+			data-tooltip={getTitle()}
+			{...props}
+			success={registered}
+			warning={networkStatus === 'offline'}
+			onClick={onClickVoipButton}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelContact.tsx

@@ -0,0 +1,20 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+type OmnichannelProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+export const NavBarItemOmnichannelContact = (props: OmnichannelProps) => {
+	const router = useRouter();
+	const currentRoute = useCurrentRoutePath();
+
+	return (
+		<NavBarItem
+			{...props}
+			icon='address-book'
+			onClick={() => router.navigate('/omnichannel-directory')}
+			pressed={currentRoute?.includes('/omnichannel-directory')}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelLivechatToggle.tsx

@@ -0,0 +1,33 @@
+import { Sidebar } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement, ComponentProps } from 'react';
+import React from 'react';
+
+import { useOmnichannelAgentAvailable } from '../../hooks/omnichannel/useOmnichannelAgentAvailable';
+
+export const NavBarItemOmnichannelLivechatToggle = (props: Omit<ComponentProps<typeof Sidebar.TopBar.Action>, 'icon'>): ReactElement => {
+	const t = useTranslation();
+	const agentAvailable = useOmnichannelAgentAvailable();
+	const changeAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleAvailableStatusChange = useMutableCallback(async () => {
+		try {
+			await changeAgentStatus({});
+		} catch (error: unknown) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	return (
+		<Sidebar.TopBar.Action
+			{...props}
+			id='omnichannel-status-toggle'
+			title={agentAvailable ? t('Turn_off_answer_chats') : t('Turn_on_answer_chats')}
+			success={agentAvailable}
+			icon={agentAvailable ? 'message' : 'message-disabled'}
+			onClick={handleAvailableStatusChange}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/OmnichannelQueue.tsx

@@ -0,0 +1,20 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+type OmnichannelProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+export const NavBarItemOmnichannelQueue = (props: OmnichannelProps) => {
+	const router = useRouter();
+	const currentRoute = useCurrentRoutePath();
+
+	return (
+		<NavBarItem
+			{...props}
+			icon='queue'
+			onClick={() => router.navigate('/livechat-queue')}
+			pressed={currentRoute?.includes('/livechat-queue')}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarOmnichannelToolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './OmnichannelCallDialPad';
+export * from './OmnichannelCallToggle';
+export * from './OmnichannelContact';
+export * from './OmnichannelLivechatToggle';
+export * from './OmnichannelQueue';

apps/meteor/client/NavBarV2/NavBarPagesToolbar/AuditMenu.tsx

@@ -0,0 +1,25 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useCurrentRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+import GenericMenu from '../../components/GenericMenu/GenericMenu';
+import { useAuditMenu } from './hooks/useAuditMenu';
+
+export const NavBarItemAuditMenu = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => {
+	const t = useTranslation();
+	const sections = useAuditMenu();
+	const currentRoute = useCurrentRoutePath();
+
+	return (
+		<GenericMenu
+			sections={sections}
+			title={t('Audit')}
+			is={NavBarItem}
+			placement='bottom-start'
+			icon='document-eye'
+			pressed={currentRoute?.includes('/audit')}
+			{...props}
+		/>
+	);
+};

apps/meteor/client/NavBarV2/NavBarPagesToolbar/DirectoryPage.tsx

@@ -0,0 +1,15 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+export const NavBarItemDirectoryPage = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => {
+	const router = useRouter();
+	const handleDirectory = useEffectEvent(() => {
+		router.navigate('/directory');
+	});
+	const currentRoute = useCurrentRoutePath();
+
+	return <NavBarItem {...props} icon='notebook-hashtag' onClick={handleDirectory} pressed={currentRoute?.includes('/directory')} />;
+};

apps/meteor/client/NavBarV2/NavBarPagesToolbar/HomePage.tsx

@@ -0,0 +1,18 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useRouter, useLayout, useSetting, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+export const NavBarItemHomePage = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => {
+	const router = useRouter();
+	const { sidebar } = useLayout();
+	const showHome = useSetting('Layout_Show_Home_Button');
+	const handleHome = useEffectEvent(() => {
+		sidebar.toggle();
+		router.navigate('/home');
+	});
+	const currentRoute = useCurrentRoutePath();
+
+	return showHome ? <NavBarItem {...props} icon='home' onClick={handleHome} pressed={currentRoute?.includes('/home')} /> : null;
+};

apps/meteor/client/NavBarV2/NavBarPagesToolbar/MarketPlaceMenu.tsx

@@ -0,0 +1,26 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useCurrentRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+import GenericMenu from '../../components/GenericMenu/GenericMenu';
+import { useMarketPlaceMenu } from './hooks/useMarketPlaceMenu';
+
+export const NavBarItemMarketPlaceMenu = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => {
+	const t = useTranslation();
+	const sections = useMarketPlaceMenu();
+
+	const currentRoute = useCurrentRoutePath();
+
+	return (
+		<GenericMenu
+			sections={sections}
+			title={t('Marketplace')}
+			is={NavBarItem}
+			placement='bottom-start'
+			icon='store'
+			pressed={currentRoute?.includes('/marketplace')}
+			{...props}
+		/>
+	);
+};