Fix missing threads in thread list (#8011)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/ThreadPanel.tsx

@@ -26,6 +26,7 @@ import {
     UNSTABLE_FILTER_RELATED_BY_REL_TYPES,
 } from 'matrix-js-sdk/src/filter';
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 
 import BaseCard from "../views/right_panel/BaseCard";
 import ResizeNotifier from '../../utils/ResizeNotifier';
@@ -76,11 +77,10 @@ export async function getThreadTimelineSet(
             },
         );
 
-        timelineSet.resetLiveTimeline();
-        await client.paginateEventTimeline(
-            timelineSet.getLiveTimeline(),
-            { backwards: true, limit: 20 },
-        );
+        // An empty pagination token allows to paginate from the very bottom of
+        // the timeline set.
+        timelineSet.getLiveTimeline().setPaginationToken("", EventTimeline.BACKWARDS);
+
         return timelineSet;
     } else {
         // Filter creation fails if HomeServer does not support the new relation
@@ -238,30 +238,15 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
     }, [mxClient, roomId]);
 
     useEffect(() => {
-        async function onNewThread(thread: Thread): Promise<void> {
+        async function onNewThread(thread: Thread, toStartOfTimeline: boolean): Promise<void> {
             setThreadCount(room.threads.size);
             if (timelineSet) {
-                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 (Thread.hasServerSideSupport) {
-                    if (!discoveredScrollingBack) {
-                        timelineSet.addEventToTimeline(
-                            thread.rootEvent,
-                            timelineSet.getLiveTimeline(),
-                            false,
-                        );
-                    }
-                } else {
-                    timelineSet.addEventToTimeline(
-                        thread.rootEvent,
-                        timelineSet.getLiveTimeline(),
-                        !discoveredScrollingBack,
-                    );
+                if (!Thread.hasServerSideSupport || !toStartOfTimeline) {
+                    timelineSet.addEventToTimeline(thread.rootEvent, timelineSet.getLiveTimeline(), toStartOfTimeline);
                 }
             }
         }

src/components/structures/ThreadView.tsx

@@ -157,7 +157,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
     private setupThread = (mxEv: MatrixEvent) => {
         let thread = this.props.room.threads?.get(mxEv.getId());
         if (!thread) {
-            thread = this.props.room.createThread(mxEv, [mxEv]);
+            thread = this.props.room.createThread(mxEv, [mxEv], true);
         }
         thread.on(ThreadEvent.Update, this.updateLastThreadReply);
         this.updateThread(thread);

src/utils/EventUtils.ts

@@ -308,7 +308,7 @@ export async function fetchInitialEvent(
             const rootEventData = await client.fetchRoomEvent(roomId, initialEvent.threadRootId);
             const rootEvent = new MatrixEvent(rootEventData);
             const room = client.getRoom(roomId);
-            room.createThread(rootEvent);
+            room.createThread(rootEvent, [rootEvent], true);
         } catch (e) {
             logger.warn("Could not find root event: " + initialEvent.threadRootId);
         }