feat(StatusQ.Popups) Adding SearchPopup component

Closes #264

sandbox/DemoApp.qml

@@ -299,14 +299,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++) {
+                            for (var i = 0; i < models.demoChatListItems.count; i++) {
-                                let item = demoChatListItems.get(i);
+                                let item = models.demoChatListItems.get(i);
                                 if (item.chatId === id) {
-                                    demoChatListItems.setProperty(i, "muted", false)
+                                    models.demoChatListItems.setProperty(i, "muted", false)
                                 }
                             }
                         }
@@ -412,7 +412,7 @@ Rectangle {
             handle: Rectangle {
                 implicitWidth: 5
                 color: SplitHandle.pressed ? Theme.palette.baseColor2
-                    : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
             }
             leftPanel: Item {
                 id: leftPanel
@@ -467,8 +467,8 @@ Rectangle {
                         width: leftPanel.width
                         height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
-                        chatList.model: demoCommunityChatListItems
+                        chatList.model: models.demoCommunityChatListItems
-                        categoryList.model: demoCommunityCategoryItems
+                        categoryList.model: models.demoCommunityCategoryItems
 
                         showCategoryActionButtons: true
                         onChatItemSelected: selectedChatId = id
@@ -557,6 +557,7 @@ Rectangle {
 
             centerPanel: Item {
                 StatusChatToolBar {
+                    id: statusChatToolBar
                     anchors.top: parent.top
                     width: parent.width
 
@@ -564,12 +565,61 @@ 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.searchSelectionButton.primaryText = demoCommunityDetailModal.header.title;
+                        searchPopup.searchSelectionButton.image.source = 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
+                    locatioModel: models.optionsModel
+                }
             }
 
             rightPanel: Item {
@@ -654,7 +704,7 @@ Rectangle {
                         spacing: 4
 
                         Repeater {
-                            model: demoProfileGeneralMenuItems
+                            model: models.demoProfileGeneralMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -664,7 +714,7 @@ Rectangle {
                         StatusListSectionHeadline { text: "Settings" }
 
                         Repeater {
-                            model: demoProfileSettingsMenuItems
+                            model: models.demoProfileSettingsMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -678,7 +728,7 @@ Rectangle {
                         }
 
                         Repeater {
-                            model: demoProfileOtherMenuItems
+                            model: models.demoProfileOtherMenuItems
                             delegate: StatusNavigationListItem {
                                 title: model.title
                                 icon.name: model.icon
@@ -833,194 +883,7 @@ Rectangle {
         }
     }
 
-    ListModel {
+    Models {
-        id: demoChatListItems
+        id: models
-        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"
-        }
     }
 }

sandbox/ListItems.qml

@@ -295,6 +295,27 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         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,309 @@
+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"
+        }
+        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
+        }
+    }
+
+    property var demoCommunityChatListItems: 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"
+        }
+    }
+
+    property var demoCommunityCategoryItems: ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+        }
+    }
+
+    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 { name: "@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 { name: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+    }
+    property var searchResultsB: ListModel {
+        ListElement { name: "@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 { name: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
+        ListElement { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
+    }
+
+    property ListModel optionsModel: ListModel {
+        ListElement {
+            title: "Item with icon";
+            imageSource: ""
+            iconName: "chat"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    text: "Profile image item"
+                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    text: "identicon item"
+                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: true
+                }]}
+        ListElement {
+            title: "Community item";
+            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            iconName: ""
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    text: "welcome"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    text: "support"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            title: "Other";
+            imageSource: "";
+            iconName: "info"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            title: "Letter identicon";
+            imageSource: "";
+            iconName: ""
+            iconColor: "red"
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+    }
+}

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" 
             },

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -14,7 +14,9 @@ Rectangle {
     radius: width / 2
 
     StatusBaseText {
-        text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        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
@@ -33,8 +35,11 @@ Rectangle {
     radius: 8
 
     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
@@ -107,6 +112,7 @@ Rectangle {
                 }
                 return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
             }
+
             active: statusListItem.icon.isLetterIdenticon || 
                     !!statusListItem.icon.name || 
                     !!statusListItem.image.source.toString()
@@ -158,15 +164,15 @@ Rectangle {
             anchors.leftMargin: statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter: parent.verticalCenter
-            height: statusListItemTitle.height + 
+            height: childrenRect.height
-              (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
-              (statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
 
             StatusBaseText {
                 id: statusListItemTitle
                 text: statusListItem.title
-                width: parent.width
+                width: contentWidth < (parent.width - statusListItemTitleAsideText.contentWidth) ?
+                       contentWidth : (parent.width - statusListItemTitleAsideText.contentWidth)
                 font.pixelSize: 15
+                height: visible ? contentHeight : 0
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 color: {
                   if (!statusListItem.enabled) {
@@ -183,6 +189,17 @@ Rectangle {
                 }
             }
 
+            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 {
                 id: statusListItemSubTitle
                 anchors.top: statusListItemTitle.bottom
@@ -190,6 +207,7 @@ Rectangle {
                 text: statusListItem.subTitle
                 font.pixelSize: 15
                 color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                height: visible ? contentHeight : 0
                 visible: !!statusListItem.subTitle
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
@@ -198,12 +216,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/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

@@ -179,8 +179,8 @@ Item {
 
     StatusFlatRoundButton {
         id: clearButtton
-        visible: edit.text.length != 0 && 
+        visible: edit.text.length != 0 &&
-            statusBaseInput.clearable && 
+            statusBaseInput.clearable &&
             !statusBaseInput.multiline &&
             edit.activeFocus
         anchors.right: parent.right

src/StatusQ/Controls/StatusInput.qml

@@ -4,9 +4,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
-Rectangle {
+Item {
     id: root
-
     implicitWidth: 480
     height: (label.visible ? 
                   label.anchors.topMargin +
@@ -22,7 +21,6 @@ Rectangle {
                   errorMessage.height :
                   0) + 8
 
-    color: "transparent"
     property alias input: statusBaseInput
     property string label: ""
     property int charLimit: 0

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.CloseOnReleaseOutsideParent | Popup.CloseOnEscape
-    closePolicy: Popup.CloseOnReleaseOutside | 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) {
+                        if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
-                            return 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
@@ -195,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"
@@ -204,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 locatioModel
+
+    signal subMenuClicked()
+    signal subMenuItemClicked()
+    signal anywhereItemClicked()
+    signal menuItemNoSubMenuClicked()
+
+    StatusMenuItem {
+        text: "Anywhere"
+        onTriggered: {
+            searchPopup.resetSelectionBadge();
+            searchPopup.searchSelectionButton.primaryText = text;
+            root.anywhereItemClicked();
+        }
+    }
+    StatusMenuSeparator { }
+    //Dummy item to keep seperator in right position
+    MenuItem { implicitHeight: 0.00001 }
+    Instantiator {
+        model: root.locatioModel
+        delegate: Loader {
+            sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
+            onLoaded: {
+                if (!!model.subItems && model.subItems.count > 0)  {
+                    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.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.resetSelectionBadge()
+                searchPopup.searchSelectionButton.primaryText = text;
+                searchPopup.searchSelectionButton.image.source = image.source;
+                searchPopup.searchSelectionButton.image.isIdenticon = image.isIdenticon;
+                searchPopup.searchSelectionButton.iconSettings.name = iconSettings.name;
+                searchPopup.searchSelectionButton.iconSettings.color = !!iconSettings.color ? iconSettings.color : Theme.palette.primaryColor1
+                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !iconSettings.name && !image.source
+                root.menuItemNoSubMenuClicked();
+            }
+        }
+    }
+
+    Component {
+        id: subMenus
+        StatusPopupMenu {
+            id: menu
+            property var subItemsModel
+            property string parentIconName
+            property string parentImageSource
+            property string parentIdenticonColor
+            property string parentIsIdenticon
+            Repeater {
+                id: menuLoader
+                model: menu.subItemsModel
+                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 {
+                        text: model.text
+                        image.source: model.imageSource
+                        iconSettings.name: model.iconName
+                        iconSettings.color: model.iconColor
+                        image.isIdenticon: model.isIdenticon
+                        onTriggered: {
+                            searchPopup.resetSelectionBadge();
+                            if (menuLoader.parentTitleText === "Chat") {
+                                searchPopup.searchSelectionButton.primaryText = model.text;
+                                searchPopup.searchSelectionButton.image.source = model.imageSource;
+                                searchPopup.searchSelectionButton.image.isIdenticon = model.isIdenticon;
+                                searchPopup.searchSelectionButton.iconSettings.name = model.iconName;
+                                searchPopup.searchSelectionButton.iconSettings.color = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
+                                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !model.iconName && !model.imageSource
+                            } else {
+                                searchPopup.searchSelectionButton.primaryText = menuLoader.parentTitleText;
+                                searchPopup.searchSelectionButton.secondaryText = model.text;
+                                searchPopup.searchSelectionButton.image.source = menuLoader.parentImageSource;
+                                searchPopup.searchSelectionButton.image.isIdenticon = menuLoader.parentIsIdenticon;
+                                searchPopup.searchSelectionButton.iconSettings.name = menuLoader.parentIconName;
+                                searchPopup.searchSelectionButton.iconSettings.color = !!menuLoader.parentIdenticonColor ? menuLoader.parentIdenticonColor : Theme.palette.primaryColor1;
+                                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuLoader.parentIconName && !menuLoader.parentImageSource
+                            }
+                            root.subMenuItemClicked();
+                            root.dismiss();
+                        }
+                    }
+                }
+            }
+        }
+    }
+    onMenuItemClicked: {
+        searchPopup.resetSelectionBadge();
+        let menuItem = root.menuAt(root.currentIndex)
+        searchPopup.searchSelectionButton.primaryText = menuItem.title;
+        searchPopup.searchSelectionButton.image.source = menuItem.parentImageSource;
+        searchPopup.searchSelectionButton.image.isIdenticon = menuItem.parentIsIdenticon;
+        searchPopup.searchSelectionButton.iconSettings.name = menuItem.parentIconName;
+        searchPopup.searchSelectionButton.iconSettings.color = menuItem.parentIdenticonColor;
+        searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuItem.parentIconName && !menuItem.parentImageSource
+        root.subMenuClicked();
+        //TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
+        root.dismiss();
+    }
+}

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -0,0 +1,315 @@
+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 bool loading
+    property Menu searchOptionsPopupMenu: Menu { }
+    property var searchResults: [ ]
+    property var searchSelectionButton
+    function resetSelectionBadge() {
+        searchSelectionButton.iconSettings.name = ""
+        searchSelectionButton.iconSettings.isLetterIdenticon = false
+        searchSelectionButton.iconSettings.color = "transparent"
+        searchSelectionButton.image.source = ""
+        searchSelectionButton.image.isIdenticon = false
+        searchSelectionButton.primaryText = qsTr("Anywhere");
+        searchSelectionButton.secondaryText = "";
+    }
+
+    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.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"
+                                }
+                                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 === qsTr("Anywhere")) ? 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.resetSelectionBadge(); }
+                }
+            }
+
+            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
+                        title: model.name
+                        statusListItemTitle.color: model.name.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
+                    }
+                    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.resetSelectionBadge();
+        root.loading = false;
+        contentComponent.searchText = "";
+    }
+}

src/StatusQ/Popups/StatusSearchPopupMenuItem.qml

@@ -0,0 +1,77 @@
+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 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: 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

statusq.qrc

@@ -250,5 +250,9 @@
         <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>
     </qresource>
 </RCC>