Implement new delegate behaviour on ReadMarkerDelegate

Make sure that the messgae hover buttons account for the delegate x displacement

imports/NeoChat/Component/Timeline/ReadMarkerDelegate.qml

@@ -11,11 +11,44 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 
 QQC2.ItemDelegate {
+    id: readMarkerDelegate
     padding: Kirigami.Units.largeSpacing
     topInset: Kirigami.Units.largeSpacing
     topPadding: Kirigami.Units.largeSpacing * 2
-    width: ListView.view.width - Kirigami.Units.gridUnit
-    x: Kirigami.Units.gridUnit / 2
+
+    // extraWidth defines how the delegate can grow after the listView gets very wide
+    readonly property int extraWidth: messageListView.width >= Kirigami.Units.gridUnit * 46 ? Math.min((messageListView.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0
+    readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width : Math.min(messageListView.width, Kirigami.Units.gridUnit * 40 + extraWidth)
+
+    width: delegateMaxWidth
+
+    state: Config.compactLayout ? "alignLeft" : "alignCentre"
+    // Align left when in compact mode and centre when using bubbles
+    states: [
+        State {
+            name: "alignLeft"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: undefined
+                anchors.left: parent ? parent.left : undefined
+            }
+        },
+        State {
+            name: "alignCentre"
+            AnchorChanges {
+                target: readMarkerDelegate
+                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+                anchors.left: undefined
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic}
+        }
+    ]
+
     contentItem: QQC2.Label {
         text: i18nc("Relative time since the room was last read", "Last read: %1", time)
     }

imports/NeoChat/Component/Timeline/TimelineContainer.qml

@@ -56,6 +56,7 @@ QQC2.ItemDelegate {
     // updates the global hover component to point to this delegate, and update its position
     function updateHoverComponent() {
         if (hoverComponent) {
+            hoverComponent.delegate = messageDelegate
             hoverComponent.bubble = bubble
             hoverComponent.updateFunction = updateHoverComponent;
             hoverComponent.event = model

imports/NeoChat/Page/RoomPage.qml

@@ -409,6 +409,7 @@ Kirigami.ScrollablePage {
             id: hoverActions
             property var event: null
             property bool showEdit: event && (event.author.id === Controller.activeConnection.localUserId && (event.eventType === "emote" || event.eventType === "message"))
+            property var delegate: null
             property var bubble: null
             property var hovered: bubble && bubble.hovered
             property var visibleDelayed: (hovered || hoverHandler.hovered) && !Kirigami.Settings.isMobile
@@ -424,7 +425,7 @@ Kirigami.ScrollablePage {
                 interval: 200
                 onTriggered: hoverActions.visible = hoverActions.visibleDelayed;
             }
-            x: bubble ? (bubble.x + Kirigami.Units.largeSpacing + Math.max(bubble.width - childWidth, 0) - (Config.compactLayout ? Kirigami.Units.gridUnit * 3 : 0)) : 0
+            x: delegate && bubble ? (delegate.x + bubble.x + Kirigami.Units.largeSpacing + Math.max(bubble.width - childWidth, 0) - (Config.compactLayout ? Kirigami.Units.gridUnit * 3 : 0)) : 0
             y: bubble ? bubble.mapToItem(parent, 0, 0).y - hoverActions.childHeight + Kirigami.Units.smallSpacing: 0;
             visible: false