WIP SAVEPOINT

feat(sandbox): introduce first part of profile view for reference app
feat(Components): introduce StatusListSectionHeadline
2021-06-18 13:51:50 +02:00 · 2021-06-18 13:51:33 +02:00 · 2021-06-18 12:12:04 +02:00 · 2021-06-18 12:11:50 +02:00 · 2021-06-16 11:27:31 +02:00 · 2021-06-16 11:24:18 +02:00
116 changed files with 4759 additions and 516 deletions
@@ -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.
@@ -42,8 +43,7 @@ To run the sandbox from within a command line interface, run the following comma
 ```
 $ git clone https://github.com/status-im/StatusQ
 $ cd StatusQ/sandbox
-$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-$ make
+$ ./scripts/build
 ```

 Once that is done, the sandbox can be started with the generated executable:
@@ -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
@@ -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
+    }
 }
@@ -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"
+                }
+            ]
+        }
    }
 }

@@ -10,6 +10,103 @@ GridLayout {
    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
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category"
+        opened: false
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (opened)"
+        opened: true
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (no buttons)"
+        opened: true
+    }
+
+    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"
    }
@@ -126,4 +223,18 @@ GridLayout {
            }
        ]
    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+    }
+
+    StatusDescriptionListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        tooltip.text: "Tooltip"
+        icon.name: "info"
+        iconButton.onClicked: tooltip.visible = !tooltip.visible
+    }
+
 }
