add important message marker permission

.changeset/witty-dancers-count.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/core-typings': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Added important messages: permissions and a room role to mark messages as important, a composer toggle when sending, read acknowledgment (“Mark as read”), and a readers list for moderators.

apps/meteor/app/authorization/server/constant/permissions.ts

@@ -67,6 +67,7 @@ export const permissions = [
 	{ _id: 'set-owner', roles: ['admin', 'owner'] },
 	{ _id: 'send-many-messages', roles: ['admin', 'bot', 'app'] },
 	{ _id: 'set-leader', roles: ['admin', 'owner'] },
+	{ _id: 'set-important-message-marker', roles: ['admin', 'owner'] },
 	{ _id: 'start-discussion', roles: ['admin', 'user', 'federated-external', 'guest', 'app'] },
 	{ _id: 'start-discussion-other-user', roles: ['admin', 'user', 'federated-external', 'owner', 'app'] },
 	{ _id: 'unarchive-room', roles: ['admin'] },
@@ -239,4 +240,5 @@ export const permissions = [
 	{ _id: 'manage-moderation-actions', roles: ['admin'] },
 	{ _id: 'bypass-time-limit-edit-and-delete', roles: ['bot', 'app'] },
 	{ _id: 'export-messages-as-pdf', roles: ['admin', 'user'] },
+	{ _id: 'mark-message-as-important', roles: ['admin', 'owner', 'important-message-marker'] },
 ];

apps/meteor/app/lib/server/methods/sendMessage.ts

@@ -149,6 +149,7 @@ Meteor.methods<ServerMethods>({
 			federation: Match.Maybe(Object),
 			groupable: Match.Maybe(Boolean),
 			sentByEmail: Match.Maybe(Boolean),
+			isImportant: Match.Maybe(Boolean),
 		});
 
 		const user = (await Meteor.userAsync()) as IUser;
@@ -158,6 +159,20 @@ Meteor.methods<ServerMethods>({
 			});
 		}
 
+		if (message.isImportant) {
+			if (!message.rid) {
+				throw new Meteor.Error('error-invalid-room', 'Invalid room', {
+					method: 'sendMessage',
+				});
+			}
+
+			if (!(await hasPermissionAsync(user._id, 'mark-message-as-important', message.rid))) {
+				throw new Meteor.Error('error-not-allowed', 'Not allowed', {
+					method: 'sendMessage',
+				});
+			}
+		}
+
 		if (MessageTypes.isSystemMessage(message)) {
 			throw new Error("Cannot send system messages using 'sendMessage'");
 		}

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -84,6 +84,13 @@
 	&.highlight {
 		animation: highlight 6s;
 	}
+
+	&.rcx-message--important {
+		background-color: rgba(245, 69, 92, 0.03) !important;
+		border-left: 3px solid rgba(245, 69, 92, 0.4);
+		padding-left: 8px;
+		margin: 2px 0;
+	}
 }
 
 .page-loading {

apps/meteor/client/components/message/variants/ImportantMessageReadButton.tsx

@@ -0,0 +1,72 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { Button, Box } from '@rocket.chat/fuselage';
+import { useUserId, useMethod, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { memo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ImportantMessageReadInfo from './ImportantMessageReadInfo';
+
+type ImportantMessageReadButtonProps = {
+	message: IMessage;
+};
+
+const ImportantMessageReadButton = ({ message }: ImportantMessageReadButtonProps): ReactElement | null => {
+	const userId = useUserId();
+	const toggleImportantMessageRead = useMethod('toggleImportantMessageRead');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+	const { t } = useTranslation();
+
+	const serverIsRead = message.importantReadBy?.includes(userId || '') ?? false;
+	const [isRead, setIsRead] = useState(serverIsRead);
+
+	useEffect(() => {
+		setIsRead(serverIsRead);
+	}, [serverIsRead]);
+
+	if (!message.isImportant || !userId) {
+		return null;
+	}
+
+	const handleToggle = async () => {
+		const newState = !isRead;
+		setIsRead(newState);
+
+		try {
+			await toggleImportantMessageRead(message._id);
+
+			await queryClient.refetchQueries({
+				queryKey: ['important-message-readers', message._id],
+				type: 'active',
+			});
+		} catch (error) {
+			setIsRead(!newState);
+			dispatchToastMessage({
+				type: 'error',
+				message: error,
+			});
+		}
+	};
+
+	return (
+		<Box display='flex' alignItems='center'>
+			<Button
+				small
+				onClick={handleToggle}
+				primary={!isRead}
+				mis='x8'
+				mbs='x4'
+				style={{ width: 'fit-content', minWidth: 'auto' }}
+				data-important-message-button
+				data-important-message-controls
+			>
+				{isRead ? t('Important_message_read') : t('Important_message_mark_as_read')}
+			</Button>
+			<ImportantMessageReadInfo message={message} />
+		</Box>
+	);
+};
+
+export default memo(ImportantMessageReadButton);