Fix main timeline pending events bleeding in thread's timeline (#7373)

src/components/structures/TimelinePanel.tsx

@@ -1222,9 +1222,11 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // should use this list, so that they don't advance into pending events.
         const liveEvents = [...events];
 
+        const thread = events[0]?.getThread();
+
         // if we're at the end of the live timeline, append the pending events
         if (!this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            events.push(...this.props.timelineSet.getPendingEvents());
+            events.push(...this.props.timelineSet.getPendingEvents(thread));
         }
 
         return {

src/components/views/rooms/EventTile.tsx

@@ -513,7 +513,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         const room = this.context.getRoom(this.props.mxEvent.getRoomId());
         const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(room);
 
-        this.threadState = notifications.threadsState.get(thread);
+        this.threadState = notifications.getThreadRoomState(thread);
 
         this.threadState.on(NotificationStateEvents.Update, this.onThreadStateUpdate);
         this.onThreadStateUpdate();

src/stores/notifications/ThreadNotificationState.ts

@@ -16,7 +16,6 @@ limitations under the License.
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Thread, ThreadEvent } from "matrix-js-sdk/src/models/thread";
-import { Room } from "matrix-js-sdk/src/models/room";
 
 import { NotificationColor } from "./NotificationColor";
 import { IDestroyable } from "../../utils/IDestroyable";
@@ -28,7 +27,7 @@ export class ThreadNotificationState extends NotificationState implements IDestr
     protected _count = 0;
     protected _color = NotificationColor.None;
 
-    constructor(public readonly room: Room, public readonly thread: Thread) {
+    constructor(public readonly thread: Thread) {
         super();
         this.thread.on(ThreadEvent.NewReply, this.handleNewThreadReply);
         this.thread.on(ThreadEvent.ViewThread, this.resetThreadNotification);
@@ -46,7 +45,7 @@ export class ThreadNotificationState extends NotificationState implements IDestr
         const myUserId = client.getUserId();
 
         const isOwn = myUserId === event.getSender();
-        const readReceipt = this.room.getReadReceiptForUserId(myUserId);
+        const readReceipt = this.thread.room.getReadReceiptForUserId(myUserId);
 
         if (!isOwn && !readReceipt || event.getTs() >= readReceipt.data.ts) {
             const actions = client.getPushActionsForEvent(event, true);

src/stores/notifications/ThreadsRoomNotificationState.ts

@@ -47,8 +47,15 @@ export class ThreadsRoomNotificationState extends NotificationState implements I
         }
     }
 
+    public getThreadRoomState(thread: Thread): ThreadNotificationState {
+        if (!this.threadsState.has(thread)) {
+            this.threadsState.set(thread, new ThreadNotificationState(thread));
+        }
+        return this.threadsState.get(thread);
+    }
+
     private onNewThread = (thread: Thread): void => {
-        const notificationState = new ThreadNotificationState(this.room, thread);
+        const notificationState = new ThreadNotificationState(thread);
         this.threadsState.set(
             thread,
             notificationState,