feat(StatusModal): introduce hasCloseButton property

This property can be used to hide the close button, as there are some
modals that shouldn't allow users to "x" modals away.

sandbox/DemoApp.qml

@@ -18,6 +18,32 @@ Rectangle {
 
     property string titleStyle: "osx"
 
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int wallet: 2
+        readonly property int browser: 3
+        readonly property int timeline: 4
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    function setActiveItem(sectionId) {
+        for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
+            let item = models.demoAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId)
+            {
+                models.demoAppSectionsModel.setProperty(i, "active", false)
+                continue
+            }
+
+            models.demoAppSectionsModel.setProperty(i, "active", true);
+        }
+    }
+
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
@@ -48,32 +74,74 @@ Rectangle {
 
             id: navBar
 
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                tooltip.text: "Chat"
-                checked: appView.sourceComponent == statusAppChatView
-                onClicked: {
-                    appView.sourceComponent = statusAppChatView
-                }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: models.demoAppSectionsModel
+
+            property bool communityAdded: false
+
+            onAboutToUpdateFilteredRegularModel: {
+                communityAdded = false
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Status Community"
-                    tooltipText: "Status Community"
-                }
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
             }
 
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                id: communityBtn
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-                name: model.name
-                tooltip.text: model.tooltipText
-                icon.color: Theme.palette.miscColor6
-                icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                checked: appView.sourceComponent == statusAppCommunityView
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
                 onClicked: {
-                    appView.sourceComponent = statusAppCommunityView
+                    if(model.sectionType === appSectionType.chat)
+                    {
+                        appView.sourceComponent = statusAppChatView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.profileSettings)
+                    {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
+                }
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    if(model.sectionType === appSectionType.community)
+                    {
+                        appView.sourceComponent = statusAppCommunityView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
                 }
 
                 popupMenu: StatusPopupMenu {
@@ -104,39 +172,7 @@ Rectangle {
                         type: StatusMenuItem.Type.Danger
                     }
                 }
-
             }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "bigger/status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    id: profileNavButton
-                    icon.name: "bigger/settings"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-
-                    checked: appView.sourceComponent == statusAppProfileSettingsView
-                    onClicked: {
-                        appView.sourceComponent = statusAppProfileSettingsView
-                    }
-                }
-            ]
         }
 
         appView: Loader {
@@ -289,9 +325,7 @@ Rectangle {
                     StatusChatList {
                         anchors.horizontalCenter: parent.horizontalCenter
 
-                        chatListItems.model: models.demoChatListItems
-                        selectedChatId: "0"
-                        onChatItemSelected: selectedChatId = id
+                        model: models.demoChatListItems
                         onChatItemUnmuted: {
                             for (var i = 0; i < models.demoChatListItems.count; i++) {
                                 let item = models.demoChatListItems.get(i);
@@ -459,11 +493,8 @@ Rectangle {
 
                         draggableItems: true
                         draggableCategories: false
-                        chatList.model: models.demoCommunityChatListItems
-                        categoryList.model: models.demoCommunityCategoryItems
-
+                        model: models.demoCommunityChatListItems
                         showCategoryActionButtons: true
-                        onChatItemSelected: selectedChatId = id
 
                         categoryPopupMenu: StatusPopupMenu {
 

sandbox/Layout.qml

@@ -7,6 +7,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Popups 0.1
 
 Column {
     spacing: 5
@@ -49,247 +50,398 @@ Column {
             }
         }
 
-        StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
-            }
+        QtObject {
+            id: appSectionType
+            readonly property int chat: 0
+            readonly property int community: 1
+            readonly property int wallet: 2
+            readonly property int browser: 3
+            readonly property int timeline: 4
+            readonly property int nodeManagement: 5
+            readonly property int profileSettings: 6
         }
 
         StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
-                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
-                tooltip.text: "Chat"
+
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                id: buttons
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            regularNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
             }
-
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
-
-                    tooltip.text: "Profile"
-                }
-            ]
         }
 
         StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-            }
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
                 }
-            ]
+            }
         }
 
         StatusAppNavBar {
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+
+
+        StatusAppNavBar {
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
             }
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
+            property bool communityAdded: false
 
-                    tooltip.text: "Profile"
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+            }
+
+            communityNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
                 }