@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusChatInfoToolBar {
+        chatInfoButton.title: "Cryptokitties"        
+        chatInfoButton.subTitle: "128 Members"
+        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.icon.color: Theme.palette.miscColor6
+
+        popupMenu: StatusPopupMenu {
+
+            StatusMenuItem {
+                text: "Create channel"
+                icon.name: "channel"
+            }
+
+            StatusMenuItem {
+                text: "Create category"
+                icon.name: "channel-category"
+            }
+
+            StatusMenuSeparator {}
+
+            StatusMenuItem {
+                text: "Invite people"
+                icon.name: "share-ios"
+            }
+        }
+    }
+}
@@ -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"
+            }
+        }
+    }
+}
@@ -0,0 +1,46 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+Item {
+    id: themeSwitchWrapper
+    signal checkedChanged()
+
+    width: themeSwitch.width
+    height: themeSwitch.height
+
+    MouseArea {
+        id: sensor
+        hoverEnabled: true
+        anchors.fill: parent
+
+        Row {
+            id: themeSwitch
+            spacing: 2
+
+            Text {
+                text: "🌤"
+                font.pixelSize: 15
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            StatusSwitch {
+                onCheckedChanged: themeSwitchWrapper.checkedChanged()
+
+                StatusToolTip {
+                    text: "Toggle Theme"
+                    visible: sensor.containsMouse
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: themeSwitchWrapper.y + 16
+                }
+            }
+
+            Text {
+                text: "🌙"
+                font.pixelSize: 15
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<manifest package="im.statusq" xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="0.1" android:versionCode="0100" android:installLocation="auto">
+    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="29"/>
+
+    <!-- The following comment will be replaced upon deployment with default permissions based on the dependencies of the application.
+         Remove the comment if you do not require these default permissions. -->
+    <!-- %%INSERT_PERMISSIONS -->
+
+    <!-- The following comment will be replaced upon deployment with default features based on the dependencies of the application.
+         Remove the comment if you do not require these default features. -->
+    <!-- %%INSERT_FEATURES -->
+
+    <supports-screens android:largeScreens="true" android:normalScreens="true" android:anyDensity="true" android:smallScreens="true"/>
+
+    <application android:hardwareAccelerated="true" android:name="org.qtproject.qt5.android.bindings.QtApplication" android:label="-- %%INSERT_APP_NAME%% --">
+        <activity android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density" android:name="org.qtproject.qt5.android.bindings.QtActivity" android:label="-- %%INSERT_APP_NAME%% --" android:screenOrientation="unspecified" android:launchMode="singleTop">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+            <!-- Application arguments -->
+            <!-- meta-data android:name="android.app.arguments" android:value="arg1 arg2 arg3"/ -->
+            <!-- Application arguments -->
+            <meta-data android:name="android.app.lib_name" android:value="-- %%INSERT_APP_LIB_NAME%% --"/>
+            <meta-data android:name="android.app.qt_sources_resource_id" android:resource="@array/qt_sources"/>
+            <meta-data android:name="android.app.repository" android:value="default"/>
+            <meta-data android:name="android.app.qt_libs_resource_id" android:resource="@array/qt_libs"/>
+            <meta-data android:name="android.app.bundled_libs_resource_id" android:resource="@array/bundled_libs"/>
+            <!-- Deploy Qt libs as part of package -->
+            <meta-data android:name="android.app.bundle_local_qt_libs" android:value="-- %%BUNDLE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.bundled_in_lib_resource_id" android:resource="@array/bundled_in_lib"/>
+            <meta-data android:name="android.app.bundled_in_assets_resource_id" android:resource="@array/bundled_in_assets"/>
+            <!-- Run with local libs -->
+            <meta-data android:name="android.app.use_local_qt_libs" android:value="-- %%USE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.libs_prefix" android:value="/data/local/tmp/qt/"/>
+            <meta-data android:name="android.app.load_local_libs" android:value="-- %%INSERT_LOCAL_LIBS%% --"/>
+            <meta-data android:name="android.app.load_local_jars" android:value="-- %%INSERT_LOCAL_JARS%% --"/>
+            <meta-data android:name="android.app.static_init_classes" android:value="-- %%INSERT_INIT_CLASSES%% --"/>
+            <!-- Used to specify custom system library path to run with local system libs -->
+            <!-- <meta-data android:name="android.app.system_libs_prefix" android:value="/system/lib/"/> -->
+            <!--  Messages maps -->
+            <meta-data android:value="@string/ministro_not_found_msg" android:name="android.app.ministro_not_found_msg"/>
+            <meta-data android:value="@string/ministro_needed_msg" android:name="android.app.ministro_needed_msg"/>
+            <meta-data android:value="@string/fatal_error_msg" android:name="android.app.fatal_error_msg"/>
+            <meta-data android:value="@string/unsupported_android_version" android:name="android.app.unsupported_android_version"/>
+            <!--  Messages maps -->
+            <!-- Splash screen -->
+            <!-- Orientation-specific (portrait/landscape) data is checked first. If not available for current orientation,
+                 then android.app.splash_screen_drawable. For best results, use together with splash_screen_sticky and
+                 use hideSplashScreen() with a fade-out animation from Qt Android Extras to hide the splash screen when you
+                 are done populating your window with content. -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_portrait" android:resource="@drawable/logo_portrait" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_landscape" android:resource="@drawable/logo_landscape" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/logo"/ -->
+            <!-- meta-data android:name="android.app.splash_screen_sticky" android:value="true"/ -->
+            <!-- Splash screen -->
+            <!-- Background running -->
+            <!-- Warning: changing this value to true may cause unexpected crashes if the
+                          application still try to draw after
+                          "applicationStateChanged(Qt::ApplicationSuspended)"
+                          signal is sent! -->
+            <meta-data android:name="android.app.background_running" android:value="false"/>
+            <!-- Background running -->
+            <!-- auto screen scale factor -->
+            <meta-data android:name="android.app.auto_screen_scale_factor" android:value="false"/>
+            <!-- auto screen scale factor -->
+            <!-- extract android style -->
+            <!-- available android:values :
+                * default - In most cases this will be the same as "full", but it can also be something else if needed, e.g., for compatibility reasons
+                * full - useful QWidget & Quick Controls 1 apps
+                * minimal - useful for Quick Controls 2 apps, it is much faster than "full"
+                * none - useful for apps that don't use any of the above Qt modules
+                -->
+            <meta-data android:name="android.app.extract_android_style" android:value="default"/>
+            <!-- extract android style -->
+        </activity>
+        <!-- For adding service(s) please check: https://wiki.qt.io/AndroidServices -->
+    </application>
+
+</manifest>
@@ -0,0 +1,57 @@
+buildscript {
+    repositories {
+        google()
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:4.0.2'
+    }
+}
+
+repositories {
+    google()
+    jcenter()
+}
+
+apply plugin: 'com.android.application'
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
+}
+
+android {
+    /*******************************************************
+     * The following variables:
+     * - androidBuildToolsVersion,
+     * - androidCompileSdkVersion
+     * - qt5AndroidDir - holds the path to qt android files
+     *                   needed to build any Qt application
+     *                   on Android.
+     *
+     * are defined in gradle.properties file. This file is
+     * updated by QtCreator and androiddeployqt tools.
+     * Changing them manually might break the compilation!
+     *******************************************************/
+
+    compileSdkVersion androidCompileSdkVersion.toInteger()
+
+    buildToolsVersion androidBuildToolsVersion
+
+    sourceSets {
+        main {
+            manifest.srcFile 'AndroidManifest.xml'
+            java.srcDirs = [qt5AndroidDir + '/src', 'src', 'java']
+            aidl.srcDirs = [qt5AndroidDir + '/src', 'src', 'aidl']
+            res.srcDirs = [qt5AndroidDir + '/res', 'res']
+            resources.srcDirs = ['src']
+            renderscript.srcDirs = ['src']
+            assets.srcDirs = ['assets']
+            jniLibs.srcDirs = ['libs']
+       }
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
@@ -0,0 +1,25 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <array name="qt_sources">
+        <item>https://download.qt.io/ministro/android/qt5/qt-5.9</item>
+    </array>
+
+    <!-- The following is handled automatically by the deployment tool. It should
+         not be edited manually. -->
+
+    <array name="bundled_libs">
+        <!-- %%INSERT_EXTRA_LIBS%% -->
+    </array>
+
+     <array name="qt_libs">
+         <!-- %%INSERT_QT_LIBS%% -->
+     </array>
+
+    <array name="bundled_in_lib">
+        <!-- %%INSERT_BUNDLED_IN_LIB%% -->
+    </array>
+    <array name="bundled_in_assets">
+        <!-- %%INSERT_BUNDLED_IN_ASSETS%% -->
+    </array>
+
+</resources>
@@ -1,154 +1,204 @@
 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
+import StatusQ.Platform 0.1

 StatusWindow {
    id: rootWindow
-    width: 1024
-    height: 840
+    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
+                                                                  :  1024
+    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.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: listItemsTab
-            checkable: true
-            text: "List Items"
-        }
-        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 listItemsTab:
-                        return listItemsComponent;
-                    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
+
+        rootWindow.updatePosition();
+    }
+
+    StatusAppLayout {
+        id: appLayout
+        anchors.fill: parent
+
+        appNavBar: StatusAppNavBar {
+            height: rootWindow.height
+
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "refresh"
+                tooltip.text: "Reload App"
+                onClicked: app.restartQml()
+            }
+
+            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
+
+                        StatusListSectionHeadline { text: "StatusQ.Core" }
+                        StatusNavigationListItem { 
+                            title: "Icons" 
+                            selected: page.sourceComponent == iconsComponent
+                            onClicked: page.sourceComponent = iconsComponent
+                        }
+
+                        StatusListSectionHeadline { text: "StatusQ.Layout" }
+                        StatusNavigationListItem { 
+                            title: "Layouts" 
+                            selected: page.sourceComponent == layoutComponent
+                            onClicked: page.sourceComponent = layoutComponent
+                        }
+
+                        StatusListSectionHeadline { 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
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "List Items"
+                            selected: page.sourceComponent == listItemsComponent
+                            onClicked: page.sourceComponent = listItemsComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusChatInfoToolBar"
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "Others"
+                            selected: page.sourceComponent == othersComponent
+                            onClicked: page.sourceComponent = othersComponent
+                        }
+                        StatusListSectionHeadline { 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: {
@@ -174,44 +224,82 @@ 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 {
-            anchors.centerIn: parent
-        }
+        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: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    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"
+            }
+        }
+    }
+
+    StatusMacTrafficLights {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: 13
+
+        onClose: {
+            rootWindow.close()
+        }
+
+        onMinimised: {
+            rootWindow.showMinimized()
+        }
+
+        onMaximized: {
+            rootWindow.toggleFullScreen()
        }
    }
 }
@@ -5,5 +5,11 @@
        <file>Icons.qml</file>
        <file>Others.qml</file>
        <file>Buttons.qml</file>
+        <file>DemoApp.qml</file>
+        <file>ListItems.qml</file>
+        <file>StatusChatInfoToolBarPage.qml</file>
+        <file>StatusPopupMenuPage.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>Layout.qml</file>
    </qresource>
 </RCC>
@@ -1,6 +1,9 @@
-QT += quick
+QT += quick svg
+
+CONFIG += c++11 warn_on
+
+DEFINES += QT_DEPRECATED_WARNINGS

-CONFIG += c++11

 # You can make your code fail to compile if it uses deprecated APIs.
 # In order to do so, uncomment the following line.
@@ -11,20 +14,39 @@ SOURCES += \
        main.cpp \
        sandboxapp.cpp

-OBJECTIVE_SOURCES += \
-    statuswindow_mac.mm
+!macx {
+    SOURCES += statuswindow.cpp
+}

-RESOURCES += qml.qrc
+TARGET = sandboxapp
+
+macx {
+    CONFIG -= app_bundle
+    OBJECTIVE_SOURCES += \
+        statuswindow_mac.mm
+}
+
+ios {
+   LIBS += -framework UIKit
+
+   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
+   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
+   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
+   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
+   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
+
+}
+
+RESOURCES += qml.qrc \
+            $$PWD/../statusq.qrc

 DESTDIR = $$PWD/bin
-CONFIG -= app_bundle

 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
-
-OTHER_FILES += $$files($$PWD/../src/*, true)
+#OTHER_FILES += $$files($$PWD/../src/*, true)

 HEADERS += \
    handler.h \
@@ -32,9 +54,28 @@ HEADERS += \
    statuswindow.h

 DISTFILES += \
+    ../src/StatusQ/Components/StatusMacWindowButtons.qml \
    ../src/StatusQ/Controls/StatusBaseButton.qml \
    ../src/StatusQ/Controls/StatusButton.qml \
    ../src/StatusQ/Controls/StatusCheckBox.qml \
    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
    ../src/StatusQ/Controls/StatusRadioButton.qml \
+    ../src/StatusQ/Controls/StatusSlider.qml \
    ../src/StatusQ/Controls/StatusSwitch.qml
+
+android {
+
+DISTFILES += \
+    android/AndroidManifest.xml \
+    android/build.gradle \
+    android/gradle/wrapper/gradle-wrapper.jar \
+    android/gradle/wrapper/gradle-wrapper.properties \
+    android/gradlew \
+    android/gradlew.bat \
+    android/res/values/libs.xml
+
+    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
+        ANDROID_PACKAGE_SOURCE_DIR = \
+            $$PWD/android
+    }
+}
@@ -17,11 +17,20 @@ void SandboxApp::startEngine()
 {
    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");

+#ifdef QT_DEBUG
    const QUrl url(applicationDirPath() + "/../main.qml");
+#else
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+#endif

    m_engine.rootContext()->setContextProperty("app", m_handler);

+
+#ifdef QT_DEBUG
    m_engine.addImportPath(applicationDirPath() + "/../../src");
+#else
+    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+#endif
    qDebug() << m_engine.importPathList();
    QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,
        this, [url](QObject *obj, const QUrl &objUrl) {
@@ -36,8 +45,8 @@ void SandboxApp::restartEngine()
    const QUrl url(applicationDirPath() + "/../main.qml");
    QWindow *rootWindow = qobject_cast<QWindow*>(m_engine.rootObjects().at(0));
    if (rootWindow) {
-
        rootWindow->close();
+        rootWindow->deleteLater();
    }
    m_engine.clearComponentCache();
    m_engine.load(url);
@@ -0,0 +1,4 @@
+make clean
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+
@@ -0,0 +1,25 @@
+#include "statuswindow.h"
+
+void StatusWindow::toggleFullScreen()
+{
+    if (m_isFullScreen) {
+        showNormal();
+    } else {
+        showFullScreen();
+    }
+}
+
+bool StatusWindow::isFullScreen() const
+{
+    return m_isFullScreen;
+}
+
+void StatusWindow::removeTitleBar()
+{
+
+}
+
+void StatusWindow::showTitleBar()
+{
+
+}
@@ -2,20 +2,63 @@
 #define STATUSWINDOW_H

 #include <QQuickWindow>
+#include <QScreen>

 class StatusWindow: public QQuickWindow
 {
    Q_OBJECT

+    Q_PROPERTY(bool isFullScreen READ isFullScreen NOTIFY isFullScreenChanged)
+
 public:
+    struct EventCallbacks {
+        std::function<void()> onResize;
+        std::function<void()> willExitFullScreen;
+        std::function<void()> didExitFullScreen;
+    };
+
    explicit StatusWindow(QWindow *parent = nullptr)
-        : QQuickWindow(parent)
+        : QQuickWindow(parent),
+          m_isFullScreen(false)
    {
-        removeTitleBar(winId());
+        removeTitleBar();
+
+        connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
+            if (windowState == Qt::WindowNoState) {
+                removeTitleBar();
+                m_isFullScreen = false;
+                emit isFullScreenChanged();
+            } else if (windowState == Qt::WindowFullScreen) {
+                m_isFullScreen = true;
+                emit isFullScreenChanged();
+                showTitleBar();
+            }
+        });
+
    }

+    Q_INVOKABLE void toggleFullScreen();
+
+    Q_INVOKABLE void updatePosition() {
+        auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2, screen()->geometry().center().y() - geometry().height() / 2);
+        if (point != this->position()) {
+            this->setPosition(point);
+        }
+    }
+
+    bool isFullScreen() const;
+
+signals:
+    void isFullScreenChanged();
+
 private:
-    void removeTitleBar(WId wid);
+    void removeTitleBar();
+    void showTitleBar();
+    void initCallbacks();
+
+private:
+    EventCallbacks m_callbacks;
+    bool m_isFullScreen;
 };

 #endif // STATUSWINDOW_H
@@ -2,17 +2,52 @@

 #include <QColor>

+#include <QDebug>
+
 #include <Foundation/Foundation.h>
 #include <AppKit/NSView.h>
 #include <AppKit/NSWindow.h>
 #include <AppKit/NSColor.h>
+#include <AppKit/NSToolbar.h>
+#include <AppKit/NSButton.h>
+#include <AppKit/AppKit.h>

-void StatusWindow::removeTitleBar(WId wid)
+void StatusWindow::toggleFullScreen()
 {
-    NSView *nsView = reinterpret_cast<NSView*>(wid);
+    if (m_isFullScreen) {
+        showNormal();
+    } else {
+        showFullScreen();
+    }
+}
+
+bool StatusWindow::isFullScreen() const
+{
+    return m_isFullScreen;
+}
+
+void StatusWindow::removeTitleBar()
+{
+    NSView *nsView = reinterpret_cast<NSView*>(this->winId());
    NSWindow *window = [nsView window];

    window.titlebarAppearsTransparent = true;
    window.titleVisibility = NSWindowTitleHidden;
    window.styleMask |= NSWindowStyleMaskFullSizeContentView;
+    NSButton* close = [window standardWindowButton:NSWindowCloseButton];
+    NSView* titleBarContainerView = close.superview.superview;
+    [titleBarContainerView setHidden:YES];
+}
+
+void StatusWindow::showTitleBar()
+{
+    NSView *nsView = reinterpret_cast<NSView*>(this->winId());
+    NSWindow *window = [nsView window];
+
+    window.titlebarAppearsTransparent = true;
+    window.titleVisibility = NSWindowTitleHidden;
+    window.styleMask |= NSWindowStyleMaskFullSizeContentView;
+    NSButton* close = [window standardWindowButton:NSWindowCloseButton];
+    NSView* titleBarContainerView = close.superview.superview;
+    [titleBarContainerView setHidden:NO];
 }
@@ -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: {
@@ -0,0 +1,105 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatInfoToolBar
+
+    implicitWidth: 288
+    implicitHeight: 56
+
+    property alias chatInfoButton: statusChatInfoButton
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal addButtonClicked(var mouse)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        type: StatusChatInfoButton.Type.OneToOneChat
+        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
+    }
+
+    StatusRoundButton {
+        id: menuButton
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        visible: popupMenuSlot.active
+        width: 32
+        height: 32
+
+        type: StatusRoundButton.Type.Secondary
+        icon.name: "add"
+        state: "default"
+
+        states: [
+            State {
+                name: "default"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 45
+                    highlighted: true
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "default"
+                to: "pressed"
+
+                RotationAnimation {
+                    duration: 150
+                    direction: RotationAnimation.Clockwise
+                    easing.type: Easing.InCubic
+                }
+            },
+            Transition {
+								from: "pressed"
+								to: "default"
+								RotationAnimation {
+										duration: 150
+										direction: RotationAnimation.Counterclockwise
+										easing.type: Easing.OutCubic
+								}
+        		}
+        ]
+
+        onClicked: {
+            statusChatInfoToolBar.addButtonClicked(mouse)
+            menuButton.state = "pressed"
+            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+        }
+
+        Loader {
+            id: popupMenuSlot
+            active: !!statusChatInfoToolBar.popupMenu
+            onLoaded: {
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.state = "default"
+                }
+            }
+        }
+    }
+
+}
@@ -0,0 +1,52 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+ScrollView {
+    id: statusChatList
+    contentHeight: items.height + 8
+    clip: true
+
+    property string categoryId: ""
+    property string selectedChatId: ""
+    property alias chatListItems: statusChatListItems
+
+    property var filterFn
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+
+    Column {
+        id: items
+        spacing: 4
+        Repeater {
+            id: statusChatListItems
+            delegate: StatusChatListItem {
+                chatId: model.chatId
+                name: model.name
+                type: model.chatType
+                muted: !!model.muted
+                hasUnreadMessages: !!model.hasUnreadMessages
+                hasMention: !!model.hasMention
+                badge.value: model.unreadMessagesCount || 0
+                selected: model.chatId === statusChatList.selectedChatId
+
+                icon.color: model.iconColor || ""
+                image.source: model.identicon || ""
+
+                onClicked: statusChatList.chatItemSelected(model.chatId)
+                onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+                visible: {
+                    if (!!statusChatList.filterFn) {
+                        return statusChatList.filterFn(model, statusChatList.categoryId)
+                    }
+                    return true
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,88 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+ScrollView {
+    id: statusChatListAndCategories
+
+    clip: true
+    contentHeight: chatListsAndCategories.height + 8
+
+    property string selectedChatId: ""
+    property bool showCategoryActionButtons: false
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: statusChatListCategories
+    property alias sensor: sensor
+
+    property Component categoryPopupMenu
+    property Component popupMenu
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+    signal categoryAddButtonClicked(string id)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.top: parent.top
+        width: parent.width
+        height: statusChatListAndCategories.height
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
+                return
+            }
+        }
+
+        Column {
+            id: chatListsAndCategories
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 4
+
+            StatusChatList {
+                id: statusChatList
+                anchors.horizontalCenter: parent.horizontalCenter
+                visible: !!chatListItems.model && chatListItems.model.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                filterFn: function (model) {
+                    return !!!model.categoryId
+                }
+            }
+
+            Repeater {
+                id: statusChatListCategories
+                visible: !!model && model.count > 0
+
+                delegate: StatusChatListCategory {
+                    categoryId: model.categoryId
+                    name: model.name
+                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+
+                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
+                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+
+                    popupMenu: statusChatListAndCategories.categoryPopupMenu
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}
@@ -0,0 +1,80 @@
+import QtQuick 2.13
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+Column {
+    id: statusChatListCategory
+
+    spacing: 0
+
+    property string categoryId: ""
+    property string name: ""
+    property bool opened: true
+
+    property alias showActionButtons: statusChatListCategoryItem.showActionButtons
+    property alias addButton: statusChatListCategoryItem.addButton
+    property alias menuButton: statusChatListCategoryItem.menuButton
+    property alias toggleButton: statusChatListCategoryItem.toggleButton
+    property alias chatList: statusChatList
+
+    property Component popupMenu
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatListCategoryItem {
+        id: statusChatListCategoryItem
+        title: statusChatListCategory.name
+        opened: statusChatListCategory.opened
+
+        showMenuButton: !!statusChatListCategory.popupMenu
+
+        onClicked: {
+            if (mouse.button === Qt.RightButton) {
+                highlighted = true
+                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
+                return
+            }
+            statusChatListCategory.opened = !opened
+        }
+        onToggleButtonClicked: statusChatListCategory.opened = !opened
+        onMenuButtonClicked: {
+            highlighted = true
+            menuButton.highlighted = true
+            let p = menuButton.mapToItem(statusChatListCategoryItem, menuButton.x, menuButton.y)
+            let menuWidth = popupMenuSlot.item.width
+            popupMenuSlot.item.popup(p.x - menuWidth, p.y + menuButton.height + 4)
+        }
+    }
+
+    StatusChatList {
+        id: statusChatList
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: statusChatListCategory.opened
+        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListCategory.popupMenu
+        onLoaded: {
+            popupMenuSlot.item.openHandler = function () {
+                if (popupMenuSlot.item.hasOwnProperty('categoryId')) {
+                    popupMenuSlot.item.categoryId = statusChatListCategory.categoryId
+                }
+            }
+            popupMenuSlot.item.closeHandler = function () {
+                statusChatListCategoryItem.highlighted = false
+                statusChatListCategoryItem.menuButton.highlighted = false
+            }
+        }
+    }
+}
+
@@ -0,0 +1,70 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusChatListCategoryItem
+
+    implicitWidth: 288
+    implicitHeight: 28
+
+    leftPadding: 8
+    rightPadding: 8
+
+    property bool opened: true
+    property bool highlighted: false
+    property bool showActionButtons: false
+    property bool showMenuButton: showActionButtons
+    property bool showAddButton: showActionButtons
+    property alias addButton: addButton
+    property alias menuButton: menuButton
+    property alias toggleButton: toggleButton
+
+    signal clicked(var mouse)
+    signal addButtonClicked(var mouse)
+    signal menuButtonClicked(var mouse)
+    signal toggleButtonClicked(var mouse)
+
+    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
+
+    sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
+
+    statusListItemTitle.color: Theme.palette.directColor4
+    statusListItemTitle.font.weight: Font.Medium
+
+    statusListItemComponentsSlot.spacing: 1
+
+    components: [
+        StatusChatListCategoryItemButton {
+            id: addButton
+            icon.name: "add"
+            icon.width: 20
+            visible: statusChatListCategoryItem.showAddButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
+            onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
+            tooltip.text: "Add channel inside category"
+        },
+        StatusChatListCategoryItemButton {
+            id: menuButton
+            icon.name: "more"
+            icon.width: 21
+            visible: statusChatListCategoryItem.showMenuButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
+            onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
+            tooltip.text: "More"
+        },
+        StatusChatListCategoryItemButton {
+            id: toggleButton
+            icon.name: "chevron-down"
+            icon.width: 18
+            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
+            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
+        }
+    ]
+}
+
@@ -0,0 +1,190 @@
+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 chatId: ""
+    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" ? "tiny/public-chat" : "tiny/public-chat-white"
+                        break;
+                    case StatusChatListItem.Type.GroupChat:
+                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                        break;
+                    case StatusChatListItem.Type.CommunityChat:
+                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                        break;
+                    default:
+                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/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
+            font.pixelSize: 15
+        }
+
+        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" ? "tiny/muted" : "tiny/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
+            }
+        }
+    }
+}
@@ -0,0 +1,117 @@
+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 alias menuButton: menuButton
+    property alias notificationButton: notificationButton
+    property int notificationCount: 0
+
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal menuButtonClicked()
+    signal notificationButtonClicked()
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        onClicked: statusChatToolBar.chatInfoButtonClicked()
+    }
+
+    Row {
+        id: actionButtons
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 8
+
+        StatusFlatRoundButton {
+            id: menuButton
+            width: 32
+            height: 32
+            icon.name: "more"
+            type: StatusFlatRoundButton.Type.Secondary
+            visible: !!statusChatToolBar.popupMenu
+
+            onClicked: {
+                statusChatToolBar.menuButtonClicked()
+                highlighted = true
+                let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
+                popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
+            }
+        }
+
+        Rectangle {
+            height: 24
+            width: 1
+            color: Theme.palette.directColor7
+            anchors.verticalCenter: parent.verticalCenter
+            visible: menuButton.visible && notificationButton.visible
+        }
+
+        StatusFlatRoundButton {
+            id: notificationButton
+            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
+            }
+        }
+
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatToolBar.popupMenu
+        onLoaded: {
+            popupMenuSlot.item.closeHandler = function () {
+                menuButton.highlighted = false
+            }
+        }
+    }
+}
+
@@ -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
+        }
+    }
+}
@@ -15,13 +15,28 @@ Rectangle {

    property string title: ""
    property string subTitle: ""
+    property real leftPadding: 16
+    property real rightPadding: 16
    property StatusIconSettings icon: StatusIconSettings {
        height: 20
        width: 20
+        background: StatusIconBackgroundSettings {
+            width: 40
+            height: 40
+            color: Theme.palette.primaryColor3
+        }
+    }
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
    }
-    property StatusImageSettings image: StatusImageSettings {}
    property string label: ""

+    property alias sensor: sensor
+    property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemSubTitle: statusListItemSubTitle
+    property alias statusListItemComponentsSlot: statusListItemComponentsSlot
+
    property list<Item> components

    onComponentsChanged: {
@@ -36,13 +51,14 @@ Rectangle {
        id: sensor

        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true

        Loader {
            id: iconOrImage
            anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: statusListItem.leftPadding
            anchors.verticalCenter: parent.verticalCenter
            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
@@ -51,7 +67,12 @@ Rectangle {
        Component {
            id: statusRoundedIcon
            StatusRoundIcon {
-                icon: statusListItem.icon
+                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
            }
        }

@@ -59,12 +80,14 @@ Rectangle {
            id: statusRoundedImage
            StatusRoundedImage {
                image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
            }
        }

        Item {
            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: statusListItem.leftPadding
            anchors.verticalCenter: parent.verticalCenter
            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)

@@ -101,7 +124,7 @@ Rectangle {
        Row {
            id: statusListItemComponentsSlot
            anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10
        }
@@ -0,0 +1,21 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    implicitHeight: 34
+    implicitWidth: 176
+
+    property alias text: label.text
+
+    StatusBaseText {
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        anchors.leftMargin: 16
+        id: label
+        font.pixelSize: 15
+        color: Theme.palette.baseColor1
+    }
+}
@@ -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
+        }
+    ]
+}
@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+
@@ -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
@@ -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
+
+        }
+    }
 }
@@ -1,8 +1,20 @@
 module StatusQ.Components

 StatusBadge 0.1 StatusBadge.qml
+StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
+StatusChatList 0.1 StatusChatList.qml
+StatusChatListItem 0.1 StatusChatListItem.qml
+StatusChatListCategory 0.1 StatusChatListCategory.qml
+StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
+StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
+StatusChatToolBar 0.1 StatusChatToolBar.qml
+StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
+StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusNavigationListItem 0.1 StatusNavigationListItem.qml
+StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
+StatusMacWindowButtons 0.1 StatusMacWindowButtons.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
@@ -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 : "transparent"
+
+    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 "tiny/public-chat"
+                            break;
+                        case StatusChatInfoButton.Type.GroupChat:
+                            return "tiny/group"
+                            break;
+                        case StatusChatInfoButton.Type.CommunityChat:
+                            return "tiny/channel"
+                            break;
+                        default:
+                            return "tiny/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: "tiny/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)
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,27 @@
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusFlatRoundButton {
+    id: statusChatListCategoryItemButton
+
+    height: 22
+    width: 22
+    radius: 4
+
+    property bool highlighted: false
+    property alias tooltip: statusToolTip
+
+    type: StatusFlatRoundButton.Type.Secondary
+    icon.width: 20
+    icon.color: Theme.palette.directColor4
+
+    color: hovered || highlighted ? 
+        Theme.palette.statusChatListCategoryItem.buttonHoverBackgroundColor : 
+        "transparent"
+
+    StatusToolTip {
+        id: statusToolTip
+        visible: !!text && parent.hovered
+    }
+}
+
@@ -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
 }
@@ -7,30 +7,12 @@ import StatusQ.Components 0.1
 Rectangle {
    id: statusFlatRoundButton

-    property alias icon: iconSettings.name
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
+        rotation: 0

-    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 +31,26 @@ Rectangle {
        }
    }

+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property bool highlighted: 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: backgroundSettings

@@ -63,9 +65,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;
            }
        }

@@ -84,7 +86,7 @@ Rectangle {

    color: {
        if (statusFlatRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
                                        : backgroundSettings.color
        } else {
            return backgroundSettings.disabledColor
@@ -105,14 +107,17 @@ Rectangle {
            anchors.centerIn: parent
            visible: !loading

-            width: statusFlatRoundButton.width -  20
-            height: statusFlatRoundButton.height - 20
+            icon: statusFlatRoundButton.icon.name
+            rotation: statusFlatRoundButton.icon.rotation
+
+            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 +127,9 @@ Rectangle {
            sourceComponent: StatusLoadingIndicator {
                color: {
                    if (statusFlatRoundButton.enabled) {
-                        return iconSettings.color
+                        return statusFlatRoundButton.icon.color
                    } else {
-                        return iconSettings.disabledColor
+                        return statusFlatRoundButton.icon.disabledColor
                    }
                }
            } // Indicator
@@ -9,6 +9,7 @@ TabButton {
    id: statusIconTabButton

    property string name: ""
+    property bool highlighted: false

    implicitWidth: 40
    implicitHeight: 40
@@ -34,7 +35,7 @@ TabButton {
                icon: statusIconTabButton.icon.name
                height: statusIconTabButton.icon.height
                width: statusIconTabButton.icon.width
-                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
            }
        }

@@ -45,31 +46,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
                }
            }
        }
@@ -81,13 +68,13 @@ TabButton {
                height: 26
                letterSize: 15
                name: statusIconTabButton.name
-                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
            }
        }
    }

    background: Rectangle {
-        color: hovered || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
+        color: hovered || highlighted || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
        border.color: Theme.palette.primaryColor1
        border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0
        radius: statusIconTabButton.width / 2
@@ -1,13 +1,22 @@
 import QtQuick 2.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
    
 StatusIconTabButton {
    id: statusNavBarTabButton 
    property alias badge: statusBadge
    property alias tooltip: statusTooltip
+    property Component popupMenu
+
    signal clicked(var mouse)

+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
    StatusToolTip {
        id: statusTooltip
        visible: statusNavBarTabButton.hovered && !!statusTooltip.text
@@ -38,10 +47,27 @@ StatusIconTabButton {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: function (mouse) {
-            statusNavBarTabButton.checked = !statusNavBarTabButton.checked
+        onClicked: {
+            if (mouse.button === Qt.RightButton) {
+                if (popupMenuSlot.active) {
+                    statusNavBarTabButton.highlighted = true
+                    let btnWidth = statusNavBarTabButton.width
+                    popupMenuSlot.item.popup(parent.x + btnWidth + 4, -2)
+                    return
+                }
+            }
            statusNavBarTabButton.clicked(mouse)
        }
    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusNavBarTabButton.popupMenu
+        onLoaded: {
+            popupMenuSlot.item.closeHandler = function () {
+                statusNavBarTabButton.highlighted = false
+            }
+        }
+    }
 }

@@ -7,30 +7,12 @@ import StatusQ.Components 0.1
 Rectangle {
    id: statusRoundButton

-    property alias icon: iconSettings.name
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
+        rotation: 0

-    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 +31,28 @@ Rectangle {
        }
    }

+    property bool loading: false
+
+    property alias hovered: sensor.containsMouse
+
+    property bool highlighted: 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: backgroundSettings

@@ -86,7 +90,7 @@ Rectangle {

    color: {
        if (statusRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
                                        : backgroundSettings.color
        } else {
            return backgroundSettings.disabledColor
@@ -107,14 +111,17 @@ Rectangle {
            anchors.centerIn: parent
            visible: !loading

-            width: statusRoundButton.width -  20
-            height: statusRoundButton.height - 20
+            icon: statusRoundButton.icon.name
+            rotation: statusRoundButton.icon.rotation
+
+            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 +131,9 @@ Rectangle {
            sourceComponent: StatusLoadingIndicator {
                color: {
                    if (statusRoundButton.enabled) {
-                        return iconSettings.color
+                        return statusRoundButton.icon.color
                    } else {
-                        return iconSettings.disabledColor
+                        return statusRoundButton.icon.disabledColor
                    }
                }
            } // Indicator
@@ -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
+        }
+    }
+}
@@ -1,5 +1,7 @@
 module StatusQ.Controls

+StatusChatInfoButton 0.1 StatusChatInfoButton.qml
+StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
@@ -11,3 +13,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
@@ -3,7 +3,7 @@ import QtGraphicalEffects 1.13

 Image {
    property string icon: ""
-    property string color: ""
+    property color color: "transparent"

    id: statusIcon
    width: 24
@@ -19,13 +19,12 @@ Image {
    }

    ColorOverlay {
-        visible: !!statusIcon.color
+        visible: !Qt.colorEqual(statusIcon.color, "transparent")
        anchors.fill: statusIcon
        source: statusIcon
        color: statusIcon.color
        antialiasing: true
        smooth: true
-        rotation: statusIcon.rotation
    }
 }

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconBackgroundSettings
+
+    property color color
+    property real width
+    property real height
+    property int radius
+}
+
@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import StatusQ.Core 0.1

 QtObject {
    id: statusIconSettings
@@ -8,4 +9,6 @@ QtObject {
    property real height
    property color color
    property url source
+    property int rotation
+    property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
 }
@@ -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,6 +121,11 @@ 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
    }
@@ -125,8 +134,34 @@ ThemePalette {
        property color backgroundColor: baseColor3
    }

+    property QtObject statusChatListItem: QtObject {
+        property color hoverBackgroundColor: directColor8
+        property color selectedBackgroundColor: directColor7
+    }
+
+    property QtObject statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor: 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
    }
 }

@@ -2,6 +2,8 @@ import QtQuick 2.13

 ThemePalette {

+    name: "light"
+
    property QtObject baseFont: FontLoader {
        source: "../../../assets/fonts/Inter/Inter-Regular.otf"
    }
@@ -117,16 +119,47 @@ 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 statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor: directColor8
+    }
+
+    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
    }
 }

@@ -4,6 +4,8 @@ QtObject {
    
    id: theme

+    property string name
+
    property FontLoader baseFont
    property FontLoader baseFontThin
    property FontLoader baseFontExtraLight
@@ -78,6 +80,11 @@ QtObject {
    property color miscColor10
    property color miscColor11

+    property QtObject statusAppLayout: QtObject {
+        property color backgroundColor
+        property color rightPanelBackgroundColor
+    }
+
    property QtObject statusAppNavBar: QtObject {
        property color backgroundColor
    }
@@ -86,8 +93,35 @@ QtObject {
        property color backgroundColor
    }

+    property QtObject statusChatListItem: QtObject {
+        property color hoverBackgroundColor
+        property color selectedBackgroundColor
+    }
+
+    property QtObject statusChatListCategoryItem: QtObject {
+        property color buttonHoverBackgroundColor
+    }
+
+    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) {
@@ -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

@@ -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
+        }
+    }
+}
@@ -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 {
@@ -78,7 +79,7 @@ Rectangle {
                bottomPadding = 16
                topPadding = 16
            } else {
-                height = navBarCommunityTabButtonsSlot.implicitHeight
+                height = navBarCommunityTabButtons.count > 0 ? navBarCommunityTabButtonsSlot.implicitHeight : 0
            }
        }

@@ -106,7 +107,7 @@ Rectangle {
        height: 1
        width: 30
        color: Theme.palette.directColor7
-        anchors.top: navBarCommunityTabButtons.model && navBarCommunityTabButtons.model.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
+        anchors.top: !!navBarCommunityTabButtons.model && navBarCommunityTabButtons.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
        anchors.topMargin: navBarScrollSection.height < navBarCommunityTabButtonsSlot.implicitHeight ? 0 : 16
        anchors.horizontalCenter: parent.horizontalCenter
        visible: navBarChatButton !== null && navBarTabButtons.length > 0
@@ -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
+        }
+    }
+}
@@ -1,5 +1,7 @@
 module StatusQ.Layout

+StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
+StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml


@@ -0,0 +1,115 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+MouseArea {
+    id: statusMacTrafficLights
+
+    signal close()
+    signal minimised()
+    signal maximized()
+
+    hoverEnabled: true
+
+    width: layout.implicitWidth
+    height: layout.implicitHeight
+
+    visible: Qt.platform.os === "osx" && !rootWindow.isFullScreen
+
+    readonly property color inactive: Theme.palette.name === "light" ? "#10000000"
+                                                                                      : "#10FFFFFF"
+    readonly property color inactiveBorder: Theme.palette.name === "light" ? "#10000000"
+                                                                                            : "#10FFFFFF"
+
+    Row {
+        id: layout
+        spacing: 8
+
+        Rectangle {
+            width: 12
+            height: 12
+            radius: width / 2
+            antialiasing: true
+
+            color: closeSensor.pressed ? "#B24F47" : (rootWindow.active || statusMacTrafficLights.containsMouse ? Qt.lighter("#E9685C", 1.07)
+                                                                        : inactive )
+            border.color:closeSensor.pressed ? "#943229" : (rootWindow.active ? "#D14C40"
+                                                                              : inactiveBorder)
+            border.width: Theme.palette.name === "light" ? 0.5 : 0
+
+            Image {
+                anchors.centerIn: parent
+                visible: statusMacTrafficLights.containsMouse
+                source: closeSensor.pressed ? "../../assets/img/icons/traffic_lights/close_pressed.png"
+                                            : "../../assets/img/icons/traffic_lights/close.png"
+                scale: 0.25
+            }
+
+
+            MouseArea {
+                id: closeSensor
+                anchors.fill: parent
+
+                onClicked: statusMacTrafficLights.close()
+            }
+        }
+
+        Rectangle {
+            width: 12
+            height: 12
+            radius: width / 2
+            antialiasing: true
+
+            color: miniSensor.pressed ? "#878E3B" :  (rootWindow.active || statusMacTrafficLights.containsMouse ? Qt.lighter("#EDB84C", 1.07)
+                                                                       : inactive)
+            border.color:miniSensor.pressed ? "#986E29" : (rootWindow.active ? "#D79F3D"
+                                                                             : inactiveBorder)
+            border.width: Theme.palette.name === "light" ? 0.5 : 0
+
+            Image {
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: -0.25
+                visible: statusMacTrafficLights.containsMouse
+                source: miniSensor.pressed ? "../../assets/img/icons/traffic_lights/minimise_pressed.png"
+                                           : "../../assets/img/icons/traffic_lights/minimise.png"
+                scale: 0.27
+            }
+
+            MouseArea {
+                id: miniSensor
+                anchors.fill: parent
+
+                onClicked: statusMacTrafficLights.minimised()
+            }
+        }
+
+        Rectangle {
+            width: 12
+            height: 12
+            radius: width / 2
+            antialiasing: true
+
+            color: maxiSensor.pressed ? "#48943f" : (rootWindow.active || statusMacTrafficLights.containsMouse ?  Qt.lighter("#62C454", 1.06)
+                                                                       : inactive)
+            border.color: maxiSensor.pressed ? "#357225" : (rootWindow.active ? "#53A73E"
+                                                                              : inactiveBorder)
+            border.width: Theme.palette.name === "light" ? 0.5 : 0
+
+            Image {
+                anchors.centerIn: parent
+                visible: statusMacTrafficLights.containsMouse
+                source:   maxiSensor.pressed ?"../../assets/img/icons/traffic_lights/maximize_pressed.png"
+                                             :"../../assets/img/icons/traffic_lights/maximize.png"
+                scale: 0.25
+            }
+
+            MouseArea {
+                id: maxiSensor
+                anchors.fill: parent
+
+                onClicked: statusMacTrafficLights.maximized()
+            }
+        }
+    }
+}
@@ -0,0 +1,5 @@
+module StatusQ.Platform
+
+StatusMacTrafficLights 0.1 StatusMacTrafficLights.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
+}
@@ -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
+    }
+}
@@ -0,0 +1,164 @@
+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: []
+    property var openHandler
+    property var closeHandler
+
+    onOpened: {
+        if (typeof openHandler === "function") {
+            openHandler()
+        }
+    }
+
+    onClosed: {
+        if (typeof closeHandler === "function") {
+            closeHandler()
+        }
+    }
+
+    delegate: MenuItem {
+        id: statusPopupMenuItem
+
+        implicitHeight: action.enabled ? 38 : 0
+
+        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) &&
+                statusPopupMenuItem.action.enabled
+        }
+
+        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
+            visible: statusPopupMenuItem.action.enabled
+        }
+
+        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: statusPopupMenuItem.action.enabled
+            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
+            }
+        }
+    }
+
+}
@@ -0,0 +1,5 @@
+module StatusQ.Popups
+
+StatusMenuSeparator 0.1 StatusMenuSeparator.qml
+StatusPopupMenu 0.1 StatusPopupMenu.qml
+StatusMenuItem 0.1 StatusMenuItem.qml
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3435 8.32275C8.61861 8.42215 7.53763 8.02035 5.81251 8.11999C5.38465 8.14401 4.95976 8.20602 4.54281 8.30529C4.79745 5.11505 7.05528 2.3243 10.1255 2.1469C12.0097 2.03819 13.8928 3.20147 13.995 5.08991C14.0955 6.94599 12.68 8.18796 10.3435 8.32275ZM5.71154 14.8483C3.90657 14.9502 2.10277 13.8612 2.00481 12.094C1.90848 10.3569 3.26453 9.19481 5.50286 9.06863C7.15509 8.97551 8.19082 9.35171 9.84305 9.25836C10.2527 9.2359 10.6597 9.17787 11.0594 9.08493C10.8159 12.0705 8.65297 14.6825 5.71154 14.8483Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 4C8.75 3.58579 8.41421 3.25 8 3.25C7.58579 3.25 7.25 3.58579 7.25 4V6.75C7.25 7.02614 7.02614 7.25 6.75 7.25H4C3.58579 7.25 3.25 7.58579 3.25 8C3.25 8.41421 3.58579 8.75 4 8.75H6.75C7.02614 8.75 7.25 8.97386 7.25 9.25V12C7.25 12.4142 7.58579 12.75 8 12.75C8.41421 12.75 8.75 12.4142 8.75 12V9.25C8.75 8.97386 8.97386 8.75 9.25 8.75H12C12.4142 8.75 12.75 8.41421 12.75 8C12.75 7.58579 12.4142 7.25 12 7.25H9.25C8.97386 7.25 8.75 7.02614 8.75 6.75V4Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.875 3.5C8.875 3.01675 8.48325 2.625 8 2.625C7.51675 2.625 7.125 3.01675 7.125 3.5V11.5976L5.06946 9.83567C4.70255 9.52117 4.15016 9.56366 3.83567 9.93057C3.52117 10.2975 3.56366 10.8499 3.93057 11.1644L7.42712 14.1614C7.57031 14.2855 7.75421 14.3639 7.95611 14.3739C7.98615 14.3754 8.01625 14.3754 8.04628 14.3738C8.23907 14.3638 8.41535 14.2913 8.55528 14.1763C8.56004 14.1724 8.56476 14.1684 8.56946 14.1644L12.0695 11.1644C12.4364 10.8499 12.4789 10.2975 12.1644 9.93057C11.8499 9.56366 11.2975 9.52117 10.9306 9.83567L8.875 11.5976V3.5Z" fill="black"/>
+</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 fill-rule="evenodd" clip-rule="evenodd" d="M6.61568 2.47557C6.20786 2.40307 5.81849 2.6749 5.74599 3.08272L5.41792 4.9282C5.36277 5.23843 5.09305 5.46443 4.77795 5.46443H3.0807C2.66649 5.46443 2.3307 5.80022 2.3307 6.21443C2.3307 6.62864 2.66649 6.96443 3.0807 6.96443H4.2802C4.6847 6.96443 4.99096 7.32994 4.92016 7.72819L4.62381 9.39525C4.56866 9.70549 4.29894 9.93149 3.98384 9.93149H2.3491C1.93488 9.93149 1.5991 10.2673 1.5991 10.6815C1.5991 11.0957 1.93488 11.4315 2.3491 11.4315H3.48608C3.89059 11.4315 4.19685 11.797 4.12605 12.1953L3.86988 13.6363C3.79738 14.0441 4.06921 14.4335 4.47703 14.506C4.88485 14.5785 5.27423 14.3066 5.34673 13.8988L5.69002 11.9677C5.74517 11.6575 6.01489 11.4315 6.32998 11.4315L8.30498 11.4315C8.70948 11.4315 9.01575 11.797 8.94495 12.1953L8.68878 13.6363C8.61628 14.0441 8.88811 14.4335 9.29593 14.506C9.70375 14.5785 10.0931 14.3066 10.1656 13.8988L10.5089 11.9677C10.5641 11.6575 10.8338 11.4315 11.1489 11.4315H12.9166C13.3308 11.4315 13.6666 11.0957 13.6666 10.6815C13.6666 10.2673 13.3308 9.93149 12.9166 9.93149H11.6466C11.2421 9.93149 10.9359 9.56598 11.0067 9.16772L11.303 7.50066C11.3582 7.19043 11.6279 6.96443 11.943 6.96443H13.6509C14.0651 6.96443 14.4009 6.62864 14.4009 6.21443C14.4009 5.80022 14.0651 5.46443 13.6509 5.46443H12.4408C12.0362 5.46443 11.73 5.09892 11.8008 4.70066L12.0417 3.34526C12.1142 2.93744 11.8424 2.54807 11.4346 2.47557C11.0268 2.40307 10.6374 2.6749 10.5649 3.08272L10.2368 4.9282C10.1817 5.23843 9.91195 5.46443 9.59685 5.46443H7.62185C7.21735 5.46443 6.91109 5.09892 6.98189 4.70066L7.22284 3.34526C7.29533 2.93744 7.0235 2.54807 6.61568 2.47557ZM8.80274 9.93149C9.11784 9.93149 9.38756 9.70549 9.44271 9.39525L9.73906 7.7282C9.80986 7.32994 9.5036 6.96443 9.09909 6.96443L7.12409 6.96443C6.809 6.96443 6.53928 7.19043 6.48413 7.50066L6.18777 9.16772C6.11697 9.56598 6.42324 9.93149 6.82774 9.93149L8.80274 9.93149Z" fill="white"/>
+</svg>
+
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.61568 2.47557C6.20786 2.40307 5.81849 2.6749 5.74599 3.08272L5.41792 4.9282C5.36277 5.23843 5.09305 5.46443 4.77795 5.46443H3.0807C2.66649 5.46443 2.3307 5.80022 2.3307 6.21443C2.3307 6.62864 2.66649 6.96443 3.0807 6.96443H4.2802C4.6847 6.96443 4.99096 7.32994 4.92016 7.72819L4.62381 9.39525C4.56866 9.70549 4.29894 9.93149 3.98384 9.93149H2.3491C1.93488 9.93149 1.5991 10.2673 1.5991 10.6815C1.5991 11.0957 1.93488 11.4315 2.3491 11.4315H3.48608C3.89059 11.4315 4.19685 11.797 4.12605 12.1953L3.86988 13.6363C3.79738 14.0441 4.06921 14.4335 4.47703 14.506C4.88485 14.5785 5.27423 14.3066 5.34673 13.8988L5.69002 11.9677C5.74517 11.6575 6.01489 11.4315 6.32998 11.4315L8.30498 11.4315C8.70948 11.4315 9.01575 11.797 8.94495 12.1953L8.68878 13.6363C8.61628 14.0441 8.88811 14.4335 9.29593 14.506C9.70375 14.5785 10.0931 14.3066 10.1656 13.8988L10.5089 11.9677C10.5641 11.6575 10.8338 11.4315 11.1489 11.4315H12.9166C13.3308 11.4315 13.6666 11.0957 13.6666 10.6815C13.6666 10.2673 13.3308 9.93149 12.9166 9.93149H11.6466C11.2421 9.93149 10.9359 9.56598 11.0067 9.16772L11.303 7.50066C11.3582 7.19043 11.6279 6.96443 11.943 6.96443H13.6509C14.0651 6.96443 14.4009 6.62864 14.4009 6.21443C14.4009 5.80022 14.0651 5.46443 13.6509 5.46443H12.4408C12.0362 5.46443 11.73 5.09892 11.8008 4.70066L12.0417 3.34526C12.1142 2.93744 11.8424 2.54807 11.4346 2.47557C11.0268 2.40307 10.6374 2.6749 10.5649 3.08272L10.2368 4.9282C10.1817 5.23843 9.91195 5.46443 9.59685 5.46443H7.62185C7.21735 5.46443 6.91109 5.09892 6.98189 4.70066L7.22284 3.34526C7.29533 2.93744 7.0235 2.54807 6.61568 2.47557ZM8.80274 9.93149C9.11784 9.93149 9.38756 9.70549 9.44271 9.39525L9.73906 7.7282C9.80986 7.32994 9.5036 6.96443 9.09909 6.96443L7.12409 6.96443C6.809 6.96443 6.53928 7.19043 6.48413 7.50066L6.18777 9.16772C6.11697 9.56598 6.42324 9.93149 6.82774 9.93149L8.80274 9.93149Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70001 7.99995C1.70001 4.52056 4.52062 1.69995 8.00001 1.69995C11.4794 1.69995 14.3 4.52056 14.3 7.99995V12C14.3 13.2702 13.2703 14.3 12 14.3H8.00001C4.52062 14.3 1.70001 11.4793 1.70001 7.99995ZM8.00001 3.19995C5.34905 3.19995 3.20001 5.34898 3.20001 7.99995C3.20001 10.6509 5.34905 12.8 8.00001 12.8H12C12.4418 12.8 12.8 12.4418 12.8 12V7.99995C12.8 5.34898 10.651 3.19995 8.00001 3.19995Z" fill="black"/>
+</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 fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.0376 14 13.5 11.5376 13.5 8.5C13.5 5.46243 11.0376 3 8 3C4.96243 3 2.5 5.46243 2.5 8.5C2.5 11.5376 4.96243 14 8 14ZM6.44589 6.73914C5.47022 6.88924 4.75 7.72874 4.75 8.71588V10.2842C4.75 11.2713 5.47022 12.1108 6.44589 12.2609L6.78354 12.3129C7.58977 12.4369 8.41023 12.4369 9.21646 12.3129L9.55411 12.2609C10.5298 12.1108 11.25 11.2713 11.25 10.2842V8.71588C11.25 7.72874 10.5298 6.88924 9.55411 6.73914L9.21646 6.68719C8.41023 6.56315 7.58977 6.56315 6.78354 6.68719L6.44589 6.73914Z" fill="black"/>
+<circle cx="6.5" cy="8.5" r="0.75" fill="black"/>
+<circle cx="9.5" cy="8.5" r="0.75" fill="black"/>
+<path d="M8 11.25C8.51765 11.25 8.9618 10.9353 9.15164 10.4869C9.25928 10.2326 9.02614 10 8.75 10H7.25C6.97386 10 6.74072 10.2326 6.84836 10.4869C7.0382 10.9353 7.48235 11.25 8 11.25Z" fill="black"/>
+<path d="M7 2.5C7 1.94772 7.44772 1.5 8 1.5C8.55228 1.5 9 1.94772 9 2.5V4.5C9 5.05228 8.55228 5.5 8 5.5C7.44772 5.5 7 5.05228 7 4.5V2.5Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.76413 10.1901L12.3248 4.77888C12.7068 4.40717 13.3248 4.40591 13.7111 4.78187C14.0948 5.15523 14.0968 5.75861 13.7142 6.13093L7.45575 12.2211C7.26582 12.406 7.01753 12.4992 6.76838 12.5C6.51183 12.4981 6.26284 12.4063 6.07584 12.2244L3.28423 9.5078C2.9041 9.13789 2.90429 8.53795 3.29064 8.16199C3.67431 7.78863 4.29863 7.79084 4.67363 8.15576L6.76413 10.1901Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.46967 6.46967C4.76256 6.17678 5.23744 6.17678 5.53033 6.46967L7.64645 8.58579C7.84171 8.78105 8.15829 8.78105 8.35355 8.58579L10.4697 6.46967C10.7626 6.17678 11.2374 6.17678 11.5303 6.46967C11.8232 6.76256 11.8232 7.23744 11.5303 7.53033L8.53033 10.5303C8.23744 10.8232 7.76256 10.8232 7.46967 10.5303L4.46967 7.53033C4.17678 7.23744 4.17678 6.76256 4.46967 6.46967Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0303 4.96967C10.3232 5.26256 10.3232 5.73744 10.0303 6.03033L7.91421 8.14645C7.71895 8.34171 7.71895 8.65829 7.91421 8.85355L10.0303 10.9697C10.3232 11.2626 10.3232 11.7374 10.0303 12.0303C9.73744 12.3232 9.26256 12.3232 8.96967 12.0303L5.96967 9.03033C5.67678 8.73744 5.67678 8.26256 5.96967 7.96967L8.96967 4.96967C9.26256 4.67678 9.73744 4.67678 10.0303 4.96967Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.96967 4.96967C5.67678 5.26256 5.67678 5.73744 5.96967 6.03033L8.08579 8.14645C8.28105 8.34171 8.28105 8.65829 8.08579 8.85355L5.96967 10.9697C5.67678 11.2626 5.67678 11.7374 5.96967 12.0303C6.26256 12.3232 6.73744 12.3232 7.03033 12.0303L10.0303 9.03033C10.3232 8.73744 10.3232 8.26256 10.0303 7.96967L7.03033 4.96967C6.73744 4.67678 6.26256 4.67678 5.96967 4.96967Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.46967 10.5303C4.76256 10.8232 5.23744 10.8232 5.53033 10.5303L7.64645 8.41421C7.84171 8.21895 8.15829 8.21895 8.35355 8.41421L10.4697 10.5303C10.7626 10.8232 11.2374 10.8232 11.5303 10.5303C11.8232 10.2374 11.8232 9.76256 11.5303 9.46967L8.53033 6.46967C8.23744 6.17678 7.76256 6.17678 7.46967 6.46967L4.46967 9.46967C4.17678 9.76256 4.17678 10.2374 4.46967 10.5303Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15.5C11.866 15.5 15 12.366 15 8.5C15 4.63401 11.866 1.5 8 1.5C4.13401 1.5 1 4.63401 1 8.5C1 12.366 4.13401 15.5 8 15.5ZM11 5.5C11.2441 5.74408 11.2441 6.13981 11 6.38388L8.88393 8.5L11 10.6161C11.2441 10.8602 11.2441 11.2559 11 11.5C10.756 11.7441 10.3602 11.7441 10.1162 11.5L8.00005 9.38389L5.88393 11.5C5.63985 11.7441 5.24412 11.7441 5.00005 11.5C4.75597 11.2559 4.75597 10.8602 5.00005 10.6161L7.11616 8.5L5.00005 6.38389C4.75597 6.13981 4.75597 5.74408 5.00005 5.5C5.24412 5.25593 5.63985 5.25593 5.88393 5.5L8.00005 7.61612L10.1162 5.5C10.3602 5.25592 10.756 5.25592 11 5.5Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 14C11.1046 14 12 13.1046 12 12C13.1046 12 14 11.1046 14 10V4C14 2.89543 13.1046 2 12 2C6.47715 2 2 6.47715 2 12C2 13.1046 2.89543 14 4 14H10ZM4 12C4 7.58172 7.58172 4 12 4V6C8.68629 6 6 8.68629 6 12H4ZM12 8C9.79086 8 8 9.79086 8 12H10C10 10.8954 10.8954 10 12 10V8Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 14C11.1046 14 12 13.1046 12 12C13.1046 12 14 11.1046 14 10V4C14 2.89543 13.1046 2 12 2C6.47715 2 2 6.47715 2 12C2 13.1046 2.89543 14 4 14H10ZM4.5 12C4.22386 12 3.99838 11.7755 4.01538 11.4999C4.26332 7.47997 7.47997 4.26332 11.4999 4.01538C11.7755 3.99838 12 4.22386 12 4.5V5.5C12 5.77614 11.7754 5.99783 11.5002 6.02052C8.58513 6.26094 6.26094 8.58513 6.02052 11.5002C5.99783 11.7754 5.77614 12 5.5 12H4.5ZM12 8.5C12 8.22386 11.775 7.99672 11.501 8.03082C9.69083 8.25609 8.25609 9.69083 8.03082 11.501C7.99672 11.775 8.22386 12 8.5 12H9.5C9.77614 12 9.99359 11.7727 10.0617 11.5051C10.2417 10.7982 10.7982 10.2417 11.5051 10.0617C11.7727 9.99359 12 9.77614 12 9.5V8.5Z" fill="black"/>
+</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="M8 8C9.24264 8 10.25 6.99264 10.25 5.75C10.25 4.50736 9.24264 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="black"/>
+<path d="M4.12343 12.5101C4.56394 10.7798 6.13252 9.5 8 9.5C9.86748 9.5 11.4361 10.7798 11.8766 12.5101C12.0128 13.0453 11.5523 13.5 11 13.5H5C4.44772 13.5 3.98717 13.0453 4.12343 12.5101Z" fill="black"/>
+</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 fill-rule="evenodd" clip-rule="evenodd" d="M2.76413 10.1901L8.32479 4.77888C8.70676 4.40717 9.32476 4.40591 9.71111 4.78187C10.0948 5.15523 10.0968 5.75861 9.71418 6.13093L3.45575 12.2211C3.26582 12.406 3.01753 12.4992 2.76838 12.5C2.51183 12.4981 2.26284 12.4063 2.07584 12.2244L0.284232 10.5078C-0.0959013 10.1379 -0.0957078 9.53795 0.290638 9.16199C0.674309 8.78863 1.29863 8.79084 1.67363 9.15576L2.76413 10.1901Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.76413 10.1901L14.3248 4.77888C14.7068 4.40717 15.3248 4.40591 15.7111 4.78187C16.0948 5.15523 16.0968 5.75861 15.7142 6.13093L9.45576 12.2211C9.26582 12.406 9.01753 12.4992 8.76838 12.5C8.51183 12.4981 8.26284 12.4063 8.07584 12.2244L6.28423 10.5078L7.67363 9.15576L8.76413 10.1901Z" fill="black"/>
+</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="M2.10105 14.0959L2.79845 11.3062C2.83068 11.1773 2.87132 11.0512 2.91994 10.9285C2.98181 10.7724 3.18154 10.7423 3.30026 10.861L5.63906 13.1998C5.75778 13.3185 5.72769 13.5183 5.57161 13.5801C5.44892 13.6288 5.32275 13.6694 5.19385 13.7016L2.40421 14.399C2.22112 14.4448 2.05527 14.279 2.10105 14.0959Z" fill="black"/>
+<path d="M6.32321 11.7627C6.71374 12.1532 7.3469 12.1532 7.73743 11.7627L14.2929 5.2072C14.6834 4.81668 14.6834 4.18351 14.2929 3.79299L12.7071 2.2072C12.3166 1.81668 11.6834 1.81668 11.2929 2.2072L4.73743 8.76266C4.3469 9.15318 4.3469 9.78635 4.73743 10.1769L6.32321 11.7627Z" fill="black"/>
+</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 fill-rule="evenodd" clip-rule="evenodd" d="M4.5 6.25C4.08579 6.25 3.75 6.58579 3.75 7V12C3.75 12.4142 4.08579 12.75 4.5 12.75H9.5C9.91421 12.75 10.25 12.4142 10.25 12V9.20711C10.25 9.0745 10.3027 8.94732 10.3964 8.85355L11.3232 7.92678C11.4807 7.76929 11.75 7.88083 11.75 8.10355V12C11.75 13.2426 10.7426 14.25 9.5 14.25H4.5C3.25736 14.25 2.25 13.2426 2.25 12V7C2.25 5.75736 3.25736 4.75 4.5 4.75H8.39645C8.61917 4.75 8.73071 5.01929 8.57322 5.17678L7.64645 6.10355C7.55268 6.19732 7.4255 6.25 7.29289 6.25H4.5Z" fill="black"/>
+<path d="M14.75 2.5C14.75 2.30811 14.6768 2.11621 14.5303 1.96973C14.3838 1.82324 14.1919 1.75 14 1.75H9C8.58569 1.75 8.25 2.08582 8.25 2.5C8.25 2.91418 8.58569 3.25 9 3.25H11.7066C11.8848 3.25 11.974 3.46543 11.848 3.59142L6.46973 8.96973C6.17676 9.26257 6.17676 9.73743 6.46973 10.0303C6.76245 10.3232 7.23755 10.3232 7.53027 10.0303L12.9086 4.65197C13.0346 4.52598 13.25 4.61521 13.25 4.79339V7.5C13.25 7.91418 13.5859 8.25 14 8.25C14.4141 8.25 14.75 7.91418 14.75 7.5V2.5Z" fill="black"/>
+</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>
+
@@ -0,0 +1,6 @@
+<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="black"/>
+<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="black"/>
+<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="black"/>
+<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="black"/>
+</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="M13.7774 4.08403C14.0071 4.2372 14.0692 4.54764 13.916 4.7774L8.91603 12.2774C8.82921 12.4076 8.68639 12.4897 8.53015 12.4991C8.3739 12.5086 8.22225 12.4443 8.12038 12.3254L5.12038 8.82545C4.94067 8.61579 4.96495 8.30014 5.17461 8.12042C5.38428 7.94071 5.69993 7.96499 5.87964 8.17466L8.27828 10.9731C8.36453 11.0737 8.52303 11.0641 8.59655 10.9539L13.084 4.2227C13.2372 3.99294 13.5476 3.93085 13.7774 4.08403Z" fill="black"/>
+<path d="M8.54225 8.33804C8.35846 8.61372 7.96222 8.63765 7.74659 8.38609C7.60081 8.21601 7.58594 7.96972 7.7102 7.78334L10.084 4.2227C10.2371 3.99294 10.5476 3.93085 10.7773 4.08403C11.0071 4.2372 11.0692 4.54764 10.916 4.7774L8.54225 8.33804Z" fill="black"/>
+<path d="M2.87964 8.17461C2.69993 7.96495 2.38428 7.94067 2.17461 8.12038C1.96495 8.30009 1.94067 8.61574 2.12038 8.8254L5.12038 12.3254C5.30009 12.5351 5.61574 12.5593 5.8254 12.3796C6.03507 12.1999 6.05935 11.8843 5.87964 11.6746L2.87964 8.17461Z" fill="black"/>
+</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="M5 8.5C5 9.05228 4.55228 9.5 4 9.5C3.44772 9.5 3 9.05228 3 8.5C3 7.94772 3.44772 7.5 4 7.5C4.55228 7.5 5 7.94772 5 8.5Z" fill="black"/>
+<path opacity="0.66" d="M9 8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5C7 7.94772 7.44772 7.5 8 7.5C8.55228 7.5 9 7.94772 9 8.5Z" fill="black"/>
+<path opacity="0.44" d="M12 9.5C12.5523 9.5 13 9.05228 13 8.5C13 7.94772 12.5523 7.5 12 7.5C11.4477 7.5 11 7.94772 11 8.5C11 9.05228 11.4477 9.5 12 9.5Z" fill="black"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2774 4.08403C12.5071 4.2372 12.5692 4.54764 12.416 4.7774L7.41603 12.2774C7.32921 12.4076 7.18639 12.4897 7.03015 12.4991C6.8739 12.5086 6.72225 12.4443 6.62038 12.3254L3.62038 8.82545C3.44067 8.61579 3.46495 8.30014 3.67461 8.12042C3.88428 7.94071 4.19993 7.96499 4.37964 8.17466L6.77828 10.9731C6.86454 11.0737 7.02303 11.0641 7.09655 10.9539L11.584 4.2227C11.7372 3.99294 12.0476 3.93085 12.2774 4.08403Z" fill="black"/>
+</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="M8 3.5C7.72386 3.5 7.5 3.72386 7.5 4V10C7.5 10.2761 7.72386 10.5 8 10.5C8.27614 10.5 8.5 10.2761 8.5 10V4C8.5 3.72386 8.27614 3.5 8 3.5Z" fill="black"/>
+<path d="M8 13.25C8.41421 13.25 8.75 12.9142 8.75 12.5C8.75 12.0858 8.41421 11.75 8 11.75C7.58579 11.75 7.25 12.0858 7.25 12.5C7.25 12.9142 7.58579 13.25 8 13.25Z" fill="black"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.5" cy="8" r="1.5" fill="black"/>
+<circle cx="12.5" cy="8" r="1.5" fill="black"/>
+<circle cx="8" cy="8" r="1.5" fill="black"/>
+</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>
+
@@ -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>
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.5C6.40698 3.5 5.12915 4.83423 5.00928 6.5H6.39941C6.5083 5.57629 7.19775 4.88464 8 4.88464C8.87476 4.88464 9.61523 5.7074 9.61523 6.75647V8.5H7H6.38452H5H4.5C3.67163 8.5 3 9.17163 3 10V13C3 13.8284 3.67163 14.5 4.5 14.5H11.5C12.3284 14.5 13 13.8284 13 13V10C13 9.17163 12.3284 8.5 11.5 8.5H11V6.75647C11 4.97327 9.67407 3.5 8 3.5Z" fill="black"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.5" cy="8.5" r="1.5" fill="black"/>
+<circle opacity="0.2" cx="12.5" cy="8.5" r="1.5" fill="black"/>
+<circle opacity="0.6" cx="8" cy="8.5" r="1.5" fill="black"/>
+</svg>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pascal Precht	583f60faaa	WIP SAVEPOINT	2021-06-18 13:51:50 +02:00
Pascal Precht	4588d5976d	feat(sandbox): introduce first part of profile view for reference app	2021-06-18 13:51:33 +02:00
Pascal Precht	507703af18	feat(Components): introduce `StatusListSectionHeadline` Usage: ```qml import StatusQ.Components 0.1 StatusListSectionHeadline { text: "Settings" } ``` Closes #164	2021-06-18 12:12:04 +02:00
Pascal Precht	40617cd710	feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162	2021-06-18 12:11:50 +02:00
Pascal Precht	05fc97ca2f	fix(StatusChatListCategoryItem): don't render menubutton with no popup Fixes #153	2021-06-16 11:27:31 +02:00
Pascal Precht	7bca27455f	feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133	2021-06-16 11:24:18 +02:00
Pascal Precht	4577551873	feat(StatusChatListCategory): apply chat list filter and expose category id in popup menu This uses the newly introduced `filterFn` in `StatusChatList` to hide chat items that don't belong to a given category. It also optionally exposes the `categoryId` on the provided popup menu, so it has access to it inside menu item triggers.	2021-06-16 11:12:50 +02:00
Pascal Precht	cb07813444	feat(StatusChatList): introduce `filterFn` and `categoryId` Chat lists can belong to a category inside of communities, so they should hold a property `categoryId` that represents that. In addition, this commit introduces a `filterFn` function that can be used to conditionally show/hide chat list items. Closes #154	2021-06-16 11:12:26 +02:00
Pascal Precht	2427fa2dee	feat(StatusPopupMenu): introduce `openHandler` Similar to `closeHandler`, StatusPopupMenu can now have a customized `openHandler` to run custom logic on open.	2021-06-16 11:11:54 +02:00
Pascal Precht	9982c3df52	feat(StatusChatListCategory): introduce flag to show/hide buttons This commit introduces a `showActionButtons` flag that defaults to `false` and can be used to render the action buttons provided in the chat list category. This is useful for cases where only admin users should have the right to create channels inside categories or mutate a category's state. Settings `showActionButtons: true` will then render the buttons. Closes #150	2021-06-16 11:11:34 +02:00
Pascal Precht	4f6ff27f90	chore: introduce build script for sandbox app Closes #148	2021-06-16 11:11:04 +02:00
B.Melnik	1a7c213395	fix: make release build work I add several files in .qrc file for running app in release mode (CONFIG+=release)	2021-06-16 11:02:52 +02:00
Pascal Precht	454e73a838	feat(Components): introduce `StatusChatInfoToolBar` component Usage: ```qml import StatusQ.Components 0.1 StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" chatInfoButton.subTitle: "128 Members" chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" chatInfoButton.icon.color: Theme.palette.miscColor6 popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } ``` Closes #141	2021-06-16 11:01:22 +02:00
Pascal Precht	3480609f7a	Revert "Revert "feat: can be used on tablets (#146 )"" This reverts commit `59b40c0713`.	2021-06-15 11:16:22 +02:00
Pascal Precht	e5e96af538	fix(StatusListItem): various fixes w.r.t. sensor, icon size etc This also exposes `statusListItemSubTitle` for more control over it's appearance, if needed.	2021-06-15 10:48:32 +02:00
Pascal Precht	7c16a9bd3d	feat(StatusRoundButton): add `highlighted` and `icon.rotation` props These are needed for some UIs where the icon state may change based on the user's interaction.	2021-06-15 10:47:53 +02:00
Pascal Precht	59b40c0713	Revert "feat: can be used on tablets (#146 )" This reverts commit `63be014479`.	2021-06-14 16:41:28 +02:00
Boris MelnikandB.Melnik	63be014479	feat: can be used on tablets (#146 ) Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>	2021-06-14 08:26:16 -04:00
Pascal Precht	705f140207	fix(StatusNavBarTabButton): fix popup menu positioning	2021-06-14 11:24:03 +02:00
Pascal Precht	040da2a416	fix(StatusNavBarTabButton): ensure click signal is emitted when not menu is provided	2021-06-11 14:11:00 +02:00
Pascal Precht	c9bc9bab11	feat(StatusPopupMenu): make menu items invisible when disabled Closes #135	2021-06-11 13:54:08 +02:00
Pascal Precht	5e8242dfed	feat(StatusNavBarTabButton): introduce `popupMenu` property This enables users to apply a `StatusPopupMenu` to the button which automatically positions itself and takes care of highlighting the activated button. Usage: ```qml StatusNavBarTabButton { ... popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" } } } ``` Closes #137	2021-06-11 13:53:17 +02:00
Pascal Precht	175d7a195c	fix(StatusAppNavBar): don't rely on `undefined` property This turned out to be a bug. `model.count` isn't defined on `Repeater` types. Also, set `ScrollView` height to `0` if there are not community tab buttons. This is needed because the columns implicit height comes with spacing, resulting in some height.	2021-06-11 13:53:06 +02:00
Pascal Precht	1f3aa0bbd5	feat(StatusChatListItem): accept right clicks Also triggers the context menu in `StatusChatListCategory`. Fixes #131	2021-06-09 14:55:37 +02:00
Pascal Precht	22eaf6fa99	fix(Components): more popup menu position fine-tuning	2021-06-09 14:55:13 +02:00
Pascal Precht	a0fae6ab70	fix: introduce tiny icon versions and make use of them where needed Closes #128	2021-06-09 14:54:53 +02:00
Pascal Precht	3ea8da0593	fix(StatusChatToolBar): ensure context menu as proper position Also expose action buttons for more custom control.	2021-06-09 10:42:04 +02:00
Pascal Precht	90bad9e312	fix(StatusChatToolBar): ensure menu button stays highlighted This introduces a new `popupMenu` property that can be used to pass down a `StatusPopupMenu` to `StatusChatToolBar`. The reason this is done is so that we get control over its `onClosed` handler, which is used to remove the menu button's `highlighted` state. The `highlighted` state is activated inside the component as well when it's clicked. Existing signals like `menuButtonClicked` still exist and can be leveraged for further logic. Closes #125	2021-06-09 09:37:27 +02:00
Pascal Precht	f4d211acbb	feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123	2021-06-08 15:34:15 +02:00
Pascal Precht	72bdd2d9af	feat(StatusChatListCategoryItem): introduce `highlighted` property	2021-06-08 15:34:15 +02:00
Pascal Precht	fb51e9d74a	feat(StatusPopupMenu): introduce `closeHandler` hook This enables us to predefine default close handlers for popup menus.	2021-06-08 15:34:15 +02:00
Pascal Precht	645a3b79a2	feat(StatusChatListCategoryItemButton): introduce `highglighted` property	2021-06-08 15:34:15 +02:00
Pascal Precht	916dcc9c7f	feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117	2021-06-08 13:23:32 +02:00
Pascal Precht	ac80f7f78d	fix(StatusChatListItem): use proper font size for chat name	2021-06-08 13:18:35 +02:00
Pascal Precht	3a7a338da8	feat(StatusFlatRoundButton): support icon rotation	2021-06-08 13:18:25 +02:00
Pascal Precht	a910d0f2a0	feat(StatusListItem) expose content children and introduce padding properties These properties are needed to enable more control over how a list item implementation can look like. Content children are exposed as follows: ```qml StatusListItem { statusListItemTitle.[...]: ... // StatusBaseText sensor.[...]: ... // MouseArea rightPadding: ... // default 16 leftPadding: .. // default 16 } ```	2021-06-08 13:16:15 +02:00
Pascal Precht	341c0ddd0d	fix(Core): add missing `rotation` property to `StatusIconSettings`	2021-06-08 13:15:50 +02:00
Pascal Precht	1e558b59b0	feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100	2021-06-08 13:15:20 +02:00
Pascal Precht	09a6f418d7	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	2021-06-04 10:15:02 +02:00
Pascal Precht	092cc9666d	chore: add tooltip to theme switch	2021-06-03 16:40:57 +02:00
Pascal Precht	6083fbb1e9	chore: re-introduce reload button	2021-06-03 16:38:34 +02:00
B.Melnik	26aae6d027	fix: update position of window to center, add traffic lights	2021-06-03 16:38:08 +02:00
Pascal Precht	70e17b0598	fix(StatusQ.Core.Theme): use correct dropshadow color in dark theme	2021-06-03 15:11:13 +02:00
Pascal Precht	062fe42a81	fix(Core): don't rotate `ColorOverlay` of `StatusIcon` As discussed in #109, when using the `rotation` property of `StatusIcon` it seems to just mirror the underlying image source. It turns out that using `rotation` on the image source is enough to have the `ColorOverlay` rotate as well. Adding a `rotation` to the overlay will rotate the source that's already rotated, resulting in a mirrored result. To fix this, we're removing the additional `rotation` from the overlay. Fixes #109	2021-06-03 15:10:52 +02:00
Pascal Precht	202fb88654	feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.	2021-06-01 10:42:34 +02:00
Pascal Precht	b1cbcd256d	refactor: make use of `StatusRoundImage`'s built-in loading indicator Closes #89	2021-06-01 10:42:21 +02:00
B.Melnik	c0ad32a192	feat(Components): Add StatusSlider Closes: #13	2021-05-28 13:39:32 +02:00
Pascal Precht	1548212e47	refactor(sandbox): make use of StatusQ to layout sandbox app Closes #41	2021-05-28 11:57:23 +02:00
Pascal Precht	a4421b5b42	feat(Components): introduce `StatusChatToolBar` Usage: ```qml import StatusQ.Components 0.1 StatusChatToolBar { chatInfoButton.[...]: ... // StatusChatInfoButton notificationCount: 1 // default `0` onChatInfoButtonClicked: ... onMenuButtonClicked: ... onNotificationButtonClicked: ... } ``` Closes #80	2021-05-28 11:56:49 +02:00
Pascal Precht	8a79918284	feat(Controls): introduce `StatusChatInfoButton` Usage: ```qml StatusChatInfoButton { title: "Iuri Matias" subTitle: "Contact" icon.color: Theme.palette.miscColor7 // identicon used as fallback when image source isn't available image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" type: StatusChatInfoButton.Type.OneToOneChat // PublicChat \| GroupChat \| CommunityChat muted: true // default `false` pinnedMessagesCount: 1 // default `0` } ``` Closes: #79	2021-05-28 11:54:50 +02:00
Pascal Precht	c5ecfe087c	fix(StatusNavigationListItem): make click event work again	2021-05-28 11:54:31 +02:00
Pascal Precht	6c84fed783	fix(Core.Theme): ensure proper nav bar colors is used	2021-05-28 11:54:31 +02:00
Pascal Precht	b1fe73baa0	fix(StatusNavBarTabButton): don't change checked state implicitly	2021-05-28 11:54:31 +02:00
Pascal Precht	d690a0c505	fix(StatusAppNavBar): don't try to render chat button if it doesn't exist	2021-05-28 11:54:31 +02:00
Pascal Precht	98b019463d	fix(Controls): ensure round buttons expose `hovered` state Fixes #88	2021-05-27 16:34:08 +02:00
Pascal Precht	4a25ca0270	feat(Components): introduce `StatusDescriptionListItem` Usage: ``` import StatusQ.Components 0.1 StatusDescriptionListItem { title: "Title" subTitle: "Subtitle" } StatusDescriptionListItem { title: "Title" subTitle: "Subtitle" tooltip.text: "Tooltip" icon.name: "info" iconButton.onClicked: tooltip.visible = !tooltip.visible } ``` Closes: #73	2021-05-27 15:03:54 +02:00
Pascal Precht	af3ca15b7f	feat(Layout): introduce `StatusAppTwoPanelLayout` This is a component to easily render two panel layouts used in different view of Status Desktop. Designed to be used with `StatusAppLayout` Usage: ```qml import StatusQ.Layout 0.1 StatusAppLayout { ... appView: StackView { anchors.fill: parent initialItem: Component { StatusAppTwoPanelLayout { leftPanel: Component {...} rightPanel: Component {...} } } } } ``` Closes: #78	2021-05-27 15:03:23 +02:00
Pascal Precht	554998dc34	feat(Layout): introduce StatusAppLayout component This introduces a layout component to quickly scaffold a Status Desktop ui layout. Usage: ```qml import StatusQ.Layout 0.1 StatusAppLayout { appNavBar: StatusAppNavBar { ... } appView: StackView { anchors.fill: parent initialItem: Component { ... } } } ``` Closes: #77	2021-05-27 15:01:55 +02:00
B.Melnik	44b275f23d	feat(StatusRoundedImage): add loading indicator option Closes #56	2021-05-27 14:53:49 +02:00
Pascal Precht	82e34d64a6	fix(StatusFlatRoundButton): use correct hover color	2021-05-26 15:33:26 +02:00
Pascal Precht	041c11fb94	feat(StatusBadge): introduce `borderColor` and `hoverBorderColor` `StatusBadge` uses a border with same color as its underlying component to create "fake space" (see `StatusNavTabButton`). The color depends on the parent component background and its state, which the `StatusBadge` doesn't know about by itself, so the border color has to be set explicity whereever it's desired. This commit introduces (default) colors for the border based on where badge is used.	2021-05-26 15:32:59 +02:00
Pascal Precht	cb9492abed	fix(StatusBadge): use medium font weight for badge text	2021-05-26 15:32:35 +02:00
Pascal Precht	6327566889	feat(Components): introduce StatusNavigationListItem This introduces the `StatusNavigationListItem` that can be used to render menu navigation items in secondary panels, such as the profile panel. Usage: ``` import StatusQ.Components 0.1 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 } ``` Closes #72	2021-05-26 10:28:04 +02:00
Pascal Precht	a4e62fb2cf	feat(Core): introduce StatusIconBackgroundSettings This is a settings object to complement the existing `StatusIconSettings`. Some components, like `StatusRoundIcon` need to be able to configure the surroundings of the icon their rendering. In such cases, `StatusIconBackgroundSettings` expose an API that give consumers a way to configure things like background color, width, height and radius.	2021-05-26 10:26:08 +02:00
Pascal Precht	b40d427d88	feat(Components): introduce StatusChatListItem This introduces the brand new `StatusChatListItem` which can be used to render channels, one-to-one chats and community channels in Status applications. The component can be used as follows: ```qml import Status.Components 0.1 StatusChatListItem { name: "channel-name" // name of channel or user type: StatusChatListItem.Type.PublicChat // GroupChat \| CommunityChat \| OneToOneChat image.source: "profile/image/source" // uses letter identicon instead of not supplied hasUnreadMessages: true // default `false` badge.value: 1 // default `0` muted: true // `default `false` selected: true // default `false` onUnmute: ... // signal when unmute icon is clicked } ``` Closes #65	2021-05-26 10:22:59 +02:00
Pascal Precht	f1e34e39b9	fix(Core): disable StatusIcon ColorOverlay if no color is supplied This is needed to have the underlying SVG's color bleed through and make use of the image's opacity at the same time. Using `ColorOverlay` together with (half) transparent colors doesn't work very well as it makes the underlying SVG color come through, result in wrong colors. Applying `opacity` on the image itself cause the `ColorOverlay` to reduce in opacity as well. So in order to work with transparent colors, we need a way to turn of the ColorOverlay and work with the Image's opacity, which is what this change enables.	2021-05-25 14:15:44 +02:00
B.Melnik	3ecf73ef58	refactor(Controls): make use of newly introduced StatusIconSettings in button controls Closes #57	2021-05-25 14:10:56 +02:00
B.Melnik	ee4a7c8824	fix: hover effect for StatusFlatRoundButton Closes: #58	2021-05-25 14:05:05 +02:00
Pascal Precht	a3fe02d0ce	feat(Components): introduce `StatusListItem` component This introduces a base list item component that is used in many different places across Status Desktop. The component is configurable and allows for child component customization. Usage: ```qml StatusListItem { title: "Title" } StatusListItem { title: "Title" subTitle: "Subtitle" } StatusListItem { title: "Title" subTitle: "Subtitle" icon.name: "info" } StatusListItem { title: "Title" subTitle: "Subtitle" image.source: "..." } StatusListItem { title: "Title" subTitle: "Subtitle" image.source: "..." label: "Some label" } StatusListItem { title: "Title" subTitle: "Subtitle" icon.name: "info" label: "Some label" components: [ StatusButton { text: "Button" size: StatusBaseButton.Size.Small } ... ] } ``` Closes #19	2021-05-25 13:52:25 +02:00