Change QML UI for redactions

• Make the timeline designator a little more attractive
• Add hover tooltip for additional information about the redaction
• Update translations

resources/qml/delegates/MessageDelegate.qml

@@ -174,13 +174,14 @@ Item {
 
                 height: redactedLayout.implicitHeight + 2 * Nheko.paddingSmall
                 width: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
-                radius: height / 2
+                radius: fontMetrics.lineSpacing / 2 + 2 * Nheko.paddingSmall
                 color: Nheko.colors.alternateBase
 
                 RowLayout {
                     id: redactedLayout
                     anchors.centerIn: parent
                     Image {
+                        id: trashImg
                         Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                         Layout.preferredWidth: fontMetrics.font.pixelSize
                         Layout.preferredHeight: fontMetrics.font.pixelSize
@@ -188,10 +189,15 @@ Item {
                     }
                     Label {
                         id: redactedLabel
+                        Layout.margins: Nheko.paddingSmall
                         Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                        text: qsTr("Removed")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: d.width - 4 * Nheko.paddingSmall - trashImg.width - 2 * Nheko.paddingMedium
+                        property var redactedPair: room.formatRedactedEvent(eventId)
+                        text: redactedPair["first"]
+                        wrapMode: Label.WordWrap
 
-                        ToolTip.text: room.formatRedactedEvent(eventId)
+                        ToolTip.text: redactedPair["second"]
                         ToolTip.visible: ma.containsMouse
                         MouseArea {
                             id: ma