-            ]
+            }
         }
 
         StatusAppNavBar {
-            id: test
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "chat"
-                badge.value: 33
-                badge.visible: true
+
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: ListModel {
+                ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
+                ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
+                ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
+                ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
+                ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
+                ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
+                ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "timeline"; sectionType: 4; name: "Timeline"; active: false; image: ""; icon: "bigger/status-update"; color: ""; hasNotification: false; notificationsCount: 0}
+                ListElement {sectionId: "profile"; sectionType: 6; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
+            }
+
+            property bool communityAdded: false
+
+            filterRegularItem: function(item) {
+                if(item.sectionType === appSectionType.community)
+                    if(communityAdded)
+                        return false
+                    else
+                        communityAdded = true
+
+                return true
+            }
+
+            filterCommunityItem: function(item) {
+                return item.sectionType === appSectionType.community
+            }
+
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-                tooltip.text: "Chat"
             }
 
-            navBarCommunityTabButtons.model: ListModel {
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-                ListElement {
-                    name: "Test community"
-                    tooltipText: "Test Community"
-                }
-            }
-
-            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-                name: model.name
-                tooltip.text: model.name
+            communityNavBarButton: StatusNavBarTabButton {
                 anchors.horizontalCenter: parent.horizontalCenter
-            }
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    icon.name: "wallet"
-                    tooltip.text: "Wallet"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "browser"
-                    tooltip.text: "Browser"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "status-update"
-                    tooltip.text: "Timeline"
-                },
-                StatusNavBarTabButton {
-                    icon.name: "profile"
-                    badge.visible: true
-                    badge.anchors.rightMargin: 4
-                    badge.anchors.topMargin: 5
-                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                    badge.border.width: 2
+                popupMenu: StatusPopupMenu {
 
-                    tooltip.text: "Profile"
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                        enabled: false
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
                 }
-            ]
+            }
         }
+
+
     }
 }
 

sandbox/ListItems.qml

@@ -85,7 +85,8 @@ GridLayout {
     StatusChatListItem {
         name: "has-mentions"
         type: StatusChatListItem.Type.PublicChat
-        badge.value: 1
+        hasUnreadMessages: true
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -100,7 +101,7 @@ GridLayout {
         type: StatusChatListItem.Type.PublicChat
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
     StatusChatListItem {
@@ -130,7 +131,7 @@ GridLayout {
         selected: true
         muted: true
         hasUnreadMessages: true
-        badge.value: 1
+        notificationsCount: 1
     }
 
 

sandbox/Models.qml

@@ -6,119 +6,188 @@ QtObject {
     property var demoChatListItems: ListModel {
         id: demoChatListItems
         ListElement {
-            chatId: "0"
+            itemId: "x012340000"
             name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
+            icon: ""
+            isIdenticon: false
             color: "blue"
+            description: ""
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: true
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 0
+            subItems: []
         }
         ListElement {
-            chatId: "1"
+            itemId: "x012340001"
             name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
+            icon: ""
+            isIdenticon: false
             color: "red"
-            unreadMessagesCount: 1
-            mentionsCount: 1
+            description: ""
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: true
+            notificationsCount: 1
+            muted: false
+            active: false
             position: 1
+            subItems: []
         }
         ListElement {
-            chatId: "2"
+            itemId: "x012340002"
             name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-            position: 2
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-            position: 3
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-            position: 4
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
+            isIdenticon: true
             color: "green"
-            unreadMessagesCount: 0
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: true
+            position: 2
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340003"
+            name: "Black Ops"
+            icon: ""
+            isIdenticon: false
+            color: "purple"
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 3
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340004"
+            name: "Spectacular Growing Otter"
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.OneToOneChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 4
+            subItems: []
+        }
+        ListElement {
+            itemId: "x012340005"
+            name: "channel-with-a-super-duper-long-name"
+            icon: ""
+            isIdenticon: false
+            color: "green"
+            description: ""
+            type: StatusChatListItem.Type.PublicChat
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 5
+            subItems: []
         }
     }
 
     property var demoCommunityChatListItems: ListModel {
         id: demoCommunityChatListItems
         ListElement {
-            chatId: "0"
+            itemId: "x012340000"
             name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
+            icon: ""
+            isIdenticon: false
             color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.CommunityChat
+            hasUnreadMessages: true
+            notificationsCount: 0
+            muted: false
+            active: false
             position: 0
+            subItems: []
         }
         ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 0
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-            position: 1
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-            position: 0
-        }
-    }
-
-    property var demoCommunityCategoryItems: ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
+            itemId: "x012340001"
             name: "Public"
-            position: 0
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.Unknown0
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: true
+            position: 1
+            subItems: [
+                ListElement {
+                    itemId: "x012340002"
+                    parentItemId: "x012340001"
+                    name: "random"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: true
+                    notificationsCount: 4
+                    muted: false
+                    active: false
+                    position: 0
+                },
+                ListElement {
+                    itemId: "x012340003"
+                    parentItemId: "x012340001"
+                    name: "watercooler"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: false
+                    notificationsCount: 0
+                    muted: false
+                    active: true
+                    position: 1
+                }
+            ]
         }
         ListElement {
-            categoryId: "dev"
+            itemId: "x012340004"
             name: "Development"
-            position: 1
+            icon: ""
+            isIdenticon: false
+            color: "orange"
+            description: ""
+            type: StatusChatListItem.Type.Unknown0
+            hasUnreadMessages: false
+            notificationsCount: 0
+            muted: false
+            active: false
+            position: 2
+            subItems: [
+                ListElement {
+                    itemId: "x012340005"
+                    parentItemId: "x012340004"
+                    name: "language-design"
+                    icon: ""
+                    isIdenticon: false
+                    color: "orange"
+                    description: ""
+                    hasUnreadMessages: false
+                    notificationsCount: 0
+                    muted: true
+                    active: false
+                    position: 0
+                }
+            ]
         }
     }
 
@@ -333,4 +402,109 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     isIdenticon: false
                 }]}
     }
