Improve thread partitioning for 2nd degree relations (#7748)

src/components/structures/MessagePanel.tsx

@@ -467,6 +467,16 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     // TODO: Implement granular (per-room) hide options
     public shouldShowEvent(mxEv: MatrixEvent, forceHideEvents = false): boolean {
+        if (this.props.hideThreadedMessages && SettingsStore.getValue("feature_thread")) {
+            if (mxEv.isThreadRelation) {
+                return false;
+            }
+
+            if (this.shouldLiveInThreadOnly(mxEv)) {
+                return false;
+            }
+        }
+
         if (MatrixClientPeg.get().isUserIgnored(mxEv.getSender())) {
             return false; // ignored = no show (only happens if the ignore happens after an event was received)
         }
@@ -482,17 +492,25 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         // Always show highlighted event
         if (this.props.highlightedEventId === mxEv.getId()) return true;
 
-        // Checking if the message has a "parentEventId" as we do not
-        // want to hide the root event of the thread
-        if (mxEv.isThreadRelation &&
-            !mxEv.isThreadRoot &&
-            this.props.hideThreadedMessages &&
-            SettingsStore.getValue("feature_thread")
-        ) {
+        return !shouldHideEvent(mxEv, this.context);
+    }
+
+    private shouldLiveInThreadOnly(event: MatrixEvent): boolean {
+        const associatedId = event.getAssociatedId();
+
+        const targetsThreadRoot = event.threadRootId === associatedId;
+        if (event.isThreadRoot || targetsThreadRoot || !event.isThreadRelation) {
             return false;
         }
 
-        return !shouldHideEvent(mxEv, this.context);
+        // If this is a reply, then we use the associated event to decide whether
+        // this should be thread only or not
+        const parentEvent = this.props.room.findEventById(associatedId);
+        if (parentEvent) {
+            return this.shouldLiveInThreadOnly(parentEvent);
+        } else {
+            return true;
+        }
     }
 
     public readMarkerForEvent(eventId: string, isLastEvent: boolean): ReactNode {

src/components/structures/RoomView.tsx

@@ -209,6 +209,7 @@ export interface IRoomState {
     wasContextSwitch?: boolean;
     editState?: EditorStateTransfer;
     timelineRenderingType: TimelineRenderingType;
+    threadId?: string;
     liveTimeline?: EventTimeline;
 }
 

src/components/structures/ThreadView.tsx

@@ -264,6 +264,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
             <RoomContext.Provider value={{
                 ...this.context,
                 timelineRenderingType: TimelineRenderingType.Thread,
+                threadId: this.state.thread?.id,
                 liveTimeline: this.state?.thread?.timelineSet?.getLiveTimeline(),
             }}>
 

src/components/structures/TimelinePanel.tsx

@@ -1285,11 +1285,30 @@ 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(thread));
+            const pendingEvents = this.props.timelineSet.getPendingEvents();
+            if (this.context.timelineRenderingType === TimelineRenderingType.Thread) {
+                events.push(...pendingEvents.filter(e => e.threadRootId === this.context.threadId));
+            } else {
+                events.push(...pendingEvents.filter(e => {
+                    const hasNoRelation = !e.getRelation();
+                    if (hasNoRelation) {
+                        return true;
+                    }
+
+                    if (e.isThreadRelation) {
+                        return false;
+                    }
+
+                    const parentEvent = this.props.timelineSet.findEventById(e.getAssociatedId());
+                    if (!parentEvent) {
+                        return false;
+                    } else {
+                        return !parentEvent.isThreadRelation;
+                    }
+                }));
+            }
         }
 
         return {