feat(Adaptive navigation) Primary nav sidebar POC

storybook/pages/PrimaryNavSidebarPage.qml

@@ -0,0 +1,314 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtWebView
+
+import StatusQ
+import StatusQ.Core
+import StatusQ.Core.Theme
+import StatusQ.Controls
+import StatusQ.Components
+import StatusQ.Popups
+
+import Models
+import Storybook
+
+import shared.controls.chat.menuItems
+
+import utils
+
+import AppLayouts.Profile.stores as ProfileStores
+
+import mainui
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    QtObject {
+        id: d
+
+        readonly property var sectionsModel: SectionsModel {}
+
+        property bool acVisible
+
+        property int activeSectionType: Constants.appSection.wallet
+        property string activeSectionId: "id2"
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        Label {
+            anchors.centerIn: parent
+            visible: secondaryWindow.visible
+            text: "Interact with the sidebar in the secondary window"
+        }
+        Button {
+            anchors.centerIn: parent
+            text: "Reopen"
+            visible: !secondaryWindow.visible
+            onClicked: secondaryWindow.visible = true
+        }
+    }
+
+    Window {
+        id: secondaryWindow
+        visible: true
+        width: 800
+        height: 640
+        title: "PrimaryNavSidebar"
+        color: Theme.palette.baseColor4 // doesn't get the proper StatusQ palette w/o Theme.xxx
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: 2
+            anchors.leftMargin: sidebar.alwaysVisible ? sidebar.width : 2
+            Behavior on anchors.leftMargin {PropertyAnimation {duration: ThemeUtils.AnimationDuration.Fast}}
+
+            WebView {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                url: "https://status.app"
+            }
+
+            StatusButton {
+                icon.name: "more"
+                enabled: !sidebar.alwaysVisible
+                onClicked: sidebar.open()
+
+                tooltip.text: "Open sidebar"
+                tooltip.orientation: StatusToolTip.Orientation.Bottom
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                wrapMode: Text.Wrap
+                text: "Active section type/id: %1/\"%2\"".arg(d.activeSectionType).arg(d.activeSectionId)
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                wrapMode: Text.Wrap
+                text: "Window size: %1x%2".arg(secondaryWindow.width).arg(secondaryWindow.height)
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                wrapMode: Text.Wrap
+                text: sidebar.alwaysVisible ? "alwaysVisible: <b>true</b> (%1)".arg("pushes the content; background not dimmed")
+                                            : "alwaysVisible: <b>false</b> (%1)".arg("open the sidebar by dragging on the left edge, or click the above button; background dimmed")
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                wrapMode: Text.Wrap
+                text: "Sidebar position: %1".arg(sidebar.position)
+            }
+        }
+
+        PrimaryNavSidebar {
+            id: sidebar
+            height: parent.height
+
+            sectionsModel: d.sectionsModel
+
+            acVisible: d.acVisible
+            acHasUnseenNotifications: ctrlAcHasUnseenNotifications.checked // <- ActivityCenterStore.hasUnseenNotifications
+            acUnreadNotificationsCount: ctrlAcUnreadNotificationsCount.value // <- ActivityCenterStore.unreadNotificationsCount
+
+            profileStore: ProfileStores.ProfileStore {
+                id: profileStore
+                readonly property string pubKey: "0xdeadbeef"
+                readonly property string compressedPubKey: "zxDeadBeef"
+                readonly property string name: "John Doe"
+                readonly property string icon: ModelsData.icons.rarible
+                readonly property int colorId: 7
+                readonly property bool usesDefaultName: false
+                property int currentUserStatus: Constants.currentUserStatus.automatic
+            }
+
+            getEmojiHashFn: function(pubKey) { // <- root.utilsStore.getEmojiHash(pubKey)
+                if (pubKey === "")
+                    return ""
+
+                return["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"]
+            }
+            getLinkToProfileFn: function(pubKey) { // <- root.rootStore.contactsStore.getLinkToProfile(pubKey)
+                return Constants.userLinkPrefix + pubKey
+            }
+
+            communityPopupMenu: Component {
+                StatusMenu {
+                    id: communityContextMenu
+
+                    required property var model
+                    required property int index
+
+                    readonly property bool isSpectator: model.spectated && !model.joined
+
+                    onClosed: destroy()
+
+                    StatusAction {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                        objectName: "invitePeople"
+                    }
+
+                    StatusAction {
+                        text: qsTr("Community Info")
+                        icon.name: "info"
+                    }
+
+                    StatusAction {
+                        text: qsTr("Community Rules")
+                        icon.name: "text"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    MuteChatMenuItem {
+                        enabled: !model.muted
+                        title: qsTr("Mute Community")
+                    }
+
+                    StatusAction {
+                        enabled: model.muted
+                        text: qsTr("Unmute Community")
+                        icon.name: "notification"
+                    }
+
+                    StatusAction {
+                        text: qsTr("Mark as read")
+                        icon.name: "check-circle"
+                    }
+
+                    StatusAction {
+                        text: qsTr("Edit Shared Addresses")
+                        icon.name: "wallet"
+                        enabled: {
+                            if (model.memberRole === Constants.memberRole.owner || communityContextMenu.isSpectator)
+                                return false
+                            return true
+                        }
+                    }
+
+                    StatusMenuSeparator { visible: leaveCommunityMenuItem.enabled }
+
+                    StatusAction {
+                        id: leaveCommunityMenuItem
+                        objectName: "leaveCommunityMenuItem"
+                        // allow to leave community for the owner in non-production builds
+                        enabled: model.memberRole !== Constants.memberRole.owner || !production
+                        text: {
+                            if (communityContextMenu.isSpectator)
+                                return qsTr("Close Community")
+                            return qsTr("Leave Community")
+                        }
+                        icon.name: communityContextMenu.isSpectator ? "close-circle" : "arrow-left"
+                        type: StatusAction.Type.Danger
+                    }
+                }
+            }
+
+            showEnabledSectionsOnly: ctrlShowEnabledSectionsOnly.checked
+            marketEnabled: ctrlMarketEnabled.checked
+            browserEnabled: ctrlBrowserEnabled.checked
+            nodeEnabled: ctrlNodeEnabled.checked
+            thirdpartyServicesEnabled: ctrlThirdPartyServices.checked
+            showCreateCommunityBadge: ctrlShowCreateCommunityBadge.checked
+            profileSectionHasNotification: ctrlSettingsHasNotification.checked
+
+            onItemActivated: function (sectionType, id) {
+                logs.logEvent("onItemActivated", ["sectionType", "sectionId"], arguments)
+                sectionsModel.setActiveSection(id)
+                d.activeSectionType = sectionType
+                d.activeSectionId = id
+            }
+            onActivityCenterRequested: function (shouldShow) {
+                logs.logEvent("onActivityCenterRequested", ["shouldShow"], arguments)
+                d.acVisible = shouldShow
+            }
+            onSetCurrentUserStatusRequested: function (status) {
+                profileStore.currentUserStatus = status
+                logs.logEvent("onSetCurrentUserStatusRequested", ["status"], arguments) // <- root.rootStore.setCurrentUserStatus(status)
+            }
+            onViewProfileRequested: logs.logEvent("onViewProfileRequested", ["pubKey"], arguments) // <- Global.openProfilePopup(pubKey)
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 330
+        SplitView.preferredHeight: 330
+        SplitView.fillWidth: true
+
+        logsView.logText: logs.logText
+
+        RowLayout {
+            anchors.fill: parent
+
+            ColumnLayout {
+                Label { text: "Sections config:" }
+                Switch {
+                    id: ctrlShowEnabledSectionsOnly
+                    text: "Show enabled sections only"
+                    checked: true
+                }
+                Switch {
+                    id: ctrlMarketEnabled
+                    text: "Market enabled"
+                    checked: true
+                }
+                Switch {
+                    id: ctrlBrowserEnabled
+                    text: "Browser enabled"
+                    checked: true
+                }
+                Switch {
+                    id: ctrlNodeEnabled
+                    text: "Node mgmt enabled"
+                    checked: false
+                }
+                Switch {
+                    id: ctrlThirdPartyServices
+                    text: "Third party services enabled"
+                    checked: true
+                }
+                Switch {
+                    id: ctrlSettingsHasNotification
+                    text: "Settings has notification"
+                }
+                Switch {
+                    id: ctrlShowCreateCommunityBadge
+                    text: "Show create community badge"
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                Label { text: "Activity Center:" }
+                Switch {
+                    id: ctrlAcHasUnseenNotifications
+                    text: "Has unseen notifications"
+                    checked: true
+                }
+                RowLayout {
+                    Label { text: "Notifications count:" }
+                    SpinBox {
+                        id: ctrlAcUnreadNotificationsCount
+                        from: 0
+                        to: 101
+                        value: 4
+                        editable: true
+                    }
+                }
+                Item { Layout.fillHeight: true }
+            }
+        }
+    }
+}
+
+// category: Panels
+// status: good
+// https://www.figma.com/design/pJgiysu3rw8XvL4wS2Us7W/DS?node-id=4185-86833&t=lNokXnXl5AHjxHan-0
+// https://www.figma.com/design/pJgiysu3rw8XvL4wS2Us7W/DS?node-id=4185-86833&t=hN6bacud6gPREDcH-0

storybook/qmlTests/tests/tst_HomePage.qml

@@ -136,7 +136,7 @@ Item {
                             key: "1;0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8884", searchStr: "Fab"}, // Fab
                         {tag: "chat", sectionType: Constants.appSection.chat, key: "2;id1", searchStr: "Punx"}, // 1-1 chat
                         {tag: "group chat", sectionType: Constants.appSection.chat, key: "2;id5", searchStr: "Channel Y_3"}, // group chat
-                        {tag: "community", sectionType: Constants.appSection.community, key: "3;id15", searchStr: "Dribb"}, // Dribble
+                        {tag: "community", sectionType: Constants.appSection.community, key: "3;id106", searchStr: "Dribb"}, // Dribble
                         {tag: "dApp", sectionType: Constants.appSection.dApp, key: "999;https://dapp.test/2", searchStr: "dapp 2"}, // Test dApp 2
                         {tag: "settings", sectionType: Constants.appSection.profile, key: "4;1", searchStr: "passw"}, // Settings/Password
                     ]