feat(StatusQ.Popups): introduce StatusPopupMenu component

Usage:

```qml
import StatusQ.Popups 0.1

Button {
    onClicked: simpleMenu.popup()
}

StatusPopupMenu {
    id: simpleMenu
    StatusMenuItem {
        text: "One"
    }

    StatusMenuItem {
        text: "Two"
    }

    StatusMenuItem {
        text: "Three"
    }
}
```

Closes #96 #74

README.md

@@ -12,6 +12,7 @@ These modules are:
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 - [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
+- [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
 Other than that, modules and components can be used as expected.

sandbox/Buttons.qml

@@ -137,16 +137,16 @@ Grid {
     // blue
 
     StatusRoundButton {
-        icon: "info"
+        icon.name: "info"
     }
 
     StatusRoundButton {
-        icon: "info"
+        icon.name: "info"
         enabled: false
     }
 
     StatusRoundButton {
-        icon: "info"
+        icon.name: "info"
         loading: true
     }
 
@@ -154,18 +154,18 @@ Grid {
 
     StatusRoundButton {
         type: StatusRoundButton.Type.Secondary
-        icon: "info"
+        icon.name: "info"
     }
 
     StatusRoundButton {
         type: StatusRoundButton.Type.Secondary
-        icon: "info"
+        icon.name: "info"
         enabled: false
     }
 
     StatusRoundButton {
         type: StatusRoundButton.Type.Secondary
-        icon: "info"
+        icon.name: "info"
         loading: true
     }
 
@@ -175,20 +175,20 @@ Grid {
         width: 44
         height: 44
 
-        icon: "info"
+        icon.name: "info"
     }
 
     StatusFlatRoundButton {
         width: 44
         height: 44
-        icon: "info"
+        icon.name: "info"
         enabled: false
     }
 
     StatusFlatRoundButton {
         width: 44
         height: 44
-        icon: "info"
+        icon.name: "info"
         loading: true
     }
 
@@ -199,14 +199,14 @@ Grid {
         width: 44
         height: 44
 
-        icon: "info"
+        icon.name: "info"
     }
 
     StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary
         width: 44
         height: 44
-        icon: "info"
+        icon.name: "info"
         enabled: false
     }
 
@@ -214,24 +214,24 @@ Grid {
         type: StatusFlatRoundButton.Type.Secondary
         width: 44
         height: 44
-        icon: "info"
+        icon.name: "info"
         loading: true
     }
 
     StatusFlatButton {
-        iconName: "info"
+        icon.name: "info"
         text: "Button"
         size: StatusBaseButton.Size.Small
     }
     StatusFlatButton {
-        iconName: "info"
+        icon.name: "info"
         text: "Button"
         enabled: false
         size: StatusBaseButton.Size.Small
     }
 
     StatusFlatButton {
-        iconName: "info"
+        icon.name: "info"
         text: "Button"
         loading: true
         size: StatusBaseButton.Size.Small

sandbox/Controls.qml

@@ -102,4 +102,43 @@ GridLayout {
     }
 
     StatusCheckBox {}
+
+    StatusChatInfoButton {
+        title: "Iuri Matias"
+        subTitle: "Contact"
+        icon.color: Theme.palette.miscColor7
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        type: StatusChatInfoButton.Type.OneToOneChat
+        muted: true
+        pinnedMessagesCount: 1
+    }
+
+    StatusChatInfoButton {
+        title: "group"
+        subTitle: "Group Chat"
+        pinnedMessagesCount: 1
+        icon.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.GroupChat
+    }
+
+    StatusChatInfoButton {
+        title: "public-chat"
+        subTitle: "Public Chat"
+        icon.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.PublicChat
+    }
+
+    StatusChatInfoButton {
+        title: "community-channel"
+        subTitle: "Community Chat"
+        icon.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.CommunityChat
+    }
+
+    StatusSlider {
+        width: 360
+        from: 0
+        to: 100
+        value: 40
+    }
 }

sandbox/DemoApp.qml

@@ -0,0 +1,266 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+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
+
+Rectangle {
+    id: demoApp
+    height: 602
+    width: 902
+    border.width: 1
+    border.color: Theme.palette.baseColor2
+
+    Row {
+        anchors.top: demoApp.top
+        anchors.left: demoApp.left
+        anchors.topMargin: 14
+        anchors.leftMargin: 14
+
+        spacing: 6
+        z: statusAppLayout.z + 1
+
+        Rectangle {
+            color: "#E24640"
+            height: 12
+            width: 12
+            radius: 6
+        }
+        Rectangle {
+            color: "#FFC12F"
+            height: 12
+            width: 12
+            radius: 6
+        }
+        Rectangle {
+            color: "#2ACB42"
+            height: 12
+            width: 12
+            radius: 6
+        }
+    }
+
+
+    StatusAppLayout {
+        id: statusAppLayout
+        anchors.top: demoApp.top
+        anchors.left: demoApp.left
+        anchors.topMargin: demoApp.border.width
+        anchors.leftMargin: demoApp.border.width
+
+        height: demoApp.height - demoApp.border.width * 2
+        width: demoApp.width - demoApp.border.width * 2
+
+        appNavBar: StatusAppNavBar {
+
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                tooltip.text: "Chat"
+                checked: appView.sourceComponent == statusAppChatView
+                onClicked: {
+                    appView.sourceComponent = statusAppChatView
+                }
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Status Community"
+                    tooltipText: "Status Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: 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
+                onClicked: {
+                    appView.sourceComponent = statusAppCommunityView
+                }
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    id: profileNavButton
+                    icon.name: "profile"
+                    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"
+                }
+            ]
+        }
+
+        appView: Loader {
+            id: appView
+            anchors.fill: parent
+            sourceComponent: statusAppChatView
+        }
+    }
+
+    Component {
+        id: statusAppChatView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                Column {
+                    anchors.top: parent.top
+                    anchors.topMargin: 64
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    spacing: 4
+
+                    StatusChatListItem {
+                        name: "#status"
+                        type: StatusChatListItem.Type.PublicChat
+                    }
+
+                    StatusChatListItem {
+                        name: "#status-desktop"
+                        type: StatusChatListItem.Type.PublicChat
+                        hasUnreadMessages: true
+                        badge.value: 1
+                    }
+
+                    StatusChatListItem {
+                        name: "Amazing Funny Squirrel"
+                        type: StatusChatListItem.Type.OneToOneChat
+                        selected: true
+                    }
+
+                    StatusChatListItem {
+                        name: "Black Ops"
+                        type: StatusChatListItem.Type.GroupChat
+                    }
+
+                    StatusChatListItem {
+                        name: "Spectacular Growling Otter"
+                        type: StatusChatListItem.Type.OneToOneChat
+                        muted: true
+                    }
+
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "Amazing Funny Squirrel"        
+                    chatInfoButton.subTitle: "Contact"
+                    chatInfoButton.icon.color: Theme.palette.miscColor7
+                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+                    chatInfoButton.pinnedMessagesCount: 1
+
+                    notificationCount: 1
+
+                    onMenuButtonClicked: contextMenu.popup()
+                    onNotificationButtonClicked: notificationCount = 0
+
+                    StatusPopupMenu {
+                        id: contextMenu
+
+                        StatusMenuItem {
+                            text: "Mute Chat"
+                            icon.name: "notification"
+                        }
+                        StatusMenuItem {
+                            text: "Mark as Read"
+                            icon.name: "checkmark-circle"
+                        }
+                        StatusMenuItem {
+                            text: "Clear History"
+                            icon.name: "close-circle"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Leave Chat"
+                            icon.name: "arrow-right"
+                            icon.width: 14
+                            iconRotation: 180
+                            type: StatusMenuItem.Type.Danger
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    Component {
+        id: statusAppCommunityView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                Column {
+                    anchors.top: parent.top
+                    anchors.topMargin: 64
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 4
+
+                    StatusChatListItem {
+                        name: "general"
+                        type: StatusChatListItem.Type.CommunityChat
+                        selected: true
+                    }
+
+                    StatusChatListItem {
+                        name: "random"
+                        type: StatusChatListItem.Type.CommunityChat
+                    }
+
+                    StatusChatListItem {
+                        name: "watercooler"
+                        type: StatusChatListItem.Type.CommunityChat
+                        muted: true
+                    }
+                }
+            }
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "general"        
+                    chatInfoButton.subTitle: "Community Chat"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
+        }
+    }
+}

sandbox/Layout.qml

@@ -5,254 +5,291 @@ import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+Column {
+    spacing: 5
 
-    Button {
-        id: btn
-        text: "Append"
-        onClicked: {
-            buttons.append({
-                name: "Test community",
-                tooltipText: "Test Community"
-            })
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
     }
 
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            tooltip.text: "Chat"
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
+        chatInfoButton.pinnedMessagesCount: 1
+        chatInfoButton.muted: true
     }
 
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            tooltip.text: "Chat"
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        chatInfoButton.pinnedMessagesCount: 1
+        notificationCount: 1
+    }
 
-        navBarCommunityTabButtons.model: ListModel {
-            id: buttons
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
+    Row {
+        spacing: 5
+        Button {
+            id: btn
+            text: "Append"
+            onClicked: {
+                buttons.append({
+                    name: "Test community",
+                    tooltipText: "Test Community"
+                })
             }
         }
 
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        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"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                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
-            tooltip.text: "Chat"
-        }
-
-        navBarCommunityTabButtons.model: ListModel {
-            ListElement {
-                name: "Test community"
-                tooltipText: "Test Community"
+                tooltip.text: "Chat"
             }
         }
 
-        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
-            name: model.name
-            tooltip.text: model.name
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        navBarTabButtons: [
-            StatusNavBarTabButton {
-                icon.name: "wallet"
-                tooltip.text: "Wallet"
-            },
-            StatusNavBarTabButton {
-                icon.name: "browser"
-                tooltip.text: "Browser"
-            }
-        ]
-    }
-
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            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
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        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"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-
-                tooltip.text: "Profile"
+                tooltip.text: "Chat"
             }
-        ]
-    }
 
