Centre the timline when using bubbles but not in compact mode

imports/NeoChat/Component/Timeline/AudioDelegate.qml

@@ -21,7 +21,7 @@ TimelineContainer {
     hoverComponent: hoverActions
     innerObject: Control {
         Layout.fillWidth: true
-        Layout.maximumWidth: audioDelegate.bubbleMaxWidth
+        Layout.maximumWidth: audioDelegate.contentMaxWidth
 
         Audio {
             id: audio

imports/NeoChat/Component/Timeline/EncryptedDelegate.qml

@@ -19,7 +19,7 @@ TimelineContainer {
         readOnly: true
         wrapMode: Text.WordWrap
         textFormat: Text.RichText
-        Layout.maximumWidth: encryptedDelegate.bubbleMaxWidth
+        Layout.maximumWidth: encryptedDelegate.contentMaxWidth
         Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0
     }
 }

imports/NeoChat/Component/Timeline/FileDelegate.qml

@@ -35,7 +35,7 @@ TimelineContainer {
     innerObject: RowLayout {
 
         Layout.fillWidth: true
-        Layout.maximumWidth: fileDelegate.bubbleMaxWidth
+        Layout.maximumWidth: fileDelegate.contentMaxWidth
         Layout.margins: Kirigami.Units.largeSpacing
 
         spacing: Kirigami.Units.largeSpacing

imports/NeoChat/Component/Timeline/ImageDelegate.qml

@@ -32,8 +32,8 @@ TimelineContainer {
     innerObject: Image {
         id: img
 
-        Layout.maximumWidth: imageDelegate.bubbleMaxWidth
+        Layout.maximumWidth: imageDelegate.contentMaxWidth
-        Layout.maximumHeight: imageDelegate.bubbleMaxWidth / imageDelegate.info.w * imageDelegate.info.h
+        Layout.maximumHeight: imageDelegate.contentMaxWidth / imageDelegate.info.w * imageDelegate.info.h
         Layout.preferredWidth: imageDelegate.info.w
         Layout.preferredHeight: imageDelegate.info.h
         source: model.mediaUrl

imports/NeoChat/Component/Timeline/MessageDelegate.qml

@@ -20,7 +20,7 @@ TimelineContainer {
 
     innerObject: RichLabel {
         isEmote: messageDelegate.isEmote
-        Layout.maximumWidth: messageDelegate.bubbleMaxWidth
+        Layout.maximumWidth: messageDelegate.contentMaxWidth
 
         TapHandler {
             acceptedButtons: Qt.RightButton

imports/NeoChat/Component/Timeline/ReplyComponent.qml

@@ -15,11 +15,11 @@ MouseArea {
     id: replyButton
     Layout.fillWidth: true
     implicitHeight: replyName.implicitHeight + (loader.item ? loader.item.height : 0) + Kirigami.Units.largeSpacing
-    implicitWidth: Math.min(bubbleMaxWidth, Math.max((loader.item ? loader.item.width + Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing : 0), replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3
+    implicitWidth: Math.min(contentMaxWidth, Math.max((loader.item ? loader.item.width + Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing : 0), replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3
     Component.onCompleted: {
         parent.Layout.fillWidth = true;
         parent.Layout.preferredWidth = Qt.binding(function() { return implicitWidth; })
-        parent.Layout.maximumWidth = Qt.binding(function() { return bubbleMaxWidth + Kirigami.Units.largeSpacing * 2; })
+        parent.Layout.maximumWidth = Qt.binding(function() { return contentMaxWidth + Kirigami.Units.largeSpacing * 2; })
     }
     Rectangle {
         id: replyLeftBorder
@@ -79,7 +79,7 @@ MouseArea {
                 id: replyText
                 textMessage: reply.display
                 textFormat: Text.RichText
-                width: Math.min(implicitWidth, bubbleMaxWidth - Kirigami.Units.largeSpacing * 3)
+                width: Math.min(implicitWidth, contentMaxWidth - Kirigami.Units.largeSpacing * 3)
                 x: Kirigami.Units.smallSpacing * 3 + replyAvatar.width
             }
         }
@@ -94,7 +94,7 @@ MouseArea {
                 readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId
                 source: "image://mxc/" + mediaId
 
-                width: bubbleMaxWidth * 0.75 - Kirigami.Units.smallSpacing * 5 - replyAvatar.width
+                width: contentMaxWidth * 0.75 - Kirigami.Units.smallSpacing * 5 - replyAvatar.width
                 height: reply.content.info.h / reply.content.info.w * width
                 x: Kirigami.Units.smallSpacing * 3 + replyAvatar.width
             }

imports/NeoChat/Component/Timeline/TimelineContainer.qml

@@ -19,8 +19,9 @@ QQC2.ItemDelegate {
     property bool isEmote: false
     property bool cardBackground: true
 
-    readonly property int delegateMaxWidth: Math.min(messageListView.width, Kirigami.Units.gridUnit * 40)
+    readonly property int bubbleMaxWidth: Kirigami.Units.gridUnit * 20
-    readonly property int bubbleMaxWidth: Config.compactLayout && !Config.showAvatarInTimeline ? width - Kirigami.Units.largeSpacing * 4 : (Config.compactLayout ? width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, Kirigami.Units.gridUnit * 20))
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width : Math.min(messageListView.width, Kirigami.Units.gridUnit * 40)
+    readonly property int contentMaxWidth: Config.compactLayout ? width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, bubbleMaxWidth)
 
     property bool showUserMessageOnRight: Config.showLocalMessagesOnRight &&
         model.author.isLocalUser && !Config.compactLayout
@@ -38,6 +39,7 @@ QQC2.ItemDelegate {
     bottomPadding: 0
     width: delegateMaxWidth
     background: null
+
     property Item hoverComponent
 
     // show hover actions
@@ -56,6 +58,33 @@ QQC2.ItemDelegate {
         }
     }
 
+    state: Config.compactLayout ? "alignLeft" : "alignCentre"
+    // Align left when in compact mode and centre when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: messageDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCentre"
+            AnchorChanges {
+                target: messageDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
     height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : 0)
 
     SectionDelegate {
@@ -110,9 +139,6 @@ QQC2.ItemDelegate {
         rightPadding: Config.compactLayout ? Kirigami.Units.largeSpacing : Kirigami.Units.smallSpacing
         hoverEnabled: true
 
-        // state: Config.compactLayout ? "compactLayout" : "default"
-        state: showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
-
         anchors {
             top: avatar.top
             leftMargin: Kirigami.Units.largeSpacing
@@ -121,7 +147,7 @@ QQC2.ItemDelegate {
         // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably
         width: Config.compactLayout ? messageDelegate.width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) + Kirigami.Units.largeSpacing * 2 : implicitWidth
 
-
+        state: showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
         // states for anchor animations on window resize
         // as setting anchors to undefined did not work reliably
         states: [
@@ -159,7 +185,7 @@ QQC2.ItemDelegate {
                 Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0
                 Layout.rightMargin: Kirigami.Units.largeSpacing
                 Layout.preferredWidth: nameLabel.implicitWidth + timeLabel.implicitWidth + Kirigami.Units.largeSpacing * 2
-                Layout.maximumWidth: bubbleMaxWidth
+                Layout.maximumWidth: contentMaxWidth
                 implicitHeight: visible ? nameLabel.implicitHeight : 0
 
                 QQC2.Label {

imports/NeoChat/Component/Timeline/VideoDelegate.qml

@@ -40,7 +40,7 @@ TimelineContainer {
     innerObject: Video {
         id: vid
 
-        Layout.maximumWidth: videoDelegate.bubbleMaxWidth
+        Layout.maximumWidth: videoDelegate.contentMaxWidth
         Layout.fillWidth: true
         Layout.maximumHeight: Kirigami.Units.gridUnit * 15
         Layout.minimumHeight: Kirigami.Units.gridUnit * 5