Polish UI

res/css/views/messages/_MessageActionBar.scss

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

res/css/views/rooms/_EventTile.scss

@@ -676,6 +676,10 @@ $hover-select-border: 4px;
 }
 
 
+.mx_ThreadInfo:hover {
+    cursor: pointer;
+}
+
 .mx_ThreadView {
 
     display: flex;

src/components/structures/ThreadView.tsx

@@ -30,6 +30,8 @@ import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { Layout } from '../../settings/Layout';
 import TimelinePanel from './TimelinePanel';
 import { Thread } from '../../../../matrix-js-sdk/src/models/thread';
+import dis from "../../dispatcher/dispatcher";
+import { ActionPayload } from '../../dispatcher/payloads';
 
 interface IProps {
     roomId: string;
@@ -49,32 +51,61 @@ interface IState {
  */
 @replaceableComponent("structures.ThreadView")
 class ThreadView extends React.Component<IProps, IState> {
-    state = {};
+    private dispatcherRef: string;
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {};
+    }
 
     public componentDidMount(): void {
-        this.setupThread();
+        this.setupThread(this.props.mxEvent);
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     public componentWillUnmount(): void {
+        this.teardownThread();
+        dis.unregister(this.dispatcherRef);
+    }
+
+    public componentDidUpdate(prevProps) {
+        if (prevProps.mxEvent !== this.props.mxEvent) {
+            this.teardownThread();
+            this.setupThread(this.props.mxEvent);
+        }
+    }
+
+    private onAction = (payload: ActionPayload): void => {
+        if (payload.phase == RightPanelPhases.ThreadView && payload.event) {
+            if (payload.event !== this.props.mxEvent) {
+                this.teardownThread();
+                this.setupThread(payload.event);
+            }
+        }
+    };
+
+    setupThread = (mxEv: MatrixEvent) => {
+        const thread = mxEv.getThread();
+        if (thread) {
+            thread.on("Thread.update", this.updateThread);
+            thread.once("Thread.ready", this.updateThread);
+            this.updateThread(thread);
+        }
+    };
+
+    teardownThread = () => {
         if (this.state.thread) {
             this.state.thread.removeListener("Thread.update", this.updateThread);
             this.state.thread.removeListener("Thread.ready", this.updateThread);
         }
-    }
-
-    setupThread = () => {
-        const thread = this.props.mxEvent.getThread();
-        if (thread) {
-            thread.on("Thread.update", this.updateThread);
-            thread.once("Thread.ready", this.updateThread);
-            this.updateThread();
-        }
     };
 
-    updateThread = () => {
+    updateThread = (thread?: Thread) => {
-        this.setState({
+        if (thread) {
-            thread: this.props.mxEvent.getThread(),
+            this.setState({ thread });
-        });
+        } else {
+            this.forceUpdate();
+        }
     };
 
     public renderEventTile(event: MatrixEvent): JSX.Element {
@@ -89,7 +120,6 @@ class ThreadView extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const thread = this.props.mxEvent.getThread();
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         return (
             <BaseCard
@@ -98,21 +128,23 @@ class ThreadView extends React.Component<IProps, IState> {
                 previousPhase={RightPanelPhases.RoomSummary}
                 withoutScrollContainer={true}
             >
-                <TimelinePanel
+                { this.state.thread && (
-                    manageReadReceipts={false}
+                    <TimelinePanel
-                    manageReadMarkers={false}
+                        manageReadReceipts={false}
-                    timelineSet={thread.timelineSet}
+                        manageReadMarkers={false}
-                    showUrlPreview={false}
+                        timelineSet={this.state?.thread?.timelineSet}
-                    tileShape={TileShape.Notif}
+                        showUrlPreview={false}
-                    empty={<div>empty</div>}
+                        tileShape={TileShape.Notif}
-                    alwaysShowTimestamps={true}
+                        empty={<div>empty</div>}
-                    layout={Layout.Group}
+                        alwaysShowTimestamps={true}
-                    hideThreadedMessages={false}
+                        layout={Layout.Group}
-                />
+                        hideThreadedMessages={false}
+                    />
+                ) }
                 <MessageComposer
                     room={room}
                     resizeNotifier={this.props.resizeNotifier}
-                    replyToEvent={thread?.replyToEvent}
+                    replyToEvent={this.state?.thread?.replyToEvent}
                     showReplyPreview={false}
                     permalinkCreator={this.props.permalinkCreator}
                     compact={true}

src/components/views/rooms/EventTile.tsx

@@ -531,6 +531,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         return (
             <div
+                className="mx_ThreadInfo"
                 onClick={() => {
                     dis.dispatch({
                         action: Action.SetRightPanelPhase,
@@ -544,7 +545,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                 <span className="mx_EventListSummary_avatars">
                     { avatars }
                 </span>
-                { thread.length } { thread.length === 1 ? 'reply' : 'replies' }
+                { thread.length - 1 } { thread.length === 2 ? 'reply' : 'replies' }
             </div>
         );
     }