fix: Optimize ContactsView & MembersTabPanel settings pages

storybook/pages/ContactsViewPage.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import SortFilterProxyModel 0.2
+
+import utils 1.0
+
+import shared.stores 1.0 as SharedStores
+import AppLayouts.Profile.views 1.0
+import AppLayouts.Profile.stores 1.0
+import mainui.adaptors 1.0
+
+Item {
+    id: root
+
+    ContactsView {
+        sectionTitle: "Contacts"
+        anchors.fill: parent
+        anchors.leftMargin: 64
+        anchors.topMargin: 16
+        contentWidth: 560
+
+        contactsStore: ContactsStore {
+            function joinPrivateChat(pubKey) {}
+            function acceptContactRequest(pubKey, contactRequestId) {}
+            function dismissContactRequest(pubKey, contactRequestId) {}
+        }
+        utilsStore: SharedStores.UtilsStore {
+            function getEmojiHash(publicKey) {
+                if (publicKey === "")
+                    return ""
+
+                return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+            }
+        }
+
+        mutualContactsModel: adaptor.mutualContacts
+        blockedContactsModel: adaptor.blockedContacts
+        pendingContactsModel: adaptor.pendingContacts
+        pendingReceivedContactsCount: adaptor.pendingReceivedRequestContacts.count
+    }
+
+    ContactsModelAdaptor {
+        id: adaptor
+        allContacts: SortFilterProxyModel {
+            sourceModel: UsersModel {}
+            proxyRoles: [
+                FastExpressionRole {
+                    function displayNameProxy(localNickname, ensName, displayName, aliasName) {
+                        return ProfileUtils.displayName(localNickname, ensName, displayName, aliasName)
+                    }
+
+                    name: "preferredDisplayName"
+                    expectedRoles: ["localNickname", "displayName", "ensName", "alias"]
+                    expression: displayNameProxy(model.localNickname, model.ensName, model.displayName, model.alias)
+                }
+            ]
+        }
+    }
+}
+
+// category: Views
+// status: good

storybook/pages/MembersTabPanelPage.qml

@@ -8,62 +8,42 @@ import AppLayouts.Communities.panels 1.0
 import AppLayouts.Chat.stores 1.0 as ChatStores
 import AppLayouts.Profile.stores 1.0 as ProfileStores
 
+import shared.stores 1.0
 import utils 1.0
 
 import Models 1.0
 import SortFilterProxyModel 0.2
 import Storybook 1.0
 
 import StatusQ 0.1
