Change QML UI for redactions

* Make the timeline designator a little more attractive
* Add hover tooltip for tadditional information about the redaction

resources/icons/ui/trash.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"/></svg>
\ No newline at end of file

resources/qml/delegates/MessageDelegate.qml

@@ -170,8 +170,36 @@ Item {
         DelegateChoice {
             roleValue: MtxEvent.Redacted
 
-            Pill {
-                text: qsTr("removed")
+            Rectangle{
+
+                height: redactedLayout.implicitHeight + 2 * Nheko.paddingSmall
+                width: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
+                radius: height / 2
+                color: Nheko.colors.alternateBase
+
+                RowLayout {
+                    id: redactedLayout
+                    anchors.centerIn: parent
+                    Image {
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                        Layout.preferredWidth: fontMetrics.font.pixelSize
+                        Layout.preferredHeight: fontMetrics.font.pixelSize
+                        source: "image://colorimage/:/icons/icons/ui/trash.svg?" + Nheko.colors.text
+                    }
+                    Label {
+                        id: redactedLabel
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                        text: qsTr("removed")
+
+                        ToolTip.text: room.formatRedactedEvent(eventId)
+                        ToolTip.visible: ma.containsMouse
+                        MouseArea {
+                            id: ma
+                            anchors.fill: parent
+                            hoverEnabled: true
+                        }
+                    }
+                }
             }
 
         }

resources/res.qrc

@@ -73,6 +73,7 @@
         <file>icons/ui/toggle-camera-view.png</file>
         <file>icons/ui/video-call.png</file>
         <file>icons/ui/refresh.png</file>
+        <file>icons/ui/trash.svg</file>
         <file>icons/emoji-categories/people.png</file>
         <file>icons/emoji-categories/people@2x.png</file>
         <file>icons/emoji-categories/nature.png</file>

src/timeline/TimelineModel.cpp

@@ -1797,6 +1797,35 @@ TimelineModel::formatPowerLevelEvent(QString id)
     return tr("%1 has changed the room's permissions.").arg(name);
 }
 
+QString
+TimelineModel::formatRedactedEvent(QString id)
+{
+    mtx::events::collections::TimelineEvents *e = events.get(id.toStdString(), "");
+    if (!e)
+        return "";
+
+    auto event = std::get_if<mtx::events::RoomEvent<mtx::events::msg::Redacted>>(e);
+    if (!event)
+        return "";
+
+    QString user     = QString::fromStdString(event->sender);
+    QString name     = utils::replaceEmoji(displayName(user));
+    QString dateTime = QDateTime::fromMSecsSinceEpoch(event->origin_server_ts).toString();
+    QString reason   = "";
+    auto because     = event->unsigned_data.redacted_because;
+
+    if (because.has_value()) {
+        reason = QString::fromStdString(because->content.reason);
+    }
+
+    if (reason.isEmpty()) {
+        return tr("%1 (%2) removed this message at %3").arg(name, user, dateTime);
+    } else {
+        return tr("%1 (%2) removed this message at %3\nReason: %4")
+          .arg(name, user, dateTime, reason);
+    }
+}
+
 void
 TimelineModel::acceptKnock(QString id)
 {

src/timeline/TimelineModel.h

@@ -247,6 +247,7 @@ public:
     Q_INVOKABLE QString formatHistoryVisibilityEvent(QString id);
     Q_INVOKABLE QString formatGuestAccessEvent(QString id);
     Q_INVOKABLE QString formatPowerLevelEvent(QString id);
+    Q_INVOKABLE QString formatRedactedEvent(QString id);
 
     Q_INVOKABLE void viewRawMessage(QString id);
     Q_INVOKABLE void forwardMessage(QString eventId, QString roomId);