Right panel chat style changes for read receipts and optimizations for smaller widths (#7297)

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>

res/css/views/right_panel/_TimelineCard.scss

@@ -33,4 +33,55 @@ limitations under the License.
             right: 0;
         }
     }
+    .mx_AutoHideScrollbar {
+        padding-right: 10px;
+        width: calc(100% - 10px);
+    }
+
+    // Style to optimize the layout for the right panel area
+    .mx_EventTile_content {
+        margin-right: 0;
+    }
+    .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
+        padding-left: 36px;
+        padding-right: 36px;
+    }
+
+    .mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
+        margin-left: 36px;
+    }
+    .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
+        top: 12px;
+        left: 0px;
+    }
+
+    .mx_CallEvent_wrapper {
+        justify-content: center;
+        margin: auto 5px;
+        .mx_CallEvent {
+            margin: 4px;
+        }
+    }
+    .mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
+        right: -4px;
+        left: auto;
+    }
+
+    .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
+        margin-right: 2px;
+    }
+    .mx_GroupLayout .mx_EventTile .mx_EventTile_line {
+        padding-bottom: 8px;
+    }
+    .mx_EventTile_readAvatars {
+        top: -10px;
+    }
+
+    // mx_EventTile_info
+    .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line {
+        padding-left: 36px;
+    }
+    .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_avatar {
+        left: 18px;
+    }
 }

src/components/structures/RightPanel.tsx

@@ -338,6 +338,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
             case RightPanelPhases.Timeline:
                 if (!SettingsStore.getValue("feature_maximised_widgets")) break;
                 panel = <TimelineCard
+                    classNames="mx_ThreadPanel mx_TimelineCard"
                     room={this.props.room}
                     timelineSet={this.props.room.getUnfilteredTimelineSet()}
                     resizeNotifier={this.props.resizeNotifier}

src/components/views/right_panel/TimelineCard.tsx

@@ -44,6 +44,7 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator?: RoomPermalinkCreator;
     e2eStatus?: E2EStatus;
+    classNames?: string;
     timelineSet?: EventTimelineSet;
     timelineRenderingType?: TimelineRenderingType;
     showComposer?: boolean;
@@ -67,19 +68,22 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
     private roomStoreToken: EventSubscription;
-    private settingWatchers: string[];
+    private readReceiptsSettingWatcher: string;
 
     constructor(props: IProps) {
         super(props);
         this.state = {
-            showReadReceipts: false,
+            showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
         };
-        this.settingWatchers = [];
+        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 });},
+        );
     }
 
     public componentWillUnmount(): void {
@@ -88,28 +92,21 @@ export default class TimelineCard extends React.Component<IProps, IState> {
             this.roomStoreToken.remove();
         }
         dis.unregister(this.dispatcherRef);
-        for (const watcher of this.settingWatchers) {
+        if (this.readReceiptsSettingWatcher) {
-            SettingsStore.unwatchSetting(watcher);
+            SettingsStore.unwatchSetting(this.readReceiptsSettingWatcher);
         }
     }
 
     private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
-        const roomId = this.props.room.roomId;
         const newState: Pick<IState, any> = {
             // roomLoading: RoomViewStore.isRoomLoading(),
             // roomLoadError: RoomViewStore.getRoomLoadError(),
 
-            showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
             initialEventId: RoomViewStore.getInitialEventId(),
             initialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             replyToEvent: RoomViewStore.getQuotingEvent(),
         };
 
-        this.settingWatchers = this.settingWatchers.concat([
-            SettingsStore.watchSetting("showReadReceipts", roomId, (...[,,, value]) =>
-                this.setState({ showReadReceipts: value as boolean }),
-            ),
-        ]);
         this.setState(newState);
     };
 
@@ -159,14 +156,14 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                 liveTimeline: this.props.timelineSet.getLiveTimeline(),
             }}>
                 <BaseCard
-                    className="mx_ThreadPanel mx_TimelineCard"
+                    className={this.props.classNames}
                     onClose={this.props.onClose}
                     withoutScrollContainer={true}
                     header={this.renderTimelineCardHeader()}
                 >
                     <TimelinePanel
                         ref={this.timelinePanelRef}
-                        showReadReceipts={/*this.state.showReadReceipts*/ false} // TODO: RR's cause issues with limited horizontal space
+                        showReadReceipts={this.state.showReadReceipts}
                         manageReadReceipts={true}
                         manageReadMarkers={false} // No RM support in the TimelineCard
                         sendReadReceiptOnLoad={true}