feat: add tooltip to badge mentions (#30590)

apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx

@@ -33,6 +33,30 @@ const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: ReturnTyp
 	return `${lastMessage.u.name || lastMessage.u.username}: ${normalizeSidebarMessage(lastMessage, t)}`;
 };
 
+const getBadgeTitle = (
+	userMentions: number,
+	threadUnread: number,
+	groupMentions: number,
+	unread: number,
+	t: ReturnType<typeof useTranslation>,
+) => {
+	const title = [] as string[];
+	if (userMentions) {
+		title.push(t('mentions_counter', { count: userMentions }));
+	}
+	if (threadUnread) {
+		title.push(t('threads_counter', { count: threadUnread }));
+	}
+	if (groupMentions) {
+		title.push(t('group_mentions_counter', { count: groupMentions }));
+	}
+	const count = unread - userMentions - groupMentions;
+	if (count > 0) {
+		title.push(t('unread_messages_counter', { count }));
+	}
+	return title.join(', ');
+};
+
 type RoomListRowProps = {
 	extended: boolean;
 	t: ReturnType<typeof useTranslation>;
@@ -137,10 +161,12 @@ function SideBarItemTemplateWithData({
 	const isUnread = unread > 0 || threadUnread;
 	const showBadge = !hideUnreadStatus || (!hideMentionStatus && (Boolean(userMentions) || tunreadUser.length > 0));
 
+	const badgeTitle = getBadgeTitle(userMentions, tunread.length, groupMentions, unread, t);
+
 	const badges = (
 		<Margins inlineStart={8}>
 			{showBadge && isUnread && (
-				<Badge {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant}>
+				<Badge {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
 					{unread + tunread?.length}
 				</Badge>
 			)}

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -6086,6 +6086,14 @@
   "Filter_by_room": "Filter by room type",
   "Filter_by_visibility": "Filter by visibility",
   "Theme_Appearence": "Theme Appearence",
+  "mentions_counter": "{{count}} mention",
+  "mentions_counter_plural": "{{count}} mentions",
+  "threads_counter": "{{count}} unread threaded message",
+  "threads_counter_plural": "{{count}} unread threaded messages",
+  "group_mentions_counter": "{{count}} group mention",
+  "group_mentions_counter_plural": "{{count}} group mentions",
+  "unread_messages_counter": "{{count}} unread message",
+  "unread_messages_counter_plural": "{{count}} unread messages",
   "Premium": "Premium",
   "Premium_capability": "Premium capability"
 }