-    StatusAppNavBar {
-        id: test
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            tooltip.text: "Chat"
+            navBarCommunityTabButtons.model: ListModel {
+                id: buttons
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            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"
+                }
+            ]
         }
 
-        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
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        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"
+        StatusAppNavBar {
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                badge.value: 33
                 badge.visible: true
-                badge.anchors.rightMargin: 4
-                badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
-
-                tooltip.text: "Profile"
+                tooltip.text: "Chat"
             }
-        ]
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Test community"
+                    tooltipText: "Test Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                name: model.name
+                tooltip.text: model.name
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                }
+            ]
+        }
+
+        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"
+            }
+
+            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
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            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 {
+            id: test
+            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"
+            }
+
+            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
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            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"
+                }
+            ]
+        }
     }
 }
 

sandbox/ListItems.qml

@@ -0,0 +1,223 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+        badge.value: 1
+    }
+    StatusNavigationListItem {
+        title: "Menu Item (selected)"
+        selected: true
+        icon.name: "info"
+        badge.value: 1
+    }
+
+    StatusChatListItem {
+        id: test
+        name: "public-channel"
+        type: StatusChatListItem.Type.PublicChat
+    }
+
+    StatusChatListItem {
+        name: "group-chat"
+        type: StatusChatListItem.Type.GroupChat
+    }
+
+    StatusChatListItem {
+        name: "community-channel"
+        type: StatusChatListItem.Type.CommunityChat
+    }
+
+    StatusChatListItem {
+        name: "community-channel-with-image"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        type: StatusChatListItem.Type.CommunityChat
+    }
+
+    StatusChatListItem {
+        name: "Weird Crazy Otter"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        type: StatusChatListItem.Type.OneToOneChat
+    }
+
+    StatusChatListItem {
+        name: "has-unread-messages"
+        type: StatusChatListItem.Type.PublicChat
+        hasUnreadMessages: true
+    }
+
+    StatusChatListItem {
+        name: "has-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        badge.value: 1
+    }
+
+    StatusChatListItem {
+        name: "is-muted"
+        type: StatusChatListItem.Type.PublicChat
+        muted: true
+        onUnmute: muted = false
+    }
+
+    StatusChatListItem {
+        name: "selected-channel"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+    }
+    StatusChatListItem {
+        name: "selected-muted-channel"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+    }
+
+    StatusListItem {
+        title: "Title"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+    }
+
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusRadioButton {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusButton {
+                text: "Button"
+                size: StatusBaseButton.Size.Small
+            }
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusSwitch {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+          StatusRadioButton {}
+        ]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [StatusCheckBox {}]
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        icon.name: "info"
+        label: "Text"
+        components: [
+            StatusBadge {
+                value: 1
+            },
+            StatusIcon {
+                icon: "info"
+                color: Theme.palette.baseColor1
+                width: 20
+                height: 20
+            }
+        ]
+    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        tooltip.text: "Tooltip"
+        icon.name: "info"
+        iconButton.onClicked: tooltip.visible = !tooltip.visible
+    }
+
+}

sandbox/NavigationHeader.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    height: 34
+    width: 176
+    property alias text: label.text
+
+    StatusBaseText {
+        anchors.verticalCenter: parent.verticalCenter
+        id: label
+        font.pixelSize: 15
+        color: Theme.palette.baseColor1
+    }
+}
+

sandbox/StatusPopupMenuPage.qml

@@ -0,0 +1,72 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusButton {
+        text: "Simple"
+        onClicked: simpleMenu.popup()
+    }
+
+    StatusButton {
+        text: "Complex"
+        onClicked: complexMenu.popup()
+    }
+
+    StatusPopupMenu {
+        id: simpleMenu
+        StatusMenuItem { 
+            text: "One" 
+        }
+
+        StatusMenuItem { 
+            text: "Two"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+        }
+    }
+
+    StatusPopupMenu {
+        id: complexMenu
+        subMenuItemIcons: ['info']
+        StatusMenuItem { 
+            text: "One" 
+            icon.name: "info"
+        }
+
+        StatusMenuSeparator {}
+
+        StatusMenuItem { 
+            text: "Two"
+            icon.name: "info"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+            icon.name: "info"
+        }
+
+        StatusPopupMenu {
+            title: "Four"
+            StatusMenuItem { 
+                text: "One"
+                icon.name: "info"
+            }
+            StatusMenuItem { 
+                text: "Three"
+                icon.name: "info"
+            }
+        }
+    }
+}

sandbox/ThemeSwitch.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+Row {
+    id: themeSwitch
+    signal checkedChanged()
+
+    spacing: 2
+
+    Text {
+        text: "🌤"
+        font.pixelSize: 15
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    StatusSwitch {
+        onCheckedChanged: themeSwitch.checkedChanged()
+    }
+
+    Text {
+        text: "🌙"
+        font.pixelSize: 15
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
+

sandbox/main.qml

@@ -1,147 +1,187 @@
 import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.13
 
 import Sandbox 0.1
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
 
 StatusWindow {
     id: rootWindow
     width: 1024
     height: 840
     visible: true
-    title: qsTr("Status App Sandbox")
+    title: qsTr("StatusQ Documentation App")
 
     property ThemePalette lightTheme: StatusLightTheme {}
-    property ThemePalette darkTheme: StatusDarkTheme { }
-
-    ButtonGroup {
-        id: topicsGroup
-        buttons: tabs.children
-    }
-
-    ButtonGroup {
-        buttons: switchRow.children
-    }
-
-    Flow {
-        id: tabs
-        anchors.left: parent.left
-        anchors.leftMargin: 100
-        anchors.right: parent.right
-
-        Button {
-            text: "Reload QML"
-            onClicked: app.restartQml()
-        }
-        Button {
-            id: iconsTab
-            checkable: true
-            text: "Icons"
-        }
-        Button {
-            id: controlsTab
-            checkable: true
-            text: "Controls"
-        }
-        Button {
-            id: layoutTab
-            checkable: true
-            text: "Layout"
-        }
-        Button {
-            id: otherTab
-            checkable: true
-            text: "Other"
-        }
-
-        Button {
-            id: buttonsTab
-            checkable: true
-            text: "Buttons"
-        }
-    }
-
-
-
-    ScrollView {
-        width: parent.width
-        anchors.top: tabs.bottom
-        anchors.bottom: parent.bottom
-        contentHeight: lightThemeBg.height * rootWindow.factor
-        contentWidth: rootWindow.width * rootWindow.factor
-        clip: true
-
-
-        Rectangle {
-            id: lightThemeBg
-
-            width: rootWindow.width
-            height: page.height + 64
-            anchors.topMargin: 32
-            color: Theme.palette.baseColor5
-            clip: true
-            scale: rootWindow.factor
-
-            Loader {
-                id: page
-                active: true
-                anchors.centerIn: parent
-
-                sourceComponent: {
-                    switch(topicsGroup.checkedButton) {
-                    case iconsTab:
-                        return iconsComponent;
-                    case controlsTab:
-                        return controlsComponent;
-                    case layoutTab:
-                        return layoutComponent;
-                    case otherTab:
-                        return othersComponent;
-                    case buttonsTab:
-                        return buttonsComponent;
-                    default:
-                        return null;
-                    }
-                }
-            }
-
-            Row {
-                id: switchRow
-                scale: 0.8
-                anchors.right: parent.right
-                anchors.top: parent.top
-
-                Button {
-                    checkable: true
-                    checked: true
-                    text: "Light Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(lightTheme)
-                        }
-                    }
-                }
-
-                Button {
-                    checkable: true
-                    text: "Dark Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(darkTheme)
-                        }
-                    }
-                }
-            }
-        }
-    }
+    property ThemePalette darkTheme: StatusDarkTheme {}
 
     readonly property real maxFactor: 2.0
     readonly property real minFactor: 0.5
 
     property real factor: 1.0
