feat(CommunityColumn): add channels and categories admin banner

Fixes #5664

src/app/global/local_account_sensitive_settings.nim

@@ -32,6 +32,8 @@ const LSS_KEY_RECENT_EMOJIS* = "recentEmojis"
 const DEFAULT_RECENT_EMOJIS = ""
 const LSS_KEY_HIDDEN_COMMUNITY_WELCOME_BANNERS* = "hiddenCommunityWelcomeBanners"
 const DEFAULT_HIDDEN_COMMUNITY_WELCOME_BANNERS = ""
+const LSS_KEY_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS* = "hiddenCommunityChannelsAndCategoriesBanner"
+const DEFAULT_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS = ""
 const LSS_KEY_HIDDEN_COMMUNITY_BACKUP_BANNERS* = "hiddenCommunityBackUpBanners"
 const DEFAULT_HIDDEN_COMMUNITY_BACKUP_BANNERS = ""
 const LSS_KEY_VOLUME* = "volume"
@@ -367,6 +369,17 @@ QtObject:
     write = setHiddenCommunityWelcomeBanners
     notify = hiddenCommunityWelcomeBannersChanged
 
+  proc hiddenCommunityChannelAndCategoriesBannersChanged*(self: LocalAccountSensitiveSettings) {.signal.}
+  proc getHiddenCommunityChannelAndCategoriesBanners*(self: LocalAccountSensitiveSettings): QVariant {.slot.} =
+    getSettingsPropQVariant(self, LSS_KEY_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS, newQVariant(DEFAULT_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS))
+  proc setHiddenCommunityChannelAndCategoriesBanners*(self: LocalAccountSensitiveSettings, value: QVariant) {.slot.} =
+    setSettingsProp(self, LSS_KEY_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS, value):
+      self.hiddenCommunityChannelAndCategoriesBannersChanged()
+
+  QtProperty[QVariant] hiddenCommunityChannelAndCategoriesBanners:
+    read = getHiddenCommunityChannelAndCategoriesBanners
+    write = setHiddenCommunityChannelAndCategoriesBanners
+    notify = hiddenCommunityChannelAndCategoriesBannersChanged
 
   proc hiddenCommunityBackUpBannersChanged*(self: LocalAccountSensitiveSettings) {.signal.}
   proc getHiddenCommunityBackUpBanners*(self: LocalAccountSensitiveSettings): QVariant {.slot.} =
@@ -857,6 +870,7 @@ QtObject:
       of LSS_KEY_DISPLAY_CHAT_IMAGES: self.displayChatImagesChanged()
       of LSS_KEY_RECENT_EMOJIS: self.recentEmojisChanged()
       of LSS_KEY_HIDDEN_COMMUNITY_WELCOME_BANNERS: self.hiddenCommunityWelcomeBannersChanged()
+      of LSS_KEY_HIDDEN_COMMUNITY_CHANNELS_AND_CATEGORIES_BANNERS: self.hiddenCommunityChannelAndCategoriesBannersChanged()
       of LSS_KEY_HIDDEN_COMMUNITY_BACKUP_BANNERS: self.hiddenCommunityBackUpBannersChanged()
       of LSS_KEY_VOLUME: self.volumeChanged()
       of LSS_KEY_NOTIFICATION_SETTING: self.notificationSettingChanged()

ui/app/AppLayouts/Chat/panels/communities/BackUpCommuntyBannerPanel.qml

