Merge branch 'message-bubbles' of https://github.com/maltee1/nheko into maltee1-message-bubbles

14 files changed, 213 insertions, 118 deletions

diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index 7f2de64d..b65b9692 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -33,7 +33,7 @@ ScrollView {
         //reuseItems: true
         boundsBehavior: Flickable.StopAtBounds
         pixelAligned: true
-        spacing: 4
+        spacing: 2
         verticalLayoutDirection: ListView.BottomToTop
         onCountChanged: {
             // Mark timeline as read
@@ -249,12 +249,12 @@ ScrollView {
             id: sectionHeader
 
             Column {
-                topPadding: 4
-                bottomPadding: 4
+                topPadding: userName_.visible? 4: 0
+                bottomPadding: Settings.bubbles? (isSender? 0 : 2) : 3
                 spacing: 8
-                visible: (previousMessageUserId !== userId || previousMessageDay !== day)
+                visible: (previousMessageUserId !== userId || previousMessageDay !== day || isStateEvent !== previousMessageIsStateEvent)
                 width: parentWidth
-                height: ((previousMessageDay !== day) ? dateBubble.height + 8 + userName.height : userName.height) + 8
+                height: ((previousMessageDay !== day) ? dateBubble.height : 0) + (isStateEvent? 0 : userName.height +8 )
 
                 Label {
                     id: dateBubble
@@ -278,18 +278,19 @@ ScrollView {
                 Row {
                     height: userName_.height
                     spacing: 8
+                    visible: !isStateEvent && (!isSender || !Settings.bubbles)
 
                     Avatar {
                         id: messageUserAvatar
 
-                        width: Nheko.avatarSize
-                        height: Nheko.avatarSize
+                        width: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1)
+                        height: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1)
                         url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/")
                         displayName: userName
                         userid: userId
                         onClicked: room.openUserProfile(userId)
                         ToolTip.visible: avatarHover.hovered
-                    ToolTip.delay: Nheko.tooltipDelay
+                        ToolTip.delay: Nheko.tooltipDelay
                         ToolTip.text: userid
 
                         HoverHandler {
@@ -317,7 +318,7 @@ ScrollView {
                         color: TimelineManager.userColor(userId, Nheko.colors.base)
                         textFormat: Text.RichText
                         ToolTip.visible: displayNameHover.hovered
-                    ToolTip.delay: Nheko.tooltipDelay
+                        ToolTip.delay: Nheko.tooltipDelay
                         ToolTip.text: userId
 
                         TapHandler {
@@ -379,6 +380,8 @@ ScrollView {
             required property bool isEncrypted
             required property bool isEditable
             required property bool isEdited
+            required property bool isStateEvent
+            required property bool previousMessageIsStateEvent
             required property string replyTo
             required property string userId
             required property string roomTopic
@@ -455,11 +458,14 @@ ScrollView {
                 property string previousMessageUserId: wrapper.previousMessageUserId
                 property string day: wrapper.day
                 property string previousMessageDay: wrapper.previousMessageDay
+                property bool previousMessageIsStateEvent: wrapper.previousMessageIsStateEvent
+                property bool isStateEvent: wrapper.isStateEvent
+                property bool isSender: wrapper.isSender
                 property string userName: wrapper.userName
                 property date timestamp: wrapper.timestamp
 
                 z: 4
-                active: previousMessageUserId !== undefined && previousMessageUserId !== userId || previousMessageDay !== day
+                active: previousMessageUserId !== undefined && previousMessageUserId !== userId || previousMessageDay !== day || previousMessageIsStateEvent !== isStateEvent
                 //asynchronous: true
                 sourceComponent: sectionHeader
                 visible: status == Loader.Ready
@@ -487,6 +493,7 @@ ScrollView {
                 isEncrypted: wrapper.isEncrypted
                 isEditable: wrapper.isEditable
                 isEdited: wrapper.isEdited
+                isStateEvent: wrapper.isStateEvent
                 replyTo: wrapper.replyTo
                 userId: wrapper.userId
                 userName: wrapper.userName
diff --git a/resources/qml/ReplyPopup.qml b/resources/qml/ReplyPopup.qml
index e6c83835..ef0d7c60 100644
--- a/resources/qml/ReplyPopup.qml
+++ b/resources/qml/ReplyPopup.qml
@@ -47,6 +47,7 @@ Rectangle {
         userId: modelData.userId ?? ""
         userName: modelData.userName ?? ""
         encryptionError: modelData.encryptionError ?? ""
+        width: parent.width
     }
 
     ImageButton {
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index dd1b3a0f..b74fb5c1 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -31,6 +31,7 @@ Item {
     required property bool isEncrypted
     required property bool isEditable
     required property bool isEdited
+    required property bool isStateEvent
     required property string replyTo
     required property string userId
     required property string userName
@@ -44,9 +45,8 @@ Item {
     required property int status
     required property int relatedEventCacheBuster
 
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: row.height
+    width: parent.width
+    height: childrenRect.height
 
     Rectangle {
         color: (Settings.messageHoverHighlight && hoverHandler.hovered) ? Nheko.colors.alternateBase : "transparent"
@@ -71,27 +71,48 @@ Item {
         gesturePolicy: TapHandler.ReleaseWithinBounds
     }
 
-    RowLayout {
+    Control {
         id: row
+        property bool bubbleOnRight : isSender && Settings.bubbles
+        property int bubblePadding: (parent.width-(Settings.smallAvatars? 0 : Nheko.avatarSize+8))/10
+        anchors.rightMargin: isSender || !Settings.bubbles? 0 : bubblePadding
+        anchors.leftMargin: (Settings.smallAvatars? 0 : Nheko.avatarSize+8) + (bubbleOnRight? bubblePadding : 0) // align bubble with section header
+        anchors.left: bubbleOnRight? undefined : parent.left
+        anchors.right: bubbleOnRight? parent.right : undefined
+        property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
+        width: Settings.bubbles? Math.min(maxWidth,implicitWidth+4) : maxWidth
+        leftPadding: 4
+        rightPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        topPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        bottomPadding: topPadding
+        background: Rectangle {
+            property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
+            property color bgColor: Nheko.colors.base
+            color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2))
+            radius: 4
+            visible: Settings.bubbles && !isStateEvent
+        }
 
-        anchors.rightMargin: 1
-        anchors.leftMargin: Nheko.avatarSize + 16
-        anchors.left: parent.left
-        anchors.right: parent.right
-
-        Column {
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignTop
-            spacing: 4
-            Layout.topMargin: 1
-            Layout.bottomMargin: 1
+        contentItem: GridLayout {
+            id: msg
+            rowSpacing: 0
+            columnSpacing: 2
+            columns: Settings.bubbles? 1 : 2
+            rows: Settings.bubbles? 3 : 2
 
             // fancy reply, if this is a reply
             Reply {
+                Layout.row: 0
+                Layout.column: 0
+                Layout.fillWidth: true
+                Layout.bottomMargin: visible? 2 : 0
+                Layout.preferredHeight: height
+                Layout.maximumWidth: implicitWidth
+                id: reply
+
                 function fromModel(role) {
                     return replyTo != "" ? room.dataById(replyTo, role, r.eventId) : null;
                 }
-
                 visible: replyTo
                 userColor: r.relatedEventCacheBuster, TimelineManager.userColor(userId, Nheko.colors.base)
                 blurhash: r.relatedEventCacheBuster, fromModel(Room.Blurhash) ?? ""
@@ -106,6 +127,7 @@ Item {
                 url: r.relatedEventCacheBuster, fromModel(Room.Url) ?? ""
                 originalWidth: r.relatedEventCacheBuster, fromModel(Room.OriginalWidth) ?? 0
                 isOnlyEmoji: r.relatedEventCacheBuster, fromModel(Room.IsOnlyEmoji) ?? false
+                isStateEvent: r.relatedEventCacheBuster, fromModel(Room.IsStateEvent) ?? false
                 userId: r.relatedEventCacheBuster, fromModel(Room.UserId) ?? ""
                 userName: r.relatedEventCacheBuster, fromModel(Room.UserName) ?? ""
                 thumbnailUrl: r.relatedEventCacheBuster, fromModel(Room.ThumbnailUrl) ?? ""
@@ -118,9 +140,13 @@ Item {
 
             // actual message content
             MessageDelegate {
+                Layout.row: 1
+                Layout.column: 0
+                Layout.fillWidth: true
+                Layout.preferredHeight: height
+                Layout.maximumWidth: implicitWidth
                 id: contentItem
 
-                width: parent.width
                 blurhash: r.blurhash
                 body: r.body
                 formattedBody: r.formattedBody
@@ -134,6 +160,7 @@ Item {
                 thumbnailUrl: r.thumbnailUrl
                 originalWidth: r.originalWidth
                 isOnlyEmoji: r.isOnlyEmoji
+                isStateEvent: r.isStateEvent
                 userId: r.userId
                 userName: r.userName
                 roomTopic: r.roomTopic
@@ -144,67 +171,82 @@ Item {
                 isReply: false
             }
 
-            Reactions {
-                id: reactionRow
+            RowLayout {
+                id: metadata
+                Layout.column: Settings.bubbles? 0 : 1
+                Layout.row: Settings.bubbles? 2 : 0
+                Layout.rowSpan: Settings.bubbles? 1 : 2
+                Layout.bottomMargin: -2
+                Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.preferredWidth: implicitWidth
+                visible: !isStateEvent
+
+                property double scaling: Settings.bubbles? 0.75 : 1
+
+                StatusIndicator {
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.preferredHeight: 16*parent.scaling
+                    Layout.preferredWidth: 16*parent.scaling
+                    status: r.status
+                    eventId: r.eventId
+                }
 
-                reactions: r.reactions
-                eventId: r.eventId
-            }
+                Image {
+                    visible: isEdited || eventId == chat.model.edit
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.preferredHeight: 16*parent.scaling
+                    Layout.preferredWidth: 16*parent.scaling
+                    sourceSize.width: 16 * Screen.devicePixelRatio*parent.scaling
+                    sourceSize.height: 16 * Screen.devicePixelRatio*parent.scaling
+                    source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
+                    ToolTip.visible: editHovered.hovered
+                    ToolTip.delay: Nheko.tooltipDelay
+                    ToolTip.text: qsTr("Edited")
+
+                    HoverHandler {
+                        id: editHovered
+                    }
 
-        }
+                }
 
-        StatusIndicator {
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            width: 16
-            status: r.status
-            eventId: r.eventId
-        }
+                EncryptionIndicator {
+                    visible: room.isEncrypted
+                    encrypted: isEncrypted
+                    trust: trustlevel
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.preferredHeight: 16*parent.scaling
+                    Layout.preferredWidth: 16*parent.scaling
+                    sourceSize.width: 16 * Screen.devicePixelRatio*parent.scaling
+                    sourceSize.height: 16 * Screen.devicePixelRatio*parent.scaling
+                }
 
-        Image {
-            visible: isEdited || eventId == chat.model.edit
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            Layout.preferredWidth: 16
-            height: 16
-            width: 16
-            sourceSize.width: 16 * Screen.devicePixelRatio
-            sourceSize.height: 16 * Screen.devicePixelRatio
-            source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
-            ToolTip.visible: editHovered.hovered
-            ToolTip.delay: Nheko.tooltipDelay
-            ToolTip.text: qsTr("Edited")
-
-            HoverHandler {
-                id: editHovered
-            }
+                Label {
+                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                    Layout.preferredWidth: implicitWidth
+                    text: timestamp.toLocaleTimeString(Locale.ShortFormat)
+                    color: Nheko.inactiveColors.text
+                    ToolTip.visible: ma.hovered
+                    ToolTip.delay: Nheko.tooltipDelay
+                    ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
+                    font.pointSize: 10*parent.scaling
+                    HoverHandler {
+                        id: ma
+                    }
 
+                }
+            }
         }
-
-        EncryptionIndicator {
-            visible: room.isEncrypted
-            encrypted: isEncrypted
-            trust: trustlevel
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            Layout.preferredWidth: 16
+    }
+    Reactions {
+        anchors {
+            top: row.bottom
+            topMargin: -2
+            left: row.left
         }
 
-        Label {
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            text: timestamp.toLocaleTimeString(Locale.ShortFormat)
-            width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
-            color: Nheko.inactiveColors.text
-            ToolTip.visible: ma.hovered
-            ToolTip.delay: Nheko.tooltipDelay
-            ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
-
-            HoverHandler {
-                id: ma
-            }
-
-        }
+        id: reactionRow
 
+        reactions: r.reactions
+        eventId: r.eventId
     }
-
 }
diff --git a/resources/qml/delegates/Encrypted.qml b/resources/qml/delegates/Encrypted.qml
index 6840c955..ecc771f5 100644
--- a/resources/qml/delegates/Encrypted.qml
+++ b/resources/qml/delegates/Encrypted.qml
@@ -16,7 +16,8 @@ Rectangle {
     required property string eventId
 
     radius: fontMetrics.lineSpacing / 2 + Nheko.paddingMedium
-    width: parent.width
+    width: parent.width? parent.width : 0
+    implicitWidth: encryptedText.implicitWidth+24+Nheko.paddingMedium*3 // Column doesn't provide a useful implicitWidth, should be replaced by ColumnLayout
     height: contents.implicitHeight + Nheko.paddingMedium * 2
     color: Nheko.colors.alternateBase
 
@@ -39,6 +40,7 @@ Rectangle {
             Layout.fillWidth: true
 
             MatrixText {
+                id: encryptedText
                 text: {
                     switch (encryptionError) {
                     case Olm.MissingSession:
diff --git a/resources/qml/delegates/FileMessage.qml b/resources/qml/delegates/FileMessage.qml
index f1fd07b9..fd81b176 100644
--- a/resources/qml/delegates/FileMessage.qml
+++ b/resources/qml/delegates/FileMessage.qml
@@ -14,6 +14,7 @@ Item {
 
     height: row.height + 24
     width: parent.width
+    implicitWidth: row.implicitWidth
 
     RowLayout {
         id: row
@@ -86,8 +87,7 @@ Item {
         color: Nheko.colors.alternateBase
         z: -1
         radius: 10
-        height: row.height + 24
-        width: 44 + 24 + 24 + Math.max(Math.min(filesize_.width, filesize_.implicitWidth), Math.min(filename_.width, filename_.implicitWidth))
+        anchors.fill: parent
     }
 
 }
diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml
index da15bdfe..a13bb4f6 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -17,13 +17,11 @@ Item {
     required property string filename
     required property bool isReply
     required property string eventId
-    property double tempWidth: Math.min(parent.width, originalWidth < 1 ? 200 : originalWidth)
-    property double tempHeight: tempWidth * proportionalHeight
     property double divisor: isReply ? 5 : 3
-    property bool tooHigh: tempHeight > timelineView.height / divisor
 
-    height: Math.round(tooHigh ? timelineView.height / divisor : tempHeight)
-    width: Math.round(tooHigh ? (timelineView.height / divisor) / proportionalHeight : tempWidth)
+    implicitWidth: Math.round(originalWidth*Math.min((timelineView.height/divisor)/(originalWidth*proportionalHeight), 1))
+    width: parent.width
+    height: width*proportionalHeight
 
     Image {
         id: blurhash_
diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml
index c0266c2c..3210128a 100644
--- a/resources/qml/delegates/MessageDelegate.qml
+++ b/resources/qml/delegates/MessageDelegate.qml
@@ -13,7 +13,7 @@ Item {
 
     required property bool isReply
     property alias child: chooser.child
-    property real implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : width
+    implicitWidth: (chooser.child && chooser.child.implicitWidth) ? chooser.child.implicitWidth : 0
     required property double proportionalHeight
     required property int type
     required property string typeString
@@ -27,6 +27,7 @@ Item {
     required property string url
     required property string thumbnailUrl
     required property bool isOnlyEmoji
+    required property bool isStateEvent
     required property string userId
     required property string userName
     required property string roomTopic
@@ -42,7 +43,9 @@ Item {
 
         //role: "type" //< not supported in our custom implementation, have to use roleValue
         roleValue: type
-        anchors.fill: parent
+        //anchors.fill: parent
+
+        width: parent.width? parent.width: 0 // this should get rid of "cannot read property 'width' of null"
 
         DelegateChoice {
             roleValue: MtxEvent.UnknownMessage
@@ -74,6 +77,7 @@ Item {
                 body: d.body
                 isOnlyEmoji: d.isOnlyEmoji
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
             }
 
         }
@@ -87,6 +91,7 @@ Item {
                 body: d.body
                 isOnlyEmoji: d.isOnlyEmoji
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
             }
 
         }
@@ -172,7 +177,7 @@ Item {
             roleValue: MtxEvent.Redacted
 
             Redacted {
-                delegateWidth: d.width
+                //delegateWidth: d.width
             }
         }
 
@@ -180,7 +185,8 @@ Item {
             roleValue: MtxEvent.Redaction
 
             Pill {
-                text: qsTr("removed")
+                text: qsTr("%1 removed a message").arg(d.userName)
+                isStateEvent: d.isStateEvent
             }
 
         }
@@ -189,7 +195,8 @@ Item {
             roleValue: MtxEvent.Encryption
 
             Pill {
-                text: qsTr("Encryption enabled")
+                text: qsTr("%1 enabled encryption").arg(d.userName)
+                isStateEvent: d.isStateEvent
             }
 
         }
@@ -211,7 +218,8 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
-                formatted: d.roomName ? qsTr("room name changed to: %1").arg(d.roomName) : qsTr("removed room name")
+                isStateEvent: d.isStateEvent
+                formatted: d.roomName ? qsTr("%2 changed the room name to: %1").arg(d.roomName).arg(d.userName) : qsTr("%1 removed the room name").arg(d.userName)
             }
 
         }
@@ -223,7 +231,8 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
-                formatted: d.roomTopic ? qsTr("topic changed to: %1").arg(d.roomTopic) : qsTr("removed topic")
+                isStateEvent: d.isStateEvent
+                formatted: d.roomTopic ? qsTr("%2 changed the topic to: %1").arg(d.roomTopic).arg(d.userName): qsTr("%1 removed the topic").arg(d.userName)
             }
 
         }
@@ -235,6 +244,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 changed the room avatar").arg(d.userName)
             }
 
@@ -247,6 +257,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 changed the pinned messages.").arg(d.userName)
             }
 
@@ -259,6 +270,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 changed the stickers and emotes in this room.").arg(d.userName)
             }
 
@@ -271,6 +283,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 changed the addresses for this room.").arg(d.userName)
             }
 
@@ -283,6 +296,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 changed the parent spaces for this room.").arg(d.userName)
             }
 
@@ -295,6 +309,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 created and configured room: %2").arg(d.userName).arg(room.roomId)
             }
 
@@ -307,6 +322,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: {
                     switch (d.callType) {
                     case "voice":
@@ -328,6 +344,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 answered the call.").arg(d.userName)
             }
 
@@ -340,6 +357,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: qsTr("%1 ended the call.").arg(d.userName)
             }
 
@@ -352,7 +370,8 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
-                formatted: qsTr("Negotiating call...")
+                isStateEvent: d.isStateEvent
+                formatted: qsTr("%1 is negotiating the call...").arg(d.userName)
             }
 
         }
@@ -365,6 +384,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: d.relatedEventCacheBuster, room.formatPowerLevelEvent(d.eventId)
             }
 
@@ -377,6 +397,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: d.relatedEventCacheBuster, room.formatJoinRuleEvent(d.eventId)
             }
 
@@ -389,6 +410,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: d.relatedEventCacheBuster, room.formatHistoryVisibilityEvent(d.eventId)
             }
 
@@ -401,6 +423,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: d.relatedEventCacheBuster, room.formatGuestAccessEvent(d.eventId)
             }
 
@@ -416,6 +439,7 @@ Item {
                     body: formatted
                     isOnlyEmoji: false
                     isReply: d.isReply
+                    isStateEvent: d.isStateEvent
                     Layout.fillWidth: true
                     formatted: d.relatedEventCacheBuster, room.formatMemberEvent(d.eventId)
                 }
@@ -438,6 +462,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationRequest"
             }
 
@@ -450,6 +475,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationStart"
             }
 
@@ -462,6 +488,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationReady"
             }
 
@@ -474,6 +501,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationCancel"
             }
 
@@ -486,6 +514,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationKey"
             }
 
@@ -498,6 +527,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationMac"
             }
 
@@ -510,6 +540,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationDone"
             }
 
@@ -522,6 +553,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationDone"
             }
 
@@ -534,6 +566,7 @@ Item {
                 body: formatted
                 isOnlyEmoji: false
                 isReply: d.isReply
+                isStateEvent: d.isStateEvent
                 formatted: "KeyVerificationAccept"
             }
 
diff --git a/resources/qml/delegates/NoticeMessage.qml b/resources/qml/delegates/NoticeMessage.qml
index fa4bbb35..544af109 100644
--- a/resources/qml/delegates/NoticeMessage.qml
+++ b/resources/qml/delegates/NoticeMessage.qml
@@ -5,7 +5,10 @@
 
 import im.nheko 1.0
 
+
 TextMessage {
+    property bool isStateEvent
     font.italic: true
     color: Nheko.colors.buttonText
+    font.pointSize: isStateEvent? 0.75*fontMetrics.font.pointSize : 1*fontMetrics.font.pointSize
 }
diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml
index 06420586..a3964f73 100644
--- a/resources/qml/delegates/Pill.qml
+++ b/resources/qml/delegates/Pill.qml
@@ -8,10 +8,12 @@ import QtQuick.Controls 2.1
 import im.nheko 1.0
 
 Label {
+    property bool isStateEvent
     color: Nheko.colors.text
     horizontalAlignment: Text.AlignHCenter
-    height: contentHeight * 1.2
-    width: contentWidth * 1.2
+    //height: contentHeight * 1.2
+    //width: contentWidth * 1.2
+    font.pointSize: isStateEvent? 0.75*fontMetrics.font.pointSize : 1*fontMetrics.font.pointSize
 
     background: Rectangle {
         radius: parent.height / 2
diff --git a/resources/qml/delegates/Placeholder.qml b/resources/qml/delegates/Placeholder.qml
index 19e48393..f63e62f5 100644
--- a/resources/qml/delegates/Placeholder.qml
+++ b/resources/qml/delegates/Placeholder.qml
@@ -10,6 +10,6 @@ MatrixText {
     required property string typeString
 
     text: qsTr("unimplemented event: ") + typeString
-    width: parent.width
+//    width: parent.width
     color: Nheko.inactiveColors.text
 }
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index 389d1814..54813d23 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -22,13 +22,12 @@ Item {
     required property string url
     required property string body
     required property string filesize
-    property double tempWidth: Math.min(parent.width, originalWidth < 1 ? 400 : originalWidth)
-    property double tempHeight: tempWidth * proportionalHeight
     property double divisor: isReply ? 4 : 2
-    property bool tooHigh: tempHeight > timelineRoot.height / divisor
-
-    height: (type == MtxEvent.VideoMessage ? tooHigh ? timelineRoot.height / divisor : tempHeight : 80) + fileInfoLabel.height
-    width: type == MtxEvent.VideoMessage ? tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth : 250
+    property int tempWidth: originalWidth < 1? 400: originalWidth
+    implicitWidth: type == MtxEvent.VideoMessage ? Math.round(tempWidth*Math.min((timelineView.height/divisor)/(tempWidth*proportionalHeight), 1)) : 500
+    width: parent.width
+    height: (type == MtxEvent.VideoMessage ? width*proportionalHeight : 80) + fileInfoLabel.height
+    implicitHeight: height
 
     MxcMedia {
         id: mxcmedia
diff --git a/resources/qml/delegates/Redacted.qml b/resources/qml/delegates/Redacted.qml
index 10b92173..b3511cfc 100644
--- a/resources/qml/delegates/Redacted.qml
+++ b/resources/qml/delegates/Redacted.qml
@@ -10,15 +10,16 @@ import im.nheko 1.0
 
 Rectangle{
 
-    required property real delegateWidth
     height: redactedLayout.implicitHeight + Nheko.paddingSmall
-    width: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
+    implicitWidth: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
+    width: parent.width
     radius: fontMetrics.lineSpacing / 2 + 2 * Nheko.paddingSmall
     color: Nheko.colors.alternateBase
 
     RowLayout {
         id: redactedLayout
         anchors.centerIn: parent
+        width: parent.width
         spacing: Nheko.paddingSmall
 
         Image {
@@ -32,8 +33,8 @@ Rectangle{
             id: redactedLabel
             Layout.margins: 0
             Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+            Layout.preferredWidth: implicitWidth
             Layout.fillWidth: true
-            Layout.maximumWidth: delegateWidth - 4 * Nheko.paddingSmall - trashImg.width - 2 * Nheko.paddingMedium
             property var redactedPair: room.formatRedactedEvent(eventId)
             text: redactedPair["first"]
             wrapMode: Label.WordWrap
diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml
index d148f858..a439b2eb 100644
--- a/resources/qml/delegates/Reply.qml
+++ b/resources/qml/delegates/Reply.qml
@@ -26,6 +26,7 @@ Item {
     property string filesize
     property string url
     property bool isOnlyEmoji
+    property bool isStateEvent
     property string userId
     property string userName
     property string thumbnailUrl
@@ -34,9 +35,11 @@ Item {
     property string callType
     property int encryptionError
     property int relatedEventCacheBuster
+    property int maxWidth
 
-    width: parent.width
     height: replyContainer.height
+    implicitHeight: replyContainer.height
+    implicitWidth: visible? colorLine.width+replyContainer.implicitWidth : 0
 
     CursorShape {
         anchors.fill: parent
@@ -52,12 +55,12 @@ Item {
         color: TimelineManager.userColor(userId, Nheko.colors.base)
     }
 
-    Column {
+    ColumnLayout {
         id: replyContainer
 
         anchors.left: colorLine.right
-        anchors.leftMargin: 4
-        width: parent.width - 8
+        width: parent.width - 4
+        spacing: 0
 
         TapHandler {
             acceptedButtons: Qt.LeftButton
@@ -80,6 +83,7 @@ Item {
         }
 
         Text {
+            Layout.leftMargin: 4
             id: userName_
 
             text: TimelineManager.escapeEmoji(userName)
@@ -94,8 +98,9 @@ Item {
         }
 
         MessageDelegate {
+            Layout.leftMargin: 4
+            Layout.preferredHeight: height
             id: reply
-
             blurhash: r.blurhash
             body: r.body
             formattedBody: r.formattedBody
@@ -109,6 +114,7 @@ Item {
             thumbnailUrl: r.thumbnailUrl
             originalWidth: r.originalWidth
             isOnlyEmoji: r.isOnlyEmoji
+            isStateEvent: r.isStateEvent
             userId: r.userId
             userName: r.userName
             roomTopic: r.roomTopic
@@ -118,7 +124,7 @@ Item {
             encryptionError: r.encryptionError
             // This is disabled so that left clicking the reply goes to its location
             enabled: false
-            width: parent.width
+            Layout.fillWidth: true
             isReply: true
         }
 
@@ -128,9 +134,10 @@ Item {
         id: backgroundItem
 
         z: -1
-        height: replyContainer.height
-        width: Math.min(Math.max(reply.implicitWidth, userName_.implicitWidth) + 8 + 4, parent.width)
-        color: Qt.rgba(userColor.r, userColor.g, userColor.b, 0.1)
+        anchors.fill: replyContainer
+        property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
+        property color bgColor: Nheko.colors.base
+        color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.1))
     }
 
 }
diff --git a/resources/qml/delegates/TextMessage.qml b/resources/qml/delegates/TextMessage.qml
index eea8cd1e..ac681d40 100644
--- a/resources/qml/delegates/TextMessage.qml
+++ b/resources/qml/delegates/TextMessage.qml
@@ -34,7 +34,7 @@ MatrixText {
     </style>
     " + formatted.replace("<pre>", "<pre style='white-space: pre-wrap; background-color: " + Nheko.colors.alternateBase + "'>").replace("<del>", "<s>").replace("</del>", "</s>").replace("<strike>", "<s>").replace("</strike>", "</s>")
     width: parent.width
-    height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : undefined
+    height: isReply ? Math.round(Math.min(timelineView.height / 8, implicitHeight)) : implicitHeight
     clip: isReply
     selectByMouse: !Settings.mobileMode && !isReply
     font.pointSize: (Settings.enlargeEmojiOnlyMessages && isOnlyEmoji > 0 && isOnlyEmoji < 4) ? Settings.fontSize * 3 : Settings.fontSize