fix(StatusTextMessage): Handle quote formatting in QML

HTML doesn't know about TextEdit's wrapMode line count so
when text was a quote it was seeing it as single line thus
painting a singleline height quoteline.

Closes #8109

src/app_service/service/message/service.nim

@@ -713,22 +713,7 @@ proc getRenderedText*(self: Service, parsedTextArray: seq[ParsedText]): string =
           result = result & self.renderInline(child)
         result = result & "</p>"
       of PARSED_TEXT_TYPE_BLOCKQUOTE:
-        var
+        result = result & "<blockquote>" & escape_html(parsedText.literal) & "</blockquote>"
-          blockquote = escape_html(parsedText.literal)
-          lines = toSeq(blockquote.split(NEW_LINE))
-        for i in 0..(lines.len - 1):
-          if i + 1 >= lines.len:
-            continue
-          if lines[i + 1] != "":
-            lines[i] = lines[i] & "<br/>"
-        blockquote = lines.join("")
-        result = result & fmt(
-          "<table class=\"blockquote\">" &
-            "<tr>" &
-              "<td class=\"quoteline\" valign=\"middle\"></td>" &
-              "<td>{blockquote}</td>" &
-            "</tr>" &
-          "</table>")
       of PARSED_TEXT_TYPE_CODEBLOCK:
         result = result & "<code>" & escape_html(parsedText.literal) & "</code>"
     result = result.strip()

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -25,6 +25,7 @@ Item {
     QtObject {
         id: d
         property bool readMore: false
+        property bool isQuote: false
         readonly property bool veryLongChatText: chatText.length > 1000
         readonly property int showMoreHeight: showMoreButtonLoader.visible ? showMoreButtonLoader.height : 0
 
@@ -37,6 +38,8 @@ Item {
 
             let formattedMessage = Utils.linkifyAndXSS(root.messageDetails.messageText);
 
+            isQuote = (formattedMessage.startsWith("<blockquote>") && formattedMessage.endsWith("</blockquote>"));
+
             if (root.isEdited) {
                 const index = formattedMessage.endsWith("code>") ? formattedMessage.length : formattedMessage.length - 4;
                 const editedMessage = formattedMessage.slice(0, index)
@@ -45,7 +48,7 @@ Item {
                 return Utils.getMessageWithStyle(Emoji.parse(editedMessage), chatText.hoveredLink)
             }
 
-            if (root.convertToSingleLine)
+            if (root.convertToSingleLine || isQuote)
                 formattedMessage = Utils.convertToSingleLine(formattedMessage)
 
             if (root.stripHtmlTags)
@@ -62,6 +65,14 @@ Item {
         }
     }
 
+    Rectangle {
+        width: 1
+        height: chatText.height
+        radius: 8
+        visible: d.isQuote
+        color: Theme.palette.baseColor1
+    }
+
     TextEdit {
         id: chatText
         objectName: "StatusTextMessage_chatText"
@@ -72,12 +83,14 @@ Item {
 
         width: parent.width
         height: effectiveHeight + d.showMoreHeight / 2
+        anchors.left: parent.left
+        anchors.leftMargin: d.isQuote ? 8 : 0
         opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
         clip: true
         text: d.text
         selectedTextColor: Theme.palette.directColor1
         selectionColor: Theme.palette.primaryColor3
-        color: Theme.palette.directColor1
+        color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
         font.family: Theme.palette.baseFont.name
         font.pixelSize: Theme.primaryTextFontSize
         textFormat: Text.RichText

ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml

@@ -197,15 +197,6 @@ QtObject {
                     `del {` +
                         `text-decoration: line-through;` +
                     `}` +
-                    `table.blockquote td {` +
-                        `padding-left: 10px;` +
-                        `color: ${Theme.palette.baseColor1};` +
-                    `}` +
-                    `table.blockquote td.quoteline {` +
-                        `background-color: ${Theme.palette.baseColor1};` +
-                        `height: 100%;` +
-                        `padding-left: 0;` +
-                    `}` +
                     `.emoji {` +
                         `vertical-align: bottom;` +
                     `}` +