Display messages with a highlight differently

components/app.js

@@ -274,6 +274,8 @@ export default class App extends Component {
 		msg.key = messagesCount;
 		messagesCount++;
 
+		msg.isHighlight = irc.isHighlight(msg, this.client.nick);
+
 		if (!msg.tags) {
 			msg.tags = {};
 		}
@@ -291,7 +293,7 @@ export default class App extends Component {
 			var text = msg.params[1];
 
 			var kind;
-			if (irc.isHighlight(msg, this.client.nick)) {
+			if (msg.isHighlight) {
 				msgUnread = Unread.HIGHLIGHT;
 				kind = "highlight";
 			} else if (target == this.client.nick) {

components/buffer.js

@@ -70,6 +70,10 @@ class LogLine extends Component {
 				lineClass = "talk";
 				content = html`${"<"}${createNick(msg.prefix.name)}${">"} ${linkify(stripANSI(text))}`;
 			}
+
+			if (msg.isHighlight) {
+				lineClass += " highlight";
+			}
 			break;
 		case "JOIN":
 			content = html`

style.css

@@ -186,6 +186,10 @@ details summary {
 #buffer .me-tell {
 	color: #b37400;
 }
+#buffer .highlight .nick {
+	color: yellow;
+	background-color: #c700ff;
+}
 #buffer .nick-1 {
 	color: #f25e0d;
 }