Copy bubble layout changes to timelineCard

src/components/views/right_panel/TimelineCard.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { EventSubscription } from "fbemitter";
 import { EventTimelineSet, IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { Thread } from 'matrix-js-sdk/src/models/thread';
+import classNames from 'classnames';
 
 import BaseCard from "./BaseCard";
 import ResizeNotifier from '../../../utils/ResizeNotifier';
@@ -56,6 +57,7 @@ interface IState {
     replyToEvent?: MatrixEvent;
     initialEventId?: string;
     isInitialEventHighlighted?: boolean;
+    layout: Layout;
 
     // settings:
     showReadReceipts?: boolean;
@@ -66,6 +68,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     static contextType = RoomContext;
 
     private dispatcherRef: string;
+    private layoutWatcherRef: string;
     private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
     private roomStoreToken: EventSubscription;
     private readReceiptsSettingWatcher: string;
@@ -74,27 +77,35 @@ export default class TimelineCard extends React.Component<IProps, IState> {
         super(props);
         this.state = {
             showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
+            layout: SettingsStore.getValue("layout"),
         };
         this.readReceiptsSettingWatcher = null;
     }
 
     public componentDidMount(): void {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this.onAction);
-        this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null,
-            (...[,,, value]) => {this.setState({ showReadReceipts: value as boolean });},
+        this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null, (...[,,, value]) =>
+            this.setState({ showReadReceipts: value as boolean }),
+        );
+        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
+            this.setState({ layout: value as Layout }),
         );
     }
 
     public componentWillUnmount(): void {
         // Remove RoomStore listener
-        if (this.roomStoreToken) {
-            this.roomStoreToken.remove();
-        }
-        dis.unregister(this.dispatcherRef);
+
+        this.roomStoreToken?.remove();
+
         if (this.readReceiptsSettingWatcher) {
             SettingsStore.unwatchSetting(this.readReceiptsSettingWatcher);
         }
+        if (this.layoutWatcherRef) {
+            SettingsStore.unwatchSetting(this.layoutWatcherRef);
+        }
+
+        dis.unregister(this.dispatcherRef);
     }
 
     private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
@@ -149,6 +160,11 @@ export default class TimelineCard extends React.Component<IProps, IState> {
             ? this.state.initialEventId
             : null;
 
+        const messagePanelClassNames = classNames({
+            "mx_RoomView_messagePanel": true,
+            "mx_GroupLayout": this.state.layout === Layout.Group,
+        });
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -169,11 +185,12 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                         sendReadReceiptOnLoad={true}
                         timelineSet={this.props.timelineSet}
                         showUrlPreview={true}
-                        layout={Layout.Group}
+                        // The right panel timeline (and therefore threads) don't support IRC layout at this time
+                        layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
                         hideThreadedMessages={false}
                         hidden={false}
                         showReactions={true}
-                        className="mx_RoomView_messagePanel mx_GroupLayout"
+                        className={messagePanelClassNames}
                         permalinkCreator={this.props.permalinkCreator}
                         membersLoaded={true}
                         editState={this.state.editState}