FEATURE: Diffrentiate between group + individual mentions (#10691)

FEATURE: Diffrentiate between group + individual mentions (#10691)

  • FEATURE: Diffrentiate between group + individual mentions

This commit adds the necessary code for Discorse core to differentiate between group + individual mentions in the notification user panel and notification page.

It changes the group mention icon from at to users as well as adds context as to which group was mentioned in the topic.

diff --git a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js
index bfa4fa6..376fbce 100644
--- a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js
+++ b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js
@@ -19,7 +19,7 @@ const REPLACEMENTS = {
   "d-unliked": "far-heart",
   "d-liked": "heart",
   "notification.mentioned": "at",
-  "notification.group_mentioned": "at",
+  "notification.group_mentioned": "users",
   "notification.quoted": "quote-right",
   "notification.replied": "reply",
   "notification.posted": "reply",
diff --git a/app/assets/javascripts/discourse/app/widgets/default-notification-item.js b/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
index f533d52..6613dca 100644
--- a/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
+++ b/app/assets/javascripts/discourse/app/widgets/default-notification-item.js
@@ -67,6 +67,17 @@ export const DefaultNotificationItem = createWidget(
         return escapeExpression(badgeName);
       }
 
+      const groupName = data.group_name;
+
+      if (groupName) {
+        if (this.attrs.fancy_title) {
+          if (this.attrs.topic_id) {
+            return `<span class="mention-group notify">@${groupName}</span><span data-topic-id="${this.attrs.topic_id}"> ${this.attrs.fancy_title}</span>`;
+          }
+          return `<span class="mention-group notify">@${groupName}</span> ${this.attrs.fancy_title}`;
+        }
+      }
+
       if (this.attrs.fancy_title) {
         if (this.attrs.topic_id) {
           return `<span data-topic-id="${this.attrs.topic_id}">${this.attrs.fancy_title}</span>`;
@@ -81,7 +92,7 @@ export const DefaultNotificationItem = createWidget(
 
     text(notificationName, data) {
       const username = formatUsername(data.display_username);
-      const description = this.description(data);
+      const description = this.description(data, notificationName);
 
       return I18n.t(`notifications.${notificationName}`, {
         description,
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index c53d771..642bf25 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -2,6 +2,15 @@
 // To style group content differently, use the existing classes with a .group parent class.
 // For example: .group .user-secondary-navigation
 
+span.mention-group {
+  color: var(--primary-high-or-secondary-low);
+  padding: 2px 4px;
+  background: rgba(var(--primary-rgb), 0.12);
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: $font-down-1;
+}
+
 .group-details-container {
   background: var(--primary-very-low);
   padding: 20px;

GitHub sha: 931d8725

1 Like

This commit appears in #10691 which was approved by eviltrout. It was merged by jordanvidrine.

That’s so much better :+1:

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/better-group-message-notification-visual-differentiation/43346/8