Further improve replies

res/css/views/elements/_ReplyChain.pcss

@@ -16,50 +16,50 @@ limitations under the License.
 
 .mx_ReplyChain {
     margin: 0 0 $spacing-8 0;
-    padding: 0 10px; /* TODO: Use a spacing variable */
-    border-left: 2px solid $accent;
-    border-radius: 2px;
+    padding-left: 10px; // TODO: Use a spacing variable
+    border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
+    border-radius: 2px; // TODO: Use a spacing variable
 
     .mx_ReplyChain_show {
-        &.mx_AccessibleButton_kind_link_inline {
-            color: unset;
-            white-space: nowrap; /* Enforce 'In reply to' to be a single line */
+        @mixin ButtonResetDefault;
 
-            &:hover {
-                color: $links;
-            }
+        cursor: pointer;
+        color: var(--username-color);
+
+        &:hover {
+            opacity: 0.65;
         }
     }
 
     &.mx_ReplyChain_color1 {
-        border-left-color: $username-variant1-color;
+        --username-color: $username-variant1-color;
     }
 
     &.mx_ReplyChain_color2 {
-        border-left-color: $username-variant2-color;
+        --username-color: $username-variant2-color;
     }
 
     &.mx_ReplyChain_color3 {
-        border-left-color: $username-variant3-color;
+        --username-color: $username-variant3-color;
     }
 
     &.mx_ReplyChain_color4 {
-        border-left-color: $username-variant4-color;
+        --username-color: $username-variant4-color;
     }
 
     &.mx_ReplyChain_color5 {
-        border-left-color: $username-variant5-color;
+        --username-color: $username-variant5-color;
     }
 
     &.mx_ReplyChain_color6 {
-        border-left-color: $username-variant6-color;
+        --username-color: $username-variant6-color;
     }
 
     &.mx_ReplyChain_color7 {
-        border-left-color: $username-variant7-color;
+        --username-color: $username-variant7-color;
     }
 
     &.mx_ReplyChain_color8 {
-        border-left-color: $username-variant8-color;
+        --username-color: $username-variant8-color;
     }
 }

res/css/views/rooms/_ReplyTile.pcss

@@ -27,21 +27,20 @@ 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-content;
+        color: $tertiary-content;
+        gap: 4px;
+
+        &:hover {
+            color: $primary-content;
+        }
+    }
+
+    .mx_RedactedBody {
+        line-height: $font-18px;
     }
 
     .mx_RedactedBody,
@@ -52,13 +51,14 @@ limitations under the License.
         &::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-18px;
 
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -70,8 +70,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,7 +101,26 @@ limitations under the License.
         padding-top: 0;
     }
 
