refactor(@desktop/chat-communities): unused component removed

- `NormalMessageView` component is removed since we work with `CompactMessageView`
and it's the only and default message component in the app.
- `useCompactMode` property removed from local settings since it's not in use as
well and corresponding code is updated accordingly

src/app/global/local_account_sensitive_settings.nim

@@ -28,8 +28,8 @@ const LSS_KEY_IS_TENOR_WARNING_ACCEPTED* = "isTenorWarningAccepted"
 const DEFAULT_IS_TENOR_WARNING_ACCEPTED = false
 const LSS_KEY_DISPLAY_CHAT_IMAGES* = "displayChatImages"
 const DEFAULT_DISPLAY_CHAT_IMAGES = false
-const LSS_KEY_USE_COMPACT_MODE* = "useCompactMode"
+const LSS_KEY_TIMELINE_ENABLED* = "timelineEnabled"
-const DEFAULT_USE_COMPACT_MODE = true
+const DEFAULT_TIMELINE_ENABLED = true
 const LSS_KEY_RECENT_EMOJIS* = "recentEmojis"
 const DEFAULT_RECENT_EMOJIS = ""
 const LSS_KEY_HIDDEN_COMMUNITY_WELCOME_BANNERS* = "hiddenCommunityWelcomeBanners"
@@ -344,17 +344,17 @@ QtObject:
     notify = displayChatImagesChanged
 
 
-  proc useCompactModeChanged*(self: LocalAccountSensitiveSettings) {.signal.}
+  proc timelineEnabledChanged*(self: LocalAccountSensitiveSettings) {.signal.}
-  proc getUseCompactMode*(self: LocalAccountSensitiveSettings): bool {.slot.} =
+  proc getTimelineEnabled*(self: LocalAccountSensitiveSettings): bool {.slot.} =
-    getSettingsProp[bool](self, LSS_KEY_USE_COMPACT_MODE, newQVariant(DEFAULT_USE_COMPACT_MODE))
+    getSettingsProp[bool](self, LSS_KEY_TIMELINE_ENABLED, newQVariant(DEFAULT_TIMELINE_ENABLED))
-  proc setUseCompactMode*(self: LocalAccountSensitiveSettings, value: bool) {.slot.} =
+  proc setTimelineEnabled*(self: LocalAccountSensitiveSettings, value: bool) {.slot.} =
-    setSettingsProp(self, LSS_KEY_USE_COMPACT_MODE, newQVariant(value)):
+    setSettingsProp(self, LSS_KEY_TIMELINE_ENABLED, newQVariant(value)):
-      self.useCompactModeChanged()
+      self.timelineEnabledChanged()
 
-  QtProperty[bool] useCompactMode:
+  QtProperty[bool] timelineEnabled:
-    read = getUseCompactMode
+    read = getTimelineEnabled
-    write = setUseCompactMode
+    write = setTimelineEnabled
-    notify = useCompactModeChanged
+    notify = timelineEnabledChanged
 
 
   proc recentEmojisChanged*(self: LocalAccountSensitiveSettings) {.signal.}
@@ -859,7 +859,7 @@ QtObject:
       of LSS_KEY_IS_GIF_WIDGET_ENABLED: self.isGifWidgetEnabledChanged()
       of LSS_KEY_IS_TENOR_WARNING_ACCEPTED: self.isTenorWarningAcceptedChanged()
       of LSS_KEY_DISPLAY_CHAT_IMAGES: self.displayChatImagesChanged()
-      of LSS_KEY_USE_COMPACT_MODE: self.useCompactModeChanged()
+      of LSS_KEY_TIMELINE_ENABLED: self.timelineEnabledChanged()
       of LSS_KEY_RECENT_EMOJIS: self.recentEmojisChanged()
       of LSS_KEY_HIDDEN_COMMUNITY_WELCOME_BANNERS: self.hiddenCommunityWelcomeBannersChanged()
       of LSS_KEY_HIDDEN_COMMUNITY_BACKUP_BANNERS: self.hiddenCommunityBackUpBannersChanged()

ui/app/AppLayouts/Chat/controls/activityCenter/ReplyComponent.qml

@@ -27,7 +27,7 @@ Item {
     }
 
     StyledTextEdit {
-        text: Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), Emoji.size.small), false, localAccountSensitiveSettings.useCompactMode)
+        text: Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), Emoji.size.small), false)
         textFormat: Text.RichText
         height: 18
         width: implicitWidth > 300 ? 300 : implicitWidth

ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

