Add a section label at the top which shows the date label of the next section

**Updated**

Add a section label at the top which shows the date label of the next section up. This means that the user will always be able to see the date of all messages on screen.

![image](/uploads/ecbcdc0740877ea0d72e735176353036/image.png)

From the feedback given I've added a background at the top. I also added an underline to the heading which applies both at the top and in the listView since they use the same component. I added it originally for the top because I felt it looked a bit weird having messages appear from behind a heading background the same colour as the listView background.

Note: I know the gaps between messages are not right. I had to set the spacing in the listView to 0 to prevent itemAt returning null. I plan to add it back in as part of the delegate code before it would be merge.

Fixes BUG:454880

src/qml/Component/Timeline/SectionDelegate.qml

@@ -3,15 +3,45 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
 
-Kirigami.Heading {
-    level: 4
-    text: model.showSection ? section : ""
-    color: Kirigami.Theme.disabledTextColor
-    horizontalAlignment: Text.AlignHCenter
-    verticalAlignment: Text.AlignVCenter
-    topPadding: Kirigami.Units.largeSpacing * 2
-    bottomPadding: Kirigami.Units.smallSpacing
+import org.kde.neochat 1.0
+
+QQC2.ItemDelegate {
+    id: sectionDelegate
+
+    property alias labelText: sectionLabel.text
+    property var maxWidth: Number.POSITIVE_INFINITY
+
+    topPadding: Kirigami.Units.largeSpacing
+    bottomPadding: 0 // Note not 0 by default
+
+    contentItem: ColumnLayout {
+        spacing: Kirigami.Units.smallSpacing
+        Layout.fillWidth: true
+
+        Kirigami.Heading {
+            id: sectionLabel
+            level: 4
+            color: Kirigami.Theme.disabledTextColor
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            Layout.fillWidth: true
+            Layout.maximumWidth: maxWidth
+        }
+        Kirigami.Separator {
+            Layout.minimumHeight: 2
+            Layout.fillWidth: true
+            Layout.maximumWidth: maxWidth
+        }
+    }
+
+    background: Rectangle {
+        color: Config.blur ? "transparent" : Kirigami.Theme.backgroundColor
+        Kirigami.Theme.inherit: false
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+    }
 }

src/qml/Component/Timeline/StateDelegate.qml

@@ -11,13 +11,14 @@ import org.kde.neochat 1.0
 
 Control {
     id: stateDelegate
+
+    readonly property bool sectionVisible: model.showSection
+
     // 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
-//     anchors.leftMargin: Kirigami.Units.largeSpacing
-//     anchors.rightMargin: Kirigami.Units.largeSpacing
 
     state: Config.compactLayout ? "alignLeft" : "alignCenter"
     // Align left when in compact mode and center when using bubbles
@@ -46,56 +47,60 @@ Control {
         }
     ]
 
-    height: sectionDelegate.height + rowLayout.height
-    SectionDelegate {
-        id: sectionDelegate
+    height: columnLayout.implicitHeight + columnLayout.anchors.topMargin
+
+    ColumnLayout {
+        id: columnLayout
+        spacing: sectionVisible ? Kirigami.Units.largeSpacing : 0
         anchors.top: parent.top
+        anchors.topMargin: sectionVisible ? 0 : Kirigami.Units.largeSpacing
         anchors.left: parent.left
         anchors.right: parent.right
-        visible: model.showSection
-        height: visible ? implicitHeight : 0
-    }
 
-    RowLayout {
-        id: rowLayout
-        height: label.contentHeight
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: Kirigami.Units.gridUnit * 1.5 + Kirigami.Units.smallSpacing + (Config.compactLayout ? Kirigami.Units.largeSpacing * 1.25 : 0)
-        anchors.rightMargin: Kirigami.Units.largeSpacing
-
-        Kirigami.Avatar {
-            id: icon
-            Layout.preferredWidth: Kirigami.Units.iconSizes.small
-            Layout.preferredHeight: Kirigami.Units.iconSizes.small
-            Layout.alignment: Qt.AlignTop
-
-            name: model.displayNameForInitials
-            source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : ""
-            color: author.color
-
-            Component {
-                id: userDetailDialog
-
-                UserDetailDialog {}
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
-            }
+        SectionDelegate {
+            id: sectionDelegate
+            Layout.fillWidth: true
+            visible: sectionVisible
+            labelText: sectionVisible ? section : ""
         }
 
-        Label {
-            id: label
-            Layout.alignment: Qt.AlignVCenter
+        RowLayout {
+            id: rowLayout
+            implicitHeight: label.contentHeight
             Layout.fillWidth: true
-            Layout.preferredHeight: icon.height
-            wrapMode: Text.WordWrap
-            textFormat: Text.RichText
-            text: `<style>a {text-decoration: none;}</style><a href="https://matrix.to/#/${author.id}" style="color: ${author.color}">${model.authorDisplayName}</a> ${aggregateDisplay}`
-            onLinkActivated: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+            Layout.leftMargin: Kirigami.Units.gridUnit * 1.5 + Kirigami.Units.smallSpacing * 1.5 + (Config.compactLayout ? Kirigami.Units.largeSpacing * 1.25 : 0)
+            Layout.rightMargin: Kirigami.Units.largeSpacing
+
+            Kirigami.Avatar {
+                id: icon
+                Layout.preferredWidth: Kirigami.Units.iconSizes.small
+                Layout.preferredHeight: Kirigami.Units.iconSizes.small
+
+                name: author.displayName
+                source: author.avatarMediaId ? ("image://mxc/" + author.avatarMediaId) : ""
+                color: author.color
+
+                Component {
+                    id: userDetailDialog
+
+                    UserDetailDialog {}
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+                }
+            }
+
+            Label {
+                id: label
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                wrapMode: Text.WordWrap
+                textFormat: Text.RichText
+                text: `<style>a {text-decoration: none;}</style><a href="https://matrix.to/#/${author.id}" style="color: ${author.color}">${currentRoom.htmlSafeMemberName(author.id)}</a> ${aggregateDisplay}`
+                onLinkActivated: userDetailDialog.createObject(ApplicationWindow.overlay, {room: currentRoom, user: author.object, displayName: author.displayName, avatarMediaId: author.avatarMediaId, avatarUrl: author.avatarUrl}).open()
+            }
         }
     }
 }

src/qml/Component/Timeline/TimelineContainer.qml

@@ -14,6 +14,8 @@ QQC2.ItemDelegate {
     default property alias innerObject : column.children
     // readonly property bool failed: marks == EventStatus.SendingFailed
 
+    readonly property bool sectionVisible: model.showSection
+
     property bool isEmote: false
     property bool cardBackground: true
     property bool isHighlighted: model.isHighlighted || isTemporaryHighlighted
@@ -55,7 +57,7 @@ QQC2.ItemDelegate {
     leftInset: Kirigami.Units.smallSpacing
     rightInset: Kirigami.Units.smallSpacing
     width: delegateMaxWidth
-    height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing))
+    height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + loader.anchors.topMargin + avatar.anchors.topMargin
     background: Rectangle {
         visible: timelineContainer.hovered
         color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.15)
@@ -110,11 +112,11 @@ QQC2.ItemDelegate {
 
     SectionDelegate {
         id: sectionDelegate
-        width: parent.width
-        anchors.left: avatar.left
-        anchors.leftMargin: Kirigami.Units.smallSpacing
-        visible: model.showSection
+        anchors.left: timelineContainer.left
+        anchors.right: timelineContainer.right
+        visible: sectionVisible
         height: visible ? implicitHeight : 0
+        labelText: model.showSection ? section : ""
     }
 
     Kirigami.Avatar {
@@ -304,10 +306,9 @@ QQC2.ItemDelegate {
             left: bubble.left
             right: parent.right
             top: bubble.bottom
-            topMargin: active && Config.compactLayout ? 0 : Kirigami.Units.smallSpacing
+            topMargin: active ? Kirigami.Units.smallSpacing : 0
         }
         height: active ? item.implicitHeight : 0
-        //Layout.bottomMargin: readMarker ? Kirigami.Units.smallSpacing : 0
         active: eventType !== MessageEventModel.State && eventType !== MessageEventModel.Notice && reaction != undefined && reaction.length > 0
         visible: active
         sourceComponent: ReactionDelegate { }