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,