+
+    //    App Section Types:
+    //    chat: 0
+    //    community: 1
+    //    wallet: 2
+    //    browser: 3
+    //    timeline: 4
+    //    nodeManagement: 5
+    //    profileSettings: 6
+    //    apiDocumentation: 100
+    //    demoApp: 101
+
+    property ListModel mainAppSectionsModel: ListModel {
+        ListElement {
+            sectionId: "mainApp"
+            sectionType: 100
+            name: "API Documentation"
+            active: true
+            image: ""
+            icon: "edit"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "demoApp"
+            sectionType: 101
+            name: "Demo Application"
+            active: false
+            image: ""
+            icon: "status"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+    }
+
+    property ListModel demoAppSectionsModel: ListModel {
+        ListElement {
+            sectionId: "chat"
+            sectionType: 0
+            name: "Chat"
+            active: true
+            image: ""
+            icon: "chat"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "0x123456789"
+            sectionType: 1
+            name: "Status Community"
+            active: false
+            image: "https://assets.brandfetch.io/51a495de903c46a.png"
+            icon: ""
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "wallet"
+            sectionType: 2
+            name: "Wallet"
+            active: false
+            image: ""
+            icon: "wallet"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "browser"
+            sectionType: 3
+            name: "Browser"
+            active: false
+            image: ""
+            icon: "bigger/browser"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "timeline"
+            sectionType: 4
+            name: "Timeline"
+            active: false
+            image: ""
+            icon: "bigger/status-update"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "profile"
+            sectionType: 6
+            name: "Profile"
+            active: false
+            image: ""
+            icon: "bigger/settings"
+            color: ""
+            hasNotification: true
+            notificationsCount: 0
+        }
+    }
 }

sandbox/main.qml