@@ -36,7 +36,7 @@ Item {
     ListView {
         id: chatLogView
         anchors.fill: parent
-        spacing: localAccountSensitiveSettings.useCompactMode ? 0 : 4
+        spacing: 0
         boundsBehavior: Flickable.StopAtBounds
         clip: true
         verticalLayoutDirection: ListView.BottomToTop
@@ -79,7 +79,7 @@ Item {
 //                    item = messageListDelegate.items.get(i);
 //                    if (item.model.messageId === msgId) {
 //                        chatLogView.positionViewAtIndex(i, ListView.Beginning);
-//                        if (localAccountSensitiveSettings.useCompactMode && isSearch) {
+//                        if (isSearch) {
 //                            chatLogView.itemAtIndex(i).startMessageFoundAnimation();
 //                        }
 //                    }

ui/app/AppLayouts/Chat/views/ChatTextView.qml

@@ -13,7 +13,7 @@ Item {
     property var messageStore
     property bool longChatText: true
     property bool veryLongChatText: !!root.store ? root.store.chatsModelInst.plainText(message).length >
-                                    (localAccountSensitiveSettings.useCompactMode ? Constants.limitLongChatTextCompactMode : Constants.limitLongChatText) : false
+                                    Constants.limitLongChatTextCompactMode : false
     property bool readMore: false
     property alias textField: chatText
 
@@ -120,9 +120,9 @@ Item {
             } else {
                 if(isEdited){
                     let index = msg.endsWith("code>") ? msg.length : msg.length - 4
-                    return Utils.getMessageWithStyle(Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), localAccountSensitiveSettings.useCompactMode, isCurrentUser, hoveredLink)
+                    return Utils.getMessageWithStyle(Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), isCurrentUser, hoveredLink)
                 }
-                return Utils.getMessageWithStyle(Emoji.parse(msg), localAccountSensitiveSettings.useCompactMode, isCurrentUser, hoveredLink)
+                return Utils.getMessageWithStyle(Emoji.parse(msg), isCurrentUser, hoveredLink)
             }
         }
     }

ui/app/AppMain.qml

@@ -532,73 +532,6 @@ Item {
             }
         }
 
