From a38d5eb2244711d89e9c51df2e3f5abf20ed6409 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 14:57:45 +0100
Subject: [PATCH 01/29] add useIRCLayout setting

---
 src/i18n/strings/en_EN.json |  1 +
 src/settings/Settings.js    | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a24b2bde733..3dcba0f5464 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -408,6 +408,7 @@
     "Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
+    "Use IRC layout": "Use IRC layout",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 5c6d843349e..c51bf44ee51 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -94,6 +94,12 @@ export const SETTINGS = {
     //     // not use this for new settings.
     //     invertedSettingName: "my-negative-setting",
     // },
+    "feature_alternate_message_layouts": {
+        isFeature: true,
+        displayName: _td("Alternate message layouts"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_pinning": {
         isFeature: true,
         displayName: _td("Message Pinning"),
@@ -164,6 +170,11 @@ export const SETTINGS = {
         default: true,
         invertedSettingName: 'MessageComposerInput.dontSuggestEmoji',
     },
+    "useIRCLayout": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Use IRC layout'),
+        default: false,
+    },
     "useCompactLayout": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Use compact timeline layout'),

From e0c89f6180331350485ca7331ff9e190a83a3d5f Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 15:06:38 +0100
Subject: [PATCH 02/29] Add switch between layout classes

---
 src/components/structures/MessagePanel.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 6fbfdb504b8..0123d439204 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -117,6 +117,7 @@ export default class MessagePanel extends React.Component {
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -169,6 +170,8 @@ export default class MessagePanel extends React.Component {
 
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
+
+        this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
     }
 
     componentDidMount() {
@@ -178,6 +181,7 @@ export default class MessagePanel extends React.Component {
     componentWillUnmount() {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+        SettingsStore.unwatchSetting(this._layoutWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -196,6 +200,12 @@ export default class MessagePanel extends React.Component {
         });
     };
 
+    onLayoutChange = () => {
+        this.setState({
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+        });
+    }
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -779,6 +789,8 @@ export default class MessagePanel extends React.Component {
             this.props.className,
             {
                 "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+                "mx_IRCLayout": this.state.useIRCLayout,
+                "mx_GroupLayout": !this.state.useIRCLayout,
             },
         );
 

From c1e740a59603ae178364cac18c8ecdd5443c9df6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 15:07:17 +0100
Subject: [PATCH 03/29] Break out group layout settings

---
 res/css/views/rooms/_EventTile.scss   | 12 -------
 res/css/views/rooms/_GroupLayout.scss | 52 +++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 res/css/views/rooms/_GroupLayout.scss

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 752cf982f6f..b9a41c43103 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -68,11 +68,9 @@ limitations under the License.
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
-    padding-left: 65px; /* left gutter */
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -101,12 +99,9 @@ limitations under the License.
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
-    visibility: hidden;
     white-space: nowrap;
     left: 0px;
-    width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
-    position: absolute;
     user-select: none;
 }
 
@@ -117,10 +112,7 @@ limitations under the License.
 .mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: 65px; /* left gutter */
-    padding-top: 3px;
-    padding-bottom: 3px;
     border-radius: 4px;
-    line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
@@ -151,10 +143,6 @@ limitations under the License.
     margin-right: 10px;
 }
 
-.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 83px;
-}
-
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px !important;
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
new file mode 100644
index 00000000000..6528d6c6cd0
--- /dev/null
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -0,0 +1,52 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$left-gutter: 65px;
+
+.mx_GroupLayout {
+
+    .mx_EventTile {
+        > .mx_SenderProfile {
+            line-height: $font-17px;
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_line {
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_avatar {
+            position: absolute;
+        }
+
+        .mx_MessageTimestamp {
+            visibility: hidden;
+            position: absolute;
+            width: 46px; /* 8 + 30 (avatar) + 8 */
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            line-height: $font-22px;
+        }
+    }
+
+    .mx_EventTile_info .mx_EventTile_line {
+        padding-left: 83px;
+    }
+}

From 10c8d253c86334e11c3a8582db6d63e073bcb79e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 15:07:41 +0100
Subject: [PATCH 04/29] Create irc layout

---
 res/css/views/rooms/_IRCLayout.scss       | 124 ++++++++++++++++++++++
 src/components/structures/MessagePanel.js |   1 +
 src/components/views/rooms/EventTile.js   |  30 ++++--
 3 files changed, 148 insertions(+), 7 deletions(-)
 create mode 100644 res/css/views/rooms/_IRCLayout.scss

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
new file mode 100644
index 00000000000..61527495738
--- /dev/null
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -0,0 +1,124 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$name-width: 50px;
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+
+.mx_IRCLayout {
+
+    line-height: $font-22px !important;
+
+    .mx_EventTile {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
+        > * {
+            margin-right: $right-padding;
+        }
+
+        > .mx_EventTile_msgOption {
+            order: 4;
+            flex-shrink: 0;
+        }
+
+        > .mx_SenderProfile {
+            order: 2;
+            flex-shrink: 0;
+            width: $name-width;
+            text-overflow: ellipsis;
+            text-align: right;
+            display: flex;
+            align-items: center;
+        }
+
+        > .mx_EventTile_line {
+            order: 3;
+            flex-grow: 1;
+        }
+
+        > .mx_EventTile_avatar {
+            order: 1;
+            position: relative;
+            top: 0;
+            left: 0;
+            flex-shrink: 0;
+            height: 22px;
+            display: flex;
+            align-items: center;
+
+            > .mx_BaseAvatar {
+                height: 1rem;
+                width: 1rem;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            font-size: $font-10px;
+            width: $timestamp-width;
+            text-align: right;
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding: 0;
+        }
+
+        .mx_EventTile_e2eIcon {
+            position: relative;
+            right: unset;
+            left: unset;
+            top: -2px;
+            padding: 0;
+        }
+
+        .mx_EventTile_line > * {
+            display: inline-block;
+        }
+    }
+
+    .mx_EventListSummary {
+        > .mx_EventTile_line {
+            padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        .mx_EventTile_avatar {
+            left: calc($name-width + 10px + $icon-width);
+            top: 0;
+        }
+
+        .mx_EventTile_line {
+            left: calc($name-width + 10px + $icon-width);
+        }
+
+        .mx_TextualEvent {
+            line-height: $font-22px;
+        }
+    }
+
+    .mx_EventTile_continuation:not(.mx_EventTile_info) {
+        .mx_EventTile_avatar {
+            visibility: hidden;
+        }
+
+        .mx_SenderProfile {
+            visibility: hidden;
+        }
+    }
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 0123d439204..80e5d17bf30 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -607,6 +607,7 @@ export default class MessagePanel extends React.Component {
                         isSelectedEvent={highlight}
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
+                        useIRCLayout={this.state.useIRCLayout}
                     />
                 </TileErrorBoundary>
             </li>,
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a64fd82eb52..2da9677a176 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -206,6 +206,9 @@ export default createReactClass({
 
         // whether to show reactions for this event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -653,6 +656,8 @@ export default createReactClass({
         const classes = classNames({
             mx_EventTile_bubbleContainer: isBubbleMessage,
             mx_EventTile: true,
+            mx_EventTile_irc: this.props.useIRCLayout,
+            mx_EventTile_group: !this.props.useIRCLayout,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,
@@ -696,6 +701,9 @@ export default createReactClass({
             // joins/parts/etc
             avatarSize = 14;
             needsSenderProfile = false;
+        } else if (this.props.useIRCLayout) {
+            avatarSize = 14;
+            needsSenderProfile = true;
         } else if (this.props.continuation && this.props.tileShape !== "file_grid") {
             // no avatar or sender profile for continuation messages
             avatarSize = 0;
@@ -879,21 +887,29 @@ export default createReactClass({
                     this.props.permalinkCreator,
                     this._replyThread,
                 );
+
+                const linkedTimestamp = <a
+                        href={permalink}
+                        onClick={this.onPermalinkClicked}
+                        aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+                    >
+                        { timestamp }
+                    </a>;
+
+                const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
+                const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+
+
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
                     <div className={classes} tabIndex={-1}>
+                        { ircTimestamp }
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>
                         { sender }
                         <div className="mx_EventTile_line">
-                            <a
-                                href={permalink}
-                                onClick={this.onPermalinkClicked}
-                                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-                            >
-                                { timestamp }
-                            </a>
+                            { groupTimestamp }
                             { !isBubbleMessage && this._renderE2EPadlock() }
                             { thread }
                             <EventTileType ref={this._tile}

From 37e8dc04776a5c38f832d5887b8d974aa9de67e2 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 15:07:47 +0100
Subject: [PATCH 05/29] Include new css files

---
 res/css/_components.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0ba2b609e89..a66d15af184 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -159,6 +159,8 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventTile_group.scss";
+@import "./views/rooms/_EventTile_irc.scss";
 @import "./views/rooms/_InviteOnlyIcon.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";

From 6c3e3161de314b109810db0987f04877e5f42a10 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 29 Apr 2020 15:29:25 +0100
Subject: [PATCH 06/29] Reduce padding

---
 res/css/views/rooms/_IRCLayout.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 61527495738..94ff6810296 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -27,6 +27,7 @@ $right-padding: 5px;
         display: flex;
         flex-direction: row;
         align-items: flex-start;
+        padding-top: 0;
 
         > * {
             margin-right: $right-padding;

From 54d211a847c8f198c2547c0cc9fc6c9715d142e5 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 4 May 2020 21:40:52 +0100
Subject: [PATCH 07/29] Index file name changes

---
 res/css/_components.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index a66d15af184..5466b785c0e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -159,8 +159,8 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
-@import "./views/rooms/_EventTile_group.scss";
-@import "./views/rooms/_EventTile_irc.scss";
+@import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_InviteOnlyIcon.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";

From 67249e1e9c17c9886812e1e2e07a71e298d2bb9e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 4 May 2020 21:53:48 +0100
Subject: [PATCH 08/29] Fix hover

---
 res/css/views/rooms/_IRCLayout.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 94ff6810296..10d8c701c3f 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -122,4 +122,12 @@ $right-padding: 5px;
             visibility: hidden;
         }
     }
+
+    // Suppress highlight thing from the normal Layout.
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+        padding-left: 0;
+        border-left: 0;
+    }
 }

From 027826c2e1ca45cda9588a8d5cee257581048987 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Tue, 5 May 2020 10:54:44 +0100
Subject: [PATCH 09/29] Replies have the same layout as messages

---
 res/css/views/rooms/_IRCLayout.scss          | 13 +++++++--
 src/components/views/elements/ReplyThread.js |  9 ++++--
 src/components/views/rooms/EventTile.js      | 29 ++++++++++----------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 10d8c701c3f..c7cf2c31c2a 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -63,9 +63,12 @@ $right-padding: 5px;
             display: flex;
             align-items: center;
 
-            > .mx_BaseAvatar {
-                height: 1rem;
-                width: 1rem;
+            // Need to use important to override the js provided height and width values.
+            > .mx_BaseAvatar, .mx_BaseAvatar > * {
+                height: $font-14px !important;
+                width: $font-14px !important;
+                font-size: $font-10px !important;
+                line-height: $font-14px !important;
             }
         }
 
@@ -90,6 +93,10 @@ $right-padding: 5px;
         .mx_EventTile_line > * {
             display: inline-block;
         }
+
+        .mx_EventTile_reply {
+            order: 3;
+        }
     }
 
     .mx_EventListSummary {
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index eae2d13f8a0..a8f9599f355 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -37,6 +37,8 @@ export default class ReplyThread extends React.Component {
         // called when the ReplyThread contents has changed, including EventTiles thereof
         onHeightChanged: PropTypes.func.isRequired,
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
+        // Specifies which layout to use.
+        useIRCLayout: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -176,12 +178,12 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div />;
         }
         return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} />;
+            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;
     }
 
     componentDidMount() {
@@ -331,7 +333,8 @@ export default class ReplyThread extends React.Component {
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
-                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                    useIRCLayout={this.props.useIRCLayout} />
             </blockquote>;
         });
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 2da9677a176..837c8929b96 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -795,6 +795,17 @@ export default createReactClass({
             />;
         }
 
+        const linkedTimestamp = <a
+                href={permalink}
+                onClick={this.onPermalinkClicked}
+                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+            >
+                { timestamp }
+            </a>;
+
+        const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
+        const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -862,12 +873,11 @@ export default createReactClass({
                 }
                 return (
                     <div className={classes}>
+                        { ircTimestamp }
                         { avatar }
                         { sender }
                         <div className="mx_EventTile_reply">
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
-                                { timestamp }
-                            </a>
+                            { groupTimestamp }
                             { !isBubbleMessage && this._renderE2EPadlock() }
                             { thread }
                             <EventTileType ref={this._tile}
@@ -886,20 +896,9 @@ export default createReactClass({
                     this.props.onHeightChanged,
                     this.props.permalinkCreator,
                     this._replyThread,
+                    this.props.useIRCLayout,
                 );
 
-                const linkedTimestamp = <a
-                        href={permalink}
-                        onClick={this.onPermalinkClicked}
-                        aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-                    >
-                        { timestamp }
-                    </a>;
-
-                const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
-                const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
-
-
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
                     <div className={classes} tabIndex={-1}>

From 0af265bf93e703c42492c51b41a23f485f4099fe Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Tue, 5 May 2020 16:24:50 +0100
Subject: [PATCH 10/29] Fix replies

---
 res/css/views/rooms/_IRCLayout.scss          | 9 ++++++++-
 src/components/views/elements/ReplyThread.js | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index c7cf2c31c2a..b45d34013ce 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -90,10 +90,17 @@ $right-padding: 5px;
             padding: 0;
         }
 
-        .mx_EventTile_line > * {
+        .mx_EventTile_line .mx_EventTile_content,
+        .mx_EventTile_line .mx_EventTile_e2eIcon,
+        .mx_eventTile_line > div {
             display: inline-block;
         }
 
+        .mx_EvenTile_line .mx_MessageActionBar,
+        .mx_EvenTile_line .mx_ReplyThread_wrapper {
+            display: block;
+        }
+
         .mx_EventTile_reply {
             order: 3;
         }
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index a8f9599f355..52a94110ba6 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -338,7 +338,7 @@ export default class ReplyThread extends React.Component {
             </blockquote>;
         });
 
-        return <div>
+        return <div className="mx_ReplyThread_wrapper">
             <div>{ header }</div>
             <div>{ evTiles }</div>
         </div>;

From 07c2d0cb0256ff7ab359416222d6411e0100594a Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 6 May 2020 09:24:33 +0100
Subject: [PATCH 11/29] Composer reply previews have group layout

---
 src/components/views/rooms/MessageComposer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4749742a7da..663db5e9422 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -370,7 +370,7 @@ export default class MessageComposer extends React.Component {
         }
 
         return (
-            <div className="mx_MessageComposer">
+            <div className="mx_MessageComposer mx_GroupLayout">
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         { controls }

From 5568e6488d18c2ef8da79514f852ac562cdcf049 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 6 May 2020 09:51:01 +0100
Subject: [PATCH 12/29] Fix encryption badge layout

---
 res/css/views/rooms/_IRCLayout.scss          | 2 +-
 src/components/views/elements/ReplyThread.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index b45d34013ce..968d8ebdea6 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -92,7 +92,7 @@ $right-padding: 5px;
 
         .mx_EventTile_line .mx_EventTile_content,
         .mx_EventTile_line .mx_EventTile_e2eIcon,
-        .mx_eventTile_line > div {
+        .mx_EventTile_line .mx_ReplyThread_wrapper_empty {
             display: inline-block;
         }
 
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 52a94110ba6..de242f56320 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -180,7 +180,7 @@ export default class ReplyThread extends React.Component {
 
     static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
         if (!ReplyThread.getParentEventId(parentEv)) {
-            return <div />;
+            return <div className="mx_ReplyThread_wrapper_empty" />;
         }
         return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
             ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;

From 771ae5e18f23b7b7954950b43fa7e5e52b70b0e8 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 7 May 2020 13:55:23 +0100
Subject: [PATCH 13/29] Fix encryption badge layouts and replies. Begin
 removing dependence on slider. Move settings to labs. Username
 disambiguation.

---
 res/css/views/rooms/_IRCLayout.scss           | 34 +++++++++++++++----
 src/components/structures/MessagePanel.js     | 16 +++++++--
 src/components/views/elements/ReplyThread.js  | 10 ++++--
 .../views/messages/SenderProfile.js           |  3 ++
 src/components/views/rooms/EventTile.js       |  6 +++-
 src/i18n/strings/en_EN.json                   |  1 +
 src/settings/Settings.js                      | 17 +++++++---
 7 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 968d8ebdea6..e4536aec20e 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$name-width: 50px;
+$name-width: 70px;
 $icon-width: 14px;
 $timestamp-width: 45px;
 $right-padding: 5px;
 
 .mx_IRCLayout {
 
-    line-height: $font-22px !important;
+    line-height: $font-20px !important;
 
     .mx_EventTile {
         display: flex;
@@ -46,11 +46,13 @@ $right-padding: 5px;
             text-align: right;
             display: flex;
             align-items: center;
+            overflow: visible;
         }
 
         > .mx_EventTile_line {
             order: 3;
             flex-grow: 1;
+            margin-bottom: -6px;
         }
 
         > .mx_EventTile_avatar {
@@ -90,10 +92,13 @@ $right-padding: 5px;
             padding: 0;
         }
 
-        .mx_EventTile_line .mx_EventTile_content,
-        .mx_EventTile_line .mx_EventTile_e2eIcon,
-        .mx_EventTile_line .mx_ReplyThread_wrapper_empty {
-            display: inline-block;
+        .mx_EventTile_line {
+            .mx_EventTile_e2eIcon,
+            .mx_TextualEvent,
+            .mx_MTextBody,
+            .mx_ReplyThread_wrapper_empty {
+                display: inline-block;
+            }
         }
 
         .mx_EvenTile_line .mx_MessageActionBar,
@@ -104,6 +109,10 @@ $right-padding: 5px;
         .mx_EventTile_reply {
             order: 3;
         }
+
+        .mx_EditMessageComposer_buttons {
+            position: relative;
+        }
     }
 
     .mx_EventListSummary {
@@ -144,4 +153,17 @@ $right-padding: 5px;
         padding-left: 0;
         border-left: 0;
     }
+
+    .mx_SenderProfile_hover {
+        background-color: $primary-bg-color;
+        overflow: hidden;
+        width: $name-width;
+        transition: width 2s;
+    }
+
+    .mx_SenderProfile_hover:hover {
+        overflow: visible;
+        width: auto;
+        z-index: 10;
+    }
 }
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 80e5d17bf30..66ed5ee81f9 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -117,7 +117,8 @@ export default class MessagePanel extends React.Component {
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
-            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -171,7 +172,8 @@ export default class MessagePanel extends React.Component {
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
 
-        this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
+        this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange);
     }
 
     componentDidMount() {
@@ -182,6 +184,7 @@ export default class MessagePanel extends React.Component {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
         SettingsStore.unwatchSetting(this._layoutWatcherRef);
+        SettingsStore.unwatchSetting(this._displayAvatarsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -202,7 +205,13 @@ export default class MessagePanel extends React.Component {
 
     onLayoutChange = () => {
         this.setState({
-            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+        });
+    }
+
+    onDisplayAvatarsChange = () => {
+        this.setState({
+            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
         });
     }
 
@@ -608,6 +617,7 @@ export default class MessagePanel extends React.Component {
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
                         useIRCLayout={this.state.useIRCLayout}
+                        displayAvatars={this.state.displayAvatars}
                     />
                 </TileErrorBoundary>
             </li>,
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index de242f56320..d1d46e709a4 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -39,6 +39,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         useIRCLayout: PropTypes.bool,
+        // Specifies whether to display avatars.
+        displayAvatars: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -178,12 +180,12 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout, displayAvatars) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div className="mx_ReplyThread_wrapper_empty" />;
         }
         return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;
+            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} displayAvatars={displayAvatars} />;
     }
 
     componentDidMount() {
@@ -334,7 +336,9 @@ export default class ReplyThread extends React.Component {
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
-                    useIRCLayout={this.props.useIRCLayout} />
+                    useIRCLayout={this.props.useIRCLayout}
+                    displayAvatars={this.props.displayAvatars}
+                />
             </blockquote>;
         });
 
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index bed93b68c3a..d95c9d685a2 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -131,7 +131,10 @@ export default createReactClass({
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
+                <div className="mx_SenderProfile_hover">
+                    { content }
                 { content }
+                </div>
             </div>
         );
     },
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 837c8929b96..b2daa5667ff 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -209,6 +209,9 @@ export default createReactClass({
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
+
+        // whether to display avatars
+        displayAvatars: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -713,7 +716,7 @@ export default createReactClass({
             needsSenderProfile = true;
         }
 
-        if (this.props.mxEvent.sender && avatarSize) {
+        if (this.props.mxEvent.sender && avatarSize && this.props.displayAvatars) {
             avatar = (
                     <div className="mx_EventTile_avatar">
                         <MemberAvatar member={this.props.mxEvent.sender}
@@ -897,6 +900,7 @@ export default createReactClass({
                     this.props.permalinkCreator,
                     this._replyThread,
                     this.props.useIRCLayout,
+                    this.props.displayAvatars,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3dcba0f5464..a3cd88f9aea 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -409,6 +409,7 @@
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use IRC layout": "Use IRC layout",
+    "Display user avatars on messages": "Display user avatars on messages",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index c51bf44ee51..7942aa67fc2 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -143,6 +143,18 @@ export const SETTINGS = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_irc_ui": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Use IRC layout'),
+        default: false,
+        isFeature: true,
+    },
+    "feature_no_timeline_avatars": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Display user avatars on messages'),
+        default: true,
+        isFeature: true,
+    },
     "mjolnirRooms": {
         supportedLevels: ['account'],
         default: [],
@@ -170,11 +182,6 @@ export const SETTINGS = {
         default: true,
         invertedSettingName: 'MessageComposerInput.dontSuggestEmoji',
     },
-    "useIRCLayout": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use IRC layout'),
-        default: false,
-    },
     "useCompactLayout": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Use compact timeline layout'),

From 5a0fdb36c0ec70ddb87f1f918b953c4389392509 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 7 May 2020 14:06:40 +0100
Subject: [PATCH 14/29] Remove unused setting

---
 src/settings/Settings.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 7942aa67fc2..032b0ee9063 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -94,12 +94,6 @@ export const SETTINGS = {
     //     // not use this for new settings.
     //     invertedSettingName: "my-negative-setting",
     // },
-    "feature_alternate_message_layouts": {
-        isFeature: true,
-        displayName: _td("Alternate message layouts"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-    },
     "feature_pinning": {
         isFeature: true,
         displayName: _td("Message Pinning"),

From bc5fc57dd667d89fd774949cb2b940d198518a90 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 7 May 2020 14:22:15 +0100
Subject: [PATCH 15/29] Lint

This is why we shouldn't rely on regex
---
 src/components/structures/MessagePanel.js    | 6 +++++-
 src/components/views/elements/ReplyThread.js | 9 +++++++--
 src/i18n/strings/en_EN.json                  | 4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 66ed5ee81f9..f46df0175a8 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -173,7 +173,11 @@ export default class MessagePanel extends React.Component {
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
 
         this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
-        this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange);
+        this._displayAvatarsWatcherRef = SettingsStore.watchSetting(
+            "feature_no_timeline_avatars",
+            null,
+            this.onDisplayAvatarsChange,
+        );
     }
 
     componentDidMount() {
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index d1d46e709a4..6bfda5dd941 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -184,8 +184,13 @@ export default class ReplyThread extends React.Component {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div className="mx_ReplyThread_wrapper_empty" />;
         }
-        return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} displayAvatars={displayAvatars} />;
+        return <ReplyThread
+            parentEv={parentEv}
+            onHeightChanged={onHeightChanged}
+            ref={ref}
+            permalinkCreator={permalinkCreator}
+            useIRCLayout={useIRCLayout}
+            displayAvatars={displayAvatars} />;
     }
 
     componentDidMount() {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a3cd88f9aea..ca62eb44fab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -405,11 +405,11 @@
     "Multiple integration managers": "Multiple integration managers",
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
     "Support adding custom themes": "Support adding custom themes",
+    "Use IRC layout": "Use IRC layout",
+    "Display user avatars on messages": "Display user avatars on messages",
     "Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
-    "Use IRC layout": "Use IRC layout",
-    "Display user avatars on messages": "Display user avatars on messages",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",

From ac95172ed4e6981bc5615fb982176d4a8c17a866 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 7 May 2020 14:56:45 +0100
Subject: [PATCH 16/29] tighter layout

---
 res/css/views/rooms/_IRCLayout.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index e4536aec20e..fcdeef6590f 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -21,7 +21,7 @@ $right-padding: 5px;
 
 .mx_IRCLayout {
 
-    line-height: $font-20px !important;
+    line-height: $font-18px !important;
 
     .mx_EventTile {
         display: flex;
@@ -52,7 +52,6 @@ $right-padding: 5px;
         > .mx_EventTile_line {
             order: 3;
             flex-grow: 1;
-            margin-bottom: -6px;
         }
 
         > .mx_EventTile_avatar {

From 9b7c63a7116c369d3e3e59c3a643067b6666ebca Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Fri, 8 May 2020 20:53:32 +0100
Subject: [PATCH 17/29] Duplicated names

---
 src/components/views/messages/SenderProfile.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index d95c9d685a2..d512b186e99 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -133,7 +133,6 @@ export default createReactClass({
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <div className="mx_SenderProfile_hover">
                     { content }
-                { content }
                 </div>
             </div>
         );

From 82396661cf86d7c41285cded2d22523e84f3bc23 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Fri, 8 May 2020 22:21:26 +0100
Subject: [PATCH 18/29] Implement nitpicks

- usernames are elipsed
- icon alignment fixed
- replies are more dense
- reply messages respond to name widths
- fixed between message padding problem (flex ftw)
---
 res/css/views/rooms/_IRCLayout.scss | 62 +++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index fcdeef6590f..f5d86648841 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -18,12 +18,19 @@ $name-width: 70px;
 $icon-width: 14px;
 $timestamp-width: 45px;
 $right-padding: 5px;
+$irc-line-height: $font-18px;
 
 .mx_IRCLayout {
 
-    line-height: $font-18px !important;
+    line-height: $irc-line-height !important;
 
     .mx_EventTile {
+
+        // timestamps are links which shouldn't be underlined
+        > a {
+            text-decoration: none;
+        }
+
         display: flex;
         flex-direction: row;
         align-items: flex-start;
@@ -49,7 +56,10 @@ $right-padding: 5px;
             overflow: visible;
         }
 
-        > .mx_EventTile_line {
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
             order: 3;
             flex-grow: 1;
         }
@@ -60,7 +70,7 @@ $right-padding: 5px;
             top: 0;
             left: 0;
             flex-shrink: 0;
-            height: 22px;
+            height: $irc-line-height;
             display: flex;
             align-items: center;
 
@@ -79,10 +89,6 @@ $right-padding: 5px;
             text-align: right;
         }
 
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding: 0;
-        }
-
         .mx_EventTile_e2eIcon {
             position: relative;
             right: unset;
@@ -98,6 +104,8 @@ $right-padding: 5px;
             .mx_ReplyThread_wrapper_empty {
                 display: inline-block;
             }
+
+            
         }
 
         .mx_EvenTile_line .mx_MessageActionBar,
@@ -114,10 +122,25 @@ $right-padding: 5px;
         }
     }
 
+    .mx_EventTile_emote {
+        > .mx_EventTile_avatar {
+            margin-left: calc($name-width + $icon-width + $right-padding);
+        }
+    }
+
+    blockquote {
+        margin: 0;
+    }
+
     .mx_EventListSummary {
         > .mx_EventTile_line {
             padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
         }
+
+        .mx_EventListSummary_avatars {
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .mx_EventTile.mx_EventTile_info {
@@ -131,16 +154,16 @@ $right-padding: 5px;
         }
 
         .mx_TextualEvent {
-            line-height: $font-22px;
+            line-height: $irc-line-height;
         }
     }
 
     .mx_EventTile_continuation:not(.mx_EventTile_info) {
-        .mx_EventTile_avatar {
+        > .mx_EventTile_avatar {
             visibility: hidden;
         }
 
-        .mx_SenderProfile {
+        > .mx_SenderProfile {
             visibility: hidden;
         }
     }
@@ -156,8 +179,15 @@ $right-padding: 5px;
     .mx_SenderProfile_hover {
         background-color: $primary-bg-color;
         overflow: hidden;
-        width: $name-width;
-        transition: width 2s;
+
+        > span {
+            display: flex;
+
+            > .mx_SenderProfile_name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
     }
 
     .mx_SenderProfile_hover:hover {
@@ -165,4 +195,12 @@ $right-padding: 5px;
         width: auto;
         z-index: 10;
     }
+
+    .mx_ReplyThread {
+        margin: 0;
+        .mx_SenderProfile {
+            width: unset;
+            max-width: $name-width;
+        }
+    }
 }

From fef4d882c44dcf93b677bac50cc09097df7f7839 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Fri, 8 May 2020 22:35:40 +0100
Subject: [PATCH 19/29] lint

---
 res/css/views/rooms/_IRCLayout.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index f5d86648841..301f712ffb6 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -104,8 +104,6 @@ $irc-line-height: $font-18px;
             .mx_ReplyThread_wrapper_empty {
                 display: inline-block;
             }
-
-            
         }
 
         .mx_EvenTile_line .mx_MessageActionBar,

From 5029c3f1434b33fe8b4aae825f5f3e03d4425dc0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 13 May 2020 02:16:43 +0100
Subject: [PATCH 20/29] Implement IRC draggable display name width

---
 res/css/views/rooms/_IRCLayout.scss           | 23 +++--
 src/components/structures/MessagePanel.js     |  7 ++
 src/components/structures/ScrollPanel.js      |  6 ++
 src/components/views/elements/Draggable.tsx   | 84 ++++++++++++++++++
 .../views/elements/ErrorBoundary.js           |  2 +-
 .../elements/IRCTimelineProfileResizer.tsx    | 86 +++++++++++++++++++
 src/settings/Settings.js                      |  7 ++
 7 files changed, 207 insertions(+), 8 deletions(-)
 create mode 100644 src/components/views/elements/Draggable.tsx
 create mode 100644 src/components/views/elements/IRCTimelineProfileResizer.tsx

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 301f712ffb6..159cfc0aad0 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$name-width: 70px;
 $icon-width: 14px;
 $timestamp-width: 45px;
 $right-padding: 5px;
 $irc-line-height: $font-18px;
 
 .mx_IRCLayout {
+    --name-width: 70px;
 
     line-height: $irc-line-height !important;
 
@@ -48,7 +48,7 @@ $irc-line-height: $font-18px;
         > .mx_SenderProfile {
             order: 2;
             flex-shrink: 0;
-            width: $name-width;
+            width: var(--name-width);
             text-overflow: ellipsis;
             text-align: right;
             display: flex;
@@ -122,7 +122,7 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile_emote {
         > .mx_EventTile_avatar {
-            margin-left: calc($name-width + $icon-width + $right-padding);
+            margin-left: calc(var(--name-width) + $icon-width + $right-padding);
         }
     }
 
@@ -132,7 +132,7 @@ $irc-line-height: $font-18px;
 
     .mx_EventListSummary {
         > .mx_EventTile_line {
-            padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+            padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
         }
 
         .mx_EventListSummary_avatars {
@@ -143,12 +143,12 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile.mx_EventTile_info {
         .mx_EventTile_avatar {
-            left: calc($name-width + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + $icon-width);
             top: 0;
         }
 
         .mx_EventTile_line {
-            left: calc($name-width + 10px + $icon-width);
+            left: calc(var(--name-width) + 10px + $icon-width);
         }
 
         .mx_TextualEvent {
@@ -198,7 +198,16 @@ $irc-line-height: $font-18px;
         margin: 0;
         .mx_SenderProfile {
             width: unset;
-            max-width: $name-width;
+            max-width: var(--name-width);
         }
     }
+
+    .mx_ProfileResizer {
+        position: absolute;
+        height: 100%;
+        width: 15px;
+        left: calc(80px + var(--name-width));
+        cursor: col-resize;
+        z-index: 100;
+    }
 }
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index f46df0175a8..1c10efb3468 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -29,6 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
 import {textForEvent} from "../../TextForEvent";
+import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -819,6 +820,11 @@ export default class MessagePanel extends React.Component {
             );
         }
 
+        let ircResizer = null;
+        if (this.state.useIRCLayout) {
+            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room.roomId} />;
+        }
+
         return (
             <ErrorBoundary>
                 <ScrollPanel
@@ -831,6 +837,7 @@ export default class MessagePanel extends React.Component {
                     style={style}
                     stickyBottom={this.props.stickyBottom}
                     resizeNotifier={this.props.resizeNotifier}
+                    fixedChildren={ircResizer}
                 >
                     { topSpinner }
                     { this._getEventTiles() }
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 4f44c1a1694..cb0114b243d 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -144,6 +144,11 @@ export default createReactClass({
         /* resizeNotifier: ResizeNotifier to know when middle column has changed size
          */
         resizeNotifier: PropTypes.object,
+
+        /* fixedChildren: allows for children to be passed which are rendered outside
+         * of the wrapper
+         */
+        fixedChildren: PropTypes.node,
     },
 
     getDefaultProps: function() {
@@ -881,6 +886,7 @@ export default createReactClass({
         return (<AutoHideScrollbar wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
                 className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
+                    { this.props.fixedChildren }
                     <div className="mx_RoomView_messageListWrapper">
                         <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
                             { this.props.children }
diff --git a/src/components/views/elements/Draggable.tsx b/src/components/views/elements/Draggable.tsx
new file mode 100644
index 00000000000..98f86fd5244
--- /dev/null
+++ b/src/components/views/elements/Draggable.tsx
@@ -0,0 +1,84 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+interface IProps {
+    className: string,
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
+    onMouseUp: (event: MouseEvent) => void,
+}
+
+interface IState {
+    onMouseMove: (event: MouseEvent) => void,
+    onMouseUp: (event: MouseEvent) => void,
+    location: ILocationState,
+}
+
+export interface ILocationState {
+    currentX: number,
+    currentY: number,
+}
+
+export default class Draggable extends React.Component<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            onMouseMove: this.onMouseMove.bind(this),
+            onMouseUp: this.onMouseUp.bind(this),
+            location: {
+                currentX: 0,
+                currentY: 0,
+            },
+        };
+    }
+
+    private onMouseDown = (event: MouseEvent): void => {
+        this.setState({
+            location: {
+                currentX: event.clientX,
+                currentY: event.clientY,
+            },
+        });
+
+        document.addEventListener("mousemove", this.state.onMouseMove);
+        document.addEventListener("mouseup", this.state.onMouseUp);
+        console.log("Mouse down")
+    }
+
+    private onMouseUp = (event: MouseEvent): void => {
+        document.removeEventListener("mousemove", this.state.onMouseMove);
+        document.removeEventListener("mouseup", this.state.onMouseUp);
+        this.props.onMouseUp(event);
+        console.log("Mouse up")
+    }
+
+    private onMouseMove(event: MouseEvent): void {
+        console.log("Mouse Move")
+        const newLocation = this.props.dragFunc(this.state.location, event);
+
+        this.setState({
+            location: newLocation,
+        });
+    }
+
+    render() {
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.js
index a043b350ab0..1abd11f8383 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/src/components/views/elements/ErrorBoundary.js
@@ -73,7 +73,7 @@ export default class ErrorBoundary extends React.PureComponent {
         if (this.state.error) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new";
-            return <div className="mx_ErrorBoundary">
+            return <div className="mx_ErrorBoundary mx_IRCLayout">
                 <div className="mx_ErrorBoundary_body">
                     <h1>{_t("Something went wrong!")}</h1>
                     <p>{_t(
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
new file mode 100644
index 00000000000..80a86b20058
--- /dev/null
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import Draggable, {ILocationState} from './Draggable';
+
+interface IProps {
+    // Current room
+    roomId: string,
+    minWidth: number,
+    maxWidth: number,
+};
+
+interface IState {
+    width: number,
+    IRCLayoutRoot: HTMLElement,
+};
+
+export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
+            IRCLayoutRoot: null,
+        }
+    };
+
+    componentDidMount() {
+        this.setState({
+            IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
+        }, () => this.updateCSSWidth(this.state.width))
+    }
+
+    private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
+        const offset = event.clientX - location.currentX;
+        const newWidth = this.state.width + offset;
+
+        console.log({offset})
+        // If we're trying to go smaller than min width, don't.
+        if (this.state.width <= this.props.minWidth && offset <= 0) {
+            return location;
+        }
+
+        if (this.state.width >= this.props.maxWidth && offset >= 0) {
+            return location;
+        }
+
+        this.setState({
+            width: newWidth,
+        });
+
+        this.updateCSSWidth.bind(this)(newWidth);
+
+        return {
+            currentX: event.clientX,
+            currentY: location.currentY,
+        }
+    }
+
+    private updateCSSWidth(newWidth: number) {
+        this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+    }
+
+    private onMoueUp(event: MouseEvent) {
+        SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+    }
+
+    render() {
+        return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc.bind(this)} onMouseUp={this.onMoueUp.bind(this)}/>
+    }
+};
\ No newline at end of file
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 032b0ee9063..6d741ba3a56 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -531,4 +531,11 @@ export const SETTINGS = {
             MatrixClient.prototype.setCryptoTrustCrossSignedDevices, true,
         ),
     },
+    "ircDisplayNameWidth": {
+        // We specifically want to have room-device > device so that users may set a device default
+        // with a per-room override.
+        supportedLevels: ['room-device', 'device'],
+        displayName: _td("IRC display name width"),
+        default: 80,
+    },
 };

From 3f04f5163a963b9193199abb340719061ae0e921 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 13 May 2020 14:04:46 +0100
Subject: [PATCH 21/29] Implement more nitpicks

- fix avatar inital aligment
- right align names
- set flair height to avatar's
- fix conditions for resizing to be more stable
---
 res/css/views/rooms/_IRCLayout.scss                 | 13 ++++++++++++-
 .../views/elements/IRCTimelineProfileResizer.tsx    |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 159cfc0aad0..8d48c72f8aa 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -54,6 +54,7 @@ $irc-line-height: $font-18px;
             display: flex;
             align-items: center;
             overflow: visible;
+            justify-content: flex-end;
         }
 
         .mx_EventTile_line, .mx_EventTile_reply {
@@ -79,7 +80,7 @@ $irc-line-height: $font-18px;
                 height: $font-14px !important;
                 width: $font-14px !important;
                 font-size: $font-10px !important;
-                line-height: $font-14px !important;
+                line-height: $font-15px !important;
             }
         }
 
@@ -188,6 +189,10 @@ $irc-line-height: $font-18px;
         }
     }
 
+    .mx_SenderProfile:hover {
+        justify-content: flex-start;
+    }
+
     .mx_SenderProfile_hover:hover {
         overflow: visible;
         width: auto;
@@ -210,4 +215,10 @@ $irc-line-height: $font-18px;
         cursor: col-resize;
         z-index: 100;
     }
+
+    // Need to use important to override the js provided height and width values.
+    .mx_Flair > img {
+        height: $font-14px !important;
+        width: $font-14px !important;
+    }
 }
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index 80a86b20058..44ceeb9b7b7 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -52,11 +52,11 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
 
         console.log({offset})
         // If we're trying to go smaller than min width, don't.
-        if (this.state.width <= this.props.minWidth && offset <= 0) {
+        if (newWidth < this.props.minWidth) {
             return location;
         }
 
-        if (this.state.width >= this.props.maxWidth && offset >= 0) {
+        if (newWidth > this.props.maxWidth) {
             return location;
         }
 

From 312b616d7701e9b9f8460d210bc22a07c1253be9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 13 May 2020 14:11:16 +0100
Subject: [PATCH 22/29] fix i18n

---
 src/i18n/strings/en_EN.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ca62eb44fab..37b9c1dfc8a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -453,6 +453,7 @@
     "Keep recovery passphrase in memory for this session": "Keep recovery passphrase in memory for this session",
     "How fast should messages be downloaded.": "How fast should messages be downloaded.",
     "Manually verify all remote sessions": "Manually verify all remote sessions",
+    "IRC display name width": "IRC display name width",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading report": "Uploading report",

From 5c2abcf1a4b7bd9cbc35dd6c297073db56eb8a52 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 13 May 2020 17:05:37 +0100
Subject: [PATCH 23/29] Show username on continuations

---
 res/css/views/rooms/_IRCLayout.scss | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 8d48c72f8aa..f2a616f9c97 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -157,16 +157,6 @@ $irc-line-height: $font-18px;
         }
     }
 
-    .mx_EventTile_continuation:not(.mx_EventTile_info) {
-        > .mx_EventTile_avatar {
-            visibility: hidden;
-        }
-
-        > .mx_SenderProfile {
-            visibility: hidden;
-        }
-    }
-
     // Suppress highlight thing from the normal Layout.
     .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
     .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,

From 17f535e5f878337854b7599ca8da2b3e8528c81b Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 18 May 2020 16:37:10 +0100
Subject: [PATCH 24/29] Fix review problems

- removed superfluous position and classes
- fixed compact view
- fixed event list summary avatar and text overlap
- fixed a problem where the mention list refuses to load.
---
 res/css/views/rooms/_EventTile.scss           | 79 ------------------
 res/css/views/rooms/_GroupLayout.scss         | 82 ++++++++++++++++++-
 res/css/views/rooms/_IRCLayout.scss           |  4 +-
 src/components/structures/MessagePanel.js     |  2 +-
 .../views/elements/ErrorBoundary.js           |  2 +-
 .../elements/IRCTimelineProfileResizer.tsx    |  4 +-
 src/components/views/rooms/EventTile.js       |  2 -
 7 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index b9a41c43103..c278f813d01 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -37,7 +37,6 @@ limitations under the License.
 }
 
 .mx_EventTile_avatar {
-    position: absolute;
     top: 14px;
     left: 8px;
     cursor: pointer;
@@ -576,84 +575,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* end of overrides */
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_EventTile {
-        padding-top: 4px;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
-        padding-top: 0px;
-        font-size: $font-13px;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: $font-20px;
-        }
-        .mx_EventTile_avatar {
-            top: 4px;
-        }
-    }
-
-    .mx_EventTile .mx_SenderProfile {
-        font-size: $font-13px;
-    }
-
-    .mx_EventTile.mx_EventTile_emote {
-        // add a bit more space for emotes so that avatars don't collide
-        padding-top: 8px;
-        .mx_EventTile_avatar {
-            top: 2px;
-        }
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 1px;
-        }
-    }
-
-    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
-        padding-top: 0;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 0px;
-        }
-    }
-
-    .mx_EventTile_line, .mx_EventTile_reply {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-
-    .mx_EventTile_avatar {
-        top: 2px;
-    }
-
-    .mx_EventTile_e2eIcon {
-        top: 3px;
-    }
-
-    .mx_EventTile_readAvatars {
-        top: 27px;
-    }
-
-    .mx_EventTile_continuation .mx_EventTile_readAvatars,
-    .mx_EventTile_emote .mx_EventTile_readAvatars {
-        top: 5px;
-    }
-
-    .mx_EventTile_info .mx_EventTile_readAvatars {
-        top: 4px;
-    }
-
-    .mx_RoomView_MessageList h2 {
-        margin-top: 6px;
-    }
-
-    .mx_EventTile_content .markdown-body {
-        p, ul, ol, dl, blockquote, pre, table {
-            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-        }
-    }
-}
-
 .mx_EventTile_tileError {
     color: red;
     text-align: center;
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index 6528d6c6cd0..bfe463ed496 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -47,6 +47,86 @@ $left-gutter: 65px;
     }
 
     .mx_EventTile_info .mx_EventTile_line {
-        padding-left: 83px;
+        padding-left: calc($left-gutter + 18px);
     }
 }
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+        padding-top: 0px;
+        font-size: $font-13px;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            line-height: $font-20px;
+        }
+        .mx_EventTile_avatar {
+            top: 4px;
+        }
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: $font-13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        // add a bit more space for emotes so that avatars don't collide
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line, .mx_EventTile_reply {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 3px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_EventTile_info .mx_EventTile_readAvatars {
+        top: 4px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+
+    .mx_EventTile_content .markdown-body {
+        p, ul, ol, dl, blockquote, pre, table {
+            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+        }
+    }
+}
\ No newline at end of file
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index f2a616f9c97..5f88473c5ff 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -138,7 +138,7 @@ $irc-line-height: $font-18px;
 
         .mx_EventListSummary_avatars {
             padding: 0;
-            margin: 0;
+            margin: 0 9px 0 0;
         }
     }
 
@@ -185,7 +185,7 @@ $irc-line-height: $font-18px;
 
     .mx_SenderProfile_hover:hover {
         overflow: visible;
-        width: auto;
+        width: max(auto, 100%);
         z-index: 10;
     }
 
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 1c10efb3468..f875467e4fb 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -822,7 +822,7 @@ export default class MessagePanel extends React.Component {
 
         let ircResizer = null;
         if (this.state.useIRCLayout) {
-            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room.roomId} />;
+            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room ? this.props.roomroomId : null} />;
         }
 
         return (
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.js
index 1abd11f8383..a043b350ab0 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/src/components/views/elements/ErrorBoundary.js
@@ -73,7 +73,7 @@ export default class ErrorBoundary extends React.PureComponent {
         if (this.state.error) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new";
-            return <div className="mx_ErrorBoundary mx_IRCLayout">
+            return <div className="mx_ErrorBoundary">
                 <div className="mx_ErrorBoundary_body">
                     <h1>{_t("Something went wrong!")}</h1>
                     <p>{_t(
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index 44ceeb9b7b7..596d46bf36b 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -77,7 +77,9 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
     }
 
     private onMoueUp(event: MouseEvent) {
-        SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        if (this.props.roomId) {
+            SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        }
     }
 
     render() {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index b2daa5667ff..4ff3a5ccfcd 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -659,8 +659,6 @@ export default createReactClass({
         const classes = classNames({
             mx_EventTile_bubbleContainer: isBubbleMessage,
             mx_EventTile: true,
-            mx_EventTile_irc: this.props.useIRCLayout,
-            mx_EventTile_group: !this.props.useIRCLayout,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,

From 5380e76b7b95b952b9ec764dbf03baf227851bc0 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 18 May 2020 16:43:47 +0100
Subject: [PATCH 25/29] lint

---
 res/css/views/rooms/_GroupLayout.scss     | 2 +-
 src/components/structures/MessagePanel.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index bfe463ed496..40440f7d499 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -129,4 +129,4 @@ $left-gutter: 65px;
             margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index f875467e4fb..b3f9b40ada4 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -822,7 +822,11 @@ export default class MessagePanel extends React.Component {
 
         let ircResizer = null;
         if (this.state.useIRCLayout) {
-            ircResizer = <IRCTimelineProfileResizer minWidth={20} maxWidth={600} roomId={this.props.room ? this.props.roomroomId : null} />;
+            ircResizer = <IRCTimelineProfileResizer
+                minWidth={20}
+                maxWidth={600}
+                roomId={this.props.room ? this.props.roomroomId : null}
+            />;
         }
 
         return (

From 4deeef5fca9afcaf35d3c76f20ea84c8ac4808aa Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 18 May 2020 16:57:00 +0100
Subject: [PATCH 26/29] Remove ability to remove avatars

---
 src/components/structures/MessagePanel.js    | 13 -------------
 src/components/views/elements/ReplyThread.js |  7 ++-----
 src/components/views/rooms/EventTile.js      |  6 +-----
 src/settings/Settings.js                     |  6 ------
 4 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b3f9b40ada4..404e950d7f3 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -174,11 +174,6 @@ export default class MessagePanel extends React.Component {
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
 
         this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
-        this._displayAvatarsWatcherRef = SettingsStore.watchSetting(
-            "feature_no_timeline_avatars",
-            null,
-            this.onDisplayAvatarsChange,
-        );
     }
 
     componentDidMount() {
@@ -189,7 +184,6 @@ export default class MessagePanel extends React.Component {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
         SettingsStore.unwatchSetting(this._layoutWatcherRef);
-        SettingsStore.unwatchSetting(this._displayAvatarsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -214,12 +208,6 @@ export default class MessagePanel extends React.Component {
         });
     }
 
-    onDisplayAvatarsChange = () => {
-        this.setState({
-            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
-        });
-    }
-
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -622,7 +610,6 @@ export default class MessagePanel extends React.Component {
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
                         useIRCLayout={this.state.useIRCLayout}
-                        displayAvatars={this.state.displayAvatars}
                     />
                 </TileErrorBoundary>
             </li>,
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 6bfda5dd941..04e31d64902 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -39,8 +39,6 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         useIRCLayout: PropTypes.bool,
-        // Specifies whether to display avatars.
-        displayAvatars: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -180,7 +178,7 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout, displayAvatars) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div className="mx_ReplyThread_wrapper_empty" />;
         }
@@ -190,7 +188,7 @@ export default class ReplyThread extends React.Component {
             ref={ref}
             permalinkCreator={permalinkCreator}
             useIRCLayout={useIRCLayout}
-            displayAvatars={displayAvatars} />;
+        />;
     }
 
     componentDidMount() {
@@ -342,7 +340,6 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     useIRCLayout={this.props.useIRCLayout}
-                    displayAvatars={this.props.displayAvatars}
                 />
             </blockquote>;
         });
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 4ff3a5ccfcd..1cb632b2e8e 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -209,9 +209,6 @@ export default createReactClass({
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
-
-        // whether to display avatars
-        displayAvatars: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -714,7 +711,7 @@ export default createReactClass({
             needsSenderProfile = true;
         }
 
-        if (this.props.mxEvent.sender && avatarSize && this.props.displayAvatars) {
+        if (this.props.mxEvent.sender && avatarSize) {
             avatar = (
                     <div className="mx_EventTile_avatar">
                         <MemberAvatar member={this.props.mxEvent.sender}
@@ -898,7 +895,6 @@ export default createReactClass({
                     this.props.permalinkCreator,
                     this._replyThread,
                     this.props.useIRCLayout,
-                    this.props.displayAvatars,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 6d741ba3a56..f54b32a8b55 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -143,12 +143,6 @@ export const SETTINGS = {
         default: false,
         isFeature: true,
     },
-    "feature_no_timeline_avatars": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Display user avatars on messages'),
-        default: true,
-        isFeature: true,
-    },
     "mjolnirRooms": {
         supportedLevels: ['account'],
         default: [],

From bba6b2c4413b47d1d3ae95d350df99d2826668eb Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 18 May 2020 17:06:54 +0100
Subject: [PATCH 27/29] Appease i18n

---
 src/i18n/strings/en_EN.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 37b9c1dfc8a..12838968f75 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -406,7 +406,6 @@
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
     "Support adding custom themes": "Support adding custom themes",
     "Use IRC layout": "Use IRC layout",
-    "Display user avatars on messages": "Display user avatars on messages",
     "Enable cross-signing to verify per-user instead of per-session": "Enable cross-signing to verify per-user instead of per-session",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",

From 7bb7f30b8f4ca9c8bd3d02e69ff2928317626fa9 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 18 May 2020 22:02:22 +0100
Subject: [PATCH 28/29] missed one

---
 src/components/structures/MessagePanel.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 404e950d7f3..cac04d84f1b 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -119,7 +119,6 @@ export default class MessagePanel extends React.Component {
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
             useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
-            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker

From 286828b3bb8a3556726c625be4b6034c1e83d87b Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Tue, 19 May 2020 16:15:13 +0100
Subject: [PATCH 29/29] Disable irc mode in notifiactions panel

---
 src/components/structures/MessagePanel.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index cac04d84f1b..93e4668f668 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -110,15 +110,16 @@ export default class MessagePanel extends React.Component {
         showReactions: PropTypes.bool,
     };
 
-    constructor() {
-        super();
+    // Force props to be loaded for useIRCLayout
+    constructor(props) {
+        super(props);
 
         this.state = {
             // previous positions the read marker has been in, so we can
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -203,10 +204,15 @@ export default class MessagePanel extends React.Component {
 
     onLayoutChange = () => {
         this.setState({
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
         });
     }
 
+    useIRCLayout(ircLayoutSelected) {
+        // if room is null we are not in a normal room list
+        return ircLayoutSelected && this.props.room;
+    }
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {