feat: added highlight red dot

apps/meteor/client/sidebar/header/actions/Administration.tsx

@@ -4,14 +4,24 @@ import type { HTMLAttributes, VFC } from 'react';
 import React from 'react';
 
 import GenericMenu from '../../../components/GenericMenu/GenericMenu';
+import { useAdministrationHighlight } from './hooks/useAdministrationHighlight';
 import { useAdministrationMenu } from './hooks/useAdministrationMenu';
 
-const Administration: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
+const Administration: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = ({ className, ...props }) => {
 	const t = useTranslation();
 
 	const sections = useAdministrationMenu();
+	const { className: highlightDot } = useAdministrationHighlight();
 
-	return <GenericMenu sections={sections} title={t('Administration')} is={Sidebar.TopBar.Action} {...props} />;
+	return (
+		<GenericMenu
+			sections={sections}
+			title={t('Administration')}
+			is={Sidebar.TopBar.Action}
+			className={[className, highlightDot]}
+			{...props}
+		/>
+	);
 };
 
 export default Administration;

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationHighlight.tsx

@@ -0,0 +1,32 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Palette } from '@rocket.chat/fuselage';
+
+import { useOmnichannelHighlight } from '../../../../../ee/client/omnichannel/hooks/useOmnichannelHighlight';
+
+const highlightDot = css`
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: block;
+		flex: none;
+		width: 8px;
+		height: 8px;
+		background-color: ${Palette.badge['badge-background-level-4'].toString()};
+		border-radius: 50%;
+	}
+`;
+
+export const useAdministrationHighlight = () => {
+	const { isHighlit: isOmnichannelHighlit } = useOmnichannelHighlight();
+
+	return {
+		isHighlit: isOmnichannelHighlit,
+		get className() {
+			return this.isHighlit ? highlightDot : undefined;
+		},
+	};
+};

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx

@@ -9,6 +9,7 @@ import {
 } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
+import { OmnichannelHighlight } from '../../../../../ee/client/omnichannel/components/OmnichannelHighlight';
 import type { UpgradeTabVariant } from '../../../../../lib/upgradeTab';
 import { getUpgradeTabLabel, isFullyFeature } from '../../../../../lib/upgradeTab';
 import Emoji from '../../../../components/Emoji';
@@ -86,6 +87,7 @@ export const useAdministrationItems = (): GenericMenuItemProps[] => {
 		content: t('Omnichannel'),
 		icon: 'headset',
 		onClick: () => router.navigate('/omnichannel/current'),
+		addon: <OmnichannelHighlight />,
 	};
 
 	const upgradeItem: GenericMenuItemProps = {

apps/meteor/client/views/omnichannel/sidebarItems.ts → apps/meteor/client/views/omnichannel/sidebarItems.tsx

@@ -1,4 +1,7 @@
+import React from 'react';
+
 import { hasPermission } from '../../../app/authorization/client';
+import { OmnichannelHighlight } from '../../../ee/client/omnichannel/components/OmnichannelHighlight';
 import { createSidebarItems } from '../../lib/createSidebarItems';
 
 export const {
@@ -11,6 +14,7 @@ export const {
 		href: '/omnichannel/current',
 		icon: 'message',
 		i18nLabel: 'Current_Chats',
+		badge: () => <OmnichannelHighlight />,
 		permissionGranted: (): boolean => hasPermission('view-livechat-current-chats'),
 	},
 	{

apps/meteor/ee/client/omnichannel/components/OmnichannelHighlight/index.tsx

@@ -0,0 +1,14 @@
+import { Box, Palette } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useOmnichannelHighlight } from '../../hooks/useOmnichannelHighlight';
+
+export const OmnichannelHighlight = () => {
+	const { isHighlit } = useOmnichannelHighlight();
+
+	if (!isHighlit) {
+		return null;
+	}
+
+	return <Box width={8} height={8} borderRadius='50%' backgroundColor={Palette.badge['badge-background-level-4'].toString()} />;
+};

apps/meteor/ee/client/omnichannel/hooks/useCurrentChatsHighlight.ts

@@ -0,0 +1,29 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import { useIsOverMacLimit } from '../../../../client/hooks/omnichannel/useIsOverMacLimit';
+
+export const useCurrentChatsHighlight = () => {
+	const isOverMacLimit = useIsOverMacLimit();
+	const [isHighlit, setHighlight] = useLocalStorage<boolean>('omnichannel-current-chats-highlight', isOverMacLimit);
+	const router = useRouter();
+
+	useEffect(() => {
+		if (!isHighlit) {
+			return;
+		}
+
+		return router.subscribeToRouteChange(() => {
+			if (router.getRouteName() !== 'omnichannel-current-chats') {
+				return;
+			}
+
+			setHighlight(false);
+		});
+	}, [isHighlit, router, setHighlight]);
+
+	return {
+		isHighlit,
+	};
+};

apps/meteor/ee/client/omnichannel/hooks/useOmnichannelHighlight.tsx

@@ -0,0 +1,7 @@
+import { useCurrentChatsHighlight } from './useCurrentChatsHighlight';
+
+export const useOmnichannelHighlight = () => {
+	const { isHighlit } = useCurrentChatsHighlight();
+
+	return { isHighlit };
+};