-    // This doesn't exists, not sure how this part ended up here?!?!
-    // We need to figure out what happened and fix this.
-    // So far just want to discard this, but leave it in order to check it later.
-//        Connections {
-//            target: profileModel
-
-//            onSettingsFileChanged: {
-//                // Since https://github.com/status-im/status-desktop/commit/93668ff75
-//                // we're hiding the setting to change appearance for compact normal mode
-//                // of the UI. For now, compact mode is the new default.
-//                //
-//                // Prior to this change, most likely many users are still using the
-//                // normal mode configuration, so we have to enforce compact mode for
-//                // those.
-//                if (!localAccountSensitiveSettings.useCompactMode) {
-//                    localAccountSensitiveSettings.useCompactMode = true
-//                }
-
-//                const whitelist = profileModel.getLinkPreviewWhitelist()
-//                try {
-//                    const whiteListedSites = JSON.parse(whitelist)
-//                    let settingsUpdated = false
-
-//                    // Add Status links to whitelist
-//                    whiteListedSites.push({title: "Status", address: Constants.deepLinkPrefix, imageSite: false})
-//                    whiteListedSites.push({title: "Status", address: Constants.joinStatusLink, imageSite: false})
-//                    let settings = localAccountSensitiveSettings.whitelistedUnfurlingSites
-
-//                    if (!settings) {
-//                        settings = {}
-//                    }
-
-//                    // Set Status links as true. We intercept thoseURLs so it is privacy-safe
-//                    if (!settings[Constants.deepLinkPrefix] || !settings[Constants.joinStatusLink]) {
-//                        settings[Constants.deepLinkPrefix] = true
-//                        settings[Constants.joinStatusLink] = true
-//                        settingsUpdated = true
-//                    }
-
-//                    const whitelistedHostnames = []
-
-//                    // Add whitelisted sites in to app settings that are not already there
-//                    whiteListedSites.forEach(site => {
-//                                                if (!settings.hasOwnProperty(site.address))  {
-//                                                    settings[site.address] = false
-//                                                    settingsUpdated = true
-//                                                }
-//                                                whitelistedHostnames.push(site.address)
-//                                            })
-//                    // Remove any whitelisted sites from app settings that don't exist in the
-//                    // whitelist from status-go
-//                    Object.keys(settings).forEach(settingsHostname => {
-//                        if (!whitelistedHostnames.includes(settingsHostname)) {
-//                            delete settings[settingsHostname]
-//                            settingsUpdated = true
-//                        }
-//                    })
-//                    if (settingsUpdated) {
-//                        localAccountSensitiveSettings.whitelistedUnfurlingSites = settings
-//                    }
-//                } catch (e) {
-//                    console.error('Could not parse the whitelist for sites', e)
-//                }
-//                appMain.settingsLoaded()
-//            }
-//        }
-
         Connections {
             target: chatsModel
             onNotificationClicked: {
@@ -845,13 +778,6 @@ Item {
         // Since https://github.com/status-im/status-desktop/commit/93668ff75
         // we're hiding the setting to change appearance for compact normal mode
         // of the UI. For now, compact mode is the new default.
-        //
-        // Prior to this change, most likely many users are still using the
-        // normal mode configuration, so we have to enforce compact mode for
-        // those.
-        if (!localAccountSensitiveSettings.useCompactMode) {
-            localAccountSensitiveSettings.useCompactMode = true
-        }
 
         const whitelist = profileModel.getLinkPreviewWhitelist()
         try {

ui/imports/shared/panels/chat/ChatReplyPanel.qml

@@ -163,9 +163,9 @@ Loader {
                 text: {
                     if (repliedMessageIsEdited){
                         let index = repliedMessageContent.length - 4
-                        return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent.slice(0, index) + Constants.editLabel + repliedMessageContent.slice(index)), Emoji.size.small), amISenderOfTheRepliedMessage, localAccountSensitiveSettings.useCompactMode)
+                        return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent.slice(0, index) + Constants.editLabel + repliedMessageContent.slice(index)), Emoji.size.small), amISenderOfTheRepliedMessage)
                     } else {
-                        return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), Emoji.size.small), amISenderOfTheRepliedMessage, localAccountSensitiveSettings.useCompactMode)
+                        return Utils.getReplyMessageStyle(Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), Emoji.size.small), amISenderOfTheRepliedMessage)
                     }
                 }
                 textFormat: Text.RichText

ui/imports/shared/panels/chat/EmojiReactionsPanel.qml