@@ -9,7 +9,7 @@ import StatusQ.Components 0.1
 import utils 1.0
 
 Rectangle {
-    property var activeCommunity
+    property string communityId
     signal backupButtonClicked(var mouse)
 
     id: root
@@ -40,6 +40,28 @@ Rectangle {
         icon.name: "objects"
     }
 
+    StatusFlatRoundButton {
+        id: closeImg
+        implicitWidth: 32
+        implicitHeight: 32
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        icon.height: 20
+        icon.width: 20
+        icon.name: "close-circle"
+        type: StatusFlatRoundButton.Type.Tertiary
+        onClicked: {
+            let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityBackUpBanners || []
+            if (hiddenBannerIds.includes(root.communityId)) {
+                return
+            }
+            hiddenBannerIds.push(root.communityId)
+            localAccountSensitiveSettings.hiddenCommunityBackUpBanners = hiddenBannerIds
+        }
+    }
+
     StatusBaseText {
         id: backUpText
         //% "Back up community key"

ui/app/AppLayouts/Chat/panels/communities/CommunityChannelsAndCategoriesBannerPanel.qml

@@ -0,0 +1,100 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import shared.panels 1.0
+import shared.status 1.0
+
+import utils 1.0
+
+Rectangle {
+    id: root
+    height: childrenRect.height + Style.current.padding
+    anchors.left: parent.left
+    anchors.leftMargin: Style.current.padding
+    anchors.right: parent.right
+    anchors.rightMargin: Style.current.padding
+    border.color: Style.current.border
+    radius: 16
+    color: Style.current.transparent
+    property string communityId
+
+
+   Rectangle {
+        width: 66
+        height: 4
+        color: Style.current.secondaryMenuBackground
+        anchors.top: parent.top
+        anchors.topMargin: -2
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    StatusRoundIcon {
+        anchors.top: parent.top
+        anchors.topMargin: -6
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 40
+        height: 40
+        icon.name: "channel"
+    }
+
+    StatusFlatRoundButton {
+        id: closeImg
+        implicitWidth: 32
+        implicitHeight: 32
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        icon.height: 20
+        icon.width: 20
+        icon.name: "close-circle"
+        type: StatusFlatRoundButton.Type.Tertiary
+        onClicked: {
+            let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners || []
+            if (hiddenBannerIds.includes(communityId)) {
+                return
+            }
+            hiddenBannerIds.push(communityId)
+            localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners = hiddenBannerIds
+        }
+    }
+
+    StatusBaseText {
+        id: descriptionText
+        text: qsTr("Expand your community by adding more channels and categories")
+        anchors.top: parent.top
+        anchors.topMargin: 48
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: 15
+        color: Theme.palette.directColor1
+        wrapMode: Text.WordWrap
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.xlPadding
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.xlPadding
+    }
+
+    StatusButton {
+        id: addMembersBtn
+        text: qsTrId("Add channels")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: descriptionText.bottom
+        anchors.topMargin: Style.current.padding
+        onClicked: Global.openPopup(createChannelPopup)
+    }
+
+    StatusFlatButton {
+        id: manageBtn
+        text: qsTr("Add categories")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: addMembersBtn.bottom
+
+        onClicked: Global.openPopup(createCategoryPopup)
+    }
+}

ui/app/AppLayouts/Chat/panels/communities/CommunityWelcomeBannerPanel.qml

@@ -38,6 +38,15 @@ Rectangle {
         }
     }
 
+    Rectangle {
+        width: 70
+        height: 4
+        color: Style.current.secondaryMenuBackground
+        anchors.top: parent.top
+        anchors.topMargin: -2
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
     SVGImage {
         anchors.top: parent.top
         anchors.topMargin: -6

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

@@ -29,9 +29,6 @@ Item {
     property var store
     property bool hasAddedContacts: false
     property var communityData: store.mainModuleInst ? store.mainModuleInst.activeSection || {} : {}
-    // TODO unhardcode
-    // Not Refactored Yet
-    //property int chatGroupsListViewCount: communityChatListAndCategories.chatList.count
     property Component pinnedMessagesPopupComponent
 
     signal infoButtonClicked
@@ -124,28 +121,18 @@ Item {
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
         clip: true
         contentHeight: communityChatListAndCategories.height
-                       + emptyViewAndSuggestionsLoader.height
-                       + backUpBannerLoader.height
-                       + 16
+                       + bannerColumn.height
+                       + Style.current.bigPadding
 
         StatusChatListAndCategories {
             id: communityChatListAndCategories
 
             anchors.horizontalCenter: parent.horizontalCenter
             width: root.width
-            height: {
-                if (!emptyViewAndSuggestionsLoader.active &&
-                    !backUpBannerLoader.active) {
-                    return implicitHeight > (root.height - 82) ? implicitHeight + 8 : root.height - 82
-                }
-                return implicitHeight
-            }
 
             draggableItems: communityData.amISectionAdmin
             draggableCategories: communityData.amISectionAdmin
-            //chatList.model: root.store.chatsModelInst.communities.activeCommunity.chats
 
-            //categoryList.model: root.store.chatsModelInst.communities.activeCommunity.categories
             model: root.communitySectionModule.model
             onChatItemSelected: {
                 if(categoryId === "")
@@ -156,10 +143,9 @@ Item {
 
             showCategoryActionButtons: communityData.amISectionAdmin
             showPopupMenu: communityData.amISectionAdmin && communityData.canManageUsers
-            //selectedChatId: root.store.chatsModelInst.channelView.activeChannel.id
 
-//            onChatItemSelected: root.store.chatsModelInst.channelView.setActiveChannel(id)
-//            onChatItemUnmuted: root.store.chatsModelInst.channelView.unmuteChatItem(id)
+            // onChatItemSelected: root.store.chatsModelInst.channelView.setActiveChannel(id)
+            // onChatItemUnmuted: root.store.chatsModelInst.channelView.unmuteChatItem(id)
             onChatItemReordered: function(categoryId, chatId, from, to){
                 root.store.reorderCommunityChat(categoryId, chatId, to)
             }
@@ -340,61 +326,103 @@ Item {
             }
         }
 
-        Loader {
-            id: emptyViewAndSuggestionsLoader
-            active: communityData.amISectionAdmin &&
-                     (!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners ||
-                      !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
+        Column {
+            id: bannerColumn
             width: parent.width
-            height: {
-                // I dont know why, the binding doesn't work well if this isn't here
-                item && item.height
-                return this.active ? item.height : 0
-            }
             anchors.top: communityChatListAndCategories.bottom
-            anchors.topMargin: active ? Style.current.padding : 0
-            sourceComponent: Component {
-                CommunityWelcomeBannerPanel {
-                    activeCommunity: communityData
-                    store: root.store
-                    hasAddedContacts: root.hasAddedContacts
-                    communitySectionModule: root.communitySectionModule
-                    onManageCommunityClicked: root.manageButtonClicked()
+            anchors.topMargin: Style.current.padding
+            spacing: Style.current.bigPadding
+
+            Loader {
+                id: emptyViewAndSuggestionsLoader
+                active: communityData.amISectionAdmin &&
+                        (!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners ||
+                        !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
+                width: parent.width
+                height: {
+                    // I dont know why, the binding doesn't work well if this isn't here
+                    item && item.height
+                    return this.active ? item.height : 0
+                }
+                sourceComponent: Component {
+                    CommunityWelcomeBannerPanel {
+                        activeCommunity: communityData
+                        store: root.store
+                        hasAddedContacts: root.hasAddedContacts
+                        communitySectionModule: root.communitySectionModule
+                        onManageCommunityClicked: root.manageButtonClicked()
+                    }
                 }
             }
-        }
 
-        Loader {
-            id: backUpBannerLoader
-            active: communityData.amISectionAdmin &&
-                        (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
-                         !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
-            width: parent.width
-            height: active ? item.height : 0
-            anchors.top: emptyViewAndSuggestionsLoader.bottom
-            anchors.topMargin: active ? Style.current.padding : 0
-            sourceComponent: Component {
-                Item {
-                    width: parent.width
-                    height: backupBanner.height
+            Loader {
+                id: channelsAndCategoriesAdminBox
+                active: communityData.amISectionAdmin &&
+                        (!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners ||
+                        !localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id))
+                width: parent.width
+                height: {
+                    // I dont know why, the binding doesn't work well if this isn't here
+                    item && item.height
+                    return this.active ? item.height : 0
+                }
+                sourceComponent: Component {
+                    Item {
+                        width: parent.width
+                        height: channelsAndCategoriesBanner.height
 
-                    BackUpCommuntyBannerPanel {
-                        id: backupBanner
-                        activeCommunity: communityData
-                        onBackupButtonClicked: {
-                            Global.openPopup(transferOwnershipPopup, {
-                                privateKey: communitySectionModule.exportCommunity(communityData.id),
-                                store: root.store
-                            })
+                        CommunityChannelsAndCategoriesBannerPanel {
+                            id: channelsAndCategoriesBanner
+                            communityId: communityData.id
+                        }
+
+                        MouseArea {
+                            anchors.fill: channelsAndCategoriesBanner
+                            acceptedButtons: Qt.RightButton
+                            onClicked: {
+                                /* Prevents sending events to the component beneath
+                                if Right Mouse Button is clicked. */
+                                mouse.accepted = false;
+                            }
                         }
                     }
-                    MouseArea {
-                        anchors.fill: backupBanner
-                        acceptedButtons: Qt.RightButton
-                        onClicked: {
-                            /* Prevents sending events to the component beneath
-                               if Right Mouse Button is clicked. */
-                            mouse.accepted = false;
+                }
+            }
+
+            Loader {
+                id: backUpBannerLoader
+                active: communityData.amISectionAdmin &&
+                            (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
+                            !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
+                width: parent.width
+                height: {
+                    // I dont know why, the binding doesn't work well if this isn't here
+                    item && item.height
+                    active ? item.height : 0
+                }
+                sourceComponent: Component {
+                    Item {
+                        width: parent.width
+                        height: backupBanner.height
+
+                        BackUpCommuntyBannerPanel {
+                            id: backupBanner
+                            communityId: communityData.id
+                            onBackupButtonClicked: {
+                                Global.openPopup(transferOwnershipPopup, {
+                                    privateKey: communitySectionModule.exportCommunity(communityData.id),
+                                    store: root.store
+                                })
+                            }
+                        }
+                        MouseArea {
+                            anchors.fill: backupBanner
+                            acceptedButtons: Qt.RightButton
+                            onClicked: {
+                                /* Prevents sending events to the component beneath
+                                if Right Mouse Button is clicked. */
+                                mouse.accepted = false;
+                            }
                         }
                     }
                 }