Further improve replies

res/css/views/elements/_ReplyThread.scss

@@ -19,43 +19,48 @@ limitations under the License.
     margin-left: 0;
     margin-right: 0;
     margin-bottom: 8px;
-    padding: 0 10px;
-    border-left: 2px solid $button-bg-color;
+    padding-left: 10px;
+    border-left: 2px solid var(--username-color);
     border-radius: 2px;
 
     .mx_ReplyThread_show {
         cursor: pointer;
+        color: var(--username-color);
+
+        &:hover {
+            opacity: 0.65;
+        }
     }
 
     &.mx_ReplyThread_color1 {
-        border-left-color: $username-variant1-color;
+        --username-color: $username-variant1-color;
     }
 
     &.mx_ReplyThread_color2 {
-        border-left-color: $username-variant2-color;
+        --username-color: $username-variant2-color;
     }
 
     &.mx_ReplyThread_color3 {
-        border-left-color: $username-variant3-color;
+        --username-color: $username-variant3-color;
     }
 
     &.mx_ReplyThread_color4 {
-        border-left-color: $username-variant4-color;
+        --username-color: $username-variant4-color;
     }
 
     &.mx_ReplyThread_color5 {
-        border-left-color: $username-variant5-color;
+        --username-color: $username-variant5-color;
     }
 
     &.mx_ReplyThread_color6 {
-        border-left-color: $username-variant6-color;
+        --username-color: $username-variant6-color;
     }
 
     &.mx_ReplyThread_color7 {
-        border-left-color: $username-variant7-color;
+        --username-color: $username-variant7-color;
     }
 
     &.mx_ReplyThread_color8 {
-        border-left-color: $username-variant8-color;
+        --username-color: $username-variant8-color;
     }
 }

res/css/views/rooms/_ReplyTile.scss

@@ -28,37 +28,32 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/call/video-call.svg");
     }
 
-    .mx_MFileBody {
-        .mx_MFileBody_info {
-            margin: 5px 0;
-        }
-
-        .mx_MFileBody_download {
-            display: none;
-        }
-    }
-
     > a {
         display: flex;
         flex-direction: column;
         text-decoration: none;
-        color: $primary-fg-color;
+        color: $blockquote-fg-color;
+        gap: 4px;
+
+        &:hover {
+            color: $primary-fg-color;
+        }
     }
 
     .mx_RedactedBody {
-        padding: 4px 0 2px 20px;
+        line-height: $font-18px;
 
         &::before {
             height: 13px;
             width: 13px;
-            top: 5px;
+            top: 3px;
         }
     }
 
     // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
     .mx_EventTile_content {
         $reply-lines: 2;
-        $line-height: $font-22px;
+        $line-height: $font-18px;
 
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -71,8 +66,8 @@ limitations under the License.
             font-size: $font-14px !important; // Override the big emoji override
         }
 
-        // Hide line numbers
-        .mx_EventTile_lineNumbers {
+        // Hide line numbers and edited indicator
+        .mx_EventTile_lineNumbers, .mx_EventTile_edited {
             display: none;
         }
 
@@ -101,17 +96,26 @@ limitations under the License.
         padding-top: 0;
     }
 
-    .mx_SenderProfile {
-        font-size: $font-14px;
-        line-height: $font-17px;
+    .mx_ReplyTile_sender {
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
-        display: inline-block; // anti-zalgo, with overflow hidden
-        padding: 0;
-        margin: 0;
+        .mx_SenderProfile {
+            font-size: $font-14px;
 
-        // truncate long display names
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+            display: inline-block; // anti-zalgo, with overflow hidden
+            padding: 0;
+            margin: 0;
+
+            // truncate long display names
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .mx_BaseAvatar {
+            line-height: 14px; // To match size
+        }
     }
 }

src/components/views/elements/ReplyThread.tsx

@@ -20,7 +20,6 @@ import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -31,7 +30,6 @@ import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from './Spinner';
 import ReplyTile from "../rooms/ReplyTile";
-import Pill from './Pill';
 import { Room } from 'matrix-js-sdk/src/models/room';
 
 interface IProps {
@@ -332,23 +330,13 @@ export default class ReplyThread extends React.Component<IProps, IState> {
                 }
             </blockquote>;
         } else if (this.state.loadedEv) {
-            const ev = this.state.loadedEv;
-            const room = this.context.getRoom(ev.getRoomId());
-            header = <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`}>
-                {
-                    _t('<a>In reply to</a> <pill>', {}, {
-                        'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
-                        'pill': (
-                            <Pill
-                                type={Pill.TYPE_USER_MENTION}
-                                room={room}
-                                url={makeUserPermalink(ev.getSender())}
-                                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-                            />
-                        ),
-                    })
-                }
-            </blockquote>;
+            header = (
+                <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(this.state.loadedEv)}`}>
+                    <a className="mx_ReplyThread_show" onClick={this.onQuoteClick}>
+                        { _t("Expand thread") }
+                    </a>
+                </blockquote>
+            );
         } else if (this.state.loading) {
             header = <Spinner w={16} h={16} />;
         }

