Merge pull request #3875 from thelounge/xpaw/statusmsg-ui

Add an indicator to statusmsg messages

client/components/Message.vue

@@ -65,6 +65,12 @@
 					class="msg-shown-in-active tooltipped tooltipped-e"
 					><span></span
 				></span>
+				<span
+					v-if="message.statusmsgGroup"
+					:aria-label="`This message was only shown to users with ${message.statusmsgGroup} mode`"
+					class="msg-statusmsg tooltipped tooltipped-e"
+					><span>{{ message.statusmsgGroup }}</span></span
+				>
 				<ParsedMessage :network="network" :message="message" />
 				<LinkPreview
 					v-for="preview in message.previews"

client/css/style.css

@@ -311,6 +311,7 @@ p {
 #chat .msg[data-type="action"] .from::before,
 #chat .msg[data-type="plugin"] .from::before,
 #chat .msg[data-type="raw"] .from::before,
+#chat .msg-statusmsg span::before,
 #chat .msg-shown-in-active span::before,
 #chat .toggle-button::after,
 #chat .toggle-content .more-caret::before,
@@ -477,16 +478,25 @@ p {
 	padding: 1px;
 }
 
+#chat .msg-statusmsg,
 #chat .msg-shown-in-active {
 	cursor: help;
 	margin-right: 5px;
 }
 
+#chat .msg-statusmsg span::before,
 #chat .msg-shown-in-active span::before {
 	font-size: 10px;
 	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
 }
 
+#chat .msg-statusmsg {
+	border-radius: 2px;
+	padding: 2px 4px;
+	background-color: #ff9e18;
+	color: #222;
+}
+
 #chat .toggle-button {
 	display: inline-block;
 	transition: opacity 0.2s, transform 0.2s;

src/plugins/irc-events/message.js

@@ -126,6 +126,10 @@ module.exports = function (irc, network) {
 			}
 		}
 
+		if (data.group) {
+			msg.statusmsgGroup = data.group;
+		}
+
 		let match;
 
 		while ((match = nickRegExp.exec(data.message))) {