Include thread replies to message previews

res/css/views/rooms/_RoomTile.pcss

@@ -55,13 +55,17 @@ limitations under the License.
         flex-direction: column;
         justify-content: center;
 
-        .mx_RoomTile_title,
         .mx_RoomTile_subtitle {
-            width: 100%;
+            align-items: center;
+            color: $secondary-content;
+            display: flex;
+            gap: $spacing-4;
+            line-height: $font-18px;
+        }
 
-            /* Ellipsize any text overflow */
-            text-overflow: ellipsis;
+        .mx_RoomTile_subtitle_text {
             overflow: hidden;
+            text-overflow: ellipsis;
             white-space: nowrap;
         }
 
@@ -74,11 +78,6 @@ limitations under the License.
             }
         }
 
-        .mx_RoomTile_subtitle {
-            line-height: $font-18px;
-            color: $secondary-content;
-        }
-
         .mx_RoomTile_titleWithSubtitle {
             margin-top: -3px; /* shift the title up a bit more */
         }

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();
 
@@ -358,6 +358,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,
@@ -384,26 +398,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;
+};

src/stores/room-list/MessagePreviewStore.ts

@@ -18,6 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
+import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import { ActionPayload } from "../../dispatcher/payloads";
 import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
@@ -95,6 +96,18 @@ interface IState {
     // Empty because we don't actually use the state
 }
 
+export interface MessagePreview {
+    isThreadReply: boolean;
+    text: string;
+}
+
+const mkMessagePreview = (text: string, event: MatrixEvent): MessagePreview => {
+    return {
+        text,
+        isThreadReply: !!event.getThread() && !event.isThreadRoot,
+    };
+};
+
 export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
     private static readonly internalInstance = (() => {
         const instance = new MessagePreviewStore();
@@ -103,7 +116,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
     })();
 
     // null indicates the preview is empty / irrelevant
-    private previews = new Map<string, Map<TagID | TAG_ANY, string | null>>();
+    private previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();
 
     private constructor() {
         super(defaultDispatcher, {});
@@ -123,7 +136,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
      * @param inTagId The tag ID in which the room resides
      * @returns The preview, or null if none present.
      */
-    public async getPreviewForRoom(room: Room, inTagId: TagID): Promise<string | null> {
+    public async getPreviewForRoom(room: Room, inTagId: TagID): Promise<MessagePreview | null> {
         if (!room) return null; // invalid room, just return nothing
 
         if (!this.previews.has(room.roomId)) await this.generatePreview(room, inTagId);
@@ -143,12 +156,24 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
     }
 
     private async generatePreview(room: Room, tagId?: TagID): Promise<void> {
-        const events = room.timeline;
+        const events = [...room.getLiveTimeline().getEvents()];
+
+        // add last reply from each thread
+        room.getThreads().forEach((thread: Thread): void => {
+            const lastReply = thread.lastReply();
+            if (lastReply) events.push(lastReply);
+        });
+
+        // sort events from oldest to newest
+        events.sort((a: MatrixEvent, b: MatrixEvent) => {
+            return a.getTs() - b.getTs();
+        });
+
         if (!events) return; // should only happen in tests
 
         let map = this.previews.get(room.roomId);
         if (!map) {
-            map = new Map<TagID | TAG_ANY, string | null>();
+            map = new Map<TagID | TAG_ANY, MessagePreview | null>();
             this.previews.set(room.roomId, map);
         }
 
@@ -171,22 +196,22 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
             if (!previewDef) continue;
             if (previewDef.isState && isNullOrUndefined(event.getStateKey())) continue;
 
-            const anyPreview = previewDef.previewer.getTextFor(event);
-            if (!anyPreview) continue; // not previewable for some reason
+            const anyPreviewText = previewDef.previewer.getTextFor(event);
+            if (!anyPreviewText) continue; // not previewable for some reason
 
-            changed = changed || anyPreview !== map.get(TAG_ANY);
-            map.set(TAG_ANY, anyPreview);
+            changed = changed || anyPreviewText !== map.get(TAG_ANY)?.text;
+            map.set(TAG_ANY, mkMessagePreview(anyPreviewText, event));
 
             const tagsToGenerate = Array.from(map.keys()).filter((t) => t !== TAG_ANY); // we did the any tag above
             for (const genTagId of tagsToGenerate) {
                 const realTagId = genTagId === TAG_ANY ? undefined : genTagId;
                 const preview = previewDef.previewer.getTextFor(event, realTagId);
-                if (preview === anyPreview) {
-                    changed = changed || anyPreview !== map.get(genTagId);
+                if (preview === anyPreviewText) {
+                    changed = changed || anyPreviewText !== map.get(genTagId)?.text;
                     map.delete(genTagId);
                 } else {
-                    changed = changed || preview !== map.get(genTagId);
-                    map.set(genTagId, preview);
+                    changed = changed || preview !== map.get(genTagId)?.text;
+                    map.set(genTagId, mkMessagePreview(anyPreviewText, event));
                 }
             }
 
@@ -200,7 +225,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         }
 
         // At this point, we didn't generate a preview so clear it
-        this.previews.set(room.roomId, new Map<TagID | TAG_ANY, string | null>());
+        this.previews.set(room.roomId, new Map<TagID | TAG_ANY, MessagePreview | null>());
         this.emit(UPDATE_EVENT, this);
         this.emit(MessagePreviewStore.getPreviewChangedEventName(room), room);
     }