Include thread replies in message previews (#10631)

* Include thread replies to message previews

* Extend tests

* Fix type issue

* Use currentColor for thread icon

* Fix long room name overflow

* Update snapshots

* Fix preview

* Fix typing issue

* Fix type issues

* Tweak thread reply detection

* Extend tests

* Fix type issue

* Fix test

src/components/views/rooms/RoomTile.tsx

@@ -27,7 +27,7 @@ import { Action } from "../../../dispatcher/actions";
 import { _t } from "../../../languageHandler";
 import { ChevronFace, ContextMenuTooltipButton, MenuProps } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
+import { MessagePreview, MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { RoomNotifState } from "../../../RoomNotifs";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -44,11 +44,11 @@ import PosthogTrackers from "../../../PosthogTrackers";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { RoomTileCallSummary } from "./RoomTileCallSummary";
 import { RoomGeneralContextMenu } from "../context_menus/RoomGeneralContextMenu";
 import { CallStore, CallStoreEvent } from "../../../stores/CallStore";
 import { SdkContextClass } from "../../../contexts/SDKContext";
-import { useHasRoomLiveVoiceBroadcast, VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
+import { useHasRoomLiveVoiceBroadcast } from "../../../voice-broadcast";
+import { RoomTileSubtitle } from "./RoomTileSubtitle";
 
 interface Props {
     room: Room;
@@ -68,7 +68,7 @@ interface State {
     notificationsMenuPosition: PartialDOMRect | null;
     generalMenuPosition: PartialDOMRect | null;
     call: Call | null;
-    messagePreview?: string;
+    messagePreview: MessagePreview | null;
 }
 
 const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;
@@ -96,7 +96,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
             generalMenuPosition: null,
             call: CallStore.instance.getCall(this.props.room.roomId),
             // generatePreview() will return nothing if the user has previews disabled
-            messagePreview: "",
+            messagePreview: null,
         };
         this.generatePreview();
 
@@ -208,7 +208,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
         }
 
         const messagePreview =
-            (await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag)) ?? undefined;
+            (await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag)) ?? null;
         this.setState({ messagePreview });
     }
 
@@ -359,6 +359,20 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
         );
     }
 
+    /**
+     * RoomTile has a subtile if one of the following applies:
+     * - there is a call
+     * - there is a live voice broadcast
+     * - message previews are enabled and there is a previewable message
+     */
+    private get shouldRenderSubtitle(): boolean {
+        return (
+            !!this.state.call ||
+            this.props.hasLiveVoiceBroadcast ||
+            (this.props.showMessagePreview && !!this.state.messagePreview)
+        );
+    }
+
     public render(): React.ReactElement {
         const classes = classNames({
             mx_RoomTile: true,
@@ -385,26 +399,15 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
             );
         }
 
-        let subtitle;
-        if (this.state.call) {
-            subtitle = (
-                <div className="mx_RoomTile_subtitle">
-                    <RoomTileCallSummary call={this.state.call} />
-                </div>
-            );
-        } else if (this.props.hasLiveVoiceBroadcast) {
-            subtitle = <VoiceBroadcastRoomSubtitle />;
-        } else if (this.showMessagePreview && this.state.messagePreview) {
-            subtitle = (
-                <div
-                    className="mx_RoomTile_subtitle"
-                    id={messagePreviewId(this.props.room.roomId)}
-                    title={this.state.messagePreview}
-                >
-                    {this.state.messagePreview}
-                </div>
-            );
-        }
+        const subtitle = this.shouldRenderSubtitle ? (
+            <RoomTileSubtitle
+                call={this.state.call}
+                hasLiveVoiceBroadcast={this.props.hasLiveVoiceBroadcast}
+                messagePreview={this.state.messagePreview}
+                roomId={this.props.room.roomId}
+                showMessagePreview={this.props.showMessagePreview}
+            />
+        ) : null;
 
         const titleClasses = classNames({
             mx_RoomTile_title: true,

src/components/views/rooms/RoomTileSubtitle.tsx

@@ -0,0 +1,71 @@
+/*
+Copyright 2023 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 classNames from "classnames";
+
+import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore";
+import { Call } from "../../../models/Call";
+import { RoomTileCallSummary } from "./RoomTileCallSummary";
+import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
+import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg";
+
+interface Props {
+    call: Call | null;
+    hasLiveVoiceBroadcast: boolean;
+    messagePreview: MessagePreview | null;
+    roomId: string;
+    showMessagePreview: boolean;
+}
+
+const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;
+
+export const RoomTileSubtitle: React.FC<Props> = ({
+    call,
+    hasLiveVoiceBroadcast,
+    messagePreview,
+    roomId,
+    showMessagePreview,
+}) => {
+    if (call) {
+        return (
+            <div className="mx_RoomTile_subtitle">
+                <RoomTileCallSummary call={call} />
+            </div>
+        );
+    }
+
+    if (hasLiveVoiceBroadcast) {
+        return <VoiceBroadcastRoomSubtitle />;
+    }
+
+    if (showMessagePreview && messagePreview) {
+        const className = classNames("mx_RoomTile_subtitle", {
+            "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
+        });
+
+        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_16" /> : null;
+
+        return (
+            <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>
+                {icon}
+                <span className="mx_RoomTile_subtitle_text">{messagePreview.text}</span>
+            </div>
+        );
+    }
+
+    return null;
+};