Improve Thread View UI (#7063)

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -128,7 +128,10 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
                 name="threadsButton"
                 title={_t("Threads")}
                 onClick={dispatchShowThreadsPanelEvent}
-                isHighlighted={this.isPhase(RightPanelPhases.ThreadPanel)}
+                isHighlighted={this.isPhase([
+                    RightPanelPhases.ThreadPanel,
+                    RightPanelPhases.ThreadView,
+                ])}
                 analytics={['Right Panel', 'Threads List Button', 'click']}
             /> }
             <HeaderButton

src/components/views/rooms/EventTile.tsx

@@ -1251,6 +1251,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                     "aria-atomic": true,
                     "data-scroll-tokens": scrollToken,
                     "data-has-reply": !!replyChain,
+                    "onMouseEnter": () => this.setState({ hover: true }),
+                    "onMouseLeave": () => this.setState({ hover: false }),
                 }, [
                     <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
                         <RoomAvatar room={room} width={28} height={28} />
@@ -1262,7 +1264,6 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { avatar }
                         <a href={permalink} onClick={this.onPermalinkClicked}>
                             { sender }
-                            { timestamp }
                         </a>
                     </div>,
                     <div className={lineClasses} key="mx_EventTile_line">
@@ -1278,6 +1279,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             replacingEventId={this.props.replacingEventId}
                         />
                         { actionBar }
+                        { timestamp }
                     </div>,
                     reactionsRow,
                 ]);

src/components/views/rooms/MessageComposer.tsx

@@ -640,6 +640,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             "mx_MessageComposer": true,
             "mx_GroupLayout": true,
             "mx_MessageComposer--compact": this.props.compact,
+            "mx_MessageComposer_e2eStatus": this.props.e2eStatus != undefined,
         });
 
         return (