place own bubbles on right and remove user info

resources/qml/MessageView.qml

@@ -249,8 +249,8 @@ ScrollView {
             id: sectionHeader
 
             Column {
-                topPadding: 4
-                bottomPadding: 4
+                topPadding: 0
+                bottomPadding: 0
                 spacing: 8
                 visible: (previousMessageUserId !== userId || previousMessageDay !== day || isStateEvent !== previousMessageIsStateEvent)
                 width: parentWidth
@@ -278,13 +278,13 @@ ScrollView {
                 Row {
                     height: userName_.height
                     spacing: 8
-                    visible: !isStateEvent
+                    visible: !isStateEvent && (!isSender || !Settings.bubbles)
 
                     Avatar {
                         id: messageUserAvatar
 
-                        width: Nheko.avatarSize
-                        height: Nheko.avatarSize
+                        width: Nheko.avatarSize * (Settings.bubbles? 0.5 : 1)
+                        height: Nheko.avatarSize * (Settings.bubbles? 0.5 : 1)
                         url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/")
                         displayName: userName
                         userid: userId
@@ -460,6 +460,7 @@ ScrollView {
                 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
 

resources/qml/TimelineRow.qml

@@ -45,9 +45,8 @@ Item {
     required property int status
     required property int relatedEventCacheBuster
 
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: row.height+reactionRow.height
+    width: parent.width
+    height: childrenRect.height
 
     Rectangle {
         color: (Settings.messageHoverHighlight && hoverHandler.hovered) ? Nheko.colors.alternateBase : "transparent"
@@ -74,13 +73,14 @@ Item {
 
     Control {
         id: row
-
-        anchors.rightMargin: 1
-        anchors.leftMargin: Nheko.avatarSize + 12 // align bubble with section header
-        anchors.left: parent.left
+        property bool bubbleOnRight : isSender && Settings.bubbles
+        anchors.rightMargin: isSender || !Settings.bubbles? 0 : parent.width/8
+        anchors.leftMargin: (Settings.bubbles? 0 : Nheko.avatarSize) + (bubbleOnRight? parent.width/8 : 8) // 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+metadata.width) : maxWidth
-        padding: isStateEvent? 0 : 3
+        padding: isStateEvent? 0 : 2
         background: Rectangle {
             property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
             property color bgColor: Nheko.colors.base
@@ -237,6 +237,7 @@ Item {
     Reactions {
         anchors {
             top: row.bottom
+            topMargin: -2
             left: parent.left
             leftMargin: Nheko.avatarSize + 16
         }

resources/qml/delegates/Encrypted.qml

@@ -16,7 +16,7 @@ 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