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

@@ -170,44 +170,9 @@ Item {
         DelegateChoice {
             roleValue: MtxEvent.Redacted
 
-            Rectangle{
-
-                height: redactedLayout.implicitHeight + 2 * Nheko.paddingSmall
-                width: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
-                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
-                        source: "image://colorimage/:/icons/icons/ui/delete.svg?" + Nheko.colors.text
-                    }
-                    Label {
-                        id: redactedLabel
-                        Layout.margins: Nheko.paddingSmall
-                        Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                        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: redactedPair["second"]
-                        ToolTip.visible: ma.containsMouse
-                        MouseArea {
-                            id: ma
-                            anchors.fill: parent
-                            hoverEnabled: true
-                        }
-                    }
-                }
+            Redacted {
+                delegateWidth: d.width
             }
-
         }
 
         DelegateChoice {