From 1da13f254dd3ef51d5ad4a52cc7c7ef267350d35 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Mon, 6 Feb 2023 12:37:25 -0500
Subject: [PATCH] feat: support for mark-read toggle on chats dropdown and
 recent chats list

---
 public/src/client/chats.js        |  6 ++++++
 public/src/client/chats/recent.js | 23 +++++++++++++++++++----
 public/src/modules/chat.js        | 22 +++++++++++++++++++++-
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/public/src/client/chats.js b/public/src/client/chats.js
index 3ef816eaa0..c371887151 100644
--- a/public/src/client/chats.js
+++ b/public/src/client/chats.js
@@ -490,6 +490,12 @@ define('forum/chats', [
 
 				if (roomEl.length > 0) {
 					roomEl.addClass('unread');
+
+					const markEl = roomEl.find('.mark-read').get(0);
+					if (markEl) {
+						markEl.querySelector('.read').classList.add('hidden');
+						markEl.querySelector('.unread').classList.remove('hidden');
+					}
 				} else {
 					const recentEl = components.get('chat/recent');
 					app.parseAndTranslate('partials/chats/recent_room', {
diff --git a/public/src/client/chats/recent.js b/public/src/client/chats/recent.js
index 114a1807fc..65521682bf 100644
--- a/public/src/client/chats/recent.js
+++ b/public/src/client/chats/recent.js
@@ -6,10 +6,25 @@ define('forum/chats/recent', ['alerts'], function (alerts) {
 
 	recent.init = function () {
 		require(['forum/chats'], function (Chats) {
-			$('[component="chat/recent"]').on('click', '[component="chat/recent/room"]', function () {
-				Chats.switchChat($(this).attr('data-roomid'));
-				return false;
-			});
+			$('[component="chat/recent"]')
+				.on('click', '[component="chat/recent/room"]', function (e) {
+					e.stopPropagation();
+					e.preventDefault();
+					const roomId = this.getAttribute('data-roomid');
+					Chats.switchChat(roomId);
+				})
+				.on('click', '.mark-read', function (e) {
+					e.stopPropagation();
+					const chatEl = this.closest('[data-roomid]');
+					const unread = chatEl.classList.contains('unread');
+					if (unread) {
+						const roomId = chatEl.getAttribute('data-roomid');
+						socket.emit('modules.chats.markRead', roomId);
+						chatEl.classList.remove('unread');
+						this.querySelector('.unread').classList.add('hidden');
+						this.querySelector('.read').classList.remove('hidden');
+					}
+				});
 
 			$('[component="chat/recent"]').on('scroll', function () {
 				const $this = $(this);
diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js
index 32b1d0d5a0..e4ec35c79a 100644
--- a/public/src/modules/chat.js
+++ b/public/src/modules/chat.js
@@ -104,10 +104,12 @@ define('chat', [
 				}
 				translator.toggleTimeagoShorthand();
 				app.parseAndTranslate('partials/chats/dropdown', { rooms: rooms }, function (html) {
+					const listEl = chatsListEl.get(0);
+
 					chatsListEl.find('*').not('.navigation-link').remove();
 					chatsListEl.prepend(html);
 					chatsListEl.off('click').on('click', '[data-roomid]', function (ev) {
-						if ($(ev.target).parents('.user-link').length) {
+						if (['.user-link', '.mark-read'].some(className => ev.target.closest(className))) {
 							return;
 						}
 						const roomId = $(this).attr('data-roomid');
@@ -118,6 +120,24 @@ define('chat', [
 						}
 					});
 
+					listEl.addEventListener('click', function (e) {
+						const subselector = e.target.closest('.mark-read');
+						if (!subselector) {
+							return;
+						}
+
+						e.stopPropagation();
+						const chatEl = e.target.closest('[data-roomid]');
+						const unread = chatEl.classList.contains('unread');
+						if (unread) {
+							const roomId = chatEl.getAttribute('data-roomid');
+							socket.emit('modules.chats.markRead', roomId);
+							chatEl.classList.remove('unread');
+							subselector.querySelector('.unread').classList.add('hidden');
+							subselector.querySelector('.read').classList.remove('hidden');
+						}
+					});
+
 					$('[component="chats/mark-all-read"]').off('click').on('click', function () {
 						socket.emit('modules.chats.markAllRead', function (err) {
 							if (err) {