@@ -54,9 +54,9 @@ Item {
                     width: 10
                     height: 10
                     anchors.top: parent.top
-                    anchors.left: !root.isCurrentUser || localAccountSensitiveSettings.useCompactMode ? parent.left : undefined
+                    anchors.left: !root.isCurrentUser? parent.left : undefined
                     anchors.leftMargin: 0
-                    anchors.right: !root.isCurrentUser || localAccountSensitiveSettings.useCompactMode ? undefined : parent.right
+                    anchors.right: !root.isCurrentUser? undefined : parent.right
                     anchors.rightMargin: 0
                     radius: 2
                     z: -1
@@ -83,9 +83,9 @@ Item {
                                 width: 10
                                 height: 10
                                 anchors.top: parent.top
-                                anchors.left: !root.isCurrentUser || localAccountSensitiveSettings.useCompactMode ? parent.left : undefined
+                                anchors.left: !root.isCurrentUser? parent.left : undefined
                                 anchors.leftMargin: 0
-                                anchors.right: !root.isCurrentUser || localAccountSensitiveSettings.useCompactMode ? undefined : parent.right
+                                anchors.right: !root.isCurrentUser? undefined : parent.right
                                 anchors.rightMargin: 0
                                 radius: 2
                                 z: -1

ui/imports/shared/status/StatusChatInputReplyArea.qml

@@ -59,7 +59,7 @@ Rectangle {
 
         StyledText {
             id: replyText
-            text: Utils.getMessageWithStyle(Utils.linkifyAndXSS(Emoji.parse(message)), localAccountSensitiveSettings.useCompactMode, false)
+            text: Utils.getMessageWithStyle(Utils.linkifyAndXSS(Emoji.parse(message)), false)
             anchors.fill: parent
             elide: Text.ElideRight
             font.pixelSize: 13

ui/imports/shared/views/chat/ChatTextView.qml

@@ -12,8 +12,7 @@ Item {
     property var store
     property bool longChatText: true
     property bool veryLongChatText: false
-//    property bool veryLongChatText: !!root.store ? root.store.chatsModelInst.plainText(message).length >
+//    property bool veryLongChatText: !!root.store ? root.store.chatsModelInst.plainText(message).length > Constants.limitLongChatTextCompactMode : false
-//                                    (localAccountSensitiveSettings.useCompactMode ? Constants.limitLongChatTextCompactMode : Constants.limitLongChatText) : false
     property bool readMore: false
     property alias textField: chatText
 
@@ -117,9 +116,9 @@ Item {
             } else {
                 if(isEdited){
                     let index = msg.endsWith("code>") ? msg.length : msg.length - 4
-                    return Utils.getMessageWithStyle(Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), localAccountSensitiveSettings.useCompactMode, isCurrentUser, hoveredLink)
+                    return Utils.getMessageWithStyle(Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), isCurrentUser, hoveredLink)
                 }
-                return Utils.getMessageWithStyle(Emoji.parse(msg), localAccountSensitiveSettings.useCompactMode, isCurrentUser, hoveredLink)
+                return Utils.getMessageWithStyle(Emoji.parse(msg), isCurrentUser, hoveredLink)
             }
         }
     }

ui/imports/shared/views/chat/CompactMessageView.qml

@@ -358,7 +358,7 @@ Item {
                     sourceText = sourceText.replace(new RegExp(key, 'g'), value)
                 }
                 sourceText = sourceText.replace(/\n/g, "<br />")
-                sourceText = Utils.getMessageWithStyle(sourceText, localAccountSensitiveSettings.useCompactMode, isCurrentUser)
+                sourceText = Utils.getMessageWithStyle(sourceText, isCurrentUser)
             }
 
             sourceComponent: Item {

ui/imports/shared/views/chat/MessageView.qml

@@ -317,8 +317,7 @@ Column {
                 case Constants.messageContentType.gapType:
                     return gapComponent
                 default:
-                    return isStatusUpdate ? statusUpdateComponent :
+                    return isStatusUpdate ? statusUpdateComponent : compactMessageComponent
-                                            (localAccountSensitiveSettings.useCompactMode ? compactMessageComponent : messageComponent)
 
             }
         }
@@ -398,13 +397,6 @@ Column {
         }
     }
 
