Regression: Fix threads badge color indicators

app/discussion/client/public/stylesheets/discussion.css

@@ -7,17 +7,26 @@
 	flex-wrap: wrap;
 }
 
-.discussion-reply-lm {
-	padding: 4px 8px;
+.discussion-reply-lm,
+.reply-counter {
+	padding: 4px;
 
 	color: var(--color-gray);
 
 	font-size: 12px;
+	font-style: italic;
 
 	flex-grow: 0;
 	flex-shrink: 0;
 }
 
+.reply-counter {
+	color: var(--color-dark-light);
+
+	font-weight: 600;
+	margin-inline-start: 4px;
+}
+
 .discussions-list .load-more {
 	text-align: center;
 	text-transform: lowercase;

app/models/server/models/Subscriptions.js

@@ -1365,16 +1365,19 @@ export class Subscriptions extends Base {
 	// //////////////////////////////////////////////////////////////////
 	// threads
 
-	addUnreadThreadByRoomIdAndUserIds(rid, users, tmid) {
+	addUnreadThreadByRoomIdAndUserIds(rid, users, tmid, { groupMention = false, userMention = false } = {}) {
 		if (!users) {
 			return;
 		}
+
 		return this.update({
 			'u._id': { $in: users },
 			rid,
 		}, {
 			$addToSet: {
 				tunread: tmid,
+				...groupMention && { tunreadGroup: tmid },
+				...userMention && { tunreadUser: tmid },
 			},
 		}, { multi: true });
 	}
@@ -1386,6 +1389,8 @@ export class Subscriptions extends Base {
 		}, {
 			$pull: {
 				tunread: tmid,
+				tunreadGroup: tmid,
+				tunreadUser: tmid,
 			},
 		});
 	}

app/theme/client/imports/components/header.css

@@ -18,13 +18,21 @@
 
 		color: white;
 		border-radius: calc(4 * var(--badge-font-size));
-		background: var(--rc-color-button-primary);
+		background-color: var(--rc-color-button-primary);
 		box-shadow: 0 0 0 2px #ffffff;
 
 		font-size: var(--badge-font-size);
 		font-weight: 600;
 		align-items: center;
 		justify-content: center;
+
+		&--user-mentions {
+			background-color: var(--badge-user-mentions-background);
+		}
+
+		&--group-mentions {
+			background-color: var(--badge-group-mentions-background);
+		}
 	}
 
 	&__first-icon {

app/theme/client/imports/components/sidebar/sidebar-item.css

@@ -101,8 +101,8 @@
 		background-color: var(--sidebar-item-active-background);
 	}
 
-	&--unread,
-	&--mention {
+	&--unread &__message-top,
+	&--mention &__message-top {
 		color: var(--sidebar-item-unread-color);
 
 		font-weight: var(--sidebar-item-unread-font-weight);
@@ -274,6 +274,12 @@
 
 		font-size: 12px;
 		line-height: normal;
+
+		&--unread {
+			color: var(--sidebar-item-unread-color);
+
+			font-weight: var(--sidebar-item-unread-font-weight);
+		}
 	}
 
 	&__time {

app/threads/client/components/ThreadList.js

@@ -14,7 +14,7 @@ import RawText from '../../../../client/components/basic/RawText';
 import { useRoute } from '../../../../client/contexts/RouterContext';
 import { roomTypes } from '../../../utils/client';
 import { call, renderMessageBody } from '../../../ui-utils/client';
-import { useUserId, useUser } from '../../../../client/contexts/UserContext';
+import { useUserId } from '../../../../client/contexts/UserContext';
 import { Messages } from '../../../models/client';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../../client/hooks/useEndpointDataExperimental';
 import { getConfig } from '../../../ui-utils/client/config';
@@ -51,7 +51,7 @@ const LIST_SIZE = parseInt(getConfig('threadsListSize')) || 25;
 
 const filterProps = ({ msg, u, replies, mentions, tcount, ts, _id, tlm, attachments }) => ({ ..._id && { _id }, attachments, mentions, msg, u, replies, tcount, ts: new Date(ts), tlm: new Date(tlm) });
 
-const subscriptionFields = { tunread: 1 };
+const subscriptionFields = { tunread: 1, tunreadUser: 1, tunreadGroup: 1 };
 const roomFields = { t: 1, name: 1 };
 
 export function withData(WrappedComponent) {
@@ -128,7 +128,9 @@ export function withData(WrappedComponent) {
 
 		return <WrappedComponent
 			{...props}
-			unread={subscription && subscription.tunread}
+			unread={subscription?.tunread}
+			unreadUser={subscription?.tunreadUser}
+			unreadGroup={subscription?.tunreadGroup}
 			userId={userId}
 			error={error}
 			threads={threads}
@@ -168,14 +170,12 @@ export const normalizeThreadMessage = ({ ...message }) => {
 	}
 };
 
-export function ThreadList({ total = 10, threads = [], room, unread = [], type, setType, loadMoreItems, loading, onClose, error, userId, text, setText }) {
+export function ThreadList({ total = 10, threads = [], room, unread = [], unreadUser = [], unreadGroup = [], type, setType, loadMoreItems, loading, onClose, error, userId, text, setText }) {
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const threadsRef = useRef();
 
 	const t = useTranslation();
 
-	const user = useUser();
-
 	const channelRoute = useRoute(roomTypes.getConfig(room.t).route.name);
 
 	const onClick = useCallback((e) => {
@@ -209,16 +209,16 @@ export function ThreadList({ total = 10, threads = [], room, unread = [], type,
 			username={ thread.u.username }
 			style={style}
 			unread={unread.includes(thread._id)}
-			mention={thread.mentions && thread.mentions.includes(user.username)}
-			all={thread.mentions && thread.mentions.includes('all')}
+			mention={unreadUser.includes(thread._id)}
+			all={unreadGroup.includes(thread._id)}
 			following={thread.replies && thread.replies.includes(userId)}
 			data-id={thread._id}
 			msg={msg}
 			t={t}
 			formatDate={formatDate}
 			handleFollowButton={handleFollowButton} onClick={onClick}
 		/>;
-	}), [unread, showRealNames]);
+	}), [unread, unreadUser, unreadGroup, showRealNames]);
 
 	const isItemLoaded = useCallback((index) => index < threadsRef.current.length, []);
 	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 750 } = {} } = useResizeObserver();

app/threads/client/components/ThreadListMessage.js

@@ -67,7 +67,7 @@ export default function ThreadListMessage({ _id, msg, following, username, name,
 			</Box>
 		</Container>
 		<Container alignItems='center'>
-			<Button rcx-contextual-message__follow small square flexShrink={0} ghost data-following={following} data-id={_id} onClick={handleFollowButton} aria-label={actionLabel}><Icon name={button} size='x20'/></Button>
+			<Button rcx-contextual-message__follow small square flexShrink={0} ghost data-following={following} data-id={_id} onClick={handleFollowButton} title={actionLabel} aria-label={actionLabel}><Icon name={button} size='x20'/></Button>
 			{
 				(mention && <NotificationStatusMe t={t} mb='x24'/>)
 				|| (all && <NotificationStatusAll t={t} mb='x24'/>)

app/threads/client/components/hooks/useLocalstorage.js

@@ -32,7 +32,7 @@ export function useLocalStorage(key, initialValue) {
 		}
 		window.addEventListener('storage', handleEvent);
 		return () => window.removeEventListener('storage', handleEvent);
-	}, []);
+	}, [key]);
 
 	return [storedValue, setValue];
 }

