From b6ad96da2806a4b6da5b284500c820044a870275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Forr=C3=B3?= <nforro@redhat.com>
Date: Tue, 4 Aug 2020 16:17:26 +0200
Subject: [PATCH] Highlight self-mentions in messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Nikola Forró <nforro@redhat.com>
---
 webroot/js/message.js     | 9 ++++++++-
 webroot/styles/layout.css | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/webroot/js/message.js b/webroot/js/message.js
index 91406c7ef..e000c992c 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -35,11 +35,18 @@ class Message {
 				target: '_blank'
 			}
 		});
-		return addNewlines(linked);
+		const highlighted = this.highlightUsername(linked);
+		return addNewlines(highlighted);
 	}
 	userColor() {
 		return messageBubbleColorForString(this.author);
 	}
+
+	highlightUsername(message) {
+		const username = document.getElementById('self-message-author').value;
+		const pattern = new RegExp('@?' + username.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
+		return message.replace(pattern, '<span class="highlighted">$&</span>');
+	}
 }
 
 
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 0339d38de..81de24302 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -624,6 +624,11 @@ h2 {
   border-radius: 15px;
 }
 
+.message-text .highlighted {
+  color: orange;
+  font-weight: bold;
+}
+
 .message-text code {
   background-color:darkslategrey;
   padding: 3px;