fix: fix channel list spacing during a search

Fixes #2191

ui/app/AppLayouts/Chat/CommunityComponents/CommunityDetailPopup.qml

@@ -173,7 +173,6 @@ ModalPopup {
             name: model.name
             lastMessage: model.description
             contentType: Constants.messageType
-            border.width: 0
             color: Style.current.transparent
             enableMouseArea: false
         }

ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml

@@ -5,7 +5,7 @@ import "../../../../shared/status"
 import "../../../../imports"
 import "../components"
 
-Rectangle {
+Item {
     property string chatId: ""
     property string name: "channelName"
     property string lastMessage: "My latest message\n with a return"
@@ -28,168 +28,178 @@ Rectangle {
     property bool muted: false
     property bool hovered: false
     property bool enableMouseArea: true
+    property color color: {
+        if (ListView.isCurrentItem) {
+            return Style.current.menuBackgroundActive
+        }
+        if (wrapper.hovered) {
+            return Style.current.menuBackgroundHover
+        }
+        return Style.current.transparent
+    }
 
     property string profileImage: realChatType === Constants.chatTypeOneToOne ? appMain.getProfileImage(chatId) || ""  : ""
 
-    Connections {
+    // Hide the box if it is filtered out
-        enabled: realChatType === Constants.chatTypeOneToOne
+    property bool isVisible: searchStr === "" || name.includes(searchStr)
-        target: profileModel.contacts.list
-        onContactChanged: {
-            if (pubkey === wrapper.chatId) {
-                wrapper.profileImage = appMain.getProfileImage(wrapper.chatId)
-            }
-        }
-    }
 
     id: wrapper
-    color: {
-      if (ListView.isCurrentItem) {
-        return Style.current.menuBackgroundActive
-      }
-      if (wrapper.hovered) {
-        return Style.current.menuBackgroundHover
-      }
-      return Style.current.transparent
-    }
     anchors.right: parent.right
     anchors.top: applicationWindow.top
     anchors.left: parent.left
-    radius: 8
-    // Hide the box if it is filtered out
-    property bool isVisible: searchStr === "" || name.includes(searchStr)
     visible: isVisible ? true : false
-    height: isVisible ? (!isCompact ? 64 : 40) : 0
+    height: isVisible ? rectangle.height + (isCompact ? 4 : Style.current.halfPadding) : 0
 
-    StatusIdenticon {
-        id: contactImage
-        height: !isCompact ? 40 : 28
-        width: !isCompact ? 40 : 28
-        chatId: wrapper.chatId
-        chatName: wrapper.name
-        chatType: wrapper.realChatType
-        identicon: wrapper.profileImage || wrapper.identicon
-        anchors.left: parent.left
-        anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
-        anchors.verticalCenter: parent.verticalCenter
-    }
-
-    SVGImage {
-        id: channelIcon
-        width: 16
-        height: 16
-        fillMode: Image.PreserveAspectFit
-        source: "../../../img/channel-icon-" + (wrapper.realChatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg")
-        anchors.left: contactImage.right
-        anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
-        anchors.top: !isCompact ? parent.top : undefined
-        anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
-        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
-        visible: wrapper.realChatType !== Constants.chatTypeOneToOne
-    }
-
-    StyledText {
-        id: contactInfo
-        text: wrapper.realChatType !== Constants.chatTypePublic ?
-                  Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) :
-                  "#" + Utils.filterXSS(wrapper.name)
-        anchors.right: contactTime.left
-        anchors.rightMargin: Style.current.smallPadding
-        elide: Text.ElideRight
-        color: muted ? Style.current.secondaryText : Style.current.textColor
-        font.weight: Font.Medium
-        font.pixelSize: 15
-        anchors.left: channelIcon.visible ? channelIcon.right : contactImage.right
-        anchors.leftMargin: channelIcon.visible ? 2 :
-                                                  (!isCompact ? Style.current.padding : Style.current.halfPadding)
-        anchors.top: !isCompact ? parent.top : undefined
-        anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
-        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
-    }
-    
-    StyledText {
-        id: lastChatMessage
-        visible: !isCompact
-        text: {
-            switch(contentType){
-                //% "Image"
-                case Constants.imageType: return qsTrId("image");
-                //% "Sticker"
-                case Constants.stickerType: return qsTrId("sticker");
-                //% "No messages"
-                default: return lastMessage ? Emoji.parse(Utils.filterXSS(lastMessage)).replace(/\n|\r/g, ' ') : qsTrId("no-messages")
-            }
-        }
-        textFormat: Text.RichText
-        clip: true // This is needed because emojis don't ellide correctly
-        anchors.right: contactNumberChatsCircle.left
-        anchors.rightMargin: Style.current.smallPadding
-        elide: Text.ElideRight
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.current.smallPadding
-        font.pixelSize: 15
-        anchors.left: contactImage.right
-        anchors.leftMargin: Style.current.padding
-        color: Style.current.secondaryText
-    }
-
-    StyledText {
-        id: contactTime
-        visible: !isCompact
-        text: Utils.formatDateTime(wrapper.timestamp, appSettings.locale)
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.smallPadding
-        font.pixelSize: 11
-        color: Style.current.secondaryText
-    }
     Rectangle {
-        id: contactNumberChatsCircle
+        Connections {
-        width: 22
+            enabled: realChatType === Constants.chatTypeOneToOne
-        height: 22
+            target: profileModel.contacts.list
-        radius: 50
+            onContactChanged: {
-        anchors.right: parent.right
+                if (pubkey === wrapper.chatId) {
-        anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+                    wrapper.profileImage = appMain.getProfileImage(wrapper.chatId)
-        anchors.bottom: !isCompact ? parent.bottom : undefined
+                }
-        anchors.bottomMargin: !isCompact ? Style.current.smallPadding : 0
-        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
-        color: Style.current.blue
-        visible: (unviewedMessagesCount > 0) || wrapper.hasMentions
-        StyledText {
-            id: contactNumberChats
-            text: wrapper.hasMentions ? '@' : (wrapper.unviewedMessagesCount < 100 ? wrapper.unviewedMessagesCount : "99+")
-            font.pixelSize: 12
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            color: Style.current.white
-        }
-    }
-
-    MouseArea {
-        enabled: enableMouseArea
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-          wrapper.hovered = true
-        }
-        onExited: {
-          wrapper.hovered = false
-        }
-        onClicked: {
-            if (mouse.button & Qt.RightButton) {
-                chatsModel.setContextChannel(chatId)
-                channelContextMenu.openMenu(chatsModel.contextChannel, index)
-                return;
             }
-            chatGroupsListView.currentIndex = index
-            chatsModel.setActiveChannelByIndex(index)
         }
-    }
 
+        id: rectangle
+        color: wrapper.color
+        radius: 8
+        height: !isCompact ? 64 : 40
+        width: parent.width
+
+        StatusIdenticon {
+            id: contactImage
+            height: !isCompact ? 40 : 28
+            width: !isCompact ? 40 : 28
+            chatId: wrapper.chatId
+            chatName: wrapper.name
+            chatType: wrapper.realChatType
+            identicon: wrapper.profileImage || wrapper.identicon
+            anchors.left: parent.left
+            anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        SVGImage {
+            id: channelIcon
+            width: 16
+            height: 16
+            fillMode: Image.PreserveAspectFit
+            source: "../../../img/channel-icon-" + (wrapper.realChatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg")
+            anchors.left: contactImage.right
+            anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+            anchors.top: !isCompact ? parent.top : undefined
+            anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
+            anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
+            visible: wrapper.realChatType !== Constants.chatTypeOneToOne
+        }
+
+        StyledText {
+            id: contactInfo
+            text: wrapper.realChatType !== Constants.chatTypePublic ?
+                      Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) :
+                      "#" + Utils.filterXSS(wrapper.name)
+            anchors.right: contactTime.left
+            anchors.rightMargin: Style.current.smallPadding
+            elide: Text.ElideRight
+            color: muted ? Style.current.secondaryText : Style.current.textColor
+            font.weight: Font.Medium
+            font.pixelSize: 15
+            anchors.left: channelIcon.visible ? channelIcon.right : contactImage.right
+            anchors.leftMargin: channelIcon.visible ? 2 :
+                                                      (!isCompact ? Style.current.padding : Style.current.halfPadding)
+            anchors.top: !isCompact ? parent.top : undefined
+            anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
+            anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
+        }
+
+        StyledText {
+            id: lastChatMessage
+            visible: !isCompact
+            text: {
+                switch(contentType){
+                    //% "Image"
+                case Constants.imageType: return qsTrId("image");
+                    //% "Sticker"
+                case Constants.stickerType: return qsTrId("sticker");
+                    //% "No messages"
+                default: return lastMessage ? Emoji.parse(Utils.filterXSS(lastMessage)).replace(/\n|\r/g, ' ') : qsTrId("no-messages")
+                }
+            }
+            textFormat: Text.RichText
+            clip: true // This is needed because emojis don't ellide correctly
+            anchors.right: contactNumberChatsCircle.left
+            anchors.rightMargin: Style.current.smallPadding
+            elide: Text.ElideRight
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: Style.current.smallPadding
+            font.pixelSize: 15
+            anchors.left: contactImage.right
+            anchors.leftMargin: Style.current.padding
+            color: Style.current.secondaryText
+        }
+
+        StyledText {
+            id: contactTime
+            visible: !isCompact
+            text: Utils.formatDateTime(wrapper.timestamp, appSettings.locale)
+            anchors.right: parent.right
+            anchors.rightMargin: Style.current.padding
+            anchors.top: parent.top
+            anchors.topMargin: Style.current.smallPadding
+            font.pixelSize: 11
+            color: Style.current.secondaryText
+        }
+        Rectangle {
+            id: contactNumberChatsCircle
+            width: 22
+            height: 22
+            radius: 50
+            anchors.right: parent.right
+            anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+            anchors.bottom: !isCompact ? parent.bottom : undefined
+            anchors.bottomMargin: !isCompact ? Style.current.smallPadding : 0
+            anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
+            color: Style.current.blue
+            visible: (unviewedMessagesCount > 0) || wrapper.hasMentions
+            StyledText {
+                id: contactNumberChats
+                text: wrapper.hasMentions ? '@' : (wrapper.unviewedMessagesCount < 100 ? wrapper.unviewedMessagesCount : "99+")
+                font.pixelSize: 12
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                color: Style.current.white
+            }
+        }
+
+        MouseArea {
+            enabled: enableMouseArea
+            cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+                wrapper.hovered = true
+            }
+            onExited: {
+                wrapper.hovered = false
+            }
+            onClicked: {
+                if (mouse.button & Qt.RightButton) {
+                    chatsModel.setContextChannel(chatId)
+                    channelContextMenu.openMenu(chatsModel.contextChannel, index)
+                    return;
+                }
+                chatGroupsListView.currentIndex = index
+                chatsModel.setActiveChannelByIndex(index)
+            }
+        }
+
+    }
 }
 
+
+
 /*##^##
 Designer {
     D{i:0;formeditorColor:"#ffffff";height:64;width:640}

ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml

@@ -20,7 +20,7 @@ Item {
 
     ListView {
         id: chatGroupsListView
-        spacing: appSettings.useCompactMode ? 4 : Style.current.halfPadding
+        spacing: 0
         anchors.top: parent.top
         height: childrenRect.height
         visible: height > (appSettings.useCompactMode ? 30 : 50)