app/threads/client/flextab/threadlist.js

@@ -13,10 +13,24 @@ Meteor.startup(function() {
 		icon: 'thread',
 		template: 'threads',
 		badge: () => {
-			const subscription = Subscriptions.findOne({ rid: Session.get('openedRoom') }, { fields: { tunread: 1 } });
-			if (subscription) {
-				return subscription.tunread && subscription.tunread.length && { body: subscription.tunread.length > 99 ? '99+' : subscription.tunread.length };
+			const subscription = Subscriptions.findOne({ rid: Session.get('openedRoom') }, { fields: { tunread: 1, tunreadUser: 1, tunreadGroup: 1 } });
+			if (!subscription?.tunread?.length) {
+				return;
 			}
+
+			const badgeClass = (() => {
+				if (subscription.tunreadUser?.length > 0) {
+					return 'rc-badge--user-mentions';
+				}
+				if (subscription.tunreadGroup?.length > 0) {
+					return 'rc-badge--group-mentions';
+				}
+			})();
+
+			return {
+				body: subscription.tunread.length > 99 ? '99+' : subscription.tunread.length,
+				class: badgeClass,
+			};
 		},
 		order: 2,
 	});

app/threads/client/threads.css

@@ -75,6 +75,15 @@
 		flex-flow: row nowrap;
 	}
 
+	&:hover,
+	&:focus {
+		.thread-icons {
+			&--bell-off {
+				opacity: 1;
+			}
+		}
+	}
+
 	.thread-icons {
 		display: block;
 		flex: 0 0 20px;
@@ -90,13 +99,21 @@
 			color: var(--rc-color-alert-message-primary);
 		}
 
