From 531ea920e027e7211535fd904bf5614c63f3b4a6 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Sun, 19 Jul 2020 17:29:52 +0300
Subject: [PATCH] Improvements to mentions window

- Add hide all button
- Only show overflow scroll when necessary
- Fix key in v-for loop
- Increase window height if browser size allows for it
---
 client/components/Mentions.vue | 30 +++++++++++++++++++++++++++---
 src/server.js                  |  4 ++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/client/components/Mentions.vue b/client/components/Mentions.vue
index 683ca3db..b83de5d7 100644
--- a/client/components/Mentions.vue
+++ b/client/components/Mentions.vue
@@ -8,13 +8,20 @@
 		<div class="mentions-popup">
 			<div class="mentions-popup-title">
 				Recent mentions
+				<button
+					v-if="resolvedMessages.length"
+					class="btn hide-all-mentions"
+					@click="hideAllMentions()"
+				>
+					Hide all
+				</button>
 			</div>
 			<template v-if="resolvedMessages.length === 0">
 				<p v-if="isLoading">Loading…</p>
-				<p v-else>There are no recent mentions.</p>
+				<p v-else>You have no recent mentions.</p>
 			</template>
 			<template v-for="message in resolvedMessages" v-else>
-				<div :key="message.id" :class="['msg', message.type]">
+				<div :key="message.msgId" :class="['msg', message.type]">
 					<div class="mentions-info">
 						<div>
 							<span class="from">
@@ -62,12 +69,14 @@
 	right: 80px;
 	top: 55px;
 	max-height: 400px;
-	overflow-y: scroll;
+	overflow-y: auto;
 	z-index: 2;
 	padding: 10px;
 }
 
 .mentions-popup > .mentions-popup-title {
+	display: flex;
+	justify-content: space-between;
 	margin-bottom: 10px;
 	font-size: 20px;
 }
@@ -106,6 +115,17 @@
 	color: var(--link-color);
 }
 
+.mentions-popup .hide-all-mentions {
+	margin: 0;
+	padding: 4px 6px;
+}
+
+@media (min-height: 500px) {
+	.mentions-popup {
+		max-height: 60vh;
+	}
+}
+
 @media (max-width: 768px) {
 	.mentions-popup {
 		border-radius: 0;
@@ -179,6 +199,10 @@ export default {
 
 			socket.emit("mentions:hide", message.msgId);
 		},
+		hideAllMentions() {
+			this.$store.state.mentions = [];
+			socket.emit("mentions:hide_all");
+		},
 		containerClick(event) {
 			if (event.currentTarget === event.target) {
 				this.isOpen = false;
diff --git a/src/server.js b/src/server.js
index 699cabb8..acd9c0bf 100644
--- a/src/server.js
+++ b/src/server.js
@@ -548,6 +548,10 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		);
 	});
 
+	socket.on("mentions:hide_all", () => {
+		client.mentions = [];
+	});
+
 	if (!Helper.config.public) {
 		socket.on("push:register", (subscription) => {
 			if (!Object.prototype.hasOwnProperty.call(client.config.sessions, token)) {