feat(StatusWindowsTitleBar): Add windows title bar

Closes: #200

CHANGELOG.md

@@ -1,3 +1,101 @@
+<a name=""></a>
+##  v0.6.0 (2021-08-24)
+
+
+#### Features
+
+* **StatusBaseInput:**  introduce `dirty` and `pristine` properties ([ea340801](ea340801), closes [#327](327))
+* **StatusChatList:**  Add drag and drop support of list items ([c679854d](c679854d))
+* **StatusLetterIdenticon:**  Expose the text component ([d16719ad](d16719ad))
+* **StatusListItem:**  introduce itemId and titleId properties and their handlers ([01da7508](01da7508))
+* **StatusSearchPopupMenuItem:**
+  *  New APIs resetSearchSelection and setSearchSelection ([78edcb37](78edcb37))
+  *  new API ([b133d10f](b133d10f))
+
+#### Bug Fixes
+
+* **StatusBaseInput:**
+  *  ensure wrapmode works as expectefd in multiline mode ([0243852c](0243852c), closes [#324](324))
+  *  expose cursorPosition ([ea6743a7](ea6743a7), closes [#323](323))
+* **StatusChatListCategory:**  emit original mouse event data in clicked signal ([5da9cb06](5da9cb06), closes [#333](333))
+* **StatusInput:**
+  *  ensure validation is performed on initialization ([4b107a0e](4b107a0e), closes [#326](326))
+  *  remove recursive binding in label height ([51d8b55b](51d8b55b))
+* **StatusSearchLocationMenu:**  typo fix ([c306b682](c306b682))
+* **StatusSearchPopup:**  replace "#" character with "channel" icon ([2de261c4](2de261c4))
+
+
+
+<a name=""></a>
+##  v0.5.0 (2021-08-16)
+
+
+#### Bug Fixes
+
+* **StatusChatToolBar:**  Use updated StatusFlatRoundButton ([d24c2e62](d24c2e62))
+
+#### Features
+
+* **StatusBaseInput:**  enforce `maximumLength` if it's set ([f635bad6](f635bad6))
+* **StatusFlatRoundButton:**  Adding tooltip to the button ([5a0489ba](5a0489ba))
+* **StatusIcon:**  add `play-filled` and `pause-filled` icons ([58a30716](58a30716), closes [#310](310))
+* **StatusInput:**  introduce new validator pipeline ([ba4f27f9](ba4f27f9), closes [#298](298))
+* **StatusToolTip:**  Adding an offset property ([ee429683](ee429683))
+
+
+
+<a name=""></a>
+##  v0.4.0 (2021-08-12)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  add profile button (#311) ([2e1359c9](2e1359c9))
+* **StatusChatListItem:**  don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
+* **StatusPopupMenu:**  ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
+
+#### Features
+
+* **StatusListItem:**  add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
+* **StatusQ.Theme.Core:**  introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
+
+
+
+<a name=""></a>
+## v0.3.0 (2021-07-27)
+
+
+#### Features
+
+* **Controls:**  introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
+* **Popups:**  introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
+* **StatusBaseInput:**
+  *  add icon support ([c8e90349](c8e90349), closes [#242](242))
+  *  add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
+  *  add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
+* **StatusInput:**  implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
+* **StatusPopupMenu:**  add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
+* **StatusQ.Layout:**  introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
+* **sandbox:**  make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
+
+#### Bug Fixes
+
+* **StatusAppThreePanelLayout:**
+  *  limit right panel width to 300px ([d327c515](d327c515))
+  *  limit center panel width to 300px ([762ff87b](762ff87b))
+  *  hide right panel when closed ([61705990](61705990))
+* **StatusBaseInput:**
+  *  some minor style adjustment to adhere to design ([f16e857c](f16e857c))
+  *  ensure input text is selectable with mouse ([ab303593](ab303593))
+  *  ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
+  *  add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
+  *  expose text prop alias ([116ddfbb](116ddfbb))
+* **StatusChatInfoButton:**  ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
+* **StatusListItem:**  ensure title area wraps text ([e3f79314](e3f79314))
+* **StatusModal:**  reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
+
+
+
 <a name=""></a>
 ## v0.2.0 (2021-07-21)
 

README.md

@@ -9,6 +9,7 @@ These modules are:
 
 - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
+- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
 - [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)

sandbox/Controls.qml

@@ -8,7 +8,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 GridLayout {
-    columns: 6
+    columns: 1
     columnSpacing: 5
     rowSpacing: 5
 
@@ -143,32 +143,4 @@ GridLayout {
         to: 100
         value: 40
     }
-
-    StatusBaseInput {
-        placeholderText: "One line"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline with static height"
-        implicitHeight: 100
-    }
-
-    Item {
-        implicitHeight: 300
-        implicitWidth: 300
-
-        StatusBaseInput {
-            anchors.centerIn: parent
-            multiline: true
-            placeholderText: "Multiline with max/min"
-            minimumHeight: 80
-            maximumHeight: 200
-        }
-    }
 }

sandbox/DemoApp.qml

@@ -7,46 +7,36 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Platform 0.1
 
 Rectangle {
     id: demoApp
     height: 602
-    width: 902
+    width: 1002
     border.width: 1
     border.color: Theme.palette.baseColor2
 
-    Row {
-        anchors.top: demoApp.top
-        anchors.left: demoApp.left
-        anchors.topMargin: 14
-        anchors.leftMargin: 14
+    property string titleStyle: "osx"
 
-        spacing: 6
+    StatusMacTrafficLights {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: 13
         z: statusAppLayout.z + 1
+        visible: titleStyle === "osx"
+    }
 
-        Rectangle {
-            color: "#E24640"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#FFC12F"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#2ACB42"
-            height: 12
-            width: 12
-            radius: 6
-        }
+    StatusWindowsTitleBar {
+        id: windowsTitle
+        anchors.top: parent.top
+        width: parent.width
+        z: statusAppLayout.z + 1
+        visible: titleStyle === "windows"
     }
 
     StatusAppLayout {
         id: statusAppLayout
-        anchors.top: demoApp.top
+        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
         anchors.left: demoApp.left
         anchors.topMargin: demoApp.border.width
         anchors.leftMargin: demoApp.border.width
@@ -172,10 +162,121 @@ Rectangle {
                     text: "Chat"
                 }
 
-                Column {
+                Item {
+                    id: searchInputWrapper
                     anchors.top: headline.bottom
                     anchors.topMargin: 16
                     width: parent.width
+                    height: searchInput.height
+
+                    StatusBaseInput {
+                        id: searchInput
+
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.right: actionButton.left
+                        anchors.leftMargin: 16
+                        anchors.rightMargin: 16
+
+                        height: 36
+                        topPadding: 8
+                        bottomPadding: 0
+                        placeholderText: "Search"
+                        icon.name: "search"
+                    }
+
+                    StatusRoundButton {
+                        id: actionButton
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
+                        anchors.rightMargin: 8
+                        width: 32
+                        height: 32
+
+                        type: StatusRoundButton.Type.Secondary
+                        icon.name: "add"
+                        state: "default"
+
+                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                        states: [
+                            State {
+                                name: "default"
+                                PropertyChanges {
+                                    target: actionButton
+                                    icon.rotation: 0
+                                    highlighted: false
+                                }
+                            },
+                            State {
+                                name: "pressed"
+                                PropertyChanges {
+                                    target: actionButton
+                                    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
+                                }
+                            }
+                        ]
+
+                        StatusPopupMenu {
+                            id: chatContextMenu
+
+                            onOpened: {
+                                actionButton.state = "pressed"
+                            }
+
+                            onClosed: {
+                                actionButton.state = "default"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start new chat"
+                                icon.name: "private-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Start group chat"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Join public chat"
+                                icon.name: "public-chat"
+                            }
+
+                            StatusMenuItem {
+                                text: "Communities"
+                                icon.name: "communities"
+                            }
+                        }
+                    }
+                }
+
+                Column {
+                    anchors.top: searchInputWrapper.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
                     spacing: 8
 
                     StatusContactRequestsIndicatorListItem {
@@ -188,14 +289,14 @@ Rectangle {
                     StatusChatList {
                         anchors.horizontalCenter: parent.horizontalCenter
 
-                        chatListItems.model: demoChatListItems
+                        chatListItems.model: models.demoChatListItems
                         selectedChatId: "0"
                         onChatItemSelected: selectedChatId = id
                         onChatItemUnmuted: {
-                            for (var i = 0; i < demoChatListItems.count; i++) {
-                                let item = demoChatListItems.get(i);
+                            for (var i = 0; i < models.demoChatListItems.count; i++) {
+                                let item = models.demoChatListItems.get(i);
                                 if (item.chatId === id) {
-                                    demoChatListItems.setProperty(i, "muted", false)
+                                    models.demoChatListItems.setProperty(i, "muted", false)
                                 }
                             }
                         }
@@ -297,6 +398,12 @@ Rectangle {
 
         StatusAppThreePanelLayout {
             id: root
+
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
             leftPanel: Item {
                 id: leftPanel
 
@@ -350,8 +457,10 @@ Rectangle {
                         width: leftPanel.width
                         height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
-                        chatList.model: demoCommunityChatListItems
-                        categoryList.model: demoCommunityCategoryItems
+                        draggableItems: true
+                        draggableCategories: false
+                        chatList.model: models.demoCommunityChatListItems
+                        categoryList.model: models.demoCommunityCategoryItems
 
                         showCategoryActionButtons: true
                         onChatItemSelected: selectedChatId = id
@@ -440,6 +549,7 @@ Rectangle {
 
             centerPanel: Item {
                 StatusChatToolBar {
+                    id: statusChatToolBar
                     anchors.top: parent.top
                     width: parent.width
 
@@ -447,21 +557,74 @@ Rectangle {
                     chatInfoButton.subTitle: "Community Chat"
                     chatInfoButton.icon.color: Theme.palette.miscColor6
                     chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-                    searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
+                    onSearchButtonClicked: {
+                        searchButton.highlighted = !searchButton.highlighted;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
+                        searchPopup.open();
+                    }
                     membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
                     onMembersButtonClicked: {
                         root.showRightPanel = !root.showRightPanel;
                     }
                 }
+
+                StatusSearchPopup {
+                    id: searchPopup
+                    searchOptionsPopupMenu: searchPopupMenu
+                    onAboutToHide: {
+                        if (searchPopupMenu.visible) {
+                            searchPopupMenu.close();
+                        }
+                        //clear menu
+                        for (var i = 2; i < searchPopupMenu.count; i++) {
+                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                        }
+                    }
+                    onClosed: {
+                        statusChatToolBar.searchButton.highlighted = false
+                        searchPopupMenu.dismiss();
+                    }
+                    onSearchTextChanged: {
+                        if (searchPopup.searchText !== "") {
+                            searchPopup.loading = true;
+                            searchModelSimTimer.start();
+                        } else {
+                            searchPopup.searchResults = [];
+                            searchModelSimTimer.stop();
+                        }
+                    }
+                    Timer {
+                        id: searchModelSimTimer
+                        interval: 500
+                        onTriggered: {
+                            if (searchPopup.searchText.startsWith("c")) {
+                                searchPopup.searchResults = models.searchResultsA;
+                            } else {
+                                searchPopup.searchResults = models.searchResultsB;
+                            }
+                            searchPopup.loading = false;
+                        }
+                    }
+                }
+                StatusSearchLocationMenu {
+                    id: searchPopupMenu
+                    searchPopup: searchPopup
+                    locationModel: models.optionsModel
+                }
             }
 
             rightPanel: Item {
+                id: rightPanel
                 StatusBaseText {
                     id: titleText
                     anchors.top: parent.top
                     anchors.topMargin:16
                     anchors.left: parent.left
                     anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
                     font.pixelSize: 15
                     text: qsTr("Members")
                 }
@@ -490,7 +653,10 @@ Rectangle {
                         StatusBaseText {
                             height: parent.height
                             horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
                             font.pixelSize: 15
+                            color: Theme.palette.directColor1
                             text: modelData
                         }
                     }
@@ -531,7 +697,7 @@ Rectangle {
                         spacing: 4
 
                         Repeater {
-                            model: demoProfileGeneralMenuItems
+                            model: models.demoProfileGeneralMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -541,7 +707,7 @@ Rectangle {
                         StatusListSectionHeadline { text: "Settings" }
 
                         Repeater {
-                            model: demoProfileSettingsMenuItems
+                            model: models.demoProfileSettingsMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -555,7 +721,7 @@ Rectangle {
                         }
 
                         Repeater {
-                            model: demoProfileOtherMenuItems
+                            model: models.demoProfileOtherMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -710,194 +876,7 @@ Rectangle {
         }
     }
 
-    ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
-            color: "blue"
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "red"
-            unreadMessagesCount: 1
-            mentionsCount: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "green"
-            unreadMessagesCount: 0
-        }
-    }
-
-    ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-        }
-    }
-
-    ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-        }
-    }
-
-    ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
+    Models {
+        id: models
     }
 }

sandbox/ListItems.qml

@@ -289,12 +289,38 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         icon.background.color: "orange"
     }
 
+    StatusListItem {
+        title: "Title"
+        titleAsideText: "test"
+    }
+
     StatusListItem {
         title: "Title"
         icon.name: "delete"
         type: StatusListItem.Type.Danger
     }
 
+    StatusListItem {
+        title: "List Item with Badge"
+        subTitle: "Subtitle"
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+    }
+
+    StatusListItem {
+        title: "List Item with Badge 2"
+        subTitle: "Subtitle"
+        icon.isLetterIdenticon: true
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+        badge.icon.color: "orange"
+        badge.icon.isLetterIdenticon: true
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"

sandbox/Models.qml

@@ -0,0 +1,332 @@
+import QtQuick 2.14
+import StatusQ.Components 0.1
+
+QtObject {
+
+    property var demoChatListItems: ListModel {
+        id: demoChatListItems
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            unreadMessagesCount: 0
+            mentionsCount: 0
+            color: "blue"
+            position: 0
+        }
+        ListElement {
+            chatId: "1"
+            name: "status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "red"
+            unreadMessagesCount: 1
+            mentionsCount: 1
+            position: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            unreadMessagesCount: 0
+            position: 2
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            color: "purple"
+            unreadMessagesCount: 0
+            position: 3
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            color: "Orange"
+            unreadMessagesCount: 0
+            position: 4
+        }
+        ListElement {
+            chatId: "5"
+            name: "channel-with-a-super-duper-long-name"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "green"
+            unreadMessagesCount: 0
+            position: 5
+        }
+    }
+
+    property var demoCommunityChatListItems: ListModel {
+        id: demoCommunityChatListItems
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            position: 0
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+            position: 0
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+            position: 1
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+            position: 0
+        }
+    }
+
+    property var demoCommunityCategoryItems: ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+            position: 0
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+            position: 1
+        }
+    }
+
+    property var demoProfileGeneralMenuItems: ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    property var demoProfileSettingsMenuItems: ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    property var demoProfileOtherMenuItems: ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
+        }
+    }
+
+    //dummy search popup models
+    property var searchResultsA: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
+            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "";
+            badgeIdenticonColor: "";
+            isLetterIdenticon: false }
+        ListElement { itemId: "i2"; titleId: "t2"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i6"; titleId: "t6"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i9"; titleId: "t9"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i10"; titleId: "t10"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+    }
+    property var searchResultsB: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
+            badgeImage: "";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "#design";
+            badgeIdenticonColor: "pink"; isLetterIdenticon: true }
+        ListElement { itemId: "i2"; titleId: "t2"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
+        ListElement { itemId: "i6"; titleId: "t6"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
+    }
+
+    property ListModel optionsModel: ListModel {
+        ListElement {
+            value: "item_1"
+            title: "Item with icon"
+            imageSource: ""
+            iconName: "chat"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_1_1"
+                    text: "Profile image item"
+                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_1_2"
+                    text: "identicon item"
+                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: true
+                }]}
+        ListElement {
+            value: "item_2"
+            title: "Community item";
+            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            iconName: ""
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_2_1"
+                    text: "welcome"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_2"
+                    text: "support"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_3"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_3"
+            title: "Other";
+            imageSource: "";
+            iconName: "info"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_3_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_4"
+            title: "Letter identicon";
+            imageSource: "";
+            iconName: ""
+            iconColor: "red"
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_4_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+    }
+}

sandbox/StatusInputPage.qml

@@ -0,0 +1,103 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusInput {
+        input.placeholderText: "Placeholder"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Disabled"
+        input.enabled: false
+    }
+
+    StatusInput {
+        input.placeholderText: "Clearable"
+        input.clearable: true
+    }
+
+    StatusInput {
+        input.placeholderText: "Invalid"
+        input.valid: false
+    }
+
+    StatusInput {
+        label: "Label"
+
+        input.icon.name: "search"
+        input.placeholderText: "Input with icon"
+    }
+
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Placeholder"
+        input.clearable: true
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        errorMessage: "Error message"
+
+        input.clearable: true
+        input.valid: false
+        input.placeholderText: "Placeholder"
+    }
+
+    StatusInput {
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Input with validator"
+
+        validators: [
+            StatusMinLengthValidator { minLength: 10 }
+        ]
+
+        onTextChanged: {
+            if (errors && errors.minLength) {
+                errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}`
+            }
+        }
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline"
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
+    }
+
+    StatusInput {
+        input.multiline: true
+        input.placeholderText: "Multiline with max/min"
+        input.minimumHeight: 80
+        input.maximumHeight: 200
+    }
+}

sandbox/StatusPopupMenuPage.qml

@@ -46,7 +46,7 @@ GridLayout {
 
     StatusPopupMenu {
         id: complexMenu
-        subMenuItemIcons: ['info']
+        subMenuItemIcons: [{ icon: 'info' }]
 
         StatusMenuItem { 
             text: "One" 
@@ -82,7 +82,7 @@ GridLayout {
         id: customMenu
 
         subMenuItemIcons: [
-            "chat", 
+            { icon: "chat" },
             { 
                 source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
             },

sandbox/main.qml

@@ -15,7 +15,7 @@ import StatusQ.Platform 0.1
 StatusWindow {
     id: rootWindow
     width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1024
+                                                                  :  1224
     height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                    :840
     visible: true
@@ -143,6 +143,11 @@ StatusWindow {
                             selected: page.sourceComponent == controlsComponent
                             onClicked: page.sourceComponent = controlsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusInput" 
+                            selected: page.sourceComponent == statusInputPageComponent
+                            onClicked: page.sourceComponent = statusInputPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "List Items"
@@ -236,6 +241,11 @@ StatusWindow {
         Controls {}
     }
 
+    Component {
+        id: statusInputPageComponent
+        StatusInputPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
@@ -277,6 +287,36 @@ StatusWindow {
         Rectangle {
             anchors.fill: parent
             color: Theme.palette.baseColor3
+
+            Row {
+                id: platformSwitch
+                anchors.left: demoApp.left
+                anchors.bottom: demoApp.top
+                anchors.bottomMargin: 20
+                spacing: 2
+
+                Text {
+                    text: "OSX"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StatusSwitch {
+                    onCheckedChanged: {
+                        if (checked) {
+                            demoApp.titleStyle = "windows"
+                        } else {
+                            demoApp.titleStyle = "osx"
+                        }
+                    }
+                }
+
+                Text {
+                    text: "Win"
+                    font.pixelSize: 15
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
             DemoApp {
                 id: demoApp
                 anchors.verticalCenter: parent.verticalCenter
@@ -299,6 +339,27 @@ StatusWindow {
         anchors.top: parent.top
         anchors.margins: 13
 
+        visible: Qt.platform.os == "osx"
+
+        onClose: {
+            rootWindow.close()
+        }
+
+        onMinimised: {
+            rootWindow.showMinimized()
+        }
+
+        onMaximized: {
+            rootWindow.toggleFullScreen()
+        }
+    }
+
+    StatusWindowsTitleBar {
+        anchors.top: parent.top
+        width: parent.width
+
+        visible: Qt.platform.os == "windows"
+
         onClose: {
             rootWindow.close()
         }

sandbox/qml.qrc

@@ -9,6 +9,7 @@
         <file>ListItems.qml</file>
         <file>StatusChatInfoToolBarPage.qml</file>
         <file>StatusPopupMenuPage.qml</file>
+        <file>StatusInputPage.qml</file>
         <file>ThemeSwitch.qml</file>
         <file>Layout.qml</file>
         <file>Popups.qml</file>

src/StatusQ/Components/StatusChatList.qml

@@ -1,7 +1,10 @@
 import QtQuick 2.13
+import QtQml.Models 2.14
+import QtQuick.Controls 2.13 as QC
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
@@ -13,7 +16,8 @@ Column {
 
     property string categoryId: ""
     property string selectedChatId: ""
-    property alias chatListItems: statusChatListItems
+    property alias chatListItems: delegateModel
+    property bool draggableItems: false
 
     property Component popupMenu
 
@@ -23,6 +27,7 @@ Column {
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
+    signal chatItemReordered(string id, int from, int to)
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -30,73 +35,189 @@ Column {
         }
     }
 
-    Repeater {
-        id: statusChatListItems
-        delegate: StatusChatListItem {
+    DelegateModel {
+        id: delegateModel
 
-            id: statusChatListItem
+        delegate: Item {
+            id: draggable
+            width: statusChatListItem.width
+            height: statusChatListItem.height
 
-            property string profileImage: ""
+            property alias chatListItem: statusChatListItem
 
-            Component.onCompleted: {
-                if (typeof statusChatList.profileImageFn === "function") {
-                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                }
-            }
-
-            chatId: model.chatId || model.id
-            name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
-            type: model.chatType
-            muted: !!model.muted
-            hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-            hasMention: model.mentionsCount > 0
-            badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
-                model.unviewedMessagesCount || 0 :
-                model.mentionsCount || 0
-            selected: (model.chatId || model.id) === statusChatList.selectedChatId
-
-            icon.color: model.color || ""
-            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-            image.source: profileImage || model.identityImage || model.identicon || ""
-
-            onClicked: {
-                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
-                    statusChatListItem.highlighted = true
-
-                    let originalOpenHandler = popupMenuSlot.item.openHandler
-                    let originalCloseHandler = popupMenuSlot.item.closeHandler
-
-                    popupMenuSlot.item.openHandler = function () {
-                        if (!!originalOpenHandler) {
-                            originalOpenHandler((model.chatId || model.id))
-                        }
-                    }
-
-                    popupMenuSlot.item.closeHandler = function () {
-                        if (statusChatListItem) {
-                            statusChatListItem.highlighted = false
-                        }
-                        if (!!originalCloseHandler) {
-                            originalCloseHandler()
-                        }
-                    }
-
-                    popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
-                    popupMenuSlot.item.openHandler = originalOpenHandler
-                    return
-                }
-                statusChatList.chatItemSelected(model.chatId || model.id)
-            }
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
             visible: {
                 if (!!statusChatList.filterFn) {
                     return statusChatList.filterFn(model, statusChatList.categoryId)
                 }
                 return true
             }
+
+            MouseArea {
+                id: dragSensor
+
+                anchors.fill: parent
+                cursorShape: active ? Qt.ClosedHandCursor : Qt.PointingHandCursor
+                hoverEnabled: true
+                pressAndHoldInterval: 150
+                enabled: statusChatList.draggableItems
+
+                property bool active: false
+                property real startY: 0
+                property real startX: 0
+
+                drag.target: draggedListItemLoader.item
+                drag.threshold: 0.1
+                drag.filterChildren: true
+
+                onPressed: {
+                    startY = mouseY
+                    startX = mouseX
+                }
+                onPressAndHold: active = true
+                onReleased: {
+                    if (active) {
+                        statusChatList.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, statusChatListItem.originalOrder)
+                    }
+                    active = false
+                }
+                onMouseYChanged: {
+                    if ((Math.abs(startY - mouseY) > 1) && pressed) {
+                        active = true
+                    }
+                }
+                onMouseXChanged: {
+                    if ((Math.abs(startX - mouseX) > 1) && pressed) {
+                        active = true
+                    }
+                }
+
+                StatusChatListItem {
+
+                    id: statusChatListItem
+
+                    property string profileImage: ""
+
+                    opacity: dragSensor.active ? 0.0 : 1.0
+                    Component.onCompleted: {
+                        if (typeof statusChatList.profileImageFn === "function") {
+                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                        }
+                    }
+                    originalOrder: model.position
+                    chatId: model.chatId || model.id
+                    categoryId: model.categoryId || ""
+                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
+                    type: model.chatType
+                    muted: !!model.muted
+                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
+                    hasMention: model.mentionsCount > 0
+                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
+                        model.unviewedMessagesCount || 0 :
+                        model.mentionsCount || 0
+                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
+
+                    icon.color: model.color || ""
+                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+                    image.source: profileImage || model.identityImage || model.identicon || ""
+
+                    sensor.cursorShape: dragSensor.cursorShape
+                    onClicked: {
+                        if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
+                            statusChatListItem.highlighted = true
+
+                            let originalOpenHandler = popupMenuSlot.item.openHandler
+                            let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                            popupMenuSlot.item.openHandler = function () {
+                                if (!!originalOpenHandler) {
+                                    originalOpenHandler((model.chatId || model.id))
+                                }
+                            }
+
+                            popupMenuSlot.item.closeHandler = function () {
+                                if (statusChatListItem) {
+                                    statusChatListItem.highlighted = false
+                                }
+                                if (!!originalCloseHandler) {
+                                    originalCloseHandler()
+                                }
+                            }
+
+                            popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
+                            popupMenuSlot.item.openHandler = originalOpenHandler
+                            return
+                        }
+                        if (!statusChatListItem.selected) {
+                            statusChatList.chatItemSelected(model.chatId || model.id)
+                        }
+                    }
+                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                }
+            }
+
+            DropArea {
+                id: dropArea
+                width: dragSensor.active ? 0 : parent.width
+                height: dragSensor.active ? 0 : parent.height
+                keys: ["chat-item-category-" + statusChatListItem.categoryId]
+
+                onEntered: reorderDelay.start()
+                onDropped: statusChatList.chatItemReordered(statusChatListItem.chatId, drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
+
+                Timer {
+                    id: reorderDelay
+                    interval: 100
+                    repeat: false
+                    onTriggered: {
+                        if (dropArea.containsDrag) {
+                            dropArea.drag.source.chatListItem.originalOrder = statusChatListItem.originalOrder
+                            delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
+                        }
+                    }
+                }
+            }
+
+            Loader {
+                id: draggedListItemLoader
+                active: dragSensor.active
+                sourceComponent: StatusChatListItem {
+                    property var globalPosition: Utils.getAbsolutePosition(draggable)
+                    parent: QC.Overlay.overlay
+                    sensor.cursorShape: dragSensor.cursorShape
+                    Drag.active: dragSensor.active
+                    Drag.hotSpot.x: width / 2
+                    Drag.hotSpot.y: height / 2
+                    Drag.keys: ["chat-item-category-" + categoryId]
+                    Drag.source: draggable
+
+                    Component.onCompleted: {
+                        x = globalPosition.x
+                        y = globalPosition.y
+                    }
+                    chatId: draggable.chatListItem.chatId
+                    categoryId: draggable.chatListItem.categoryId
+                    name: draggable.chatListItem.name
+                    type: draggable.chatListItem.type
+                    muted: draggable.chatListItem.muted
+                    dragged: true
+                    hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
+                    hasMention: draggable.chatListItem.hasMention
+                    badge.value: draggable.chatListItem.badge.value
+                    selected: draggable.chatListItem.selected
+
+                    icon.color: draggable.chatListItem.icon.color
+                    image.isIdenticon: draggable.chatListItem.image.isIdenticon
+                    image.source: draggable.chatListItem.image.source
+                }
+            }
         }
     }
 
+    Repeater {
+        id: statusChatListItems
+        model: delegateModel
+    }
+
     Loader {
         id: popupMenuSlot
         active: !!statusChatList.popupMenu

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
+import QtQml.Models 2.14
+import QtQuick.Controls 2.14 as QC
 
+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
@@ -14,8 +16,10 @@ Item {
     property bool showCategoryActionButtons: false
     property bool showPopupMenu: true
     property alias chatList: statusChatList.chatListItems
-    property alias categoryList: statusChatListCategories
+    property alias categoryList: delegateModel
     property alias sensor: sensor
+    property bool draggableItems: false
+    property bool draggableCategories: false
 
     property Component categoryPopupMenu
     property Component chatListPopupMenu
@@ -23,6 +27,8 @@ Item {
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
+    signal chatItemReordered(string categoryId, string chatId, int from, int to)
+    signal chatListCategoryReordered(string categoryId, int from, int to)
     signal categoryAddButtonClicked(string id)
 
     onPopupMenuChanged: {
@@ -54,34 +60,140 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: !!chatListItems.model && chatListItems.count > 0
+                visible: chatListItems.count > 0
                 selectedChatId: statusChatListAndCategories.selectedChatId
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
+                draggableItems: statusChatListAndCategories.draggableItems
                 filterFn: function (model) {
                     return !!!model.categoryId
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
+            DelegateModel {
+                id: delegateModel
+
+                delegate: Item {
+                    id: draggable
+                    width: statusChatListCategory.width
+                    height: statusChatListCategory.height
+
+                    property alias chatListCategory: statusChatListCategory
+
+                    StatusChatListCategory {
+                        id: statusChatListCategory
+
+                        property bool dragActive: false
+                        property real startY: 0
+                        property real startX: 0
+                      
+                        opacity: dragActive ? 0.0 : 1.0
+
+                        dragSensor.drag.target: draggedListCategoryLoader.item
+                        dragSensor.drag.threshold: 0.1
+                        dragSensor.drag.filterChildren: true
+                        dragSensor.onPressAndHold: {
+                            if (statusChatListAndCategories.draggableCategories) {
+                                dragActive = true
+                            }
+                        }
+                        dragSensor.onReleased: {
+                            if (dragActive) {
+                                statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, statusChatListCategory.originalOrder)
+                            }
+                            dragActive = false
+                        }
+                        dragSensor.cursorShape: dragActive ? Qt.ClosedHandCursor : Qt.PointingHandCursor
+                        dragSensor.onPressed: {
+                            startY = dragSensor.mouseY
+                            startX = dragSensor.mouseX
+                        }
+                        dragSensor.onMouseYChanged: {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
+                                dragActive = true
+                            }
+                        }
+                        dragSensor.onMouseXChanged: {
+                            if (statusChatListAndCategories.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
+                                dragActive = true
+                            }
+                        }
+
+                        originalOrder: model.position
+                        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)
+                        chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
+                        chatList.draggableItems: statusChatListAndCategories.draggableItems
+
+                        popupMenu: statusChatListAndCategories.categoryPopupMenu
+                        chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+                    }
+
+                    DropArea {
+                        id: dropArea
+                        width: draggable.chatListCategory.dragActive ? 0 : parent.width
+                        height: draggable.chatListCategory.dragActive ? 0 : parent.height
+                        keys: ["chat-category"]
+
+                        onEntered: reorderDelay.start()
+                        onDropped: statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, drag.source.originalOrder, statusChatListCategory.DelegateModel.itemsIndex)
+
+                        Timer {
+                            id: reorderDelay
+                            interval: 100
+                            repeat: false
+                            onTriggered: {
+                                if (dropArea.containsDrag) {
+                                    dropArea.drag.source.chatListCategory.originalOrder = statusChatListCategory.originalOrder
+                                    delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
+                                }
+                            }
+                        }
+                    }
+
+                    Loader {
+                        id: draggedListCategoryLoader
+                        active: draggable.chatListCategory.dragActive
+                        sourceComponent: StatusChatListCategory {
+                            property var globalPosition: Utils.getAbsolutePosition(draggable)
+                            parent: QC.Overlay.overlay
+
+                            dragSensor.cursorShape: draggable.chatListCategory.dragSensor.cursorShape
+                            Drag.active: draggable.chatListCategory.dragActive
+                            Drag.hotSpot.x: width / 2
+                            Drag.hotSpot.y: height / 2
+                            Drag.keys: ["chat-category"]
+                            Drag.source: draggable
+
+                            Component.onCompleted: {
+                                x = globalPosition.x
+                                y = globalPosition.y
+                            }
+                            dragged: true
+                            categoryId: draggable.chatListCategory.categoryId
+                            name: draggable.chatListCategory.name
+                            showActionButtons: draggable.chatListCategory.showActionButtons
+
+                            chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
+                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
+                        }
+                    }
+                }
+            }
+
             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)
-                    chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-
-                    popupMenu: statusChatListAndCategories.categoryPopupMenu
-                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
-                }
+                model: delegateModel
             }
         }
     }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -7,16 +7,21 @@ Column {
     id: statusChatListCategory
 
     spacing: 0
+    opacity: dragged ? 0.5 : 1
 
+    objectName: "chatListCategory"
+    property int originalOrder: -1
     property string categoryId: ""
     property string name: ""
     property bool opened: true
+    property bool dragged: false
 
     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 alias dragSensor: statusChatListCategoryItem.sensor
 
     property Component chatListPopupMenu
     property Component popupMenu
@@ -31,10 +36,12 @@ Column {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
+        sensor.pressAndHoldInterval: 150
 
         showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
 
-        onClicked: {
+        highlighted: statusChatListCategory.dragged
+        sensor.onClicked: {
             if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                 highlighted = true
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
@@ -42,6 +49,8 @@ Column {
             }
             statusChatListCategory.opened = !opened
         }
+
+        onTitleClicked: statusChatListCategory.opened = !opened
         onToggleButtonClicked: statusChatListCategory.opened = !opened
         onMenuButtonClicked: {
             highlighted = true

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -23,15 +23,12 @@ StatusListItem {
     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
 

src/StatusQ/Components/StatusChatListItem.qml

@@ -1,4 +1,8 @@
 import QtQuick 2.13
+import QtQml.Models 2.13
+import QtQuick.Controls 2.13 as QC
+import QtGraphicalEffects 1.13
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -7,7 +11,10 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusChatListItem
 
+    objectName: "chatItem"
+    property int originalOrder: -1
     property string chatId: ""
+    property string categoryId: ""
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
@@ -20,6 +27,8 @@ Rectangle {
     property int type: StatusChatListItem.Type.PublicChat
     property bool highlighted: false
     property bool selected: false
+    property bool dragged: false
+    property alias sensor: sensor
 
     signal clicked(var mouse)
     signal unmute()
@@ -46,11 +55,13 @@ Rectangle {
         return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
+    opacity: dragged ? 0.7 : 1
+
     MouseArea {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
@@ -63,7 +74,7 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             sourceComponent: !!statusChatListItem.image.source.toString() ?
-                statusRoundedImageCmp : statusLetterIdenticonCmp
+                                 statusRoundedImageCmp : statusLetterIdenticonCmp
         }
 
         Component {
@@ -89,8 +100,8 @@ Rectangle {
                     image.source: statusChatListItem.image.source
                     showLoadingIndicator: true
                     color: statusChatListItem.image.isIdenticon ?
-                        Theme.palette.statusRoundedImage.backgroundColor :
-                        "transparent"
+                               Theme.palette.statusRoundedImage.backgroundColor :
+                               "transparent"
                     border.width: statusChatListItem.image.isIdenticon ? 1 : 0
                     border.color: Theme.palette.directColor7
                 }
@@ -114,27 +125,27 @@ Rectangle {
                 if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages || 
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  statusBadge.visible ||
-                  sensor.containsMouse ? 1.0 : 0.7
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        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"
+                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"
                 }
             }
         }
@@ -144,30 +155,30 @@ Rectangle {
             anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
             anchors.leftMargin: statusIcon.visible ? 1 : 8
             anchors.right: mutedIcon.visible ? mutedIcon.left :
-                statusBadge.visible ? statusBadge.left : parent.right
+                                               statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                !statusChatListItem.name.startsWith("#") ?
-                "#" + statusChatListItem.name :
-                statusChatListItem.name
+            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                  !statusChatListItem.name.startsWith("#") ?
+                      "#" + statusChatListItem.name :
+                      statusChatListItem.name)
             elide: Text.ElideRight
             color: {
                 if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages ||
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  sensor.containsMouse ||
-                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        sensor.containsMouse ||
+                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
             font.weight: !statusChatListItem.muted &&
-              (statusChatListItem.hasMention || 
-              statusChatListItem.hasUnreadMessages ||
-              statusBadge.visible) ? Font.Bold : Font.Medium
+                         (statusChatListItem.hasMention ||
+                          statusChatListItem.hasUnreadMessages ||
+                          statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
 
@@ -184,7 +195,7 @@ Rectangle {
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor 
+                cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 onClicked: statusChatListItem.unmute()
             }
@@ -207,6 +218,5 @@ Rectangle {
             border.color: color
             visible: statusBadge.value > 0
         }
-
     }
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -56,12 +56,10 @@ Rectangle {
             type: StatusFlatRoundButton.Type.Secondary
             onClicked: statusChatToolBar.searchButtonClicked()
 
-            StatusToolTip {
-                visible: !!text && parent.hovered
-                text: "Search"
-                orientation: StatusToolTip.Orientation.Bottom
-                y: parent.height + 12
-            }
+            // initializing the tooltip
+            tooltip.text: "Search"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
         }
 
         StatusFlatRoundButton {
@@ -72,12 +70,10 @@ Rectangle {
             type: StatusFlatRoundButton.Type.Secondary
             onClicked: statusChatToolBar.membersButtonClicked()
 
-            StatusToolTip {
-                visible: !!text && parent.hovered
-                text: "Members"
-                orientation: StatusToolTip.Orientation.Bottom
-                y: parent.height + 12
-            }
+            // initializing the tooltip
+            tooltip.text: "Members"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
         }
 
         StatusFlatRoundButton {
@@ -88,17 +84,23 @@ Rectangle {
             type: StatusFlatRoundButton.Type.Secondary
             visible: !!statusChatToolBar.popupMenu
 
+            // initializing the tooltip
+            tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
+            tooltip.text: "More"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+
+            property bool showMoreMenu: false
             onClicked: {
-                statusChatToolBar.menuButtonClicked()
+                if (showMoreMenu) {
+                    popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                }
                 highlighted = true
-                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                statusChatToolBar.menuButtonClicked()
             }
 
-            StatusToolTip {
-                visible: !!text && parent.hovered && !popupMenuSlot.item.opened
-                text: "More"
-                orientation: StatusToolTip.Orientation.Bottom
-                y: parent.height + 12
+            onPressed: {
+                showMoreMenu = !showMoreMenu;
             }
 
             Loader {
@@ -130,6 +132,11 @@ Rectangle {
             icon.height: 21
             type: StatusFlatRoundButton.Type.Secondary
 
+            // initializing the tooltip
+            tooltip.text: "Activity"
+            tooltip.orientation: StatusToolTip.Orientation.Bottom
+            tooltip.y: parent.height + 12
+
             onClicked: statusChatToolBar.notificationButtonClicked()
 
             StatusBadge {
@@ -153,14 +160,6 @@ Rectangle {
                 border.width: 2
                 border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
             }
-
-            StatusToolTip {
-                visible: !!text && parent.hovered
-                text: "Activity"
-                orientation: StatusToolTip.Orientation.Bottom
-                y: parent.height + 12
-                arrow.x: width - (parent.width-4)
-            }
         }
 
     }

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -5,6 +5,7 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: statusLetterIdenticon
 
+    property alias identiconText: identiconText
     property string name
     property int letterSize: 21
 
@@ -14,7 +15,10 @@ Rectangle {
     radius: width / 2
 
     StatusBaseText {
-        text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        id: identiconText
+        text: ((statusLetterIdenticon.name.charAt(0) === "#")
+              || (statusLetterIdenticon.name.charAt(0) === "@") ?
+              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
         font.weight: Font.Bold
         font.pixelSize: statusLetterIdenticon.letterSize
         color: Qt.rgba(255, 255, 255, 0.7)

src/StatusQ/Components/StatusListItem.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -32,11 +34,18 @@ Rectangle {
 
     radius: 8
 
+    property string itemId: ""
+    property string titleId: ""
+
     property string title: ""
+    property string titleAsideText: ""
     property string subTitle: ""
     property string tertiaryTitle: ""
+    property alias badge: statusListItemBadge
+
     property real leftPadding: 16
     property real rightPadding: 16
+    property bool enabled: true
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
@@ -77,6 +86,9 @@ Rectangle {
 
     property list<Item> components
 
+    signal clicked(string itemId)
+    signal titleClicked(string titleId)
+
     onComponentsChanged: {
         if (components.length) {
             for (let idx in components) {
@@ -88,11 +100,16 @@ Rectangle {
     MouseArea {
         id: sensor
 
+        enabled: statusListItem.enabled
         anchors.fill: parent
         cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
+        onClicked: {
+            statusListItem.clicked(statusListItem.itemId)
+        }
+
         Loader {
             id: iconOrImage
             anchors.left: parent.left
@@ -105,6 +122,7 @@ Rectangle {
                 }
                 return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
             }
+
             active: statusListItem.icon.isLetterIdenticon || 
                     !!statusListItem.icon.name || 
                     !!statusListItem.image.source.toString()
@@ -156,17 +174,18 @@ Rectangle {
             anchors.leftMargin: statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter: parent.verticalCenter
-            height: statusListItemTitle.height + 
-              (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
-              (statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
+            height: childrenRect.height
 
             StatusBaseText {
                 id: statusListItemTitle
                 text: statusListItem.title
-                width: parent.width
                 font.pixelSize: 15
+                height: visible ? contentHeight : 0
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 color: {
+                  if (!statusListItem.enabled) {
+                    return Theme.palette.baseColor1
+                  }
                   switch (statusListItem.type) {
                       case StatusListItem.Type.Primary:
                           return Theme.palette.directColor1
@@ -176,6 +195,26 @@ Rectangle {
                           return Theme.palette.dangerColor1
                   }
                 }
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
+                    hoverEnabled: true
+                    onClicked: {
+                        statusListItem.titleClicked(statusListItem.titleId)
+                    }
+                }
+            }
+
+            StatusBaseText {
+                id: statusListItemTitleAsideText
+                anchors.left: statusListItemTitle.right
+                anchors.leftMargin: 4
+                anchors.verticalCenter: statusListItemTitle.verticalCenter
+                text: statusListItem.titleAsideText
+                font.pixelSize: 10
+                color: Theme.palette.baseColor1
+                visible: !!statusListItem.titleAsideText
             }
 
             StatusBaseText {
@@ -184,7 +223,8 @@ Rectangle {
                 width: parent.width
                 text: statusListItem.subTitle
                 font.pixelSize: 15
-                color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                height: visible ? contentHeight : 0
                 visible: !!statusListItem.subTitle
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
@@ -193,12 +233,20 @@ Rectangle {
                 id: statusListItemTertiaryTitle
                 anchors.top: statusListItemSubTitle.bottom
                 width: parent.width
+                height: visible ? contentHeight : 0
                 text: statusListItem.tertiaryTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 13
                 visible: !!statusListItem.tertiaryTitle
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
+
+            StatusListItemBadge {
+                id: statusListItemBadge
+                anchors.top: statusListItemTertiaryTitle.bottom
+                width: contentItem.width
+                implicitHeight: visible ? 22 : 0
+            }
         }
 
         StatusBaseText {

src/StatusQ/Components/StatusListItemBadge.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Control {
+    id: root
+    implicitWidth: contentItem.width
+    implicitHeight: visible ? 22 : 0
+    visible: !!root.primaryText
+
+    property string primaryText: ""
+    property string secondaryText: ""
+
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 16
+        width: 16
+        isLetterIdenticon: false
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: 11
+        border.color: Theme.palette.directColor7
+    }
+
+    contentItem: Item {
+        id: contentItem
+        width: (contentItemRow.width + 10)
+        height: parent.height
+        RowLayout {
+            id: contentItemRow
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: -spacing
+            spacing: 2
+            StatusRoundedImage {
+                implicitWidth: root.image.width
+                implicitHeight: root.image.height
+                visible: !root.icon.isLetterIdenticon
+                image.source: root.image.source
+                border.color: Theme.palette.baseColor1
+                border.width: root.image.isIdenticon ? 1 : 0
+            }
+            StatusLetterIdenticon {
+                implicitWidth: root.icon.width
+                implicitHeight: root.icon.width
+                letterSize: 11
+                visible: root.icon.isLetterIdenticon
+                color: root.icon.color
+                name: root.primaryText
+            }
+            StatusBaseText {
+                font.weight: Font.Medium
+                color: Theme.palette.baseColor1
+                text: root.primaryText
+            }
+            StatusIcon {
+                Layout.alignment: Qt.AlignVCenter
+                visible: !!root.secondaryText
+                color: Theme.palette.baseColor1
+                icon: "next"
+            }
+            StatusBaseText {
+                font.weight: Font.Medium
+                color: Theme.palette.baseColor1
+                visible: !!root.secondaryText
+                text: root.secondaryText
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusNavigationListItem.qml

@@ -6,7 +6,6 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusNavigationListItem
 
-    signal clicked(var mouse)
     property bool selected: false
     property alias badge: statusBadge
 

src/StatusQ/Components/qmldir

@@ -19,3 +19,4 @@ StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
+StatusListItemBadge 0.1 StatusListItemBadge.qml

src/StatusQ/Controls/StatusBaseInput.qml

@@ -20,6 +20,9 @@ Item {
     property alias selectedTextColor: edit.selectedTextColor
     property alias selectionStart: edit.selectionStart
     property alias selectionEnd: edit.selectionEnd
+    property alias cursorPosition: edit.cursorPosition
+
+    property alias text: edit.text
 
     property alias color: edit.color
     property alias font: edit.font
@@ -32,35 +35,71 @@ Item {
 
     property real leftPadding: 16
     property real rightPadding: 16
-    property real topPadding: 11
-    property real bottomPadding: 11
+    property real topPadding: 12
+    property real bottomPadding: 12
 
     property real minimumHeight: 0
     property real maximumHeight: 0
+    property int maximumLength: 0
 
-    implicitWidth: 200
-    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
+    property bool valid: true
+    property bool pristine: true
+    property bool dirty: false
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        name: ""
+    }
+
+    implicitWidth: 448
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44
 
     Rectangle {
         width: parent.width
         height: maximumHeight != 0 ? Math.min(
-                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
-                                                          : implicitHeight,
+                                         minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                                            : implicitHeight,
                                          maximumHeight)
-                                  : parent.height
+                                   : parent.height
         color: Theme.palette.baseColor2
         radius: 8
 
         clip: true
 
         border.width: 1
-        border.color: edit.activeFocus ? Theme.palette.primaryColor1 : "transparent"
+        border.color: {
+            if (!statusBaseInput.valid && statusBaseInput.dirty) {
+                return Theme.palette.dangerColor1;
+            }
+            if (edit.activeFocus) {
+                return Theme.palette.primaryColor1;
+            }
+            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
+        }
+
+        StatusIcon {
+            id: statusIcon
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.topMargin: 10
+
+            icon: statusBaseInput.icon.name
+            width: statusBaseInput.icon.width
+            height: statusBaseInput.icon.height
+            color: Theme.palette.baseColor1
+            visible: !!statusBaseInput.icon.name
+        }
 
         Flickable {
             id: flick
 
-            anchors.fill: parent
-            anchors.leftMargin: statusBaseInput.leftPadding
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: statusIcon.visible ? statusIcon.right : parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: statusIcon.visible ? 8 : statusBaseInput.leftPadding
             anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
             anchors.topMargin: statusBaseInput.topPadding
             anchors.bottomMargin: statusBaseInput.bottomPadding
@@ -86,17 +125,25 @@ Item {
 
             TextEdit {
                 id: edit
+                property string previousText: text
+
                 width: flick.width
                 selectByMouse: true
+                selectionColor: Theme.palette.primaryColor2
+                selectedTextColor: color
                 anchors.verticalCenter: parent.verticalCenter
                 focus: true
-
                 font.pixelSize: 15
                 font.family: Theme.palette.baseFont.name
                 color: Theme.palette.directColor1
-
                 onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
-                wrapMode: TextEdit.NoWrap
+                wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
+
+                onActiveFocusChanged: {
+                    if (statusBaseInput.pristine) {
+                        statusBaseInput.pristine = false
+                    }
+                }
 
                 Keys.onReturnPressed: {
                     if (multiline) {
@@ -114,31 +161,55 @@ Item {
                     }
                 }
 
+                onTextChanged: {
+                    statusBaseInput.dirty = true
+                    if (statusBaseInput.maximumLength > 0) {
+                        if (text.length > statusBaseInput.maximumLength) {
+                            var cursor = cursorPosition;
+                            text = previousText;
+                            if (cursor > text.length) {
+                                cursorPosition = text.length;
+                            } else {
+                                cursorPosition = cursor-1;
+                            }
+                        }
+                        previousText = text
+                    }
+                }
+
                 StatusBaseText {
                     id: placeholder
                     visible: edit.text.length === 0
                     anchors.left: parent.left
                     anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
                     font.pixelSize: 15
 
                     elide: StatusBaseText.ElideRight
                     font.family: Theme.palette.baseFont.name
-                    color: Theme.palette.baseColor1
+                    color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
+                                                     Theme.palette.directColor6
                 }
             }
-        } // Flickable
 
+        } // Flickable
         MouseArea {
+            id: sensor
+            enabled: !edit.activeFocus
+            hoverEnabled: true
             anchors.fill: parent
             cursorShape: Qt.IBeamCursor
-            enabled: !edit.activeFocus
             onClicked: edit.forceActiveFocus()
         }
+
     } // Rectangle
 
     StatusFlatRoundButton {
         id: clearButtton
-        visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
+        visible: edit.text.length != 0 &&
+                 statusBaseInput.clearable &&
+                 !statusBaseInput.multiline &&
+                 edit.activeFocus
         anchors.right: parent.right
         anchors.rightMargin: 11
         anchors.verticalCenter: parent.verticalCenter
@@ -148,6 +219,7 @@ Item {
         icon.name: "clear"
         icon.width: 14
         icon.height: 14
+        icon.color: Theme.palette.baseColor1
         onClicked: {
             edit.clear()
         }

src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -34,6 +34,7 @@ Rectangle {
     property bool loading: false
 
     property alias hovered: sensor.containsMouse
+    property alias tooltip: statusToolTip
 
     property bool highlighted: false
 
@@ -151,4 +152,9 @@ Rectangle {
         onReleased: statusFlatRoundButton.released(mouse)
         onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
     } // Sensor
+
+    StatusToolTip {
+        id: statusToolTip
+        visible: !!text && parent.hovered
+    } // Tooltip
 } // Rectangle

src/StatusQ/Controls/StatusInput.qml

@@ -0,0 +1,119 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+
+Item {
+    id: root
+    implicitWidth: 480
+    height: (label.visible ? 
+                  label.anchors.topMargin +
+                  label.height :
+              charLimitLabel.visible ?
+                  charLimitLabel.anchors.topMargin +
+                  charLimitLabel.height :
+              0) +
+            statusBaseInput.anchors.topMargin +
+            statusBaseInput.height + 
+            (errorMessage.visible ? 
+                  errorMessage.anchors.topMargin +
+                  errorMessage.height :
+                  0) + 8
+
+    property alias input: statusBaseInput
+    property alias valid: statusBaseInput.valid
+    property alias text: statusBaseInput.text
+    property string label: ""
+    property int charLimit: 0
+    property string errorMessage: ""
+    property list<StatusValidator> validators
+
+    property var errors: ({})
+
+    function validate() {
+        if (validators.length) {
+            for (let idx in validators) {
+                let result = validators[idx].validate(statusBaseInput.text)
+
+                if (typeof result === "boolean" && result) {
+                    statusBaseInput.valid = true
+                } else {
+                    if (!errors) {
+                        errors = {}
+                    }
+                    errors[validators[idx].name] = result
+                    statusBaseInput.valid = false
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: validate()
+
+    StatusBaseText {
+        id: label
+        height: visible ? 17 : 0
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.topMargin: visible ? 8 : 0
+        anchors.leftMargin: 16
+        anchors.right: charLimitLabel.visible ? charLimitLabel.left : parent.right
+        anchors.rightMargin: 16
+        visible: !!root.label
+        elide: Text.ElideRight
+
+        text: root.label
+        font.pixelSize: 15
+        color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    }
+
+    StatusBaseText {
+        id: charLimitLabel
+        height: visible ? implicitHeight : 0
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: visible ? 11 : 0
+        anchors.rightMargin: 16
+        visible: root.charLimit > 0
+
+        text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
+        font.pixelSize: 12
+        color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
+    }
+
+    StatusBaseInput {
+        id: statusBaseInput
+        anchors.top:  label.visible ? label.bottom : 
+                charLimitLabel.visible ? charLimitLabel.bottom : parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: charLimitLabel.visible ? 11 : 8
+        anchors.leftMargin: 16
+        anchors.rightMargin: 16
+
+        maximumLength: root.charLimit
+        onTextChanged: root.validate()
+    }
+
+    StatusBaseText {
+        id: errorMessage
+
+        anchors.top: statusBaseInput.bottom
+        anchors.topMargin: 11
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        height: visible ? implicitHeight : 0
+        visible: !!root.errorMessage && !statusBaseInput.valid
+
+        font.pixelSize: 12
+        color: Theme.palette.dangerColor1
+        text: root.errorMessage
+        horizontalAlignment: Text.AlignRight
+        wrapMode: Text.WordWrap
+    }
+}

src/StatusQ/Controls/StatusToolTip.qml

@@ -15,6 +15,7 @@ ToolTip {
 
     property int maxWidth: 800
     property int orientation: StatusToolTip.Orientation.Top
+    property int offset: 0
     property alias arrow: arrow
 
     implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
@@ -41,13 +42,13 @@ ToolTip {
             radius: 1
             x: {
                 if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
-                    return statusToolTipBackground.width / 2 - width / 2
+                    return statusToolTipBackground.width / 2 - width / 2 + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Left) {
-                    return statusToolTipContentBackground.width - (width / 2) - 8
+                    return statusToolTipContentBackground.width - (width / 2) - 8 + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Right) {
-                    return -width/2 + 8
+                    return -width/2 + 8 + offset
                 }
             }
             y: {

src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml

@@ -0,0 +1,16 @@
+import StatusQ.Controls 0.1
+
+StatusValidator {
+
+    property int minLength: 0
+
+    name: "minLength"
+
+    validate: function (value) {
+        return value.length >= minLength ? true : {
+            min: minLength,
+            actual: value.length
+        }
+    }
+}
+

src/StatusQ/Controls/Validators/StatusValidator.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusValidator
+
+    property string name: ""
+
+    property var validate: function (value) {
+        return true
+    }
+}

src/StatusQ/Controls/Validators/qmldir

@@ -0,0 +1,5 @@
+module StatusQ.Controls.Validators
+
+StatusValidator 0.1 StatusValidator.qml
+StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
+StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml

src/StatusQ/Controls/qmldir

@@ -15,4 +15,5 @@ StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
+StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -104,6 +104,7 @@ ThemePalette {
     directColor6: getColor('white', 0.2)
     directColor7: getColor('white', 0.1)
     directColor8: getColor('white', 0.05)
+    directColor9: getColor('white', 0.2)
 
     indirectColor1: getColor('black')
     indirectColor2: getColor('black', 0.7)
@@ -172,5 +173,9 @@ ThemePalette {
     property QtObject statusRoundedImage: QtObject {
         property color backgroundColor: baseColor3
     }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#414141"
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -102,6 +102,7 @@ ThemePalette {
     directColor6: getColor('black', 0.3)
     directColor7: getColor('black', 0.1)
     directColor8: getColor('black', 0.05)
+    directColor9: getColor('black', 0.2)
 
     indirectColor1: getColor('white')
     indirectColor2: getColor('white', 0.7)
@@ -170,5 +171,9 @@ ThemePalette {
     property QtObject statusRoundedImage: QtObject {
         property color backgroundColor: white
     }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#E2E6E8"
+    }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -64,6 +64,7 @@ QtObject {
     property color directColor6
     property color directColor7
     property color directColor8
+    property color directColor9
 
     property color indirectColor1
     property color indirectColor2
@@ -134,6 +135,10 @@ QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/Utils/Utils.qml

@@ -0,0 +1,19 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+QtObject {
+    function getAbsolutePosition(node) {
+        var returnPos = {};
+        returnPos.x = 0;
+        returnPos.y = 0;
+        if (node !== undefined && node !== null) {
+            var parentValue = getAbsolutePosition(node.parent);
+            returnPos.x = parentValue.x + node.x;
+            returnPos.y = parentValue.y + node.y;
+        }
+        return returnPos;
+    }
+}
+
+

src/StatusQ/Core/Utils/qmldir

@@ -0,0 +1,4 @@
+module StatusQ.Core.Utils
+
+singleton Utils 0.1 Utils.qml
+

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -10,6 +10,8 @@ Rectangle {
     id: statusAppNavBar
 
     property StatusNavBarTabButton navBarChatButton
+    property StatusNavBarTabButton navBarProfileButton
+
     property list<StatusNavBarTabButton> navBarTabButtons
     property alias navBarCommunityTabButtons: navBarCommunityTabButtons
 
@@ -34,6 +36,12 @@ Rectangle {
         }
     }
 
+    onNavBarProfileButtonChanged: {
+        if (!!navBarProfileButton) {
+            navBarProfileButton.parent = navBarProfileButtonSlot
+        }
+    }
+
     onNavBarTabButtonsChanged: {
         if (navBarTabButtons.length) {
             for (let idx in navBarTabButtons) {
@@ -75,7 +83,9 @@ Rectangle {
             if (navBarContentHeight > statusAppNavBar.height) {
                 height = statusAppNavBar.height - 
                          statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
-                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
+                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
+                         navBarProfileButtonSlot.height -
+                         navBarProfileButtonSlot.anchors.bottomMargin
                 bottomPadding = 16
                 topPadding = 16
             } else {
@@ -122,7 +132,7 @@ Rectangle {
             if (navBarContentHeight > statusAppNavBar.height) {
                 anchors.top = undefined
                 anchors.topMargin = 0
-                anchors.bottom = statusAppNavBar.bottom
+                anchors.bottom = navBarProfileButtonSlot.top
                 anchors.bottomMargin = 32
             } else {
                 anchors.bottom = undefined
@@ -132,5 +142,15 @@ Rectangle {
             }
         }
     }
+
+    Item {
+        id: navBarProfileButtonSlot
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: visible ? statusAppNavBar.navBarProfileButton.height : 0
+        width: visible ? statusAppNavBar.navBarProfileButton.width : 0
+        visible: !!statusAppNavBar.navBarProfileButton
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: visible ? 32 : 0
+    }
 }
 

src/StatusQ/Layout/StatusAppThreePanelLayout.qml

@@ -4,7 +4,6 @@ import StatusQ.Core.Theme 0.1
 
 SplitView {
     id: root
-
     implicitWidth: 822
     implicitHeight: 600
 
@@ -16,6 +15,7 @@ SplitView {
     property bool showRightPanel
 
     Control {
+        SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
         SplitView.fillHeight: true
         contentItem: (!!leftPanel) ? leftPanel : null
@@ -26,6 +26,7 @@ SplitView {
     }
 
     Control {
+        SplitView.minimumWidth: 300
         SplitView.fillWidth: true
         SplitView.fillHeight: true
         contentItem: (!!centerPanel) ? centerPanel : null
@@ -37,7 +38,7 @@ SplitView {
 
     Control {
         SplitView.preferredWidth: root.showRightPanel ? 250 : 0
-        SplitView.minimumWidth: root.showRightPanel ? 50 : 0
+        SplitView.minimumWidth: root.showRightPanel ? 58 : 0
         opacity: root.showRightPanel ? 1.0 : 0.0
         visible: (opacity > 0.1)
         contentItem: Loader {

src/StatusQ/Platform/StatusWindowsTitleBar.qml

@@ -0,0 +1,118 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+
+Rectangle {
+    id: windowsTitleBar
+
+    property string title: titleText.text
+
+    signal close();
+    signal minimised();
+    signal maximized();
+
+    implicitHeight: 32
+    color: Theme.palette.baseColor5
+
+    Row {
+        id: titleLayout
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 4
+
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 16
+            height: 16
+            icon: "windows_titlebar/status"
+        }
+
+        StatusBaseText {
+            id: titleText
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Status")
+            color: Theme.palette.directColor1
+        }
+    }
+
+    Row {
+        id: buttonsLayout
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        height: parent.height
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 1
+                icon: "windows_titlebar/minimise"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: minimizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.minimised()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/maximize"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: maximizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.maximized()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/close"
+                color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: closeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.closed()
+            }
+        }
+    }
+}

src/StatusQ/Platform/qmldir

@@ -1,5 +1,5 @@
 module StatusQ.Platform
 
 StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
-
+StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml
 

src/StatusQ/Popups/StatusModal.qml

@@ -19,6 +19,8 @@ QC.Popup {
     property alias contentComponent: contentLoader.item
     property alias rightButtons: footerImpl.rightButtons
     property alias leftButtons: footerImpl.leftButtons
+    property bool showHeader: true
+    property bool showFooter: true
 
     signal editButtonClicked()
 
@@ -46,8 +48,9 @@ QC.Popup {
         width: parent.width
         Spares.StatusModalHeader {
             id: headerImpl
-            width: 480
+            width: visible ? parent.width : 0
 
+            visible: statusModal.showHeader
             title: header.title
             subTitle: header.subTitle
             image: header.image
@@ -59,14 +62,15 @@ QC.Popup {
 
         Loader {
             id: contentLoader
+            width: parent.width
             active: true
-            anchors.horizontalCenter: parent.horizontalCenter
             sourceComponent: statusModal.content
         }
 
         Spares.StatusModalFooter {
             id: footerImpl
-            width: 480
+            width: visible ? parent.width : 0
+            visible: statusModal.showFooter
         }
     }
 }

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -10,16 +10,18 @@ import StatusQ.Popups 0.1
 
 Menu {
     id: statusPopupMenu
-
-    closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
+    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
     topPadding: 8
     bottomPadding: 8
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
+
     property var openHandler
     property var closeHandler
 
+    signal menuItemClicked(int menuIndex)
+
     onOpened: {
         if (typeof openHandler === "function") {
             openHandler()
@@ -34,19 +36,21 @@ Menu {
 
     delegate: MenuItem {
         id: statusPopupMenuItem
-
+        implicitWidth: parent ? parent.width : 0
         implicitHeight: action.enabled ? 38 : 0
 
         property int subMenuIndex
 
         Component.onCompleted: {
-            if (subMenu) {
+            if (!!subMenu) {
                 subMenuIndex = statusPopupMenu.menuItemCount
                 statusPopupMenu.menuItemCount += 1
             }
         }
 
-        action: StatusMenuItem {}
+        action: StatusMenuItem {
+            onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
+        }
 
         Component {
             id: indicatorComponent
@@ -63,12 +67,17 @@ Menu {
                     }
                     rotation: statusPopupMenuItem.action.iconRotation
                     icon: {
-                        if (statusPopupMenuItem.subMenu) {
-                            return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
+                        if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
+                            statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
+                            return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
+                        } else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.name !== "") {
+                            return statusPopupMenuItem.action.icon.name;
+                        } else if (statusPopupMenuItem.action.iconSettings.name !== "") {
+                            return statusPopupMenuItem.action.iconSettings.name;
+                        } else {
+                            return "";
                         }
-                        return statusPopupMenuItem.action.icon.name ||
-                          statusPopupMenuItem.action.iconSettings.name
-                    }   
+                    }
                     color: {
                         let c = statusPopupMenuItem.action.iconSettings.color ||
                             statusPopupMenuItem.action.icon.color
@@ -132,23 +141,30 @@ Menu {
             sourceComponent: {
                 let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
                 
-                if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || !!statusPopupMenuItem.action.image.source.toString()) {
+                if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || 
+                    statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
                     return statusRoundImageCmp
                 }
 
                 return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || 
-                    statusPopupMenuItem.action.iconSettings.isLetterIdenticon ? 
+                    (statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ? 
                     statusLetterIdenticonCmp : 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.iconSettings.name) ||
-                !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon ||
-                !!statusPopupMenuItem.action.image.source.toString()) &&
-                statusPopupMenuItem.action.enabled
+            active: {
+                if (enabled) {
+                    let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
+                      (statusPopupMenuItem.action.iconSettings && 
+                        (!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
+
+                    let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
+
+                    return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
+                }
+                return false
+            }      
         }
 
         contentItem: StatusBaseText {
@@ -188,7 +204,7 @@ Menu {
 
         background: Rectangle {
             color: {
-                if (hovered) {
+                if (statusPopupMenuItem.hovered) {
                     return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
                 }
                 return "transparent"
@@ -197,9 +213,8 @@ Menu {
 
         MouseArea {
             id: sensor
-
             anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor 
+            cursorShape: Qt.PointingHandCursor
             hoverEnabled: statusPopupMenuItem.action.enabled
             onPressed: mouse.accepted = false
         }

src/StatusQ/Popups/StatusSearchLocationMenu.qml

@@ -0,0 +1,144 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+StatusPopupMenu {
+    id: root
+
+    property var searchPopup
+    property var locationModel
+
+    signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)
+
+    StatusMenuItem {
+        text: "Anywhere"
+        onTriggered: {
+            searchPopup.resetSearchSelection();
+            root.itemClicked("", "");
+        }
+    }
+    StatusMenuSeparator { }
+    //Dummy item to keep seperator in right position
+    MenuItem { implicitHeight: 0.00001 }
+    Instantiator {
+        model: root.locationModel
+        delegate: Loader {
+            sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
+            onLoaded: {
+                if (!!model.subItems && model.subItems.count > 0)  {
+                    item.parentValue = model.value
+                    item.title = model.title;
+                    item.subItemsModel = model.subItems;
+                    item.parentIconName = model.iconName;
+                    item.parentImageSource = model.imageSource;
+                    item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
+                    item.parentIsIdenticon = model.isIdenticon;
+                    root.subMenuItemIcons.push({
+                                    source: model.imageSource,
+                                    icon: model.iconName,
+                                    isIdenticon: model.isIdenticon,
+                                    color: model.iconColor,
+                                    isLetterIdenticon: !model.imageSource && !model.iconName
+                                   });
+                    root.insertMenu(index+2, item);
+                } else {
+                    item.value = model.value
+                    item.text = model.title;
+                    item.iconSettings.name = model.iconName;
+                    item.iconSettings.color = model.iconColor;
+                    item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
+                    item.image.source = model.imageSource;
+                    item.image.isIdenticon = model.isIdenticon;
+                    root.insertItem(index+2, item);
+                }
+            }
+        }
+        onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
+    }
+
+    Component {
+        id: subMenuItemComponent
+        StatusSearchPopupMenuItem {
+            onClicked: {
+                searchPopup.resetSearchSelection()
+                searchPopup.setSearchSelection(text,
+                                               "",
+                                               image.source,
+                                               image.isIdenticon,
+                                               iconSettings.name,
+                                               iconSettings.color)
+                root.itemClicked(value, "")
+            }
+        }
+    }
+
+    Component {
+        id: subMenus
+        StatusPopupMenu {
+            id: menu
+            property var subItemsModel
+            property string parentValue
+            property string parentIconName
+            property string parentImageSource
+            property string parentIdenticonColor
+            property string parentIsIdenticon
+            Repeater {
+                id: menuLoader
+                model: menu.subItemsModel
+                property string parentValue: menu.parentValue
+                property string parentTitleText: menu.title
+                property string parentIconName: menu.parentIconName
+                property string parentImageSource: menu.parentImageSource
+                property string parentIdenticonColor: menu.parentIdenticonColor
+                property string parentIsIdenticon: menu.parentIsIdenticon
+                Loader {
+                    id: subMenuLoader
+                    sourceComponent: StatusSearchPopupMenuItem {
+                        value: model.value
+                        text: model.text
+                        image.source: model.imageSource
+                        iconSettings.name: model.iconName
+                        iconSettings.color: model.iconColor
+                        image.isIdenticon: model.isIdenticon
+                        onTriggered: {
+                            searchPopup.resetSearchSelection()
+                            if (menuLoader.parentTitleText === "Chat") {
+                                searchPopup.setSearchSelection(model.text,
+                                                               "",
+                                                               model.imageSource,
+                                                               model.isIdenticon,
+                                                               model.iconName,
+                                                               model.iconColor)
+                            } else {
+                                searchPopup.setSearchSelection(menuLoader.parentTitleText,
+                                                   model.text,
+                                                   menuLoader.parentImageSource,
+                                                   menuLoader.parentIsIdenticon,
+                                                   menuLoader.parentIconName,
+                                                   menuLoader.parentIdenticonColor)
+                            }
+                            root.itemClicked(menuLoader.parentValue, value)
+                            root.dismiss()
+                        }
+                    }
+                }
+            }
+        }
+    }
+    onMenuItemClicked: {
+        searchPopup.resetSearchSelection()
+        let menuItem = root.menuAt(root.currentIndex)
+        searchPopup.setSearchSelection(menuItem.title,
+                           "",
+                           menuItem.parentImageSource,
+                           menuItem.parentIsIdenticon,
+                           menuItem.parentIconName,
+                           menuItem.parentIdenticonColor)
+        root.itemClicked(menuItem.parentValue, "")
+        //TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
+        root.dismiss()
+    }
+}

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -0,0 +1,348 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+
+StatusModal {
+    id: root
+    width: 700
+    height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
+    anchors.centerIn: parent
+    showHeader: false
+    showFooter: false
+
+    property string searchText: contentComponent.searchText
+    property string noResultsLabel: "No results"
+    property string defaultSearchLocationText: "Anywhere"
+    property bool loading
+    property Menu searchOptionsPopupMenu: Menu { }
+    property var searchResults: [ ]
+    property var searchSelectionButton
+
+    signal resultItemClicked(string itemId)
+    signal resultItemTitleClicked(string titleId)
+
+    function setSearchSelection(text = "",
+                                secondaryText = "",
+                                imageSource = "",
+                                isIdenticon = "",
+                                iconName = "",
+                                iconColor = "") {
+        searchSelectionButton.primaryText = text
+        searchSelectionButton.secondaryText = secondaryText
+        searchSelectionButton.image.source = imageSource
+        searchSelectionButton.image.isIdenticon = isIdenticon
+        searchSelectionButton.iconSettings.name = iconName
+        searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
+        searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
+    }
+
+    function resetSearchSelection() {
+        setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
+    }
+
+    content: Item {
+        width: parent.width
+        height: root.height
+        property alias searchText: inputText.text
+
+        ColumnLayout {
+            id: contentItemColumn
+            anchors.fill: parent
+            spacing: 0
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 63
+                StatusIcon {
+                    id: statusIcon
+                    width: 40
+                    height: 40
+                    anchors.left: parent.left
+                    anchors.leftMargin: 12
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: "search"
+                    color: Theme.palette.baseColor1
+                }
+                TextEdit {
+                    id: inputText
+                    anchors.left: statusIcon.right
+                    anchors.leftMargin: 15
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    focus: true
+                    font.pixelSize: 28
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.directColor1
+                }
+            }
+            StatusMenuSeparator { 
+                topPadding: 0
+                Layout.fillWidth: true 
+            }
+            Item {
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: 58
+                Button {
+                    id: searchOptionsMenuButton
+
+                    Component.onCompleted: {
+                        root.searchSelectionButton = searchOptionsMenuButton
+                    }
+
+                    property string prefixText: "In"
+                    property string primaryText: ""
+                    property string secondaryText: ""
+                    property StatusIconSettings iconSettings: StatusIconSettings {
+                        name: ""
+                        isLetterIdenticon: false
+                    }
+
+                    property StatusImageSettings image: StatusImageSettings {
+                        source: ""
+                        isIdenticon: false
+                    }
+
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    implicitWidth: (contentItemRowLayout.width + 24)
+                    implicitHeight: 32
+
+                    background: Rectangle {
+                        anchors.fill: parent
+                        color: Theme.palette.baseColor2
+                        radius: 8
+                    }
+
+                    contentItem: Item {
+                        anchors.fill: parent
+
+                        MouseArea {
+                            id: sensor
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor 
+                            onClicked: root.searchOptionsPopupMenu.popup();
+
+                            RowLayout {
+                                id: contentItemRowLayout
+                                anchors.centerIn: parent
+                                spacing: 2
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.prefixText + ": "
+                                    font.weight: Font.Medium
+                                }
+
+                                Loader {
+                                    Layout.preferredWidth: active ? 16 : 0
+                                    Layout.preferredHeight: 16
+                                    active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
+                                        (searchOptionsMenuButton.iconSettings.name ||
+                                        searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
+                                        !!searchOptionsMenuButton.image.source.toString())
+
+                                    sourceComponent: {
+                                        if (!!searchOptionsMenuButton.image.source.toString()) {
+                                            return statusRoundedImageCmp
+                                        }
+                                        if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
+                                            return statusLetterIdenticonCmp
+                                        }
+                                        return statusIconCmp
+                                    }
+                                }
+
+                                Component {
+                                    id: statusIconCmp
+                                    StatusIcon {
+                                        width: 16
+                                        icon: searchOptionsMenuButton.iconSettings.name
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                    }
+                                }
+
+                                Component {
+                                    id: statusRoundedImageCmp
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        StatusRoundedImage {
+                                            id: statusRoundedImage
+                                            implicitWidth: parent.width
+                                            implicitHeight: parent.height
+                                            image.source: searchOptionsMenuButton.image.source
+                                            color: searchOptionsMenuButton.image.isIdenticon ?
+                                                Theme.palette.statusRoundedImage.backgroundColor :
+                                                "transparent"
+                                            border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
+                                            border.color: Theme.palette.directColor7
+                                        }
+
+                                        Loader {
+                                            sourceComponent: statusLetterIdenticonCmp
+                                            active: statusRoundedImage.image.status === Image.Error
+                                        }
+                                    }
+                                }
+
+                                Component {
+                                    id: statusLetterIdenticonCmp
+                                    StatusLetterIdenticon {
+                                        implicitWidth: 16
+                                        implicitHeight: 16
+                                        letterSize: 11
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                        name: searchOptionsMenuButton.primaryText
+                                    }
+                                }
+
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.primaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 14.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.baseColor1
+                                    icon: "next"
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.directColor1
+                                    icon: "channel"
+                                }
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    text: searchOptionsMenuButton.secondaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 14.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    icon: "chevron-down"
+                                    color: Theme.palette.directColor1
+                                }
+                            }
+                        }
+                    }
+                }
+
+                StatusFlatRoundButton {
+                    id: closeButton
+                    width: 32
+                    height: 32
+                    anchors.left: searchOptionsMenuButton.right
+                    anchors.leftMargin: 4
+                    anchors.verticalCenter: parent.verticalCenter
+                    opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0
+                    visible: (opacity > 0.1)
+                    type: StatusFlatRoundButton.Type.Secondary
+                    icon.name: "close"
+                    icon.color: Theme.palette.directColor1
+                    icon.width: 20
+                    icon.height: 20
+                    onClicked: { root.resetSearchSelection(); }
+                }
+            }
+
+            StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                ListView {
+                    id: view
+                    anchors.fill: parent
+                    anchors {
+                        leftMargin: 0
+                        rightMargin: 0
+                        bottomMargin: 67
+                    }
+                    visible: (!root.loading && (count > 0))
+                    model: root.searchResults
+                    ScrollBar.vertical: ScrollBar { }
+                    delegate: StatusListItem {
+                        width: view.width
+                        itemId: model.itemId
+                        titleId: model.titleId
+                        title: model.title
+                        statusListItemTitle.color: model.title.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
+                        subTitle: model.content
+                        radius: 0
+                        statusListItemSubTitle.height: model.content !== "" ? 20 : 0
+                        statusListItemSubTitle.elide: Text.ElideRight
+                        statusListItemSubTitle.color: Theme.palette.black
+                        icon.isLetterIdenticon: (model.badgeImage === "")
+                        titleAsideText: model.time
+                        image.source: model.badgeImage
+                        badge.primaryText: model.badgePrimaryText
+                        badge.secondaryText: model.badgeSecondaryText
+                        badge.image.source: model.badgeImage
+                        badge.icon.isLetterIdenticon: model.isLetterIdenticon
+                        badge.icon.color: model.badgeIdenticonColor
+
+                        onClicked: {
+                            root.resultItemClicked(itemId)
+                        }
+
+                        onTitleClicked: {
+                            root.resultItemTitleClicked(titleId)
+                        }
+                    }
+                    section.property: "sectionName"
+                    section.criteria: ViewSection.FullString
+                    section.delegate: Item {
+                        height: 34
+                        width: view.width
+                        StatusBaseText {
+                            font.pixelSize: 15
+                            color: Theme.palette.baseColor1
+                            text: section
+                            anchors.left: parent.left
+                            anchors.leftMargin: 16
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: 4
+                        }
+                    }
+                }
+                StatusLoadingIndicator {
+                    anchors.centerIn: parent
+                    visible: root.loading
+                    color: Theme.palette.primaryColor1
+                    width: 24
+                    height: 24
+                }
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: root.noResultsLabel
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 13
+                    visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
+                }
+            }
+        }
+    }
+    onClosed: {
+        root.resetSearchSelection();
+        root.loading = false;
+        contentComponent.searchText = "";
+    }
+}

src/StatusQ/Popups/StatusSearchPopupMenuItem.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+MenuItem {
+    id: root
+    implicitHeight: 38
+
+    property string value: ""
+
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings iconSettings: StatusIconSettings {
+        height: 16
+        width: 16
+        isLetterIdenticon: (root.image.source.toString() === ""
+                            && root.iconSettings.name.toString() === "")
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
+
+    background: Rectangle {
+        color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
+    }
+
+    contentItem: RowLayout {
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        StatusIcon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: !!root.iconSettings.name && !root.image.source.toString()
+            icon:  root.iconSettings.name
+            color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
+        }
+        StatusRoundedImage {
+            Layout.preferredWidth: visible ? root.image.width : 0
+            Layout.preferredHeight: visible ? root.image.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.image.source.toString() !== ""
+            image.source: root.image.source
+            border.width: root.image.isIdenticon ? 1 : 0
+            border.color: Theme.palette.directColor7
+        }
+        StatusLetterIdenticon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
+            color: root.iconSettings.color
+            name: root.text
+            letterSize: 11
+        }
+        StatusBaseText {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            text: root.text
+            color: Theme.palette.directColor1
+            font.pixelSize: 13
+            elide: Text.ElideRight
+        }
+        Item {
+            Layout.fillWidth: true
+        }
+    }
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: mouse.accepted = false
+    }
+}

src/StatusQ/Popups/qmldir

@@ -5,4 +5,7 @@ StatusPopupMenu 0.1 StatusPopupMenu.qml
 StatusMenuItem 0.1 StatusMenuItem.qml
 StatusMenuHeadline 0.1 StatusMenuHeadline.qml
 StatusModal 0.1 StatusModal.qml
+StatusSearchPopup 0.1 StatusSearchPopup.qml
 StatusModalDivider 0.1 StatusModalDivider.qml
+StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
+StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -30,7 +30,7 @@ Rectangle {
         }
     }
 
-    implicitHeight: rootLayout.implicitHeight + 30
+    implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0
 
     RowLayout {
         id: rootLayout

src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -20,7 +20,7 @@ Rectangle {
     signal editButtonClicked
     signal close
 
-    implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
+    implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
     implicitWidth: 480
 
     radius: 16

src/assets/img/icons/pause-filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+</svg>

src/assets/img/icons/play-filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
+</svg>

src/assets/img/icons/profile.svg

@@ -1,5 +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="M12 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13ZM12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z" fill="black"/>
-<path d="M16.4465 16.2731C16.8119 16.5572 16.822 17.0954 16.4657 17.3909C16.1611 17.6435 15.723 17.6 15.4043 17.3655C14.4513 16.6643 13.2741 16.25 12.0002 16.25C10.7262 16.25 9.54901 16.6643 8.59597 17.3655C8.27728 17.6 7.83919 17.6435 7.53463 17.3909C7.17828 17.0954 7.18836 16.5572 7.55383 16.2731C8.78161 15.3185 10.3245 14.75 12.0002 14.75C13.6758 14.75 15.2187 15.3185 16.4465 16.2731Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="black"/>
 </svg>

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

@@ -1,4 +1,3 @@
-<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 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>

src/assets/img/icons/windows_titlebar/close.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70801 5L10 9.29199L9.29199 10L5 5.70801L0.708008 10L0 9.29199L4.29199 5L0 0.708008L0.708008 0L5 4.29199L9.29199 0L10 0.708008L5.70801 5Z" fill="black"/>
+</svg>

src/assets/img/icons/windows_titlebar/maximize.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2002 0V10H0.200195V0H10.2002ZM9.19922 1.00098H1.20117V8.99902H9.19922V1.00098Z" fill="black"/>
+</svg>

src/assets/img/icons/windows_titlebar/minimise.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="1" viewBox="0 0 10 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 -0.000976562V1H0V-0.000976562H10Z" fill="black"/>
+</svg>

src/assets/img/icons/windows_titlebar/status.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="M9.34942 7.92611C8.39058 7.98137 7.78968 7.75801 6.83071 7.81339C6.59287 7.82675 6.35668 7.86122 6.1249 7.9164C6.26645 6.143 7.52155 4.59165 9.22826 4.49304C10.2756 4.43261 11.3225 5.07926 11.3792 6.12902C11.4351 7.16079 10.6484 7.85105 9.34955 7.92598L9.34942 7.92611ZM6.77458 11.5535C5.77123 11.6102 4.76852 11.0049 4.71406 10.0225C4.66052 9.05687 5.41432 8.41087 6.65858 8.34073C7.57703 8.28897 8.15277 8.49809 9.07123 8.4462C9.29896 8.43371 9.52518 8.40146 9.74735 8.34979C9.612 10.0094 8.40968 11.4614 6.77458 11.5535ZM8 0.000129406C3.58168 -1.67222e-09 0 3.58162 0 8C0 12.4184 3.58168 16 8 16C12.4183 16 16 12.4182 16 8C16 3.58175 12.4183 0 8 0" fill="#4360DF"/>
+</svg>

statusq.qrc

@@ -7,6 +7,7 @@
         <file>src/StatusQ/Core/Theme/Theme.qml</file>
         <file>src/StatusQ/Core/Theme/qmldir</file>
         <file>src/StatusQ/Core/Theme/StatusColors.qml</file>
+        <file>src/StatusQ/Core/Utils/Utils.qml</file>
         <file>src/StatusQ/Core/StatusIcon.qml</file>
         <file>src/StatusQ/Core/StatusImageSettings.qml</file>
         <file>src/StatusQ/Core/StatusIconSettings.qml</file>
@@ -50,6 +51,8 @@
         <file>src/StatusQ/Controls/StatusCheckBox.qml</file>
         <file>src/StatusQ/Controls/StatusButton.qml</file>
         <file>src/StatusQ/Controls/StatusToolTip.qml</file>
+        <file>src/StatusQ/Controls/Validators/StatusValidator.qml</file>
+        <file>src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml</file>
         <file>src/StatusQ/Layout/StatusAppNavBar.qml</file>
         <file>src/StatusQ/Layout/qmldir</file>
         <file>src/StatusQ/Layout/StatusAppTwoPanelLayout.qml</file>
@@ -250,5 +253,14 @@
         <file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>
         <file>src/StatusQ/Popups/StatusModal.qml</file>
         <file>src/StatusQ/Core/StatusModalHeaderSettings.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchPopup.qml</file>
+        <file>src/StatusQ/Components/StatusListItemBadge.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
+        <file>src/StatusQ/Platform/StatusWindowsTitleBar.qml</file>
+        <file>src/assets/img/icons/windows_titlebar/close.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/maximize.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/minimise.svg</file>
+        <file>src/assets/img/icons/windows_titlebar/status.svg</file>
     </qresource>
 </RCC>