+		&--bell-off {
+			opacity: 0;
+		}
+
 		&--bell,
 		&--bell-off {
 			cursor: pointer;
 
-			color: #a0a0a0;
+			color: #6c727a;
+
+			font-size: 1.25rem;
+		}
 
-			font-size: 1rem;
+		&--large {
+			font-size: 1.25rem;
 		}
 	}
 
@@ -108,6 +125,13 @@
 		font-size: 12px;
 
 		align-items: center;
+
+		.thread-icons {
+			&--bell,
+			&--bell-off {
+				font-size: 1rem;
+			}
+		}
 	}
 
 	.thread-quote__message {

app/threads/server/functions.js

@@ -7,7 +7,7 @@ export const reply = ({ tmid }, message, parentMessage, followers) => {
 		return false;
 	}
 
-	const { mentionIds } = getMentions(message);
+	const { toAll, toHere, mentionIds } = getMentions(message);
 
 	const addToReplies = [
 		...new Set([
@@ -21,8 +21,19 @@ export const reply = ({ tmid }, message, parentMessage, followers) => {
 
 	const replies = Messages.getThreadFollowsByThreadId(tmid);
 
-	// doesnt need to update the sender (u._id) subscription, so filter it
-	Subscriptions.addUnreadThreadByRoomIdAndUserIds(rid, replies.filter((userId) => userId !== u._id), tmid);
+	const repliesFiltered = replies
+		.filter((userId) => userId !== u._id)
+		.filter((userId) => !mentionIds.includes(userId));
+
+	if (toAll || toHere) {
+		Subscriptions.addUnreadThreadByRoomIdAndUserIds(rid, repliesFiltered, tmid, { groupMention: true });
+	} else {
+		Subscriptions.addUnreadThreadByRoomIdAndUserIds(rid, repliesFiltered, tmid);
+	}
+
+	mentionIds.forEach((mentionId) =>
+		Subscriptions.addUnreadThreadByRoomIdAndUserIds(rid, [mentionId], tmid, { userMention: true }),
+	);
 };
 
 export const undoReply = ({ tmid }) => {

app/ui-flextab/client/flexTabBar.html

@@ -45,9 +45,9 @@ <h1 class="contextual-bar__header-title">{{_ label}}</h1>
 	<div class="rc-room-actions">
 		{{#each buttons}}
 		<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-action" data-id="{{id}}">
-			{{#if badge}}
-				<span class="rc-badge">{{badge.body}}</span>
-			{{/if}}
+			{{#with badge}}
+				<span class="rc-badge {{class}}">{{body}}</span>
+			{{/with}}
 			<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button" aria-label="{{title}}">
 				{{> icon block="tab-button-icon" icon=icon }}
 			</button>

app/ui-message/client/message.html

@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message {{ignoredClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}">
+	<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message {{className}} {{ignoredClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}">
 		{{#if isThreadReply}}
 			{{> messageThread parentMessage=parentMessage msg=msg tmid=msg.tmid class=bodyClass following=msg.following}}
 			<div class="thread-replied js-open-thread">
@@ -139,16 +139,25 @@
 					{{/if}}
 				</div>
 			{{/if}}
-
 			{{#if $and settings.showReplyButton msg.tcount}}
 				<div class="message-discussion">
 					<button class="js-open-thread rc-button rc-button--primary rc-button--small" data-rid={{roomId}}>
 						{{> icon icon="thread"}}
-						<span>{{{_ 'reply_counter' counter=i18nReplyCounter count=msg.tcount }}}</span>
+						{{_ 'Reply'}}
 					</button>
+					<span class='reply-counter'>{{_ i18nReplyCounter counter=msg.tcount }}</span>
 					<span class="discussion-reply-lm">{{ formatDateAndTime msg.tlm}}</span>
 					{{# if unread }}
-						<div aria-label="{{_ 'Unread' }}" class="rc-tooltip message-unread"></div>
+						<div aria-label="{{_ 'Unread' }}" class="rc-tooltip message-unread {{class}}"></div>
+					{{/if}}
+					{{# if following }}
+					<div role="button" class="rc-tooltip js-unfollow-thread" aria-label="{{_ "Following"}}">
+						{{> icon icon="bell" block="thread-icons"}}
+					</div>
+					{{else}}
+					<div role="button" class="rc-tooltip js-follow-thread" aria-label="{{_ "Not_following"}}">
+						{{> icon icon="bell-off" block="thread-icons"}}
+					</div>
 					{{/if}}
 				</div>
 			{{/if}}