+
+    Component.onCompleted: {
+        Theme.palette = lightTheme
+        apiDocsButton.checked = true
+    }
+
+    StatusAppLayout {
+        id: appLayout
+        anchors.fill: parent
+
+        appNavBar: StatusAppNavBar {
+            height: rootWindow.height
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    id: apiDocsButton
+                    icon.name: "edit"
+                    tooltip.text: "API Documentation"
+                    onClicked: {
+                        stackView.clear()
+                        stackView.push(libraryDocumentationCmp)
+                        checked = !checked
+                        demoAppButton.checked = false
+                    }
+                },
+                StatusNavBarTabButton {
+                    id: demoAppButton
+                    icon.name: "status"
+                    tooltip.text: "Demo Application"
+                    checked: stackView.currentItem == demoAppCmp
+                    onClicked: {
+                        stackView.clear()
+                        stackView.push(demoAppCmp)
+                        checked = !checked
+                        apiDocsButton.checked = false
+                    }
+                }
+            ]
+        }
+
+        appView: StackView {
+            id: stackView
+            anchors.fill: parent
+            initialItem: libraryDocumentationCmp
+        }
+
+        ThemeSwitch {
+            anchors.top: parent.top
+            anchors.topMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
+            onCheckedChanged: {
+                if (Theme.palette === rootWindow.lightTheme) {
+                    Theme.palette = rootWindow.darkTheme
+                } else {
+                    Theme.palette = rootWindow.lightTheme
+                }
+            }
+        }
+    }
+
+    Component {
+        id: libraryDocumentationCmp
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+                ScrollView {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    contentHeight: navigation.height + 56
+                    contentWidth: navigation.width
+                    clip: true
+                    Column {
+                        id: navigation
+                        anchors.top: parent.top
+                        anchors.topMargin: 48
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 0
+
+                        NavigationHeader { text: "StatusQ.Core" }
+                        StatusNavigationListItem { 
+                            title: "Icons" 
+                            selected: page.sourceComponent == iconsComponent
+                            onClicked: page.sourceComponent = iconsComponent
+                        }
+
+                        NavigationHeader { text: "StatusQ.Layout" }
+                        StatusNavigationListItem { 
+                            title: "Layouts" 
+                            selected: page.sourceComponent == layoutComponent
+                            onClicked: page.sourceComponent = layoutComponent
+                        }
+
+                        NavigationHeader { text: "StatusQ.Controls" }
+                        StatusNavigationListItem { 
+                            title: "Buttons" 
+                            selected: page.sourceComponent == buttonsComponent
+                            onClicked: page.sourceComponent = buttonsComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "Controls" 
+                            selected: page.sourceComponent == controlsComponent
+                            onClicked: page.sourceComponent = controlsComponent
+                        }
+                        NavigationHeader { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "List Items"
+                            selected: page.sourceComponent == listItemsComponent
+                            onClicked: page.sourceComponent = listItemsComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "Others"
+                            selected: page.sourceComponent == othersComponent
+                            onClicked: page.sourceComponent = othersComponent
+                        }
+                        NavigationHeader { text: "StatusQ.Popup" }
+                        StatusNavigationListItem { 
+                            title: "StatusPopupMenu"
+                            selected: page.sourceComponent == popupMenuComponent
+                            onClicked: page.sourceComponent = popupMenuComponent
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                id: rightPanel
+                anchors.fill: parent
+
+                ScrollView {
+                    width: parent.width
+                    height: parent.height
+                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
+                    contentWidth: pageWrapper.width * rootWindow.factor
+                    clip: true
+
+                    Item {
+                        id: pageWrapper
+                        width: rightPanel.width
+                        anchors.top: parent.top
+                        anchors.topMargin: 64
+                        height: Math.max(rootWindow.height, page.height + 128)
+                        scale: rootWindow.factor
+                        Loader {
+                            id: page
+                            active: true
+                            anchors.centerIn: parent
+                            sourceComponent: iconsComponent
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     Action {
         shortcut: "CTRL+="
         onTriggered: {
@@ -167,37 +207,59 @@ StatusWindow {
 
     Component {
         id: iconsComponent
-        Icons {
-            anchors.centerIn: parent
-            iconColor: Theme.palette.primaryColor1
-        }
+        Icons { iconColor: Theme.palette.primaryColor1 }
     }
 
     Component {
         id: controlsComponent
-        Controls {
-            anchors.centerIn: parent
-        }
+        Controls {}
+    }
+
+    Component {
+        id: listItemsComponent
+        ListItems {}
     }
 
     Component {
         id: layoutComponent
-        Layout {
-            anchors.centerIn: parent
-        }
+        Layout {}
     }
 
     Component {
         id: othersComponent
-        Others {
-            anchors.centerIn: parent
-        }
+        Others {}
     }
 
     Component {
         id: buttonsComponent
-        Buttons {
-            anchors.centerIn: parent
+        Buttons {}
+    }
+
+    Component {
+        id: popupMenuComponent
+        StatusPopupMenuPage {}
+    }
+
+    Component {
+        id: demoAppCmp
+
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor3
+            DemoApp {
+                id: demoApp
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+            DropShadow {
+                anchors.fill: demoApp
+                source: demoApp
+                horizontalOffset: 0
+                verticalOffset: 5
+                radius: 20
+                samples: 20
+                color: "#22000000"
+            }
         }
     }
 }

src/StatusQ/Components/StatusBadge.qml

@@ -27,7 +27,7 @@ Rectangle {
         id: value
         visible: statusBadge.value > 0
         font.pixelSize: statusBadge.value > 99 ? 10 : 12
-        font.weight: Font.Bold
+        font.weight: Font.Medium
         color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
         text: {

src/StatusQ/Components/StatusChatListItem.qml

@@ -0,0 +1,188 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusChatListItem
+
+    property string name: ""
+    property alias badge: statusBadge
+    property bool hasUnreadMessages: false
+    property bool hasMention: false
+    property bool muted: false
+    property StatusImageSettings image: StatusImageSettings {}
+    property StatusIconSettings icon: StatusIconSettings {
+        color: Theme.palette.miscColor5
+    }
+    property int type: StatusChatListItem.Type.PublicChat
+    property bool selected: false
+
+    signal clicked(var mouse)
+    signal unmute()
+
+    enum Type {
+        PublicChat,
+        GroupChat,
+        CommunityChat,
+        OneToOneChat
+    }
+
+    implicitWidth: 287
+    implicitHeight: 40
+
+    radius: 8
+
+    color: {
+        if (selected) {
+            return Theme.palette.statusChatListItem.selectedBackgroundColor
+        }
+        return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+    }
+
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+
+        onClicked: statusChatListItem.clicked(mouse)
+
+        Loader {
+            id: identicon
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.verticalCenter: parent.verticalCenter
+
+            sourceComponent: !!statusChatListItem.image.source.toString() ?
+                statusRoundedImageCmp : statusLetterIdenticonCmp
+        }
+
+        Component {
+            id: statusLetterIdenticonCmp
+            StatusLetterIdenticon {
+                height: 24
+                width: 24
+                name: statusChatListItem.name
+                letterSize: 15
+                color: statusChatListItem.icon.color
+            }
+        }
+
+        Component {
+            id: statusRoundedImageCmp
+            Item {
+                height: 24
+                width: 24
+                StatusRoundedImage {
+                    id: statusRoundedImage
+                    width: parent.width
+                    height: parent.height
+                    image.source: statusChatListItem.image.source
+                    showLoadingIndicator: true
+                }
+
+                Loader {
+                    sourceComponent: statusLetterIdenticonCmp
+                    active: statusRoundedImage.image.status === Image.Error
+                }
+            }
+        }
+
+        StatusIcon {
+            id: statusIcon
+            anchors.left: identicon.right
+            anchors.leftMargin: 8
+            anchors.verticalCenter: parent.verticalCenter
+
+            width: 14
+            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
+            opacity: {
+                if (statusChatListItem.muted && !sensor.containsMouse) {
+                    return 0.4
+                }
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages || 
+                  statusChatListItem.selected ||
+                  statusBadge.visible ||
+                  sensor.containsMouse ? 1.0 : 0.7
+            }
+
+            icon: {
+                switch (statusChatListItem.type) {
+                    case StatusChatListItem.Type.PublicCat:
+                        return Theme.palette.name == "light" ? "public-chat" : "public-chat-white"
+                        break;
+                    case StatusChatListItem.Type.GroupChat:
+                        return Theme.palette.name == "light" ? "group" : "group-white"
+                        break;
+                    case StatusChatListItem.Type.CommunityChat:
+                        return Theme.palette.name == "light" ? "channel" : "channel-white"
+                        break;
+                    default:
+                        return Theme.palette.name == "light" ? "public-chat" : "public-chat-white"
+                }
+            }
+        }
+
+        StatusBaseText {
+            id: chatName
+            anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
+            anchors.leftMargin: statusIcon.visible ? 1 : 8
+            anchors.verticalCenter: parent.verticalCenter
+
+            text: statusChatListItem.name
+            color: {
+                if (statusChatListItem.muted && !sensor.containsMouse) {
+                    return Theme.palette.directColor5
+                }
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages ||
+                  statusChatListItem.selected ||
+                  sensor.containsMouse ||
+                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+            }
+            font.weight: statusChatListItem.hasMention || 
+              statusChatListItem.hasUnreadMessages ||
+              statusBadge.visible ? Font.Bold : Font.Medium
+        }
+
+        StatusBadge {
+            id: statusBadge
+
+            anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
+            anchors.rightMargin: 8
+            anchors.verticalCenter: parent.verticalCenter
+
+            border.width: 4
+            border.color: color
+            visible: statusBadge.value > 0
+        }
+
+        StatusIcon {
+            id: mutedIcon
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.verticalCenter: parent.verticalCenter
+            width: 14
+            opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
+            icon: Theme.palette.name === "light" ? "muted" : "muted-white"
+            visible: statusChatListItem.muted
+
+            MouseArea {
+                id: mutedIconSensor
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor 
+                anchors.fill: parent
+                onClicked: statusChatListItem.unmute()
+            }
+
+            StatusToolTip {
+                text: "Unmute"
+                visible: mutedIconSensor.containsMouse
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusChatToolBar.qml

@@ -0,0 +1,87 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusChatToolBar
+    implicitWidth: 518
+    height: 56
+    color: Theme.palette.statusAppLayout.backgroundColor
+
+    property alias chatInfoButton: statusChatInfoButton
+    property int notificationCount: 0
+
+    signal chatInfoButtonClicked()
+    signal menuButtonClicked()
+    signal notificationButtonClicked()
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        onClicked: statusChatToolBar.chatInfoButtonClicked()
+    }
+
+    Row {
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 8
+
+        StatusFlatRoundButton {
+            width: 32
+            height: 32
+            icon.name: "more"
+            type: StatusFlatRoundButton.Type.Secondary
+
+            onClicked: statusChatToolBar.menuButtonClicked()
+        }
+
+        Rectangle {
+            height: 24
+            width: 1
+            color: Theme.palette.directColor7
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StatusFlatRoundButton {
+            width: 32
+            height: 32
+
+            icon.name: "notification"
+            icon.height: 21
+            type: StatusFlatRoundButton.Type.Secondary
+
+            onClicked: statusChatToolBar.notificationButtonClicked()
+
+            StatusBadge {
+                id: statusBadge
+
+                visible: value > 0
+                anchors.top: parent.top
+                anchors.left: parent.right
+                anchors.topMargin: -3
+                anchors.leftMargin: {
+                    if (statusBadge.value > 99) {
+                        return -22
+                    }
+                    if (statusBadge.value > 9) {
+                        return -21
+                    }
+                    return -18
+                }
+
+                value: statusChatToolBar.notificationCount
+                border.width: 2
+                border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
+            }
+        }
+
+    }
+}
+

src/StatusQ/Components/StatusDescriptionListItem.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusDescriptionListItem
+
+    property string title: ""
+    property string subTitle: ""
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
+    }
+    property alias tooltip: statusToolTip
+    property alias iconButton: statusFlatRoundButton
+
+    implicitWidth: 448
+    implicitHeight: 56
+    radius: 8
+
+    color: Theme.palette.statusListItem.backgroundColor
+
+    StatusBaseText {
+        id: statusDescriptionListItemTitle
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.topMargin: 5
+
+        color: Theme.palette.baseColor1
+        text: statusDescriptionListItem.title
+        font.pixelSize: 13
+        font.weight: Font.Medium
+    }
+
+    StatusBaseText {
+        id: statusDescriptionListItemSubTitle
+        anchors.top: statusDescriptionListItemTitle.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.topMargin: 4
+
+        text: statusDescriptionListItem.subTitle
+        color: Theme.palette.directColor1
+        font.pixelSize: 15
+        font.weight: Font.Normal
+    }
+
+    StatusFlatRoundButton {
+        id: statusFlatRoundButton
+        visible: !!statusDescriptionListItem.icon.name
+        anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
+        anchors.left: statusDescriptionListItemSubTitle.right
+        anchors.leftMargin: 4
+
+        width: 32
+        height: 32
+
+        icon.name: statusDescriptionListItem.icon.name
+        icon.width: statusDescriptionListItem.icon.width
+        icon.height: statusDescriptionListItem.icon.height
+
+        StatusToolTip {
+            id: statusToolTip
+        }
+    }
+}

src/StatusQ/Components/StatusListItem.qml

@@ -0,0 +1,119 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusListItem
+
+    implicitWidth: 448
+    implicitHeight: 64
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    radius: 8
+
+    property string title: ""
+    property string subTitle: ""
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 20
+        width: 20
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
+    }
+    property StatusImageSettings image: StatusImageSettings {}
+    property string label: ""
+
+    property list<Item> components
+
+    onComponentsChanged: {
+        if (components.length) {
+            for (let idx in components) {
+                components[idx].parent = statusListItemComponentsSlot
+            }
+        }
+    }
+
+    MouseArea {
+        id: sensor
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+
+        Loader {
+            id: iconOrImage
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
+            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
+        }
+
+        Component {
+            id: statusRoundedIcon
+            StatusRoundIcon {
+                icon.width: statusListItem.icon.width
+                icon.height: statusListItem.icon.height
+                icon.name: statusListItem.icon.name
+                color: statusListItem.icon.background.color
+                width: statusListItem.icon.background.width
+                height: statusListItem.icon.background.height
+            }
+        }
+
+        Component {
+            id: statusRoundedImage
+            StatusRoundedImage {
+                image.source: statusListItem.image.source
+            }
+        }
+
+        Item {
+            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
+
+            StatusBaseText {
+                id: statusListItemTitle
+                text: statusListItem.title
+                font.pixelSize: 15
+                color: Theme.palette.directColor1
+            }
+
+            StatusBaseText {
+                id: statusListItemSubTitle
+                anchors.top: statusListItemTitle.bottom
+
+                text: statusListItem.subTitle
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+                visible: !!statusListItem.subTitle
+            }
+        }
+
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: statusListItemComponentsSlot.left
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
+
+            text: statusListItem.label
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+            visible: !!statusListItem.label
+        }
+
+
+        Row {
+            id: statusListItemComponentsSlot
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 10
+        }
+    }
+}

src/StatusQ/Components/StatusNavigationListItem.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusNavigationListItem
+
+    signal clicked(var mouse)
+    property bool selected: false
+    property alias badge: statusBadge
+
+    implicitWidth: 286
+    implicitHeight: 48
+
+    icon.background.width: 20
+    icon.background.height: 20
+    icon.background.color: "transparent"
+
+
+    color: {
+        if (selected) {
+            return Theme.palette.statusNavigationListItem.selectedBackgroundColor
+        }
+        return sensor.containsMouse ? 
+          Theme.palette.statusNavigationListItem.hoverBackgroundColor :
+          Theme.palette.baseColor4
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+        onClicked: statusNavigationListItem.clicked(mouse)
+    }
+
+    components: [
+        StatusBadge {
+            id: statusBadge
+            visible: value > 0
+        }
+    ]
+}

src/StatusQ/Components/StatusRoundIcon.qml

@@ -5,16 +5,22 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: statusRoundedIcon
 
-    implicitWidth: 40
-    implicitHeight: 40
-    radius: width / 2;
-
-    color: Theme.palette.primaryColor3;
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
     }
 
+    color: icon.background.color
+    implicitWidth: icon.background.width
+    implicitHeight: icon.background.height
+    radius: icon.background.width / 2
+
+
     StatusIcon {
         id: statusIcon
         anchors.centerIn: parent

src/StatusQ/Components/StatusRoundedImage.qml

@@ -5,6 +5,9 @@ import StatusQ.Core.Theme 0.1
 
 Rectangle {
     id: statusRoundImage
+
+    property bool showLoadingIndicator: false
+
     property alias image: image
 
     implicitWidth: 40
@@ -28,4 +31,15 @@ Rectangle {
         fillMode: Image.PreserveAspectFit
         cache: true
     }
+
+    Loader {
+        id: itemSelector
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        active: showLoadingIndicator && image.status === Image.Loading
+        sourceComponent: StatusLoadingIndicator {
+            color: Theme.palette.directColor6
+
+        }
+    }
 }

src/StatusQ/Components/qmldir

@@ -1,7 +1,12 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatListItem 0.1 StatusChatListItem.qml
+StatusChatToolBar 0.1 StatusChatToolBar.qml
+StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
+StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml

src/StatusQ/Controls/StatusBaseButton.qml

@@ -16,7 +16,10 @@ Rectangle {
         Danger
     }
 
-    property alias iconName: icon.icon
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+    }
 
     property bool loading: false
 
@@ -87,9 +90,12 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             spacing: 4
             StatusIcon {
-                id: icon
+                id: statusIcon
+                width: statusBaseButton.icon.width
+                height: statusBaseButton.icon.height
+                icon: statusBaseButton.icon.name
                 anchors.verticalCenter: parent.verticalCenter
-                visible: !loading && iconName !== ""
+                visible: !loading && statusBaseButton.icon.name !== ""
                 color: statusBaseButton.enabled ? textColor
                                                 : disabledTextColor
             } // Icon

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -0,0 +1,229 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: statusChatInfoButton
+
+    implicitWidth: identicon.width + 
+        Math.max(
+          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
+          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
+        ) + 8
+    implicitHeight: 48
+
+    property string title: ""
+    property string subTitle: ""
+    property bool muted: false
+    property int pinnedMessagesCount: 0
+    property StatusImageSettings image: StatusImageSettings {}
+    property StatusIconSettings icon: StatusIconSettings {}
+    property int type: StatusChatInfoButton.Type.PublicChat
+    property alias tooltip: statusToolTip
+
+    signal clicked(var mouse)
+    signal pinnedMessagesCountClicked(var mouse)
+    signal unmute()
+
+    enum Type {
+        PublicChat,
+        GroupChat,
+        CommunityChat,
+        OneToOneChat
+    }
+
+    radius: 8
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+
+        onClicked: statusChatInfoButton.clicked(mouse)
+
+        Loader {
+            id: identicon
+
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            anchors.verticalCenter: parent.verticalCenter
+
+            sourceComponent: !!statusChatInfoButton.image.source.toString() ?
+                statusRoundImageComponent :
+                statusLetterIdenticonComponent
+        }
+
+        Component {
+            id: statusRoundImageComponent
+
+            Item {
+                width: 36
+                height: 36
+                StatusRoundedImage {
+                    id: statusRoundImage
+                    width: parent.width
+                    height: parent.height
+                    image.source: statusChatInfoButton.image.source
+                    showLoadingIndicator: true
+                }
+                Loader {
+                    sourceComponent: statusLetterIdenticonComponent
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    active: statusRoundImage.image.status === Image.Error
+                }
+            }
+        }
+
+        Component {
+            id: statusLetterIdenticonComponent
+
+            StatusLetterIdenticon {
+                width: 36
+                height: 36
+                name: statusChatInfoButton.title
+                color: statusChatInfoButton.icon.color
+            }
+        }
+
+        Item {
+            id: statusChatInfoButtonTitle
+            anchors.top: identicon.top
+            anchors.left: identicon.right
+            anchors.leftMargin: 8
+
+            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
+            height: chatName.height
+
+            StatusIcon {
+                id: statusIcon
+                anchors.top: parent.top
+                anchors.topMargin: -2
+                anchors.left: parent.left
+
+                visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
+                width: visible ? 14 : 0
+                color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                icon: {
+                    switch (statusChatInfoButton.type) {
+                        case StatusChatInfoButton.Type.PublicCat:
+                            return "public-chat"
+                            break;
+                        case StatusChatInfoButton.Type.GroupChat:
+                            return "group"
+                            break;
+                        case StatusChatInfoButton.Type.CommunityChat:
+                            return "channel"
+                            break;
+                        default:
+                            return "public-chat"
+                    }
+                }
+            }
+
+            StatusBaseText {
+                id: chatName
+
+                anchors.left: statusIcon.visible ? statusIcon.right : parent.left
+                anchors.leftMargin: statusIcon.visible ? 1 : 0
+                anchors.top: parent.top
+
+                text: statusChatInfoButton.title
+                color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
+                font.pixelSize: 15
+                font.weight: Font.Medium
+            }
+
+            StatusIcon {
+                id: mutedIcon
+                anchors.left: chatName.right
+                anchors.leftMargin: 4
+                anchors.top: chatName.top
+                anchors.topMargin: -2
+                width: 13
+                icon: "muted"
+                color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                visible: statusChatInfoButton.muted
+
+                MouseArea {
+                    id: mutedIconSensor
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor 
+                    anchors.fill: parent
+                    onClicked: statusChatInfoButton.unmute()
+                }
+
+                StatusToolTip {
+                    id: statusToolTip
+                    text: "Unmute"
+                    visible: mutedIconSensor.containsMouse
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }
+        }
+
+        Item {
+            id: statusChatInfoButtonSubTitle
+            anchors.left: statusChatInfoButtonTitle.left
+            anchors.top: statusChatInfoButtonTitle.bottom
+            height: chatType.height
+            width: childrenRect.width
+
+            StatusBaseText {
+                id: chatType
+                text: statusChatInfoButton.subTitle
+                color: Theme.palette.baseColor1
+                font.pixelSize: 12
+            }
+
+            Rectangle {
+                id: divider
+                height: 12
+                width: 1
+                color: Theme.palette.directColor7
+                anchors.left: chatType.right
+                anchors.leftMargin: 4
+                anchors.verticalCenter: chatType.verticalCenter
+                visible: pinIcon.visible
+            }
+
+            StatusIcon {
+                id: pinIcon
+
+                anchors.left: divider.right
+                anchors.leftMargin: -2
+                anchors.verticalCenter: chatType.verticalCenter
+                height: 14
+                visible: statusChatInfoButton.pinnedMessagesCount > 0
+                icon: "pin"
+                color: Theme.palette.baseColor1
+            }
+
+            StatusBaseText {
+                anchors.left: pinIcon.right
+                anchors.leftMargin: -6
+                anchors.verticalCenter: pinIcon.verticalCenter
+
+                width: 14
+                text: statusChatInfoButton.pinnedMessagesCount
+                font.pixelSize: 12
+                font.underline: pinCountSensor.containsMouse
+                visible: pinIcon.visible
+                color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+
+                MouseArea {
+                    id: pinCountSensor
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor 
+                    onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/StatusFlatButton.qml

@@ -16,6 +16,6 @@ StatusBaseButton {
 
     border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
                                                           : Theme.palette.baseColor2
-    rightPadding: iconName !== "" ? 18 : defaultRightPadding
-    leftPadding: iconName !== "" ? 14 : defaultLeftPadding
+    rightPadding: icon.name !== "" ? 18 : defaultRightPadding
+    leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
 }

src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -7,30 +7,11 @@ import StatusQ.Components 0.1
 Rectangle {
     id: statusFlatRoundButton
 
-    property alias icon: iconSettings.name
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
 
-    property bool loading: false
-
-    property int type: StatusFlatRoundButton.Type.Primary
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    enum Type {
-        Primary,
-        Secondary
-    }
-
-
-
-    /// Implementation
-
-    QtObject {
-        id: iconSettings
-        property alias name: statusIcon.icon
-        property color color: {
+        color: {
             switch(statusFlatRoundButton.type) {
             case StatusFlatRoundButton.Type.Secondary:
                 return Theme.palette.directColor1;
@@ -49,6 +30,26 @@ Rectangle {
         }
     }
 
+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property int type: StatusFlatRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
     QtObject {
         id: backgroundSettings
 
@@ -63,9 +64,9 @@ Rectangle {
         property color hoverColor: {
             switch(statusFlatRoundButton.type) {
             case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor2;
+                return Theme.palette.primaryColor3;
             case StatusFlatRoundButton.Type.Secondary:
-                return "transparent";
+                return Theme.palette.baseColor2;
             }
         }
 
@@ -105,14 +106,16 @@ Rectangle {
             anchors.centerIn: parent
             visible: !loading
 
-            width: statusFlatRoundButton.width -  20
-            height: statusFlatRoundButton.height - 20
+            icon: statusFlatRoundButton.icon.name
+
+            width: statusFlatRoundButton.icon.width
+            height: statusFlatRoundButton.icon.height
 
             color: {
                 if (statusFlatRoundButton.enabled) {
-                    return iconSettings.color
+                    return statusFlatRoundButton.icon.color
                 } else {
-                    return iconSettings.disabledColor
+                    return statusFlatRoundButton.icon.disabledColor
                 }
             }
         } // Icon
@@ -122,9 +125,9 @@ Rectangle {
             sourceComponent: StatusLoadingIndicator {
                 color: {
                     if (statusFlatRoundButton.enabled) {
-                        return iconSettings.color
+                        return statusFlatRoundButton.icon.color
                     } else {
-                        return iconSettings.disabledColor
+                        return statusFlatRoundButton.icon.disabledColor
                     }
                 }
             } // Indicator

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -45,31 +45,17 @@ TabButton {
                 height: 28
                 StatusRoundedImage {
                     id: statusRoundImage
+                    showLoadingIndicator: true
                     width: parent.width
                     height: parent.height
                     image.source: icon.source
                 }
                 Loader {
-                    sourceComponent: {
-                        switch (statusRoundImage.image.status) {
-                            case Image.Loading:
-                              return statusLoadingIndicator
-                              break;
-                            case Image.Error:
-                              return letterIdenticon
-                              break;
-                        }
-                    }
+                    sourceComponent:letterIdenticon
+
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
-                    active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error
-                }
-
-                Component {
-                    id: statusLoadingIndicator
-                    StatusLoadingIndicator {
-                        color: Theme.palette.directColor6
-                    }
+                    active: statusRoundImage.image.status === Image.Error
                 }
             }
         }

src/StatusQ/Controls/StatusNavBarTabButton.qml

@@ -38,10 +38,7 @@ StatusIconTabButton {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: function (mouse) {
-            statusNavBarTabButton.checked = !statusNavBarTabButton.checked
-            statusNavBarTabButton.clicked(mouse)
-        }
+        onClicked: statusNavBarTabButton.clicked(mouse)
     }
 }
 

src/StatusQ/Controls/StatusRoundButton.qml

@@ -7,30 +7,11 @@ import StatusQ.Components 0.1
 Rectangle {
     id: statusRoundButton
 
-    property alias icon: iconSettings.name
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
 
-    property bool loading: false
-
-    property int type: StatusRoundButton.Type.Primary
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    enum Type {
-        Primary,
-        Secondary
-    }
-
-
-
-    /// Implementation
-
-    QtObject {
-        id: iconSettings
-        property alias name: statusIcon.icon
-        property color color: {
+        color: {
             switch(statusRoundButton.type) {
             case StatusRoundButton.Type.Primary:
                 return Theme.palette.primaryColor1;
@@ -49,6 +30,26 @@ Rectangle {
         }
     }
 
+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property int type: StatusRoundButton.Type.Primary
+
+    signal pressed(var mouse)
+    signal released(var mouse)
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+
+
+    /// Implementation
+
     QtObject {
         id: backgroundSettings
 
@@ -107,14 +108,16 @@ Rectangle {
             anchors.centerIn: parent
             visible: !loading
 
-            width: statusRoundButton.width -  20
-            height: statusRoundButton.height - 20
+            icon: statusRoundButton.icon.name
+
+            width: statusRoundButton.icon.width
+            height: statusRoundButton.icon.height
 
             color: {
                 if (statusRoundButton.enabled) {
-                    return iconSettings.color
+                    return statusRoundButton.icon.color
                 } else {
-                    return iconSettings.disabledColor
+                    return statusRoundButton.icon.disabledColor
                 }
             }
         } // Icon
@@ -124,9 +127,9 @@ Rectangle {
             sourceComponent: StatusLoadingIndicator {
                 color: {
                     if (statusRoundButton.enabled) {
-                        return iconSettings.color
+                        return statusRoundButton.icon.color
                     } else {
-                        return iconSettings.disabledColor
+                        return statusRoundButton.icon.disabledColor
                     }
                 }
             } // Indicator

src/StatusQ/Controls/StatusSlider.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Slider {
+    id: statusSlider
+
+    implicitWidth: 360
+    implicitHeight: 4
+
+    leftPadding: 0
+
+    background: Rectangle {
+        implicitHeight: 4
+        implicitWidth: 100
+        color: {
+            if (statusSlider.value === statusSlider.to) {
+                return Theme.palette.primaryColor1
+            }
+            return Theme.palette.primaryColor3
+        }
+        radius: 2
+        Rectangle {
+            radius: 2
+            anchors.fill: parent
+            visible: statusSlider.value > statusSlider.from && statusSlider.value < statusSlider.to
+            gradient: Gradient {
+                GradientStop { color: Theme.palette.primaryColor1 ; position: 0 }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor1 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: 1 }
+                orientation: Gradient.Horizontal
+            }
+        }
+    } // background
+
+    handle: Rectangle {
+        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.palette.white
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: 14
+        layer.enabled: true
+        layer.effect: DropShadow {
+            width: parent.width
+            height: parent.height
+            visible: true
+            verticalOffset: 2
+            samples: 15
+            fast: true
+            cached: true
+            color: Theme.palette.dropShadow
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -1,5 +1,6 @@
 module StatusQ.Controls
 
+StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
@@ -11,3 +12,4 @@ StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
+StatusSlider 0.1 StatusSlider.qml

src/StatusQ/Core/StatusIcon.qml

@@ -3,7 +3,7 @@ import QtGraphicalEffects 1.13
 
 Image {
     property string icon: ""
-    property color color
+    property color color: "transparent"
 
     id: statusIcon
     width: 24
@@ -19,13 +19,12 @@ Image {
     }
 
     ColorOverlay {
-        visible: statusIcon.color !== undefined
+        visible: !Qt.colorEqual(statusIcon.color, "transparent")
         anchors.fill: statusIcon
         source: statusIcon
         color: statusIcon.color
         antialiasing: true
         smooth: true
-        rotation: statusIcon.rotation
     }
 }
 

src/StatusQ/Core/StatusIconBackgroundSettings.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconBackgroundSettings
+
+    property color color
+    property real width
+    property real height
+    property int radius
+}
+

src/StatusQ/Core/StatusIconSettings.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import StatusQ.Core 0.1
 
 QtObject {
     id: statusIconSettings
@@ -8,4 +9,5 @@ QtObject {
     property real height
     property color color
     property url source
+    property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
 }

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -2,6 +2,8 @@ import QtQuick 2.13
 
 ThemePalette {
 
+    name: "dark"
+
     property QtObject baseFont: FontLoader {
         source: "../../../assets/fonts/Inter/Inter-Regular.otf"
     }
@@ -66,6 +68,8 @@ ThemePalette {
         source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
     }
 
+    property color dropShadow: getColor('black', 0.08)
+
     baseColor1: getColor('graphite5')
     baseColor2: getColor('graphite4')
     baseColor3: getColor('graphite3')
@@ -117,12 +121,43 @@ ThemePalette {
     miscColor10: getColor('brown3')
     miscColor11: getColor('yellow2')
 
+    property QtObject statusAppLayout: QtObject {
+        property color backgroundColor: baseColor3
+        property color rightPanelBackgroundColor: baseColor3
+    }
+
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor: baseColor5
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusChatListItem: QtObject {
+        property color hoverBackgroundColor: directColor8
+        property color selectedBackgroundColor: directColor7
+    }
+
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: directColor8
+        property color selectedBackgroundColor: directColor7
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
+        property color borderColor: baseColor5
+        property color hoverBorderColor: "#353A4D"
+    }
+
+    property QtObject statusChatInfoButton: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusPopupMenu: QtObject {
+        property color backgroundColor: baseColor2
+        property color hoverBackgroundColor: directColor7
+        property color separatorColor: directColor7
     }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -2,6 +2,8 @@ import QtQuick 2.13
 
 ThemePalette {
 
+    name: "light"
+
     property QtObject baseFont: FontLoader {
         source: "../../../assets/fonts/Inter/Inter-Regular.otf"
     }
@@ -117,12 +119,43 @@ ThemePalette {
     miscColor10: getColor('brown')
     miscColor11: getColor('brown2')
 
+    property QtObject statusAppLayout: QtObject {
+        property color backgroundColor: white
+        property color rightPanelBackgroundColor: white
+    }
+
     property QtObject statusAppNavBar: QtObject {
-        property color backgroundColor: baseColor4
+        property color backgroundColor: baseColor2
+    }
+
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusChatListItem: QtObject {
+        property color hoverBackgroundColor: baseColor2
+        property color selectedBackgroundColor: baseColor3
+    }
+
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: baseColor2
+        property color selectedBackgroundColor: baseColor3
     }
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
+        property color borderColor: baseColor4
+        property color hoverBorderColor: "#DDE3F3"
+    }
+
+    property QtObject statusChatInfoButton: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusPopupMenu: QtObject {
+        property color backgroundColor: white
+        property color hoverBackgroundColor: baseColor2
+        property color separatorColor: baseColor2
     }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -4,6 +4,8 @@ QtObject {
     
     id: theme
 
+    property string name
+
     property FontLoader baseFont
     property FontLoader baseFontThin
     property FontLoader baseFontExtraLight
@@ -78,12 +80,44 @@ QtObject {
     property color miscColor10
     property color miscColor11
 
+    property QtObject statusAppLayout: QtObject {
+        property color backgroundColor
+        property color rightPanelBackgroundColor
+    }
+
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusChatListItem: QtObject {
+        property color hoverBackgroundColor
+        property color selectedBackgroundColor
+    }
+
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor
+        property color selectedBackgroundColor
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor
+        property color borderColor
+        property color hoverBorderColor
+    }
+
+    property QtObject statusChatInfoButton: QtObject {
+        property color backgroundColor
+        property color hoverBackgroundColor
+    }
+
+    property QtObject statusPopupMenu: QtObject {
+        property color backgroundColor
+        property color hoverBackgroundColor
+        property color separatorColor
     }
 
     function alphaColor(color, alpha) {

src/StatusQ/Core/qmldir

@@ -3,5 +3,6 @@ module StatusQ.Core
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
+StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
 

src/StatusQ/Layout/StatusAppLayout.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: statusAppLayout
+
+    implicitWidth: 900
+    implicitHeight: 600
+
+    color: Theme.palette.statusAppLayout.backgroundColor
+    
+    property StatusAppNavBar appNavBar
+    property Item appView
+
+    onAppNavBarChanged: {
+        if (!!appNavBar) {
+            appNavBar.parent = appNavBarSlot
+        }
+    }
+
+    onAppViewChanged: {
+        if (!!appView) {
+            appView.parent = appViewSlot
+        }
+    }
+
+    Row {
+        id: rowLayout
+        spacing: 0
+        height: statusAppLayout.height
+        width: statusAppLayout.width
+
+        Item {
+            id: appNavBarSlot
+            height: statusAppLayout.height
+            width: 78
+        }
+
+        Item {
+            id: appViewSlot
+            height: statusAppLayout.height
+            width: statusAppLayout.width - appNavBarSlot.width
+        }
+    }
+}

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -47,8 +47,9 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: 48
         anchors.horizontalCenter: parent.horizontalCenter
-        height: statusAppNavBar.navBarChatButton.height
-        width: statusAppNavBar.navBarChatButton.width
+        height: visible ? statusAppNavBar.navBarChatButton.height : 0
+        width: visible ? statusAppNavBar.navBarChatButton.width : 0
+        visible: !!statusAppNavBar.navBarChatButton
     }
 
     Rectangle {

src/StatusQ/Layout/StatusAppTwoPanelLayout.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: statusAppTwoPanelLayout
+
+    implicitWidth: 822
+    implicitHeight: 600
+
+    property Item leftPanel
+    property Item rightPanel
+
+    onLeftPanelChanged: {
+        if (!!leftPanel) {
+            leftPanel.parent = leftPanelSlot
+        }
+    }
+
+    onRightPanelChanged: {
+        if (!!rightPanel) {
+            rightPanel.parent = rightPanelSlot
+        }
+    }
+
+    Row {
+        anchors.fill: parent
+
+        Rectangle {
+            id: leftPanelSlot
+            height: parent.height
+            width: 304
+            color: Theme.palette.baseColor4
+        }
+
+        Rectangle {
+            id: rightPanelSlot
+            height: parent.height
+            width: parent.width - leftPanelSlot.width
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+        }
+    }
+}

src/StatusQ/Layout/qmldir

@@ -1,5 +1,7 @@
 module StatusQ.Layout
 
+StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
+StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
 
 

src/StatusQ/Popups/StatusMenuItem.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Core 0.1
+
+Action {
+    id: statusMenuItem
+
+    enum Type {
+        Normal,
+        Danger
+    }
+
+    property int type: StatusMenuItem.Type.Normal
+    property real iconRotation: 0
+}

src/StatusQ/Popups/StatusMenuSeparator.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+
+MenuSeparator {
+    contentItem: Rectangle {
+        implicitWidth: 176
+        implicitHeight: 1
+        color: Theme.palette.statusPopupMenu.separatorColor
+    }
+}

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -0,0 +1,148 @@
+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.Popups 0.1
+
+
+Menu {
+    id: statusPopupMenu
+
+    closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
+    topPadding: 8
+    bottomPadding: 8
+
+    property int menuItemCount: 0
+    property var subMenuItemIcons: []
+
+    delegate: MenuItem {
+        id: statusPopupMenuItem
+
+        implicitHeight: 38
+
+        property int subMenuIndex
+
+        Component.onCompleted: {
+            if (subMenu) {
+                subMenuIndex = statusPopupMenu.menuItemCount
+                statusPopupMenu.menuItemCount += 1
+            }
+        }
+
+        action: StatusMenuItem {}
+
+        Component {
+            id: indicatorComponent
+            Item {
+                implicitWidth: 24
+                implicitHeight: 24
+                StatusIcon {
+                    anchors.centerIn: parent
+                    width: !!statusPopupMenuItem.action.icon.width ?
+                      statusPopupMenuItem.action.icon.width : 18
+                    rotation: statusPopupMenuItem.action.iconRotation
+                    icon: statusPopupMenuItem.subMenu ?
+                        statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] :
+                        statusPopupMenuItem.action.icon.name
+                    color: {
+                        switch (statusPopupMenuItem.action.type) {
+                            case StatusMenuItem.Type.Danger:
+                              return Theme.palette.dangerColor1
+                              break;
+                            default:
+                              return Theme.palette.primaryColor1
+                        }
+                    }
+                }
+            }
+        }
+
+        indicator: Loader {
+            sourceComponent: indicatorComponent
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            active: parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] ||
+                !!statusPopupMenuItem.action.icon.name
+        }
+
+        contentItem: StatusBaseText {
+            anchors.left: statusPopupMenuItem.indicator.right
+            anchors.leftMargin: 4
+
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+
+            text: statusPopupMenuItem.text
+            color: {
+                switch (statusPopupMenuItem.action.type) {
+                    case StatusMenuItem.Type.Danger:
+                      return Theme.palette.dangerColor1
+                      break;
+                    default:
+                      return Theme.palette.directColor1
+                }
+            }
+            font.pixelSize: 13
+            elide: Text.ElideRight
+        }
+
+        arrow: StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            height: 16
+            visible: statusPopupMenuItem.subMenu
+            icon: "next"
+            color: Theme.palette.directColor1
+        }
+
+        background: Rectangle {
+            color: {
+                if (hovered) {
+                    return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
+                }
+                return "transparent"
+            }
+        }
+
+        MouseArea {
+            id: sensor
+
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor 
+            hoverEnabled: true
+            onPressed: mouse.accepted = false
+        }
+    }
+
+    background: Item {
+        id: statusPopupMenuBackground
+        implicitWidth: 176
+
+        Rectangle {
+            id: statusPopupMenuBackgroundContent
+            implicitWidth: statusPopupMenuBackground.width
+            implicitHeight: statusPopupMenuBackground.height
+            color: Theme.palette.statusPopupMenu.backgroundColor
+            radius: 8
+            layer.enabled: true
+            layer.effect: DropShadow {
+                width: statusPopupMenuBackgroundContent.width
+                height: statusPopupMenuBackgroundContent.height
+                x: statusPopupMenuBackgroundContent.x
+                visible: statusPopupMenuBackgroundContent.visible
+                source: statusPopupMenuBackgroundContent
+                horizontalOffset: 0
+                verticalOffset: 4
+                radius: 12
+                samples: 25
+                spread: 0.2
+                color: Theme.palette.dropShadow
+            }
+        }
+    }
+
+}

src/StatusQ/Popups/qmldir

@@ -0,0 +1,5 @@
+module StatusQ.Popups
+
+StatusMenuSeparator 0.1 StatusMenuSeparator.qml
+StatusPopupMenu 0.1 StatusPopupMenu.qml
+StatusMenuItem 0.1 StatusMenuItem.qml

src/assets/img/icons/channel-white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7383 5.13185C10.8111 4.72408 10.5396 4.3345 10.1318 4.26168C9.72408 4.18887 9.33449 4.4604 9.26168 4.86816L8.73137 7.8379C8.68879 8.07636 8.48139 8.25001 8.23915 8.25001H5.5C5.08579 8.25001 4.75 8.58579 4.75 9.00001C4.75 9.41422 5.08579 9.75001 5.5 9.75001H7.79273C8.10404 9.75001 8.33967 10.0314 8.28494 10.3379L7.65994 13.8379C7.61736 14.0764 7.40996 14.25 7.16773 14.25H4.5C4.08579 14.25 3.75 14.5858 3.75 15C3.75 15.4142 4.08579 15.75 4.5 15.75H6.7213C7.03261 15.75 7.26824 16.0314 7.21351 16.3379L6.76168 18.8682C6.68886 19.2759 6.96039 19.6655 7.36816 19.7383C7.77592 19.8111 8.16551 19.5396 8.23832 19.1318L8.76863 16.1621C8.81121 15.9236 9.01861 15.75 9.26084 15.75H13.2213C13.5326 15.75 13.7682 16.0314 13.7135 16.3379L13.2617 18.8682C13.1889 19.2759 13.4604 19.6655 13.8682 19.7383C14.2759 19.8111 14.6655 19.5396 14.7383 19.1318L15.2686 16.1621C15.3112 15.9236 15.5186 15.75 15.7608 15.75H18.5C18.9142 15.75 19.25 15.4142 19.25 15C19.25 14.5858 18.9142 14.25 18.5 14.25H16.2073C15.896 14.25 15.6603 13.9686 15.7151 13.6621L16.3401 10.1621C16.3826 9.92365 16.59 9.75001 16.8323 9.75001H19.5C19.9142 9.75001 20.25 9.41422 20.25 9.00001C20.25 8.58579 19.9142 8.25001 19.5 8.25001H17.2787C16.9674 8.25001 16.7318 7.96858 16.7865 7.66211L17.2383 5.13185C17.3111 4.72408 17.0396 4.3345 16.6318 4.26168C16.2241 4.18887 15.8345 4.4604 15.7617 4.86816L15.2314 7.8379C15.1888 8.07636 14.9814 8.25001 14.7392 8.25001H10.7787C10.4674 8.25001 10.2318 7.96858 10.2865 7.66211L10.7383 5.13185ZM14.7849 10.3379C14.8397 10.0314 14.604 9.75001 14.2927 9.75001H10.3323C10.09 9.75001 9.88264 9.92365 9.84006 10.1621L9.21506 13.6621C9.16033 13.9686 9.39596 14.25 9.70727 14.25H13.6677C13.91 14.25 14.1174 14.0764 14.1599 13.8379L14.7849 10.3379Z" fill="white"/>
+</svg>

src/assets/img/icons/group-white.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C9.24265 8 10.25 6.99264 10.25 5.75C10.25 4.50736 9.24265 3.5 8 3.5C6.75736 3.5 5.75 4.50736 5.75 5.75C5.75 6.99264 6.75736 8 8 8Z" fill="white"/>
+<path d="M4.12343 12.5101C4.56395 10.7798 6.13252 9.5 8 9.5C9.86749 9.5 11.4361 10.7798 11.8766 12.5101C12.0128 13.0453 11.5523 13.5 11 13.5H5C4.44772 13.5 3.98718 13.0453 4.12343 12.5101Z" fill="white"/>
+<path d="M4.5 7.75C4.5 8.7165 3.7165 9.5 2.75 9.5C1.7835 9.5 1 8.7165 1 7.75C1 6.7835 1.7835 6 2.75 6C3.7165 6 4.5 6.7835 4.5 7.75Z" fill="white"/>
+<path d="M13.25 9.5C14.2165 9.5 15 8.7165 15 7.75C15 6.7835 14.2165 6 13.25 6C12.2835 6 11.5 6.7835 11.5 7.75C11.5 8.7165 12.2835 9.5 13.25 9.5Z" fill="white"/>
+</svg>
+

src/assets/img/icons/muted-white.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.70186 3.61736C9.91545 3.40377 9.89277 3.04794 9.62625 2.90578C9.13934 2.64607 8.58479 2.5 8.00002 2.5C6.27863 2.5 4.8192 3.76576 4.57576 5.46984L4.14144 8.51005C4.11619 8.68684 4.43245 8.88677 4.55873 8.76049L9.70186 3.61736Z" fill="white"/>
+<path d="M1.952 13.4879C1.6769 13.782 1.68279 14.2434 1.96967 14.5303C2.26256 14.8232 2.73744 14.8232 3.03033 14.5303L4.91421 12.6464C5.00798 12.5527 5.13516 12.5 5.26777 12.5H5.5C5.77614 12.5 5.99359 12.7273 6.06171 12.9949C6.28197 13.8601 7.06626 14.5 8 14.5C8.93374 14.5 9.71803 13.8601 9.93829 12.9949C10.0064 12.7273 10.2239 12.5 10.5 12.5H12.5858C13.4767 12.5 13.9229 11.4229 13.2929 10.7929L12.7071 10.2071C12.2481 9.74811 11.9504 9.15264 11.8586 8.51005L11.543 6.30054C11.5207 6.14475 11.5731 5.98756 11.6844 5.87628L14.0303 3.53033C14.3232 3.23744 14.3232 2.76256 14.0303 2.46967C13.7435 2.18281 13.282 2.1769 12.988 2.45195C12.9822 2.45811 12.9763 2.4642 12.9703 2.47021L1.97033 13.4702C1.96429 13.4762 1.95818 13.4822 1.952 13.4879Z" fill="white"/>
+</svg>
+

src/assets/img/icons/muted.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.70186 3.61736C9.91545 3.40377 9.89277 3.04794 9.62625 2.90578C9.13934 2.64607 8.58479 2.5 8.00002 2.5C6.27863 2.5 4.8192 3.76576 4.57576 5.46984L4.14144 8.51005C4.11619 8.68684 4.43245 8.88677 4.55873 8.76049L9.70186 3.61736Z" fill="black"/>
+<path d="M1.952 13.4879C1.6769 13.782 1.68279 14.2434 1.96967 14.5303C2.26256 14.8232 2.73744 14.8232 3.03033 14.5303L4.91421 12.6464C5.00798 12.5527 5.13516 12.5 5.26777 12.5H5.5C5.77614 12.5 5.99359 12.7273 6.06171 12.9949C6.28197 13.8601 7.06626 14.5 8 14.5C8.93374 14.5 9.71803 13.8601 9.93829 12.9949C10.0064 12.7273 10.2239 12.5 10.5 12.5H12.5858C13.4767 12.5 13.9229 11.4229 13.2929 10.7929L12.7071 10.2071C12.2481 9.74811 11.9504 9.15264 11.8586 8.51005L11.543 6.30054C11.5207 6.14475 11.5731 5.98756 11.6844 5.87628L14.0303 3.53033C14.3232 3.23744 14.3232 2.76256 14.0303 2.46967C13.7435 2.18281 13.282 2.1769 12.988 2.45195C12.9822 2.45811 12.9763 2.4642 12.9703 2.47021L1.97033 13.4702C1.96429 13.4762 1.95818 13.4822 1.952 13.4879Z" fill="black"/>
+</svg>

src/assets/img/icons/public-chat-white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="white"/>
+<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="white"/>
+</svg>

src/assets/img/icons/public-chat.svg

@@ -1,3 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10.7149C2 9.17362 3.16788 7.88312 4.70149 7.72976L8.33775 7.36613C10.7589 7.12402 13.1156 6.44212 15.292 5.35393L19.1056 3.44712C20.4354 2.78222 22 3.74921 22 5.23598V16.7638C22 18.2506 20.4354 19.2176 19.1056 18.5527L15.292 16.6459C14.6768 16.3383 14.0473 16.0632 13.406 15.8213C13.0859 15.7006 12.75 15.9414 12.75 16.2836V18.5C12.75 19.7426 11.7426 20.75 10.5 20.75H10C7.92893 20.75 6.25 19.0711 6.25 17V14.8774C6.25 14.6205 6.05535 14.4054 5.79975 14.3799L4.70149 14.2701C3.16789 14.1167 2 12.8262 2 11.2849V10.7149ZM20.5 5.23598V16.7638C20.5 17.1355 20.1088 17.3773 19.7764 17.2111L15.9628 15.3042C13.6232 14.1345 11.0898 13.4014 8.48701 13.1411L4.85075 12.7775C4.08394 12.7008 3.5 12.0556 3.5 11.2849V10.7149C3.5 9.94424 4.08394 9.299 4.85074 9.22232L8.48701 8.85869C11.0898 8.59841 13.6232 7.86537 15.9628 6.69558L19.7764 4.78877C20.1088 4.62254 20.5 4.86429 20.5 5.23598ZM8.29975 14.6299C8.00541 14.6005 7.75 14.8316 7.75 15.1274V17C7.75 18.2426 8.75736 19.25 10 19.25H10.5C10.9142 19.25 11.25 18.9142 11.25 18.5V15.5339C11.25 15.3049 11.0947 15.1046 10.8717 15.0528C10.0384 14.8593 9.19211 14.7191 8.33775 14.6337L8.29975 14.6299Z" fill="black"/>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="black"/>
+<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="black"/>
 </svg>