@@ -31,11 +31,39 @@ StatusWindow {
 
     Component.onCompleted: {
         Theme.palette = lightTheme
-        apiDocsButton.checked = true
-
         rootWindow.updatePosition();
     }
 
+    QtObject {
+        id: appSectionType
+        readonly property int chat: 0
+        readonly property int community: 1
+        readonly property int wallet: 2
+        readonly property int browser: 3
+        readonly property int timeline: 4
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
+        readonly property int apiDocumentation: 100
+        readonly property int demoApp: 101
+    }
+
+    Models {
+        id: models
+    }
+
+    function setActiveItem(sectionId) {
+        for (var i = 0; i < models.mainAppSectionsModel.count; i++) {
+            let item = models.mainAppSectionsModel.get(i)
+            if (item.sectionId !== sectionId)
+            {
+                models.mainAppSectionsModel.setProperty(i, "active", false)
+                continue
+            }
+
+            models.mainAppSectionsModel.setProperty(i, "active", true);
+        }
+    }
+
     StatusAppLayout {
         id: appLayout
         anchors.fill: parent
@@ -43,37 +71,36 @@ StatusWindow {
         appNavBar: StatusAppNavBar {
             height: rootWindow.height
 
-            navBarChatButton: StatusNavBarTabButton {
-                icon.name: "refresh"
-                tooltip.text: "Reload App"
-                onClicked: app.restartQml()
-            }
+            communityTypeRole: "sectionType"
+            communityTypeValue: appSectionType.community
+            sectionModel: models.mainAppSectionsModel
 
-            navBarTabButtons: [
-                StatusNavBarTabButton {
-                    id: apiDocsButton
-                    icon.name: "edit"
-                    tooltip.text: "API Documentation"
-                    onClicked: {
-                        stackView.clear()
+            regularNavBarButton: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.icon.length > 0? "" : model.name
+                icon.name: model.icon
+                icon.source: model.image
+                tooltip.text: model.name
+                autoExclusive: true
+                checked: model.active
+                badge.value: model.notificationsCount
+                badge.visible: model.hasNotification
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+                badge.border.width: 2
+                onClicked: {
+                    stackView.clear()
+                    if(model.sectionType === appSectionType.apiDocumentation)
+                    {
                         stackView.push(libraryDocumentationCmp)
-                        checked = !checked
-                        demoAppButton.checked = false
+                        rootWindow.setActiveItem(sectionId)
                     }
-                },
-                StatusNavBarTabButton {
-                    id: demoAppButton
-                    icon.name: "status"
-                    tooltip.text: "Demo Application"
-                    checked: stackView.currentItem == demoAppCmp
-                    onClicked: {
-                        stackView.clear()
+                    else if(model.sectionType === appSectionType.demoApp)
+                    {
                         stackView.push(demoAppCmp)
-                        checked = !checked
-                        apiDocsButton.checked = false
+                        rootWindow.setActiveItem(model.sectionId)
                     }
                 }
-            ]
+            }
         }
 
         appView: StackView {

src/StatusQ/Components/StatusChatList.qml

@@ -15,8 +15,7 @@ Column {
     width: 288
 
     property string categoryId: ""
-    property string selectedChatId: ""
-    property alias chatListItems: delegateModel
+    property var model: []
     property bool draggableItems: false
 
     property alias statusChatListItems: statusChatListItems
@@ -24,8 +23,6 @@ Column {
     property Component popupMenu
 
     property var filterFn
-    property var profileImageFn
-    property var chatNameFn
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
@@ -39,17 +36,16 @@ Column {
 
     DelegateModel {
         id: delegateModel
-
+        model: statusChatList.model
         delegate: Item {
             id: draggable
             width: statusChatListItem.width
             height: statusChatListItem.height
-
             property alias chatListItem: statusChatListItem
 
             visible: {
                 if (!!statusChatList.filterFn) {
-                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                    return statusChatList.filterFn(model)
                 }
                 return true
             }
@@ -96,31 +92,19 @@ Column {
                 StatusChatListItem {
 
                     id: statusChatListItem
-
-                    property string profileImage: ""
-
                     opacity: dragSensor.active ? 0.0 : 1.0
-                    Component.onCompleted: {
-                        if (typeof statusChatList.profileImageFn === "function") {
-                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                        }
-                    }
                     originalOrder: model.position
-                    chatId: model.chatId || model.id
-                    categoryId: model.categoryId || ""
-                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
-                    type: model.chatType
-                    muted: !!model.muted
-                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-                    hasMention: model.mentionsCount > 0
-                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
-                        model.unviewedMessagesCount || 0 :
-                        model.mentionsCount || 0
-                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
-
-                    icon.color: model.color || ""
-                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-                    image.source: profileImage || model.identityImage || model.identicon || ""
+                    chatId: model.itemId
+                    categoryId: model.itemId
+                    name: model.name
+                    type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
+                    muted: model.muted
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
+                    selected: model.active
+                    icon.color: model.color
+                    image.isIdenticon: model.isIdenticon
+                    image.source: model.icon
 
                     sensor.cursorShape: dragSensor.cursorShape
                     onClicked: {
@@ -132,7 +116,7 @@ Column {
 
                             popupMenuSlot.item.openHandler = function () {
                                 if (!!originalOpenHandler) {
-                                    originalOpenHandler((model.chatId || model.id))
+                                    originalOpenHandler(model.itemId)
                                 }
                             }
 
@@ -152,10 +136,10 @@ Column {
                             return
                         }
                         if (!statusChatListItem.selected) {
-                            statusChatList.chatItemSelected(model.chatId || model.id)
+                            statusChatList.chatItemSelected(model.itemId)
                         }
                     }
-                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                    onUnmute: statusChatList.chatItemUnmuted(model.itemId)
                 }
             }
 
@@ -204,9 +188,8 @@ Column {
                     type: draggable.chatListItem.type
                     muted: draggable.chatListItem.muted
                     dragged: true
-                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
-                    hasMention: draggable.chatListItem.hasMention
-                    badge.value: draggable.chatListItem.badge.value
+                    hasUnreadMessages: model.hasUnreadMessages
+                    notificationsCount: model.notificationsCount
                     selected: draggable.chatListItem.selected
 
                     icon.color: draggable.chatListItem.icon.color

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -20,11 +20,9 @@ Item {
         text: "More"
     }
 
-    property string selectedChatId: ""
+    property var model: []
     property bool showCategoryActionButtons: false
     property bool showPopupMenu: true
-    property alias chatList: statusChatList.chatListItems
-    property alias categoryList: delegateModel
     property alias sensor: sensor
     property bool draggableItems: false
     property bool draggableCategories: false
@@ -71,26 +69,25 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: chatListItems.count > 0
-                selectedChatId: statusChatListAndCategories.selectedChatId
+                visible: statusChatList.model.count > 0
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
                 onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
                 draggableItems: statusChatListAndCategories.draggableItems
+                model: statusChatListAndCategories.model
                 filterFn: function (model) {
-                    return !!!model.categoryId
+                    return (model.subItems.count === 0)
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
             DelegateModel {
                 id: delegateModel
-
+                model: statusChatListAndCategories.model
                 delegate: Item {
                     id: draggable
                     width: statusChatListCategory.width
                     height: statusChatListCategory.height
-
                     property alias chatListCategory: statusChatListCategory
 
                     StatusChatListCategory {
@@ -99,7 +96,7 @@ Item {
                         property bool dragActive: false
                         property real startY: 0
                         property real startX: 0
-                      
+
                         opacity: dragActive ? 0.0 : 1.0
 
                         dragSensor.drag.target: draggedListCategoryLoader.item
@@ -136,16 +133,15 @@ Item {
                         menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
 
                         originalOrder: model.position
-                        categoryId: model.categoryId
+                        categoryId: model.itemId
                         name: model.name
                         showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+                        addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
 
-                        chatList.chatListItems.model: statusChatListAndCategories.chatList.model
-                        chatList.selectedChatId: statusChatListAndCategories.selectedChatId
+                        chatList.model: model.subItems
                         chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                         chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
                         chatList.draggableItems: statusChatListAndCategories.draggableItems
 
                         popupMenu: statusChatListAndCategories.categoryPopupMenu
@@ -154,7 +150,7 @@ Item {
                         // Used to set the initial value of "opened" when the
                         // model is bound/changed.
                         opened: {
-                            let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
+                            let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
                             return openedState !== undefined ? openedState : true // defaults to open
                         }
 
@@ -163,7 +159,7 @@ Item {
                         // as the state would be lost each time the model is
                         // changed.
                         onOpenedChanged: {
-                            statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
+                            statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
                         }
                     }
 
@@ -212,8 +208,7 @@ Item {
                             name: draggable.chatListCategory.name
                             showActionButtons: draggable.chatListCategory.showActionButtons
 
-                            chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
-                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
+                            chatList.model: draggable.chatListCategory.chatList.model
                         }
                     }
                 }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -35,11 +35,11 @@ Column {
     StatusChatListCategoryItem {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
+        visible: (model.subItems.count > 0)
         opened: statusChatListCategory.opened
         sensor.pressAndHoldInterval: 150
 
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
-
         highlighted: statusChatListCategory.dragged
         sensor.onClicked: {
             if (sensor.enabled) {
@@ -68,7 +68,7 @@ Column {
         visible: statusChatListCategory.opened
         categoryId: statusChatListCategory.categoryId
         filterFn: function (model) {
-            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
         }
 
         popupMenu: statusChatListCategory.chatListPopupMenu

src/StatusQ/Components/StatusChatListItem.qml

@@ -18,7 +18,7 @@ Rectangle {
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
-    property bool hasMention: false
+    property int notificationsCount: 0
     property bool muted: false
     property StatusImageSettings image: StatusImageSettings {
         width: 24
@@ -95,8 +95,8 @@ Rectangle {
                 if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
                         statusBadge.visible ||
@@ -138,16 +138,16 @@ Rectangle {
                 if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention ||
-                        statusChatListItem.hasUnreadMessages ||
+                return statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.notificationsCount > 0 ||
                         statusChatListItem.selected ||
                         statusChatListItem.highlighted ||
                         sensor.containsMouse ||
                         statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
             font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasMention ||
-                          statusChatListItem.hasUnreadMessages ||
+                         (statusChatListItem.hasUnreadMessages ||
+                          statusChatListItem.notificationsCount > 0 ||
                           statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
@@ -186,7 +186,8 @@ Rectangle {
             color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
             border.width: 4
             border.color: color
-            visible: statusBadge.value > 0
+            value: statusChatListItem.notificationsCount
+            visible: statusChatListItem.notificationsCount > 0
         }
     }
 }

src/StatusQ/Core/StatusAppNavBarFilterModel.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.13
+import QtQml.Models 2.13
+
+DelegateModel {
+    id: delegateModel
+
+    property var filterAcceptsItem: function(item) { return true; }
+
+    signal aboutToUpdateFilteredModel()
+
+    function update() {
+        delegateModel.aboutToUpdateFilteredModel()
+
+        if (items.count > 0) {
+            items.setGroups(0, items.count, "items");
+        }
+
+        var visible = [];
+        for (var i = 0; i < items.count; ++i) {
+            var item = items.get(i);
+            if (filterAcceptsItem(item.model)) {
+                visible.push(item);
+            }
+        }
+
+        for (i = 0; i < visible.length; ++i) {
+            item = visible[i];
+            item.inVisible = true;
+            if (item.visibleIndex !== i) {
+                visibleItems.move(item.visibleIndex, i, 1);
+            }
+        }
+    }
+
+    items.onChanged: update()
+    onFilterAcceptsItemChanged: update()
+
+    groups: DelegateModelGroup {
+        id: visibleItems
+
+        name: "visible"
+        includeByDefault: false
+    }
+
+    filterOnGroup: "visible"
+}

src/StatusQ/Core/qmldir

@@ -7,3 +7,4 @@ StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
 StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml
+StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -1,40 +1,35 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.13
 import QtQuick.Controls 2.13
+import QtQml.Models 2.13
+import Qt.labs.qmlmodels 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
 
 Rectangle {
     id: statusAppNavBar
 
-    property StatusNavBarTabButton navBarChatButton
-    property StatusNavBarTabButton navBarProfileButton
-
-    property list<StatusNavBarTabButton> navBarTabButtons
-    property alias navBarCommunityTabButtons: navBarCommunityTabButtons
-
-    property int navBarContentHeight: 0
-    property int navBarContentHeightWithoutCommunityButtons: 0
-
     width: 78
     implicitHeight: 600
     color: Theme.palette.statusAppNavBar.backgroundColor
 
-    Component.onCompleted: {
-        navBarContentHeightWithoutCommunityButtons = (navBarChatButtonSlot.anchors.topMargin + navBarChatButtonSlot.height) + 
-                                  (separator.anchors.topMargin + separator.height) +
-                                  (navBarTabButtonsSlot.height + navBarTabButtonsSlot.anchors.topMargin + navBarTabButtonsSlot.anchors.bottomMargin)
-        navBarContentHeight = navBarContentHeightWithoutCommunityButtons +
-                              (navBarCommunityTabButtonsSlot.height + navBarScrollSection.anchors.topMargin)
-    }
+    property var sectionModel: []
+    property string communityTypeRole: ""
+    property int communityTypeValue: -1
+    property int navBarButtonSpacing: 12
 
-    onNavBarChatButtonChanged: {
-        if (!!navBarChatButton) {
-            navBarChatButton.parent = navBarChatButtonSlot
-        }
-    }
+    property StatusNavBarTabButton navBarProfileButton
+    property Component regularNavBarButton
+    property Component communityNavBarButton
+
+    property var filterRegularItem: function(item) { return true; }
+    property var filterCommunityItem: function(item) { return true; }
+
+    signal aboutToUpdateFilteredRegularModel()
+    signal aboutToUpdateFilteredCommunityModel()
 
     onNavBarProfileButtonChanged: {
         if (!!navBarProfileButton) {
@@ -42,115 +37,134 @@ Rectangle {
         }
     }
 
-    onNavBarTabButtonsChanged: {
-        if (navBarTabButtons.length) {
-            for (let idx in navBarTabButtons) {
-                navBarTabButtons[idx].parent = navBarTabButtonsSlot
+    StatusAppNavBarFilterModel {
+        id: navBarModel
+
+        filterAcceptsItem: filterRegularItem
+
+        model: statusAppNavBar.sectionModel
+
+        onAboutToUpdateFilteredModel: {
+            statusAppNavBar.aboutToUpdateFilteredRegularModel()
+        }
+
+        DelegateChooser {
+            id: delegateChooser
+            role: communityTypeRole
+            DelegateChoice { roleValue: communityTypeValue; delegate: communityNavButton }
+            DelegateChoice { delegate: regularNavBarButton }
+        }
+
+        delegate: delegateChooser
+    }
+
+    Component {
+        id: communityNavButton
+
+        Item {
+            width: parent.width
+            height: (necessaryHightForCommunities > maxHightForCommunities)?
+                        maxHightForCommunities : necessaryHightForCommunities
+
+            property int communityNavBarButtonHeight: 40
+
+            property int maxHightForCommunities: {
+                let numOfOtherThanCommunityBtns = navBarListView.model.count - 1
+                let numOfSpacingsForNavBar = navBarListView.model.count - 1
+
+                return navBarListView.height -
+                        numOfOtherThanCommunityBtns * communityNavBarButtonHeight -
+                        numOfSpacingsForNavBar * navBarButtonSpacing
+            }
+
+            property int necessaryHightForCommunities: {
+                let numOfSpacingsForCommunities = communityListView.model.count - 1
+                return communityListView.model.count * communityNavBarButtonHeight +
+                        numOfSpacingsForCommunities * navBarButtonSpacing +
+                        separatorBottom.height
+            }
+
+            StatusAppNavBarFilterModel {
+                id: navBarCommunityModel
+
+                filterAcceptsItem: filterCommunityItem
+
+                model: statusAppNavBar.sectionModel
+
+                delegate: communityNavBarButton
+
+                onAboutToUpdateFilteredModel: {
+                    statusAppNavBar.aboutToUpdateFilteredCommunityModel()
+                }
+            }
+
+            Item {
+                id: separatorTop
+                width: parent.width
+                height: navBarButtonSpacing
+                anchors.top: parent.top
+                visible: parent.necessaryHightForCommunities > parent.maxHightForCommunities
+
+                Rectangle {
+                    height: 1
+                    width: 30
+                    color: Theme.palette.directColor7
+                    anchors.top: parent.top
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+            ListView {
+                id: communityListView
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: separatorTop.visible? separatorTop.bottom : parent.top
+                anchors.bottom: separatorBottom.top
+                clip: true
+
+                spacing: navBarButtonSpacing
+
+                model: navBarCommunityModel
+            }
+
+            Item {
+                id: separatorBottom
+                width: parent.width
+                height: navBarButtonSpacing
+                anchors.bottom: parent.bottom
+
+                Rectangle {
+                    height: 1
+                    width: 30
+                    color: Theme.palette.directColor7
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
             }
         }
     }
 
-    Item {
-        id: navBarChatButtonSlot
+    ListView {
+        id: navBarListView
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.top: parent.top
         anchors.topMargin: 48
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: visible ? statusAppNavBar.navBarChatButton.height : 0
-        width: visible ? statusAppNavBar.navBarChatButton.width : 0
-        visible: !!statusAppNavBar.navBarChatButton
-    }
+        anchors.bottom: navBarProfileButtonSlot.top
+        anchors.bottomMargin: navBarButtonSpacing
 
-    Rectangle {
-        id: separatorTop
-        height: 1
-        width: 30
-        color: Theme.palette.directColor7
-        anchors.top: navBarChatButtonSlot.bottom
-        anchors.topMargin: 16
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: separator.anchors.topMargin === 0
-    }
+        spacing: navBarButtonSpacing
 
-    ScrollView {
-        id: navBarScrollSection
-        anchors.top: separatorTop.visible ? separatorTop.bottom : navBarChatButtonSlot.bottom
-        anchors.topMargin: separatorTop.visible ? 0 : 12
-        anchors.horizontalCenter: statusAppNavBar.horizontalCenter
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
-
-        Component.onCompleted: {
-            if (navBarContentHeight > statusAppNavBar.height) {
-                height = statusAppNavBar.height - 
-                         statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
-                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
-                         navBarProfileButtonSlot.height -
-                         navBarProfileButtonSlot.anchors.bottomMargin
-                bottomPadding = 16
-                topPadding = 16
-            } else {
-                height = navBarCommunityTabButtons.count > 0 ? navBarCommunityTabButtonsSlot.implicitHeight : 0
-            }
-        }
-
-        Column {
-            id: navBarCommunityTabButtonsSlot
-            width: navBarScrollSection.width
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 12
-
-            onImplicitHeightChanged: {
-                statusAppNavBar.Component.onCompleted()
-                navBarTabButtonsSlot.Component.onCompleted()
-                navBarScrollSection.Component.onCompleted()
-            }
-
-            Repeater {
-                id: navBarCommunityTabButtons
-            }
-        }
-    }
-
-    Rectangle {
-        id: separator
-        height: 1
-        width: 30
-        color: Theme.palette.directColor7
-        anchors.top: !!navBarCommunityTabButtons.model && navBarCommunityTabButtons.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
-        anchors.topMargin: navBarScrollSection.height < navBarCommunityTabButtonsSlot.implicitHeight ? 0 : 16
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: navBarChatButton !== null && navBarTabButtons.length > 0
-    }
-
-    Column {
-        id: navBarTabButtonsSlot
-        anchors.horizontalCenter: parent.horizontalCenter
-        spacing: 12
-
-        Component.onCompleted: {
-            if (navBarContentHeight > statusAppNavBar.height) {
-                anchors.top = undefined
-                anchors.topMargin = 0
-                anchors.bottom = navBarProfileButtonSlot.top
-                anchors.bottomMargin = 32
-            } else {
-                anchors.bottom = undefined
-                anchors.bottomMargin = 0
-                anchors.top = separator.visible ? separator.bottom : parent.top
-                anchors.topMargin = separator.visible ? 16 : navBarChatButtonSlot.anchors.topMargin
-            }
-        }
+        model: navBarModel
     }
 
     Item {
         id: navBarProfileButtonSlot
         anchors.horizontalCenter: parent.horizontalCenter
-        height: visible ? statusAppNavBar.navBarProfileButton.height : 0
-        width: visible ? statusAppNavBar.navBarProfileButton.width : 0
+        height: visible? statusAppNavBar.navBarProfileButton.height : 0
+        width: visible? statusAppNavBar.navBarProfileButton.width : 0
         visible: !!statusAppNavBar.navBarProfileButton
         anchors.bottom: parent.bottom
         anchors.bottomMargin: visible ? 32 : 0
     }
 }
-

src/StatusQ/Popups/StatusModal.qml

@@ -18,6 +18,7 @@ QC.Popup {
     property alias leftButtons: footerImpl.leftButtons
     property bool showHeader: true
     property bool showFooter: true
+    property alias hasCloseButton: headerImpl.hasCloseButton
 
     signal editButtonClicked()
     signal headerImageClicked()

src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -19,6 +19,7 @@ Rectangle {
     property alias icon: imageWithTitle.icon
     property bool editable: false
     property alias headerImageEditable: imageWithTitle.headerImageEditable
+    property bool hasCloseButton: true
     property Component popupMenu
 
     signal editButtonClicked
@@ -76,7 +77,7 @@ Rectangle {
     Loader {
         id: actionButtonLoader
         objectName: "actionButtonloader"
-        anchors.right: closeButton.left
+        anchors.right: closeButton.visible ? closeButton.left : parent.right
         anchors.rightMargin: 8
         anchors.top: parent.top
         anchors.topMargin: 16
@@ -96,6 +97,7 @@ Rectangle {
         icon.color: Theme.palette.directColor1
         icon.width: 20
         icon.height: 20
+        visible: statusModalHeader.hasCloseButton
 
         onClicked: statusModalHeader.close()
     }

statusq.qrc

@@ -276,6 +276,7 @@
         <file>src/assets/img/icons/snt.svg</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
         <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
+        <file>src/StatusQ/Core/StatusAppNavBarFilterModel.qml</file>
         <file>src/assets/img/icons/tiny/add.svg</file>
         <file>src/assets/img/icons/tiny/arrow-down.svg</file>
         <file>src/assets/img/icons/tiny/channel-white.svg</file>