-    .mx_DisambiguatedProfile {
-        line-height: $font-17px;
+    .mx_ReplyTile_sender {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .mx_DisambiguatedProfile {
+            font-size: $font-14px;
+
+            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/ReplyChain.tsx

@@ -24,15 +24,13 @@ import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
-import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import SettingsStore from "../../../settings/SettingsStore";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { Layout } from "../../../settings/enums/Layout";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { Action } from "../../../dispatcher/actions";
 import Spinner from './Spinner';
 import ReplyTile from "../rooms/ReplyTile";
-import Pill, { PillType } from './Pill';
-import AccessibleButton, { ButtonEvent } from './AccessibleButton';
+import { ButtonEvent } from './AccessibleButton';
 import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
 import RoomContext from "../../../contexts/RoomContext";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -201,7 +199,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
         return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyChain");
     }
 
-    render() {
+    public render(): JSX.Element {
         let header = null;
         if (this.state.err) {
             header = <blockquote className="mx_ReplyChain mx_ReplyChain_error">
@@ -211,41 +209,19 @@ export default class ReplyChain extends React.Component<IProps, IState> {
                 }
             </blockquote>;
         } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0])) {
-            const ev = this.state.loadedEv;
-            const room = this.matrixClient.getRoom(ev.getRoomId());
-            header = <blockquote className={`mx_ReplyChain ${this.getReplyChainColorClass(ev)}`}>
-                {
-                    _t('<a>In reply to</a> <pill>', {}, {
-                        'a': (sub) => (
-                            <AccessibleButton
-                                kind="link_inline"
-                                className="mx_ReplyChain_show"
-                                onClick={this.onQuoteClick}
-                            >
-                                { sub }
-                            </AccessibleButton>
-                        ),
-                        'pill': (
-                            <Pill
-                                type={PillType.UserMention}
-                                room={room}
-                                url={makeUserPermalink(ev.getSender())}
-                                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-                            />
-                        ),
-                    })
-                }
-            </blockquote>;
+            header = (
+                <blockquote className={`mx_ReplyChain ${this.getReplyChainColorClass(this.state.loadedEv)}`}>
+                    <button className="mx_ReplyChain_show" onClick={this.onQuoteClick}>
+                        { _t("Expand replies") }
+                    </button>
+                </blockquote>
+            );
         } else if (this.props.forExport) {
             const eventId = getParentEventId(this.props.parentEv);
             header = <p className="mx_ReplyChain_Export">
-                { _t("In reply to <a>this message</a>",
-                    {},
-                    { a: (sub) => (
-                        <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { sub } </a>
-                    ),
-                    })
-                }
+                <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>
+                    { _t("Expand replies") }
+                </a>
             </p>;
         } else if (this.state.loading) {
             header = <Spinner w={16} h={16} />;

src/components/views/messages/MImageReplyBody.tsx

@@ -15,13 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import MImageBody from "./MImageBody";
-import { presentableTextForFile } from "../../../utils/FileUtils";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
-import SenderProfile from "./SenderProfile";
-import { _t } from "../../../languageHandler";
 
 const FORCED_IMAGE_HEIGHT = 44;
 
@@ -34,34 +30,16 @@ 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);
-    }
-
-    protected getBanner(content: IMediaEventContent): JSX.Element {
-        return null; // we don't need a banner, nor have space for one
-    }
-
     render() {
         if (this.state.error) {
             return super.render();
         }
 
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
         const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT);
-        const fileBody = this.getFileBody();
-        const sender = <SenderProfile
-            mxEvent={this.props.mxEvent}
-        />;
 
         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

@@ -30,6 +30,7 @@ import MImageReplyBody from "../messages/MImageReplyBody";
 import { isVoiceMessage } from '../../../utils/EventUtils';
 import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
 import MFileBody from "../messages/MFileBody";
+import MemberAvatar from '../avatars/MemberAvatar';
 import MVoiceMessageBody from "../messages/MVoiceMessageBody";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { renderReplyTile } from "../../../events/EventTileFactory";
@@ -108,7 +109,7 @@ 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 evType = mxEvent.getType();
 
         const {
             hasRenderer, isInfoMessage, isSeeingThroughMessageHiddenForModeration,
@@ -135,17 +136,21 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         }
 
         let sender;
-        const needsSenderProfile = (
-            !isInfoMessage
-            && msgType !== MsgType.Image
-            && evType !== EventType.Sticker
-            && evType !== EventType.RoomCreate
-        );
-
-        if (needsSenderProfile) {
-            sender = <SenderProfile
-                mxEvent={mxEvent}
-            />;
+        const hasOwnSender = isInfoMessage || evType === EventType.RoomCreate;
+        if (!hasOwnSender) {
+            sender = (
+                <div className="mx_ReplyTile_sender">
+                    <MemberAvatar
+                        member={mxEvent.sender}
+                        fallbackUserId={mxEvent.getSender()}
+                        width={14}
+                        height={14}
+                    />
+                    <SenderProfile
+                        mxEvent={mxEvent}
+                    />
+                </div>
+            );
         }
 
         const msgtypeOverrides: Record<string, typeof React.Component> = {

src/i18n/strings/en_EN.json

@@ -2459,8 +2459,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>",
-    "In reply to <a>this message</a>": "In reply to <a>this message</a>",
+    "Expand replies": "Expand replies",
     "Room address": "Room address",
     "e.g. my-room": "e.g. my-room",
     "Missing domain separator e.g. (:domain.org)": "Missing domain separator e.g. (:domain.org)",