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 {

src/components/views/rooms/EventTile.tsx

@@ -649,13 +649,13 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     private renderThreadPanelSummary(): JSX.Element | null {
-        if (!this.thread) {
+        if (!this.state.thread) {
             return null;
         }
 
         return <div className="mx_ThreadPanel_replies">
             <span className="mx_ThreadPanel_repliesSummary">
-                { this.thread.length }
+                { this.state.thread.length }
             </span>
             { this.renderThreadLastMessagePreview() }
         </div>;
@@ -665,7 +665,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         const { threadLastReply } = this.state;
         const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(threadLastReply);
 
-        const sender = this.thread.roomState.getSentinelMember(threadLastReply.getSender());
+        const sender = this.state.thread?.roomState.getSentinelMember(threadLastReply.getSender());
         return <>
             <MemberAvatar
                 member={sender}
@@ -689,7 +689,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             return (
                 <p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
             );
-        } else if (this.state.threadReplyCount) {
+        } else if (this.state.threadReplyCount && this.props.mxEvent.isThreadRoot) {
             return (
                 <CardContext.Consumer>
                     { context =>
@@ -1092,11 +1092,10 @@ export default class EventTile extends React.Component<IProps, IState> {
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     };
 
-    private onReactionsCreated = (relationType: string, eventType: string) => {
+    private onReactionsCreated = (relationType: string, eventType: string): void => {
         if (relationType !== "m.annotation" || eventType !== "m.reaction") {
             return;
         }
-        this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         this.setState({
             reactions: this.getReactions(),
         });

src/contexts/RoomContext.ts

@@ -63,6 +63,7 @@ const RoomContext = createContext<IRoomState>({
     matrixClientIsReady: false,
     dragCounter: 0,
     timelineRenderingType: TimelineRenderingType.Room,
+    threadId: undefined,
     liveTimeline: undefined,
 });
 RoomContext.displayName = "RoomContext";