hide thread events from the timeline

src/components/structures/MessagePanel.tsx

@@ -173,6 +173,8 @@ interface IProps {
     onUnfillRequest?(backwards: boolean, scrollToken: string): void;
 
     getRelationsForEvent?(eventId: string, relationType: string, eventType: string): Relations;
+
+    hideThreadedMessages?: boolean;
 }
 
 interface IState {
@@ -443,6 +445,11 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         // Always show highlighted event
         if (this.props.highlightedEventId === mxEv.getId()) return true;
 
+        const threadingEnabled = SettingsStore.getValue("feature_threading");
+        if (threadingEnabled && mxEv.replyEventId && this.props.hideThreadedMessages === true) {
+            return false;
+        }
+
         return !shouldHideEvent(mxEv, this.context);
     }
 

src/components/structures/ThreadView.tsx

@@ -24,9 +24,11 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import { MatrixClientPeg } from '../../MatrixClientPeg';
 
 import ResizeNotifier from '../../utils/ResizeNotifier';
-import EventTile from '../views/rooms/EventTile';
+import EventTile, { TileShape } from '../views/rooms/EventTile';
 import MessageComposer from '../views/rooms/MessageComposer';
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
+import { Layout } from '../../settings/Layout';
+import TimelinePanel from './TimelinePanel';
 
 interface IProps {
     roomId: string;
@@ -37,6 +39,7 @@ interface IProps {
 }
 
 interface IState {
+    replyToEvent?: MatrixEvent;
 }
 
 /*
@@ -65,6 +68,7 @@ class ThreadView extends React.Component<IProps, IState> {
             mxEvent={event}
             enableFlair={false}
             showReadReceipts={false}
+            tileShape={TileShape.FileGrid}
             as="div"
         />;
     }
@@ -77,19 +81,24 @@ class ThreadView extends React.Component<IProps, IState> {
                 className="mx_ThreadView"
                 onClose={this.props.onClose}
                 previousPhase={RightPanelPhases.RoomSummary}
+                withoutScrollContainer={true}
             >
-                { this.renderEventTile(this.props.mxEvent) }
-
-                { thread && (
-                    thread.eventTimeline.map((event: MatrixEvent) => {
-                        return this.renderEventTile(event);
-                    })
-                ) }
-
+                <TimelinePanel
+                    manageReadReceipts={false}
+                    manageReadMarkers={false}
+                    timelineSet={thread.timelineSet}
+                    showUrlPreview={false}
+                    tileShape={TileShape.Notif}
+                    empty={<div>empty</div>}
+                    alwaysShowTimestamps={true}
+                    layout={Layout.Group}
+                    hideThreadedMessages={false}
+                />
                 <MessageComposer
                     room={room}
                     resizeNotifier={this.props.resizeNotifier}
-                    replyToEvent={this.props.mxEvent}
+                    replyToEvent={thread?.replyToEvent}
+                    showReplyPreview={false}
                     permalinkCreator={this.props.permalinkCreator}
                 />
             </BaseCard>

src/components/structures/TimelinePanel.tsx

@@ -126,6 +126,8 @@ interface IProps {
 
     // callback which is called when we wish to paginate the timeline window.
     onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise<boolean>;
+
+    hideThreadedMessages?: boolean;
 }
 
 interface IState {
@@ -214,6 +216,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         timelineCap: Number.MAX_VALUE,
         className: 'mx_RoomView_messagePanel',
         sendReadReceiptOnLoad: true,
+        hideThreadedMessages: true,
     };
 
     private lastRRSentEventId: string = undefined;
@@ -1511,6 +1514,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 showReactions={this.props.showReactions}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                hideThreadedMessages={this.props.hideThreadedMessages}
             />
         );
     }