Messages: Make the Date/Timestamps more usable

Previously timestamps were in the right-hand side of the messages which made it very hard to relate timestamps with their corresponding messages. 
Moving them right next to the name makes much better UX wise (and surprisingly didn't make the UI too crowded). I have tested this in dark light and bubbles mode, and it all looks good and comfortable to me.

I have also tweaked how the timestamps are formatted. 
- For messages on the same day, it will skip the date part.
- For recent days, it uses relative timestamp (yesterday, XX:XX) 
- For everything before its shows short form date and time

The tooltip now uses Long Format of Date and Time.

src/libneochat/neochatdatetime.cpp

@@ -27,6 +27,11 @@ QString NeoChatDateTime::shortDateTime() const
     return QLocale().toString(m_dateTime.toLocalTime(), QLocale::ShortFormat);
 }
 
+QString NeoChatDateTime::longDateTime() const
+{
+    return QLocale().toString(m_dateTime.toLocalTime(), QLocale::LongFormat);
+}
+
 QString NeoChatDateTime::relativeDate() const
 {
     KFormat formatter;
@@ -39,6 +44,14 @@ QString NeoChatDateTime::relativeDateTime() const
     return formatter.formatRelativeDateTime(m_dateTime.toLocalTime(), QLocale::ShortFormat);
 }
 
+QString NeoChatDateTime::shortRelativeDateTime() const
+{
+    if (m_dateTime > QDate::currentDate().startOfDay()) {
+        return hourMinuteString();
+    }
+    return relativeDate() + u", "_s + hourMinuteString();
+}
+
 bool NeoChatDateTime::isValid() const
 {
     return m_dateTime.isValid();

src/libneochat/neochatdatetime.h

@@ -35,16 +35,21 @@ class NeoChatDateTime
      */
     Q_PROPERTY(QString shortDateTime READ shortDateTime CONSTANT)
 
+    /**
+     * @brief The date and time formatted as per QLocale::LongFormat for your locale.
+     */
+    Q_PROPERTY(QString longDateTime READ longDateTime CONSTANT)
+
     /**
      * @brief The date formatted as relative to now.
      *
-     * If the date falls within one week before or after the current date
+     * If the date falls within 2 days or after the current date
      * then a relative date string will be returned, such as:
      *  - Yesterday
      *  - Today
      *  - Tomorrow
-     *  - Last Tuesday
+     *  - Two days ago
-     *  - Next Wednesday
+     *  - In Two Days
      *
      * If the date falls outside this period then the format QLocale::ShortFormat
      * for your locale is used.
@@ -54,21 +59,37 @@ class NeoChatDateTime
     /**
      * @brief The time and date formatted as relative to now.
      *
-     * The format is "RelativeDate, hh::mm"
+     * The format is "RelativeDate at hh::mm"
      *
-     * If the date falls within one week before or after the current date
+     * If the date falls within 2 days before or after the current date
      * then a relative date string will be returned, such as:
      *  - Yesterday
      *  - Today
      *  - Tomorrow
-     *  - Last Tuesday
+     *  - Two days ago
-     *  - Next Wednesday
+     *  - In Two Days
      *
      * If the date falls outside this period then the format QLocale::ShortFormat
      * for your locale is used.
      */
     Q_PROPERTY(QString relativeDateTime READ relativeDateTime CONSTANT)
 
+    /**
+     * @brief The time and date formatted as relative to now.
+     *
+     * The format is "RelativeDate, hh::mm"
+     *
+     * If the date falls on the same day as current date, the date is skipped.
+     * If the date falls within 2 days before current date
+     * then a relative date string will be returned, such as:
+     *  - Yesterday
+     *  - Tomorrow
+     *
+     * If the date falls outside this period then the format QLocale::ShortFormat
+     * for your locale is used.
+     */
+    Q_PROPERTY(QString shortRelativeDateTime READ shortRelativeDateTime CONSTANT)
+
     /**
      * @brief Whether this object has a valid date time.
      */
@@ -81,8 +102,10 @@ public:
 
     QString hourMinuteString() const;
     QString shortDateTime() const;
+    QString longDateTime() const;
     QString relativeDate() const;
     QString relativeDateTime() const;
+    QString shortRelativeDateTime() const;
 
     bool isValid() const;
 

src/messagecontent/AuthorComponent.qml

@@ -35,6 +35,7 @@ RowLayout {
     Layout.maximumWidth: Message.maxContentWidth
 
     implicitHeight: Math.max(nameButton.implicitHeight, timeLabel.implicitHeight)
+    spacing: Kirigami.Units.mediumSpacing
 
     QQC2.Label {
         id: nameButton
@@ -46,10 +47,14 @@ RowLayout {
         elide: Text.ElideRight
         clip: true // Intentional to limit insane Unicode in display names
         
+        Layout.fillWidth: true
+        Layout.maximumWidth: nameButton.implicitWidth + Kirigami.Units.smallSpacing
+
+
         function openUserMenu(): void {
             const menu = Qt.createComponent("org.kde.neochat", "UserMenu").createObject(root, {
                 window: QQC2.ApplicationWindow.window as Kirigami.ApplicationWindow,
-                author: root.author,
+                author: root.author
             });
             menu.popup(root.QQC2.Overlay.overlay);
         }
@@ -73,20 +78,24 @@ RowLayout {
             onTapped: nameButton.openUserMenu()
         }
     }
-    Item {
-        Layout.fillWidth: true
-    }
     QQC2.Label {
         id: timeLabel
-        text: root.dateTime.hourMinuteString
+
+        text: root.dateTime.shortRelativeDateTime
         horizontalAlignment: Text.AlignRight
         color: Kirigami.Theme.disabledTextColor
+
         QQC2.ToolTip.visible: timeHoverHandler.hovered
-        QQC2.ToolTip.text: root.dateTime.shortDateTime
+        QQC2.ToolTip.text: root.dateTime.longDateTime
         QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
 
         HoverHandler {
             id: timeHoverHandler
         }
     }
+    
+    Item {
+        Layout.fillWidth: true
+    }
+
 }