Show last event time in RoomDelegate

Also respect locale for message times

src/qml/Chat/Timeline/EventContent.qml

@@ -70,7 +70,7 @@ Row {
                       // time
                       "&nbsp;&nbsp;<font size=" + theme.fontSize.small +
                       "px color=" + theme.chat.message.date + ">" +
-                      Qt.formatDateTime(model.date, "hh:mm:ss") +
+                      Utils.formatTime(model.date) +
                       "</font>" +
                       // local echo icon
                       (model.is_local_echo ?

src/qml/SidePane/RoomDelegate.qml

@@ -15,7 +15,7 @@ HInteractiveRectangle {
         id: rowLayout
         x: sidePane.currentSpacing
         width: parent.width - sidePane.currentSpacing * 1.5
-        height: roomLabel.height + subtitleLabel.height +
+        height: roomName.height + subtitle.height +
                 sidePane.currentSpacing / 1.5
         spacing: sidePane.currentSpacing
 
@@ -28,23 +28,53 @@ HInteractiveRectangle {
         HColumnLayout {
             Layout.fillWidth: true
 
-            HLabel {
+            HRowLayout {
-                id: roomLabel
+                spacing: theme.spacing / 2
-                color: theme.sidePane.room.name
-                text: model.display_name || "<i>Empty room</i>"
-                textFormat:
-                    model.display_name? Text.PlainText : Text.StyledText
-                elide: Text.ElideRight
-                verticalAlignment: Qt.AlignVCenter
 
-                Layout.fillWidth: true
+                HLabel {
+                    id: roomName
+                    color: theme.sidePane.room.name
+                    text: model.display_name || "<i>Empty room</i>"
+                    textFormat:
+                        model.display_name? Text.PlainText : Text.StyledText
+                    elide: Text.ElideRight
+                    verticalAlignment: Qt.AlignVCenter
+
+                    Layout.fillWidth: true
+                }
+
+                HLabel {
+                    readonly property var evDate:
+                        model.last_event ? model.last_event.date : null
+
+                    id: lastEventDate
+                    font.pixelSize: theme.fontSize.small
+                    color: theme.sidePane.room.lastEventDate
+
+                    text: ! evDate ?  "" :
+
+                          Utils.dateIsToday(evDate) ?
+                          Utils.formatTime(evDate, false) :  // no seconds
+
+                          Utils.dateIsYesterday(evDate) ? qsTr("Yesterday") :
+
+                          Qt.formatDate(evDate, "dd MMM") // e.g. "24 Nov"
+
+                    visible: Layout.maximumWidth > 0
+                    Layout.maximumWidth:
+                        text && roomDelegate.width >= 200 ? implicitWidth : 0
+                    Behavior on Layout.maximumWidth { HNumberAnimation {} }
+
+                }
             }
 
             HRichLabel {
-                id: subtitleLabel
+                id: subtitle
                 color: theme.sidePane.room.subtitle
                 visible: Boolean(text)
                 textFormat: Text.StyledText
+                font.pixelSize: theme.fontSize.small
+                elide: Text.ElideRight
 
                 text: {
                     if (! model.last_event) { return "" }
@@ -61,10 +91,6 @@ HInteractiveRectangle {
                     ) + ": " + ev.inline_content
                 }
 
-
-                font.pixelSize: theme.fontSize.small
-                elide: Text.ElideRight
-
                 Layout.fillWidth: true
             }
         }

src/qml/utils.js

@@ -123,6 +123,38 @@ function minutesBetween(date1, date2) {
 }
 
 
+function dateIsDay(date, dayDate) {
+    return date.getDate() == dayDate.getDate() &&
+           date.getMonth() == dayDate.getMonth() &&
+           date.getFullYear() == dayDate.getFullYear()
+}
+
+
+function dateIsToday(date) {
+    return dateIsDay(date, new Date())
+}
+
+
+function dateIsYesterday(date) {
+    const yesterday = new Date()
+    yesterday.setDate(yesterday.getDate() - 1)
+    return dateIsDay(date, yesterday)
+}
+
+
+function formatTime(time, seconds=true) {
+    return Qt.formatTime(
+        time,
+
+        Qt.locale().timeFormat(
+            seconds ? Locale.LongFormat : Locale.NarrowFormat
+        ).replace(/\./g, ":").replace(/ t$/, "")
+        // en_DK.UTF-8 locale wrongfully gives "." separators;
+        // remove the timezone at the end
+    )
+}
+
+
 function getItem(array, mainKey, value) {
     for (let i = 0; i < array.length; i++) {
         if (array[i][mainKey] === value) { return array[i] }

src/themes/Default.qpl

@@ -48,13 +48,14 @@ colors:
     color inputBackground:
         hsluv(hue, saturation, intensity * 2, Math.min(0.6, opacity))
 
-    color brightText: hsluv(0, 0, intensity * 100)
+    color brightText:  hsluv(0, 0, intensity * 100)
-    color text:       hsluv(0, 0, intensity * 80)
+    color text:        hsluv(0, 0, intensity * 80)
-    color dimText:    hsluv(0, 0, intensity * 55)
+    color halfDimText: hsluv(0, 0, intensity * 70)
-    color dimmerText: hsluv(0, 0, intensity * 30)
+    color dimText:     hsluv(0, 0, intensity * 55)
-    color accentText: hsluv(hue - 10, saturation * 2.25, 60)
+    color dimmerText:  hsluv(0, 0, intensity * 30)
-    color link:       accentText
+    color accentText:  hsluv(hue - 10, saturation * 2.25, 60)
-    color code:       hsluv(hue + 5, saturation * 1.5, intensity * 60)
+    color link:        accentText
+    color code:        hsluv(hue + 5, saturation * 1.5, intensity * 60)
 
     // Example of an animation, set running: true to enable
     NumberAnimation on hue
@@ -159,9 +160,10 @@ sidePane:
         color name:       colors.text
 
     room:
-        color background: "transparent"
+        color background:    "transparent"
-        color name:       colors.text
+        color name:          colors.text
-        color subtitle:   colors.dimText
+        color subtitle:      colors.dimText
+        color lastEventDate: colors.halfDimText
 
     settingsButton:
         color background: colors.inputBackground