Add new threads to the panel as they are discovered (#7688)

src/components/structures/ThreadPanel.tsx

@@ -25,7 +25,7 @@ import {
     UNSTABLE_FILTER_RELATION_SENDERS,
     UNSTABLE_FILTER_RELATION_TYPES,
 } from 'matrix-js-sdk/src/filter';
-import { ThreadEvent } from 'matrix-js-sdk/src/models/thread';
+import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 
 import BaseCard from "../views/right_panel/BaseCard";
 import ResizeNotifier from '../../utils/ResizeNotifier';
@@ -231,6 +231,35 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
         if (timelineSet) ref.current.refreshTimeline();
     });
 
+    useEventEmitter(room, ThreadEvent.New, async (thread: Thread) => {
+        if (timelineSet) {
+            const capabilities = await mxClient.getCapabilities();
+            const serverSupportsThreads = capabilities['io.element.thread']?.enabled;
+
+            const discoveredScrollingBack = room.lastThread.rootEvent.localTimestamp < thread.rootEvent.localTimestamp;
+
+            // When the server support threads we're only interested in adding
+            // the newly created threads to the list.
+            // The ones discovered when scrolling back should be discarded as
+            // they will be discovered by the `/messages` filter
+            if (serverSupportsThreads) {
+                if (!discoveredScrollingBack) {
+                    timelineSet.addEventToTimeline(
+                        thread.rootEvent,
+                        timelineSet.getLiveTimeline(),
+                        false,
+                    );
+                }
+            } else {
+                timelineSet.addEventToTimeline(
+                    thread.rootEvent,
+                    timelineSet.getLiveTimeline(),
+                    !discoveredScrollingBack,
+                );
+            }
+        }
+    });
+
     return (
         <RoomContext.Provider value={{
             ...roomContext,

test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap

@@ -36,6 +36,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
       "filteredTimelineSets": Object {},
       "getTypeWarning": false,
       "getVersionWarning": false,
+      "lastThread": undefined,
       "membersPromise": Promise {},
       "myUserId": "@name:example.com",
       "name": "roomid",
@@ -256,6 +257,7 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
         "filteredTimelineSets": Object {},
         "getTypeWarning": false,
         "getVersionWarning": false,
+        "lastThread": undefined,
         "membersPromise": Promise {},
         "myUserId": "@name:example.com",
         "name": "roomid",
@@ -1157,6 +1159,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
       "filteredTimelineSets": Object {},
       "getTypeWarning": false,
       "getVersionWarning": false,
+      "lastThread": undefined,
       "membersPromise": Promise {},
       "myUserId": "@name:example.com",
       "name": "roomid",
@@ -1377,6 +1380,7 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
         "filteredTimelineSets": Object {},
         "getTypeWarning": false,
         "getVersionWarning": false,
+        "lastThread": undefined,
         "membersPromise": Promise {},
         "myUserId": "@name:example.com",
         "name": "roomid",