refactor: clean compact mode message

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml

@@ -8,7 +8,7 @@ Rectangle {
     property string imageSource: "data:image/jpeg;base64,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"
 
     id: imageChatBox
-    height: imageMessage.height
+    height: imageMessage.height + imageChatBox.chatVerticalPadding
     width:  imageMessage.width + 2 * chatHorizontalPadding
     radius: 16
     visible: isImage

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml

@@ -12,7 +12,7 @@ Item {
     id: root
     visible: contentType == Constants.messageType || isEmoji
     z: 51
-    height: childrenRect.height
+    height: visible ? (showMoreLoader.active ? childrenRect.height : chatText.height) : 0
     width: longChatText ? undefined : chatText.width
 
     StyledTextEdit {
@@ -79,35 +79,32 @@ Item {
     }
 
     Loader {
+        id: showMoreLoader
         active: root.veryLongChatText
-        sourceComponent: showMoreComponent
         anchors.top: chatText.bottom
         anchors.topMargin: Style.current.smallPadding
         anchors.left: chatText.horizontalAlignment === Text.AlignLeft ? chatText.left : undefined
         anchors.right: chatText.horizontalAlignment === Text.AlignLeft ? undefined : chatText.right
-    }
 
-    Component {
-        id: showMoreComponent
-        StyledText {
-            text: root.readMore ?
-                      qsTr("Read less") :
-                      qsTr("Read more")
-            color: chatText.color
-            font.pixelSize: 12
-            font.underline: true
-            z: 100
+        sourceComponent: Component {
+            StyledText {
+                text: root.readMore ?
+                          qsTr("Read less") :
+                          qsTr("Read more")
+                color: chatText.color
+                font.pixelSize: 12
+                font.underline: true
+                z: 100
 
-            MouseArea {
-                z: 101
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    root.readMore = !root.readMore
+                MouseArea {
+                    z: 101
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        root.readMore = !root.readMore
+                    }
                 }
             }
         }
     }
-
-
 }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -14,7 +14,6 @@ Item {
     height: childrenRect.height + this.anchors.topMargin
     width: parent.width
 
-
     // FIXME @jonathanr: Adding this breaks the first line. Need to fix the height somehow
 //    DateGroup {
 //        id: dateGroupLbl
@@ -145,29 +144,25 @@ Item {
     Loader {
         id: audioPlayerLoader
         active: isAudio
-        sourceComponent: audioPlayer
         anchors.top: chatName.visible ? chatName.bottom : parent.top
         anchors.left: chatImage.right
-    }
 
-    Component {
-        id: audioPlayer
-        AudioPlayer {
-            audioSource: audio
+        sourceComponent: Component {
+            AudioPlayer {
+                audioSource: audio
+            }
         }
     }
 
     Loader {
         id: emojiReactionLoader
         active: emojiReactions !== ""
-        sourceComponent: emojiReactionsComponent
         anchors.top: chatText.bottom
         anchors.left: chatText.left
         anchors.topMargin: 2
-    }
 
-    Component {
-        id: emojiReactionsComponent
-        EmojiReactions {}
+        sourceComponent: Component {
+            EmojiReactions {}
+        }
     }
 }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml

@@ -8,7 +8,7 @@ Rectangle {
 
     id: imageChatBox
     height: {
-        let h = chatVerticalPadding
+        let h = appSettings.compactMode ? 0 : chatVerticalPadding
         for (let i = 0; i < imageRepeater.count; i++) {
             h += imageRepeater.itemAt(i).height
         }