From 95c1f13c6bfb32f85ac11bb22ae8135e39261b56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Mon, 16 Oct 2023 14:25:30 -0300
Subject: [PATCH] feat: add tooltip to badge mentions (#30590)

---
 .../RoomList/SideBarItemTemplateWithData.tsx  | 28 ++++++++++++++++++-
 .../rocketchat-i18n/i18n/en.i18n.json         |  8 ++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
index b96c54d4c955d..f275ff2800d82 100644
--- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
+++ b/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>
 			)}
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 18c88bfb8b0cd..268818d588706 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -6089,6 +6089,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"
 }
\ No newline at end of file