From 9cc44fbe988571071b340d37d1781128d6da376d Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Thu, 13 Aug 2020 11:58:36 +0200
Subject: [PATCH] Display messages with a highlight differently

---
 components/app.js    | 4 +++-
 components/buffer.js | 4 ++++
 style.css            | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/app.js b/components/app.js
index 0032d3e..55c0f87 100644
--- a/components/app.js
+++ b/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) {
diff --git a/components/buffer.js b/components/buffer.js
index 6226212..d54ba0b 100644
--- a/components/buffer.js
+++ b/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`
diff --git a/style.css b/style.css
index c1fdd5a..624a922 100644
--- a/style.css
+++ b/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;
 }