src/components/views/messages/MImageReplyBody.tsx

@@ -16,11 +16,7 @@ limitations under the License.
 
 import React from "react";
 import MImageBody from "./MImageBody";
-import { presentableTextForFile } from "../../../utils/FileUtils";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
-import SenderProfile from "./SenderProfile";
-import { EventType } from "matrix-js-sdk/src/@types/event";
-import { _t } from "../../../languageHandler";
 
 const FORCED_IMAGE_HEIGHT = 44;
 
@@ -33,12 +29,6 @@ export default class MImageReplyBody extends MImageBody {
         return children;
     }
 
-    // Don't show "Download this_file.png ..."
-    public getFileBody(): string {
-        const sticker = this.props.mxEvent.getType() === EventType.Sticker;
-        return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
-    }
-
     render() {
         if (this.state.error !== null) {
             return super.render();
@@ -48,18 +38,9 @@ export default class MImageReplyBody extends MImageBody {
 
         const contentUrl = this.getContentUrl();
         const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, FORCED_IMAGE_HEIGHT);
-        const fileBody = this.getFileBody();
-        const sender = <SenderProfile
-            mxEvent={this.props.mxEvent}
-            enableFlair={false}
-        />;
 
         return <div className="mx_MImageReplyBody">
             { thumbnail }
-            <div className="mx_MImageReplyBody_info">
-                <div className="mx_MImageReplyBody_sender">{ sender }</div>
-                <div className="mx_MImageReplyBody_filename">{ fileBody }</div>
-            </div>
         </div>;
     }
 }

src/components/views/rooms/ReplyTile.tsx

@@ -27,6 +27,7 @@ import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
 import MFileBody from "../messages/MFileBody";
+import MemberAvatar from '../avatars/MemberAvatar';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -87,7 +88,6 @@ export default class ReplyTile extends React.PureComponent<IProps> {
     render() {
         const mxEvent = this.props.mxEvent;
         const msgType = mxEvent.getContent().msgtype;
-        const evType = mxEvent.getType() as EventType;
 
         const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
         // This shouldn't happen: the caller should check we support this type
@@ -114,23 +114,27 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         }
 
         let sender;
-        const needsSenderProfile = (
-            !isInfoMessage &&
-            msgType !== MsgType.Image &&
-            tileHandler !== EventType.RoomCreate &&
-            evType !== EventType.Sticker
-        );
-
-        if (needsSenderProfile) {
-            sender = <SenderProfile
-                mxEvent={this.props.mxEvent}
-                enableFlair={false}
-            />;
+        const hasOwnSender = isInfoMessage || tileHandler === EventType.RoomCreate;
+        if (!hasOwnSender) {
+            sender = (
+                <div className="mx_ReplyTile_sender">
+                    <MemberAvatar
+                        member={this.props.mxEvent.sender}
+                        fallbackUserId={this.props.mxEvent.getSender()}
+                        width={14}
+                        height={14}
+                    />
+                    <SenderProfile
+                        mxEvent={this.props.mxEvent}
+                        enableFlair={false}
+                    />
+                </div>
+            );
         }
 
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
-            // Override audio and video body with file body. We also hide the download/decrypt button using CSS
+            // Override audio and video body with file body
             [MsgType.Audio]: MFileBody,
             [MsgType.Video]: MFileBody,
         };

src/i18n/strings/en_EN.json

@@ -1905,8 +1905,6 @@
     "Invalid file%(extra)s": "Invalid file%(extra)s",
     "Error decrypting image": "Error decrypting image",
     "Show image": "Show image",
-    "Sticker": "Sticker",
-    "Image": "Image",
     "Join the conference at the top of this room": "Join the conference at the top of this room",
     "Join the conference from the room information card on the right": "Join the conference from the room information card on the right",
     "Video conference ended by %(senderName)s": "Video conference ended by %(senderName)s",
@@ -2082,7 +2080,7 @@
     "Custom level": "Custom level",
     "QR Code": "QR Code",
     "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
-    "<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
+    "Expand thread": "Expand thread",
     "Room address": "Room address",
     "e.g. my-room": "e.g. my-room",
     "Some characters not allowed": "Some characters not allowed",