-    Component {
-        id: messageComponent
-        NormalMessageView {
-            container: root
-        }
-    }
-
     Component {
         id: statusUpdateComponent
         StatusUpdateView {

ui/imports/shared/views/chat/NormalMessageView.qml

@@ -1,394 +0,0 @@
-import QtQuick 2.13
-import utils 1.0
-import shared 1.0
-import shared.status 1.0
-import shared.views.chat 1.0
-import shared.panels.chat 1.0
-import shared.controls.chat 1.0
-
-Item {
-    id: root
-    anchors.top: parent.top
-    anchors.topMargin: authorCurrentMsg !== authorPrevMsg ? Style.current.smallPadding : 0
-    height: childrenRect.height + this.anchors.topMargin + (dateGroupLbl.visible ? dateGroupLbl.height : 0)
-    width: parent.width
-
-
-    property var container
-    property bool headerRepeatCondition: (authorCurrentMsg !== authorPrevMsg
-                                         || shouldRepeatHeader || dateGroupLbl.visible)
-
-    DateGroup {
-        id: dateGroupLbl
-        previousMessageIndex: prevMessageIndex
-        previousMessageTimestamp: prevMsgTimestamp
-        messageTimestamp: timestamp
-        isActivityCenterMessage: activityCenterMessage
-    }
-
-    UserImage {
-        id: chatImage
-        //active: rootStore.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatType.oneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.top:  dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
-        anchors.topMargin: 20
-        icon: senderIcon
-        isIdenticon: isSenderIconIdenticon
-        onClickMessage: {
-            root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
-        }
-    }
-
-    UsernameLabel {
-        id: chatName
-        //visible: rootStore.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatType.oneToOne && isMessage && headerRepeatCondition && !root.isCurrentUser
-        anchors.leftMargin: 20
-        anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
-        anchors.topMargin: 0
-        anchors.left: chatImage.right
-        displayName: senderDisplayName
-        localName: senderLocalName
-        amISender: amISender
-        onClickMessage: {
-            root.parent.clickMessage(true, false, false, null, false, false, false);
-        }
-    }
-
-    Rectangle {
-        readonly property int defaultMessageWidth: 400
-        readonly property int defaultMaxMessageChars: 54
-        readonly property int messageWidth: Math.max(defaultMessageWidth, parent.width / 1.4)
-        readonly property int maxMessageChars: (defaultMaxMessageChars * messageWidth) / defaultMessageWidth
-        property int chatVerticalPadding: isImage ? 4 : 6
-        property int chatHorizontalPadding: isImage ? 0 : 12
-        property bool longReply: chatReply.active && repliedMessageContent.length > maxMessageChars
-        property bool longChatText: false
-        // Not Refactored Yet
-//        property bool longChatText: rootStore.chatsModelInst.plainText(messageStore.message).split('\n').some(function (messagePart) {
-//            return messagePart.length > maxMessageChars
-//        })
-
-        id: chatBox
-        color: {
-            if (isSticker) {
-                return Style.current.background 
-            }
-            if (isImage) {
-                return "transparent"
-            }
-            return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground
-        }
-        border.color: isSticker ? Style.current.border : Style.current.transparent
-        border.width: 1
-        height: {
-           let h = (3 * chatVerticalPadding)
-           switch(contentType){
-                case Constants.messageContentType.stickerType:
-                    h += stickerId.height;
-                    break;
-                case Constants.messageContentType.audioType:
-                    h += audioPlayerLoader.height;
-                    break;
-                default:
-                    if (!chatImageContent.active && !chatReply.active) {
-                        h -= chatVerticalPadding
-                    }
-
-                    h += chatText.visible ? chatText.height : 0;
-                    h += chatImageContent.active ? chatImageContent.height: 0;
-                    h += chatReply.active ? chatReply.height : 0;
-           }
-           return h;
-        }
-        width: {
-            switch(contentType) {
-                case Constants.messageContentType.stickerType:
-                    return stickerId.width + (2 * chatBox.chatHorizontalPadding);
-                case Constants.messageContentType.imageType:
-                    return chatImageContent.width
-                default:
-                    if (longChatText || longReply) {
-                        return messageWidth;
-                    }
-                    let baseWidth = chatText.width;
-                    if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {
-                        baseWidth = chatReply.textFieldWidth
-                    }
-
-                    if (chatReply.visible && chatText.width < chatReply.authorWidth) {
-                        if(chatReply.authorWidth > baseWidth){
-                            baseWidth = chatReply.authorWidth + 20
-                        }
-                    }
-
-                    return baseWidth + 2 * chatHorizontalPadding
-            }
-        }
-
-        radius: 16
-        anchors.left: !isCurrentUser ? chatImage.right : undefined
-        anchors.leftMargin: !isCurrentUser ? 8 : 0
-        anchors.right: !isCurrentUser ? undefined : parent.right
-        anchors.rightMargin: !isCurrentUser ? 0 : Style.current.padding
-        anchors.top: headerRepeatCondition && !isCurrentUser ? chatImage.top : (dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top)
-        anchors.topMargin: 0
-        visible: isMessage && contentType !== Constants.messageContentType.transactionType
-
-        ChatReplyPanel {
-            id: chatReply
-            longReply: chatBox.longReply
-            anchors.top: parent.top
-            anchors.topMargin: chatReply.visible ? chatBox.chatVerticalPadding : 0
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.padding
-            anchors.right: parent.right
-            anchors.rightMargin: chatBox.chatHorizontalPadding
-            container: root.container
-            chatHorizontalPadding: chatBox.chatHorizontalPadding
-            // Not Refactored Yet
-            //stickerData: rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "sticker")
-            active: responseTo !== "" && !activityCenterMessage
-
-            Component.onCompleted: {
-                let obj = messageStore.getMessageByIdAsJson(messageId)
-                if(!obj)
-                    return
-
-                amISenderOfTheRepliedMessage = obj.amISender
-                repliedMessageContentType = obj.contentType
-                repliedMessageSenderIcon = obj.senderIcon
-                repliedMessageSenderIconIsIdenticon = obj.isSenderIconIdenticon
-                // TODO: not sure about is edited at the moment
-                repliedMessageIsEdited = false
-                repliedMessageSender = obj.senderDisplayName
-                repliedMessageContent = obj.messageText
-                repliedMessageImage = obj.messageImage
-            }
-
-            onScrollToBottom: {
-                // Not Refactored Yet
-//                messageStore.scrollToBottom(isit, root.container);
-            }
-            onClickMessage: {
-                // Not Refactored Yet
-//                root.parent.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, isReply);
-            }
-        }
-
-
-//        Connections {
-//            target: rootStore.chatsModelInst.messageView
-//            onMessageEdited: {
-//                if(chatReply.item)
-//                    chatReply.item.messageEdited(editedMessageId, editedMessageContent)
-//            }
-//        }
-
-        ChatTextView {
-            id: chatText
-            longChatText: chatBox.longChatText
-            anchors.top: chatReply.bottom
-            anchors.topMargin: chatReply.active ? chatBox.chatVerticalPadding : 0
-            anchors.left: parent.left
-            anchors.leftMargin: chatBox.chatHorizontalPadding
-            anchors.right: chatBox.longChatText ? parent.right : undefined
-            anchors.rightMargin: chatBox.longChatText ? chatBox.chatHorizontalPadding : 0
-            store: rootStore
-            textField.color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
-            Connections {
-                target: localAccountSensitiveSettings.useCompactMode ? null : chatBox
-                onLongChatTextChanged: {
-                    chatText.setWidths()
-                }
-            }
-
-            onLinkActivated: {
-                // Not Refactored Yet
-//                if (activityCenterMessage) {
-//                    clickMessage(false, isSticker, false)
-//                }
-            }
-        }
-
-        Loader {
-            id: chatImageContent
-            active: isImage && !!image
-            anchors.top: parent.top
-            anchors.topMargin: Style.current.smallPadding
-            anchors.left: parent.left
-            anchors.leftMargin: chatBox.chatHorizontalPadding
-            z: 51
-
-            sourceComponent: Component {
-                Item {
-                    width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding
-                    height: chatImageComponent.height
-
-                    StatusChatImage {
-                        id: chatImageComponent
-                        imageSource: image
-                        imageWidth: 250
-                        isCurrentUser: isCurrentUser
-                        onClicked: imageClick(image)
-                        container: root.container
-                    }
-                }
-            }
-        }
-
-        Loader {
-            id: audioPlayerLoader
-            active: isAudio
-            sourceComponent: audioPlayer
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Component {
-            id: audioPlayer
-            AudioPlayerPanel {
-                audioSource: audio
-            }
-        }
-
-        StatusSticker {
-            id: stickerId
-            anchors.left: parent.left
-            anchors.leftMargin: chatBox.chatHorizontalPadding
-            anchors.top: parent.top
-            anchors.topMargin: chatBox.chatVerticalPadding
-            color: Style.current.transparent
-            contentType: contentType
-            stickerData: sticker
-            onLoaded: {
-                // Not Refactored Yet
-                //messageStore.scrollToBottom(true, root.container)
-            }
-        }
-
-        MessageMouseArea {
-            anchors.fill: parent
-            enabled: !chatText.linkHovered
-            isActivityCenterMessage: activityCenterMessage
-            onClickMessage: {
-                // Not Refactored Yet
-                //root.parent.clickMessage(isProfileClick, isSticker, isImage)
-            }
-            onSetMessageActive: {
-                setMessageActive(messageId, active);
-            }
-        }
-
-        RectangleCorner {
-            // TODO find a way to show the corner for stickers since they have a border
-            visible: isMessage
-            isCurrentUser: isCurrentUser
-        }
-    }
-
-    Loader {
-        id: transactionBubbleLoader
-        active: contentType === Constants.messageContentType.transactionType
-        anchors.left: !isCurrentUser ? chatImage.right : undefined
-        anchors.leftMargin: isCurrentUser ? 0 : Style.current.halfPadding
-        anchors.right: isCurrentUser ? parent.right : undefined
-        anchors.rightMargin: Style.current.padding
-        sourceComponent: Component {
-            TransactionBubbleView {
-                store: rootStore
-            }
-        }
-    }
-
-    Rectangle {
-        id: dateTimeBackground
-        visible: isImage
-        height: visible ? chatTime.height + Style.current.halfPadding : 0
-        width: chatTime.width + 2 * chatTime.anchors.rightMargin +
-               (retry.visible ? retry.width + retry.anchors.rightMargin : sentMessage.width + sentMessage.anchors.rightMargin)
-        color: Utils.setColorAlpha(Style.current.black, 0.66)
-        radius: Style.current.radius
-        anchors.bottom: chatBox.bottom
-        anchors.bottomMargin: Style.current.halfPadding
-        anchors.right: chatBox.right
-        anchors.rightMargin: 6
-    }
-
-    ChatTimePanel {
-        id: chatTime
-        visible: isMessage && !emojiReactionLoader.active
-        anchors.top: isImage ? undefined : (linksLoader.active ? linksLoader.bottom : chatBox.bottom)
-        anchors.topMargin: isImage ? 0 : 4
-        anchors.verticalCenter: isImage ? dateTimeBackground.verticalCenter : undefined
-        anchors.right: isImage ? dateTimeBackground.right : (linksLoader.active ? linksLoader.right : chatBox.right)
-        anchors.rightMargin: isImage ? 6 : (isCurrentUser ? 5 : Style.current.padding)
-        timestamp: timestamp
-    }
-
-    SentMessage {
-        id: sentMessage
-        visible: isCurrentUser && !timeout && !isExpired && isMessage && outgoingStatus === "sent"
-        anchors.verticalCenter: chatTime.verticalCenter
-        anchors.right: chatTime.left
-        anchors.rightMargin: 5
-    }
-
-    Retry {
-        id: retry
-        anchors.verticalCenter: chatTime.verticalCenter
-        anchors.right: chatTime.left
-        anchors.rightMargin: 5
-        isCurrentUser: isCurrentUser
-        isExpired: isExpired
-        timeout: timeout
-        onClicked: {
-            // Not Refactored Yet
-//            rootStore.chatsModelInst.messageView.resendMessage(chatId, messageId)
-        }
-    }
-
-    Loader {
-        id: linksLoader
-        active: !!linkUrls
-        anchors.left: !isCurrentUser ? chatImage.right : undefined
-        anchors.leftMargin: !isCurrentUser ? 8 : 0
-        anchors.right: !isCurrentUser ? undefined : parent.right
-        anchors.rightMargin: !isCurrentUser ? 0 : Style.current.padding
-        anchors.top: chatBox.bottom
-        anchors.topMargin: Style.current.halfPadding
-        anchors.bottomMargin: Style.current.halfPadding
-
-        sourceComponent: Component {
-            LinksMessageView {
-                store: rootStore
-                linkUrls: linkUrls
-                container: root.container
-                isCurrentUser: isCurrentUser
-            }
-        }
-    }
-
-    Loader {
-        id: emojiReactionLoader
-        active: emojiReactions !== ""
-        sourceComponent: emojiReactionsComponent
-        anchors.left: isCurrentUser ? undefined : chatBox.left
-        anchors.right: isCurrentUser ? chatBox.right : undefined
-        anchors.leftMargin: isCurrentUser ? Style.current.halfPadding : 1
-        anchors.top: chatBox.bottom
-        anchors.topMargin: 2
-    }
-
-    Component {
-        id: emojiReactionsComponent
-        EmojiReactionsPanel {
-            isMessageActive: isMessageActive
-            emojiReactionsModel: emojiReactionsModel
-            onSetMessageActive: {
-                setMessageActive(messageId, active);;
-            }
-            // Not Refactored Yet
-            //onToggleReaction: rootStore.chatsModelInst.toggleReaction(messageId, emojiID)
-        }
-    }
-}

ui/imports/utils/Utils.qml

@@ -48,7 +48,7 @@ QtObject {
         return Style.current.accountColors[colorIndex]
     }
 
-    function getMessageWithStyle(msg, useCompactMode, isCurrentUser, hoveredLink = "") {
+    function getMessageWithStyle(msg, isCurrentUser, hoveredLink = "") {
         return `<style type="text/css">` +
                     `p, img, a, del, code, blockquote { margin: 0; padding: 0; }` +
                     `code {` +
@@ -97,10 +97,10 @@ QtObject {
                 `${msg}`
     }
 
-    function getReplyMessageStyle(msg, isCurrentUser, useCompactMode) {
+    function getReplyMessageStyle(msg, isCurrentUser) {
         return `<style type="text/css">`+
                     `a {`+
-                        `color: ${isCurrentUser && !useCompactMode ? Style.current.white : Style.current.textColor};`+
+                        `color: ${isCurrentUser? Style.current.white : Style.current.textColor};`+
                     `}`+
                     `a.mention {`+
                         `color: ${isCurrentUser ? Style.current.mentionColor : Style.current.turquoise};`+