Add 'from a thread' copy to search tile result (#7525)

res/css/views/rooms/_EventTile.scss

@@ -70,7 +70,8 @@ $left-gutter: 64px;
         background-color: $alert;
     }
 
-    .mx_ThreadInfo {
+    .mx_ThreadInfo,
+    .mx_ThreadSummaryIcon {
         margin-right: 110px;
         margin-left: 64px;
     }
@@ -683,6 +684,28 @@ $left-gutter: 64px;
     }
 }
 
+.mx_ThreadSummaryIcon::before,
+.mx_ThreadInfo::before {
+    content: "";
+    display: inline-block;
+    mask-image: url('$(res)/img/element-icons/thread-summary.svg');
+    mask-position: center;
+    height: 18px;
+    min-width: 18px;
+    background-color: $secondary-content;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+}
+
+.mx_ThreadSummaryIcon {
+    font-size: $font-12px;
+    color: $secondary-content;
+    &::before {
+        vertical-align: middle;
+        margin-left: 8px;
+    }
+}
+
 .mx_ThreadInfo {
     min-width: 267px;
     max-width: min(calc(100% - 64px), 600px);
@@ -712,17 +735,6 @@ $left-gutter: 64px;
         padding-right: 15px;
     }
 
-    &::before {
-        content: "";
-        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
-        mask-position: center;
-        height: 18px;
-        min-width: 18px;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-    }
-
     &::after {
         content: "›";
         position: absolute;

src/components/views/rooms/EventTile.tsx

@@ -666,29 +666,31 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     private renderThreadInfo(): React.ReactNode {
-        if (!this.thread) {
+        if (this.props.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
-            return null;
+            return (
+                <p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
+            );
+        } else if (this.thread) {
+            return (
+                <CardContext.Consumer>
+                    { context =>
+                        <div
+                            className="mx_ThreadInfo"
+                            onClick={() => {
+                                showThread({ rootEvent: this.props.mxEvent, push: context.isCard });
+                            }}
+                        >
+                            <span className="mx_ThreadInfo_threads-amount">
+                                { _t("%(count)s reply", {
+                                    count: this.thread.length,
+                                }) }
+                            </span>
+                            { this.renderThreadLastMessagePreview() }
+                        </div>
+                    }
+                </CardContext.Consumer>
+            );
         }
-
-        return (
-            <CardContext.Consumer>
-                { context =>
-                    <div
-                        className="mx_ThreadInfo"
-                        onClick={() => {
-                            showThread({ rootEvent: this.props.mxEvent, push: context.isCard });
-                        }}
-                    >
-                        <span className="mx_ThreadInfo_threads-amount">
-                            { _t("%(count)s reply", {
-                                count: this.thread.length,
-                            }) }
-                        </span>
-                        { this.renderThreadLastMessagePreview() }
-                    </div>
-                }
-            </CardContext.Consumer>
-        );
     }
 
     private onRoomReceipt = (ev: MatrixEvent, room: Room): void => {

src/components/views/rooms/SearchResultTile.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 import React from "react";
 import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 
-import RoomContext from "../../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
@@ -75,6 +75,7 @@ export default class SearchResultTile extends React.Component<IProps> {
                         isTwelveHour={isTwelveHour}
                         alwaysShowTimestamps={alwaysShowTimestamps}
                         enableFlair={enableFlair}
+                        timelineRenderingType={TimelineRenderingType.Search}
                     />,
                 );
             }

src/contexts/RoomContext.ts

@@ -25,6 +25,7 @@ export enum TimelineRenderingType {
     ThreadsList = "ThreadsList",
     File = "File",
     Notification = "Notification",
+    Search = "Search"
 }
 
 const RoomContext = createContext<IRoomState>({

src/i18n/strings/en_EN.json

@@ -1642,6 +1642,7 @@
     "Everyone in this room is verified": "Everyone in this room is verified",
     "Edit message": "Edit message",
     "Mod": "Mod",
+    "From a thread": "From a thread",
     "%(count)s reply|other": "%(count)s replies",
     "%(count)s reply|one": "%(count)s reply",
     "This event could not be displayed": "This event could not be displayed",