Create ThreadView phase in RightPanel

res/css/views/messages/_MessageActionBar.scss

@@ -92,6 +92,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
 }
 
+.mx_MessageActionBar_threadButton::after {
+    mask-image: url('$(res)/img/element-icons/room/files.svg');
+}
+
 .mx_MessageActionBar_editButton::after {
     mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

src/components/structures/RightPanel.tsx

@@ -45,6 +45,7 @@ import GroupRoomInfo from "../views/groups/GroupRoomInfo";
 import UserInfo from "../views/right_panel/UserInfo";
 import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo";
 import FilePanel from "./FilePanel";
+import ThreadView from "./ThreadView";
 import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
@@ -309,6 +310,14 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 panel = <FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />;
                 break;
 
+            case RightPanelPhases.ThreadView:
+                panel = <ThreadView
+                    roomId={roomId}
+                    resizeNotifier={this.props.resizeNotifier}
+                    onClose={this.onClose}
+                    mxEvent={this.state.event} />;
+                break;
+
             case RightPanelPhases.RoomSummary:
                 panel = <RoomSummaryCard room={this.props.room} onClose={this.onClose} />;
                 break;

src/components/structures/ThreadView.tsx

@@ -0,0 +1,90 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { MatrixEvent } from 'matrix-js-sdk/src';
+
+import BaseCard from "../views/right_panel/BaseCard";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../MatrixClientPeg';
+
+import ResizeNotifier from '../../utils/ResizeNotifier';
+import EventTile from '../views/rooms/EventTile';
+import MessageComposer from '../views/rooms/MessageComposer';
+
+interface IProps {
+    roomId: string;
+    onClose: () => void;
+    resizeNotifier: ResizeNotifier;
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+}
+
+/*
+ * Component which shows the filtered file using a TimelinePanel
+ */
+@replaceableComponent("structures.ThreadView")
+class ThreadView extends React.Component<IProps, IState> {
+    state = {};
+
+    public componentDidMount(): void {}
+
+    public componentWillUnmount(): void {}
+
+    public renderEventTile(event: MatrixEvent): JSX.Element {
+        return <EventTile
+            key={event.getId()}
+            mxEvent={event}
+            enableFlair={false}
+            showReadReceipts={false}
+            as="div"
+        />;
+    }
+
+    public render() {
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(this.props.roomId);
+        const thread = room.getThread(this.props.mxEvent.getId());
+        return (
+            <BaseCard
+                className="mx_ThreadView"
+                onClose={this.props.onClose}
+                previousPhase={RightPanelPhases.RoomSummary}
+            >
+                { this.renderEventTile(this.props.mxEvent) }
+
+                { thread && (
+                    thread.eventTimeline.map((event: MatrixEvent) => {
+                        return this.renderEventTile(event);
+                    })
+                ) }
+
+                <MessageComposer
+                    room={room}
+                    resizeNotifier={this.props.resizeNotifier}
+                    replyToEvent={this.props.mxEvent}
+                    permalinkCreator={null}
+                />
+            </BaseCard>
+        );
+    }
+}
+
+export default ThreadView;

src/components/views/messages/MessageActionBar.js

@@ -23,6 +23,8 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
+import { Action } from '../../../dispatcher/actions';
+import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
 import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
@@ -170,6 +172,17 @@ export default class MessageActionBar extends React.PureComponent {
         });
     };
 
+    onThreadClick = () => {
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.ThreadView,
+            allowClose: false,
+            refireParams: {
+                event: this.props.mxEvent,
+            }
+        });
+    }
+
     onEditClick = (ev) => {
         dis.dispatch({
             action: 'edit_event',
@@ -254,12 +267,20 @@ export default class MessageActionBar extends React.PureComponent {
                 // 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) {
-                    toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
-                        className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
-                        title={_t("Reply")}
-                        onClick={this.onReplyClick}
-                        key="reply"
-                    />);
+                    toolbarOpts.splice(0, 0, <>
+                        <RovingAccessibleTooltipButton
+                            className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
+                            title={_t("Reply")}
+                            onClick={this.onReplyClick}
+                            key="reply"
+                        />
+                        <RovingAccessibleTooltipButton
+                            className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                            title={_t("Thread")}
+                            onClick={this.onThreadClick}
+                            key="thread"
+                        />
+                    </>);
                 }
                 if (this.context.canReact) {
                     toolbarOpts.splice(0, 0, <ReactButton

src/i18n/strings/en_EN.json

@@ -1908,6 +1908,7 @@
     "React": "React",
     "Edit": "Edit",
     "Reply": "Reply",
+    "Thread": "Thread",
     "Message Actions": "Message Actions",
     "Download %(text)s": "Download %(text)s",
     "Error decrypting attachment": "Error decrypting attachment",

src/stores/RightPanelStorePhases.ts

@@ -37,6 +37,9 @@ export enum RightPanelPhases {
     SpaceMemberList = "SpaceMemberList",
     SpaceMemberInfo = "SpaceMemberInfo",
     Space3pidMemberInfo = "Space3pidMemberInfo",
+
+    // Thread stuff
+    ThreadView = "ThreadView",
 }
 
 // These are the phases that are safe to persist (the ones that don't require additional