added read receipt support

src/app/molecules/message/TimelineChange.jsx

@@ -14,7 +14,7 @@ import InviteCancelArraowIC from '../../../../public/res/ic/outlined/invite-canc
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 
-function TimelineChange({ variant, content, time }) {
+function TimelineChange({ variant, content, time, onClick }) {
   let iconSrc;
 
   switch (variant) {
@@ -42,7 +42,7 @@ function TimelineChange({ variant, content, time }) {
   }
 
   return (
-    <div className="timeline-change">
+    <button style={{ cursor: onClick === null ? 'default' : 'pointer' }} onClick={onClick} type="button" className="timeline-change">
       <div className="timeline-change__avatar-container">
         <RawIcon src={iconSrc} size="extra-small" />
       </div>
@@ -55,12 +55,13 @@ function TimelineChange({ variant, content, time }) {
       <div className="timeline-change__time">
         <Text variant="b3">{time}</Text>
       </div>
-    </div>
+    </button>
   );
 }
 
 TimelineChange.defaultProps = {
   variant: 'other',
+  onClick: null,
 };
 
 TimelineChange.propTypes = {
@@ -74,6 +75,7 @@ TimelineChange.propTypes = {
     PropTypes.node,
   ]).isRequired,
   time: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
 };
 
 export default TimelineChange;

src/app/molecules/message/TimelineChange.scss

@@ -3,6 +3,7 @@
   padding-right: var(--sp-extra-tight);
   display: flex;
   align-items: center;
+  width: 100%;
 
   &:hover {
     background-color: var(--bg-surface-hover);

src/app/organisms/channel/ChannelViewCmdBar.jsx

@@ -15,6 +15,7 @@ import {
   openCreateChannel,
   openPublicChannels,
   openInviteUser,
+  openReadReceipts,
 } from '../../../client/action/navigation';
 import { searchEmoji } from '../emoji-board/emoji';
 
@@ -143,11 +144,13 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
     };
   }, [roomTimeline]);
 
+  const lastMEvent = roomTimeline.timeline[roomTimeline.timeline.length - 1];
   return followingMembers.length !== 0 && (
     <TimelineChange
       variant="follow"
       content={getUsersActionJsx(followingMembers, 'following the conversation.')}
       time=""
+      onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
     />
   );
 }

src/app/organisms/channel/ChannelViewContent.jsx

@@ -11,7 +11,7 @@ import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
 import { getUsername, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { diffMinutes, isNotInSameDay } from '../../../util/common';
-import { openEmojiBoard } from '../../../client/action/navigation';
+import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
 
 import Divider from '../../atoms/divider/Divider';
 import Avatar from '../../atoms/avatar/Avatar';
@@ -32,6 +32,7 @@ import TimelineChange from '../../molecules/message/TimelineChange';
 
 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
 import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 
 import { parseReply, parseTimelineChange } from './common';
@@ -321,6 +322,12 @@ function genMessage(roomId, prevMEvent, mEvent, roomTimeline, viewEvent) {
         size="extra-small"
         tooltip="Reply"
       />
+      <IconButton
+        onClick={() => openReadReceipts(roomId, mEvent.getId())}
+        src={TickMarkIC}
+        size="extra-small"
+        tooltip="Read receipts"
+      />
       {(canIRedact || mEvent.getSender() === mx.getUserId()) && (
         <IconButton
           onClick={() => {