Fix threads broken layout (#6997)

res/css/views/rooms/_EventTile.scss

@@ -24,6 +24,11 @@ $left-gutter: 64px;
     font-size: $font-14px;
     position: relative;
 
+    .mx_ThreadInfo {
+        margin-right: 110px;
+        margin-left: 64px;
+    }
+
     &.mx_EventTile_info {
         padding-top: 1px;
     }
@@ -693,7 +698,7 @@ $left-gutter: 64px;
     justify-content: flex-start;
     clear: both;
 
-    &:hover, &-active {
+    &:hover {
         cursor: pointer;
         border: 1px solid $quinary-content;
         padding-top: 7px;
@@ -785,6 +790,12 @@ $left-gutter: 64px;
             left: auto;
             right: 0;
         }
+
+        .mx_ReactionsRow {
+            order: 999;
+            padding-left: 0;
+            padding-right: 0;
+        }
     }
 
     .mx_MessageComposer_sendMessage {

src/components/structures/MessagePanel.tsx

@@ -560,6 +560,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     }
 
     private get pendingEditItem(): string | undefined {
+        if (!this.props.room) {
+            return undefined;
+        }
         try {
             return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}_${this.context.timelineRenderingType}`);
         } catch (err) {

src/components/structures/ThreadPanel.tsx

@@ -64,10 +64,10 @@ const useFilteredThreadsTimelinePanel = ({
     filterOption: ThreadFilterType;
     updateTimeline: () => void;
 }) => {
-    const timelineSet = useMemo(() => new EventTimelineSet(room, {
-        unstableClientRelationAggregation: true,
+    const timelineSet = useMemo(() => new EventTimelineSet(null, {
         timelineSupport: true,
-    }), [room]);
+        unstableClientRelationAggregation: true,
+    }), []);
 
     useEffect(() => {
         let filteredThreads = Array.from(threads);
@@ -217,7 +217,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose }) => {
                     showReactions={true}
                     className="mx_RoomView_messagePanel mx_GroupLayout"
                     membersLoaded={true}
-                    tileShape={TileShape.Thread}
+                    tileShape={TileShape.ThreadPanel}
                 />
             </BaseCard>
         </RoomContext.Provider>

src/components/views/rooms/EventTile.tsx

@@ -561,13 +561,14 @@ export default class EventTile extends React.Component<IProps, IState> {
             thread.addEvent(this.props.mxEvent, true);
         }
 
-        if (!thread || this.props.showThreadInfo === false || thread.length <= 1) {
+        if (!thread || this.props.showThreadInfo === false || thread.length === 0) {
             return null;
         }
 
-        const threadMessagePreview = MessagePreviewStore.instance.generateThreadPreview(this.state.thread);
-
-        if (!threadMessagePreview) return null;
+        const [lastEvent] = thread.events
+            .filter(event => event.isThreadRelation)
+            .slice(-1);
+        const threadMessagePreview = MessagePreviewStore.instance.generatePreviewForEvent(lastEvent);
 
         return (
             <div
@@ -579,15 +580,17 @@ export default class EventTile extends React.Component<IProps, IState> {
                 <span className="mx_ThreadInfo_thread-icon" />
                 <span className="mx_ThreadInfo_threads-amount">
                     { _t("%(count)s reply", {
-                        count: thread.length - 1,
+                        count: thread.length,
                     }) }
                 </span>
-                <MemberAvatar member={thread.replyToEvent.sender} width={24} height={24} />
-                <div className="mx_ThreadInfo_content">
-                    <span className="mx_ThreadInfo_message-preview">
-                        { threadMessagePreview }
-                    </span>
-                </div>
+                { (threadMessagePreview && lastEvent.sender) && <>
+                    <MemberAvatar member={lastEvent.sender} width={24} height={24} />
+                    <div className="mx_ThreadInfo_content">
+                        <span className="mx_ThreadInfo_message-preview">
+                            { threadMessagePreview }
+                        </span>
+                    </div>
+                </> }
             </div>
         );
     }
@@ -1214,7 +1217,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                 ]);
             }
             case TileShape.Thread: {
-                const thread = haveTileForEvent(this.props.mxEvent) &&
+                const replyChain = haveTileForEvent(this.props.mxEvent) &&
                     ReplyChain.hasReply(this.props.mxEvent) ? (
                         <ReplyChain
                             parentEv={this.props.mxEvent}
@@ -1233,7 +1236,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                     "aria-live": ariaLive,
                     "aria-atomic": true,
                     "data-scroll-tokens": scrollToken,
-                    "data-has-reply": !!thread,
+                    "data-has-reply": !!replyChain,
                 }, [
                     <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
                         <RoomAvatar room={room} width={28} height={28} />
@@ -1249,7 +1252,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         </a>
                     </div>,
                     <div className="mx_EventTile_line" key="mx_EventTile_line">
-                        { thread }
+                        { replyChain }
                         <EventTileType ref={this.tile}
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
@@ -1262,6 +1265,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         />
                         { actionBar }
                     </div>,
+                    reactionsRow,
                 ]);
             }
             case TileShape.FileGrid: {
@@ -1297,7 +1301,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
 
             default: {
-                const thread = haveTileForEvent(this.props.mxEvent) &&
+                const replyChain = haveTileForEvent(this.props.mxEvent) &&
                     ReplyChain.hasReply(this.props.mxEvent) ? (
                         <ReplyChain
                             parentEv={this.props.mxEvent}
@@ -1323,7 +1327,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         "data-scroll-tokens": scrollToken,
                         "data-layout": this.props.layout,
                         "data-self": isOwnEvent,
-                        "data-has-reply": !!thread,
+                        "data-has-reply": !!replyChain,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, <>
@@ -1334,7 +1338,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         <div className="mx_EventTile_line" key="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
-                            { thread }
+                            { replyChain }
                             <EventTileType ref={this.tile}
                                 mxEvent={this.props.mxEvent}
                                 forExport={this.props.forExport}

src/stores/room-list/MessagePreviewStore.ts

@@ -27,7 +27,7 @@ import { CallHangupEvent } from "./previews/CallHangupEvent";
 import { StickerEventPreview } from "./previews/StickerEventPreview";
 import { ReactionEventPreview } from "./previews/ReactionEventPreview";
 import { UPDATE_EVENT } from "../AsyncStore";
-import { Thread } from "matrix-js-sdk/src/models/thread";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 // Emitted event for when a room's preview has changed. First argument will the room for which
 // the change happened.
@@ -109,12 +109,11 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         return previews.get(inTagId);
     }
 
-    public generateThreadPreview(thread: Thread): string {
-        const lastEvent = thread.replyToEvent;
-        const previewDef = PREVIEWS[lastEvent.getType()];
+    public generatePreviewForEvent(event: MatrixEvent): string {
+        const previewDef = PREVIEWS[event.getType()];
         // TODO: Handle case where we don't have
         if (!previewDef) return '';
-        const previewText = previewDef.previewer.getTextFor(lastEvent, null, true);
+        const previewText = previewDef.previewer.getTextFor(event, null, true);
         return previewText ?? '';
     }