-import StatusQ.Core.Utils 0.1 as SQUtils
-
 
 SplitView {
     id: root
 
     orientation: Qt.Vertical
     Logs { id: logs }
 
-    // Utils.globalUtilsInst mock
-    QtObject {
-        function getEmojiHashAsJson(publicKey) {
-            return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
-        }
-
-        function getColorId(publicKey) {
-            return SQUtils.ModelUtils.getByKey(usersModel, "pubKey", publicKey, "colorId")
-        }
-
-        function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
-
-        function getColorHashAsJson(publicKey) {
-            return JSON.stringify([{colorId: 0, segmentLength: 1},
-                                   {colorId: 19, segmentLength: 2}])
-        }
-
-        function isCompressedPubKey(publicKey) { return true }
-
-        Component.onCompleted: {
-            Utils.globalUtilsInst = this
-        }
-        Component.onDestruction: {
-            Utils.globalUtilsInst = {}
-        }
-    }
-
     MembersTabPanel {
         id: membersTabPanelPage
         SplitView.fillWidth: true
         SplitView.fillHeight: true
-        placeholderText: "Search users"
         model: usersModelWithMembershipState
         panelType: viewStateSelector.currentValue
+        searchString: ctrlSearch.text
 
         rootStore: ChatStores.RootStore {
             contactsStore: ProfileStores.ContactsStore {
                 readonly property string myPublicKey: "0x000"
             }
         }
+        utilsStore: UtilsStore {
+            function getEmojiHash(publicKey) {
+                if (publicKey === "")
+                    return ""
+
+                return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+            }
+        }
 
         onKickUserClicked: {
             logs.logEvent("MembersTabPanel::onKickUserClicked", ["id", "name"], arguments)
@@ -132,7 +112,7 @@ SplitView {
     }
 
     LogsAndControlsPanel {
-        SplitView.minimumHeight: 100
+        SplitView.minimumHeight: 200
         SplitView.preferredHeight: 320
 
         logsView.logText: logs.logText
@@ -144,6 +124,7 @@ SplitView {
             }
 
             ComboBox {
+                Layout.preferredWidth: 300
                 id: viewStateSelector
                 textRole: "text"
                 valueRole: "value"
@@ -155,6 +136,13 @@ SplitView {
                      ListElement { text: "Declined Members"; value: MembersTabPanel.TabType.DeclinedRequests }
                  }
             }
+
+            Label { text: "Search" }
+            TextField {
+                id: ctrlSearch
+                Layout.preferredWidth: 300
+                placeholderText: "Search by member name or chat key"
+            }
         }
     }
 
@@ -163,4 +151,6 @@ SplitView {
     }
 }
 
+// category: Panels
+// status: good
 // https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=35909-605774&mode=design&t=KfrAekLfW5mTy68x-0

storybook/pages/StatusCheckBoxPage.qml

@@ -0,0 +1,84 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Controls 0.1
+
+import Storybook 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+    Logs { id: logs }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        Rectangle {
+            width: switchControl.width
+            height: switchControl.height
+            anchors.centerIn: parent
+            color: "transparent"
+            border.width: 1
+            border.color: "pink"
+
+            StatusCheckBox {
+                id: switchControl
+                anchors.centerIn: parent
+                text: ctrlWithText.checked ? "Check me out" : ""
+                leftSide: !ctrlInverted.checked
+                changeCursor: ctrlCursor.checked
+                checked: true
+                enabled: ctrlEnabled.checked
+                tristate: ctrlTristate.checked
+                size: ctrlSmall.checked ? StatusCheckBox.Size.Small : StatusCheckBox.Size.Regular
+                onClicked: logs.logEvent("clicked()")
+                onToggled: logs.logEvent("toggled()")
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 320
+        SplitView.preferredHeight: 320
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            Layout.fillWidth: true
+
+            Switch {
+                id: ctrlEnabled
+                text: "Enabled"
+                checked: true
+            }
+            Switch {
+                id: ctrlCursor
+                text: "Change cursor"
+                checked: true
+            }
+            Switch {
+                id: ctrlInverted
+                text: "Inverted"
+            }
+            Switch {
+                id: ctrlSmall
+                text: "Small size"
+            }
+            Switch {
+                id: ctrlTristate
+                text: "Tristate"
+            }
+            Switch {
+                id: ctrlWithText
+                text: "With text"
+                checked: true
+            }
+        }
+    }
+}
+
+// category: Controls
+// status: good

storybook/pages/StatusSwitchPage.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Controls 0.1
+
+import Storybook 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+    Logs { id: logs }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        Rectangle {
+            width: switchControl.width
+            height: switchControl.height
+            anchors.centerIn: parent
+            color: "transparent"
+            border.width: 1
+            border.color: "pink"
+
+            StatusSwitch {
+                id: switchControl
+                anchors.centerIn: parent
+                text: ctrlWithText.checked ? "Check me out" : ""
+                leftSide: !ctrlInverted.checked
+                checked: true
+                enabled: ctrlEnabled.checked
+                onClicked: logs.logEvent("clicked()")
+                onToggled: logs.logEvent("toggled()")
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 200
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            Layout.fillWidth: true
+
+            Switch {
+                id: ctrlEnabled
+                text: "Enabled"
+                checked: true
+            }
+            Switch {
+                id: ctrlInverted
+                text: "Inverted"
+            }
+            Switch {
+                id: ctrlWithText
+                text: "With text"
+                checked: true
+            }
+        }
+    }
+}
+
+// category: Controls
+// status: good

storybook/pages/StatusTabBarPage.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+
+import StatusQ.Controls 0.1
+
+Item {
+    id: root
+
+    Rectangle {
+        width: tabbar.childrenRect.width
+        height: tabbar.childrenRect.height
+        anchors.centerIn: parent
+        color: "transparent"
+        border.width: 1
+        border.color: "pink"
+
+        StatusTabBar {
+            id: tabbar
+            anchors.centerIn: parent
+
+            StatusTabButton {
+                width: implicitWidth
+                text: "Contacts"
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Pending contacts"
+                badge.value: 2
+            }
+            StatusTabButton {
+                width: implicitWidth
+                enabled: false
+                text: "Blocked & disabled"
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Misc"
+            }
+        }
+    }
+}
+
+// category: Controls
+// status: good