Add MessageActionBar to ThreadView

src/components/structures/ThreadView.tsx

@@ -139,7 +139,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                         sendReadReceiptOnLoad={false} // No RR support in thread's MVP
                         timelineSet={this.state?.thread?.timelineSet}
                         showUrlPreview={true}
-                        tileShape={TileShape.Notif}
+                        tileShape={TileShape.Thread}
                         empty={<div>empty</div>}
                         alwaysShowTimestamps={true}
                         layout={Layout.Group}

src/components/views/messages/MessageActionBar.tsx

@@ -133,12 +133,17 @@ interface IMessageActionBarProps {
     getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
     getReplyThread?: () => ReplyThread;
     onFocusChange?: (menuDisplayed: boolean) => void;
+    isInThreadTimeline?: boolean;
 }
 
 @replaceableComponent("views.messages.MessageActionBar")
 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
     public static contextType = RoomContext;
 
+    public static defaultProps = {
+        isInThreadTimeline: false,
+    };
+
     public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
             this.props.mxEvent.on("Event.status", this.onSent);
@@ -283,7 +288,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // Like the resend button, the react and reply buttons need to appear before the edit.
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
-                if (this.context.canReply) {
+                if (this.context.canReply && !this.props.isInThreadTimeline) {
                     toolbarOpts.splice(0, 0, <>
                         <RovingAccessibleTooltipButton
                             className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"

src/components/views/rooms/EventTile.tsx

@@ -192,6 +192,7 @@ export enum TileShape {
     Notif = "notif",
     FileGrid = "file_grid",
     Pinned = "pinned",
+    Thread = "thread",
 }
 
 interface IProps {
@@ -1047,6 +1048,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
         }
 
+        const isInThreadTimeline = this.props.tileShape === TileShape.Thread;
         const actionBar = !isEditing ? <MessageActionBar
             mxEvent={this.props.mxEvent}
             reactions={this.state.reactions}
@@ -1054,6 +1056,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             getTile={this.getTile}
             getReplyThread={this.getReplyThread}
             onFocusChange={this.onActionBarFocusChange}
+            isInThreadTimeline={isInThreadTimeline}
         /> : undefined;
 
         const showTimestamp = this.props.mxEvent.getTs()
@@ -1160,6 +1163,40 @@ export default class EventTile extends React.Component<IProps, IState> {
                     </div>,
                 ]);
             }
+            case TileShape.Thread: {
+                const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+                return React.createElement(this.props.as || "li", {
+                    "className": classes,
+                    "aria-live": ariaLive,
+                    "aria-atomic": true,
+                    "data-scroll-tokens": scrollToken,
+                }, [
+                    <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
+                        <RoomAvatar room={room} width={28} height={28} />
+                        <a href={permalink} onClick={this.onPermalinkClicked}>
+                            { room ? room.name : '' }
+                        </a>
+                    </div>,
+                    <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
+                        { avatar }
+                        <a href={permalink} onClick={this.onPermalinkClicked}>
+                            { sender }
+                            { timestamp }
+                        </a>
+                    </div>,
+                    <div className="mx_EventTile_line" key="mx_EventTile_line">
+                        <EventTileType ref={this.tile}
+                            mxEvent={this.props.mxEvent}
+                            highlights={this.props.highlights}
+                            highlightLink={this.props.highlightLink}
+                            showUrlPreview={this.props.showUrlPreview}
+                            onHeightChanged={this.props.onHeightChanged}
+                            tileShape={this.props.tileShape}
+                        />
+                        { actionBar }
+                    </div>,
+                ]);
+            }
             case TileShape.FileGrid: {
                 return React.createElement(this.props.as || "li", {
                     "className": classes,