fix(StatusMenu): StatusSuccessAction is not taken into account for Menu width

- StatusSuccessAction, despite its name, is a visual item (`MenuItem` ->
`AbstractButton`) which is not part of the `contentModel` but just added
to the menu container
- therefore we don't use a ListView but a ScrollView/Repeater instead
and set the width/maxWidth manually after the menu items have been added
to the layout

Fixes #14037

storybook/pages/LoginViewPage.qml

@@ -23,6 +23,8 @@ SplitView {
 
             startupStore: StartupStore {
                 readonly property QtObject startupModuleInst: QtObject {
+                    readonly property int remainingAttempts: 5
+
                     signal accountLoginError
                     signal obtainingPasswordSuccess
                     signal obtainingPasswordError
@@ -34,33 +36,46 @@ SplitView {
                             colorHash: "0xAB34"
                             username: "Bob"
                             thumbnailImage: ""
+                            icon: ""
                             keyUid: "uid_1"
                         }
                         ListElement {
                             keycardCreatedAccount: false
                             colorId: 2
-                            colorHash: "0xAB34"
+                            colorHash: "0xAB35"
                             username: "John"
                             thumbnailImage: ""
+                            icon: ""
                             keyUid: "uid_2"
                         }
                         ListElement {
-                            keycardCreatedAccount: true
+                            keycardCreatedAccount: false
                             colorId: 3
                             colorHash: "0xAB38"
                             username: "8️⃣6️⃣.eth"
                             thumbnailImage: ""
+                            icon: ""
                             keyUid: "uid_4"
                         }
+                        ListElement {
+                            keycardCreatedAccount: true
+                            colorId: 4
+                            colorHash: "0xAB37"
+                            username: "Very long username that should eventually elide on the right side"
+                            thumbnailImage: ""
+                            icon: ""
+                            keyUid: "uid_3"
+                        }
                     }
                 }
 
                 readonly property QtObject selectedLoginAccount: QtObject {
                     readonly property bool keycardCreatedAccount: false
-                    readonly property int colorId: 0
+                    readonly property int colorId: 3
                     readonly property string username: "8️⃣6️⃣.eth"
                     readonly property string thumbnailImage: ""
-                    readonly property string keyUid: "uid_3"
+                    readonly property string keyUid: "uid_4"
+                    readonly property string icon: ""
                 }
 
                 readonly property QtObject currentStartupState: QtObject {
@@ -110,13 +125,6 @@ SplitView {
             logsView.logText: logs.logText
         }
     }
-
-    Control {
-        SplitView.minimumWidth: 300
-        SplitView.preferredWidth: 300
-
-        // model editor will go here
-    }
 }
 
 // category: Views

ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQml 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 
 import StatusQ.Core 0.1
@@ -67,22 +68,11 @@ Menu {
     property var openHandler
     property var closeHandler
 
-    function checkIfEmpty() {
-        for (let i = 0; i < root.contentItem.count; ++i) {
-            const menuItem = root.contentItem.itemAtIndex(i)
-            if (menuItem.text !== undefined && menuItem.enabled) { // skip menu separators
-                return false
-            }
-        }
-        return true
-    }
-
     dim: false
     closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
     topPadding: 8
     bottomPadding: 8
     margins: 16
-    width: Math.min(implicitWidth, root.maxImplicitWidth)
 
     onOpened: {
         if (typeof openHandler === "function") {
@@ -96,27 +86,24 @@ Menu {
         }
     }
 
-    QtObject {
-        id: d
-        //helper property to get the max implicit width of the delegate
-        property real maxDelegateImplWidth: 0
-    }
-
     delegate: StatusMenuItem {
         visible: root.hideDisabledItems && !visibleOnDisabled ? enabled : true
         height: visible ? implicitHeight : 0
-        onImplicitWidthChanged: {
-            if (visible)
-                d.maxDelegateImplWidth = Math.max(d.maxDelegateImplWidth, implicitWidth)
-        }
     }
 
-    contentItem: StatusListView {
+    contentItem: StatusScrollView {
-        currentIndex: root.currentIndex
+        padding: 0
-        implicitHeight: contentHeight
+
-        implicitWidth: d.maxDelegateImplWidth
+        ColumnLayout {
-        interactive: contentHeight > availableHeight
+            Repeater {
-        model: root.contentModel
+                model: root.contentModel
+
+                onItemAdded: {
+                    item.Layout.fillWidth = true
+                    item.Layout.maximumWidth = root.maxImplicitWidth
+                }
+            }
+        }
     }
 
     background: Rectangle {

ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1

ui/StatusQ/src/StatusQ/Popups/StatusSuccessAction.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.14
+import QtQuick 2.15
 
 import StatusQ.Popups 0.1
 
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
    \since StatusQ.Popups 0.1
    \brief Menu action displaying success state.
 
-   The \c StatusSuccessAction visually indicate a success state after being triggered.
+   The \c StatusSuccessAction visually indicates a success state after being triggered.
    Success state is showed by changing action type to \c{Success}.
 
    \qml
@@ -27,31 +27,31 @@ StatusMenuItem {
     id: root
 
     /*!
-       \qmlproperty bool StatusSuccessAction.qml::success
+       \qmlproperty bool StatusSuccessAction::success
        This property holds state of the action.
     */
     property bool success: false
     /*!
-       \qmlproperty string StatusSuccessAction.qml::successText
+       \qmlproperty string StatusSuccessAction::successText
        This property holds success text displayed on success state.
 
-       Default value is binded to \c{text}.
+       Default value is bound to \c{text}.
     */
     property string successText: text
     /*!
-       \qmlproperty string StatusSuccessAction.qml::successIconName
+       \qmlproperty string StatusSuccessAction::successIconName
        This property holds icon name displayed on success state.
 
        Default value is \c{tiny/checkmark}.
     */
     property string successIconName: "tiny/checkmark"
     /*!
-       \qmlproperty bool StatusSuccessAction.qml::autoDismissMenu
+       \qmlproperty bool StatusSuccessAction::autoDismissMenu
        This property enable menu closing on click.
     */
     property bool autoDismissMenu: false
     /*!
-       \qmlproperty int StatusSuccessAction.qml::timeout
+       \qmlproperty int StatusSuccessAction::timeout
        This property controls how long success state is showed.
     */
     property int timeout: 2000

ui/app/AppLayouts/Onboarding/panels/AccountMenuItemPanel.qml

@@ -1,6 +1,5 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
-import QtQuick.Dialogs 1.3
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -21,12 +20,12 @@ Item {
     property bool keycardCreatedAccount: false
 
     property StatusAssetSettings asset: StatusAssetSettings {
-      name: "add"
+        name: "add"
     }
 
     signal clicked()
 
-    width: parent.width
+    implicitWidth: parent.width
     height: 64
 
     Rectangle {
@@ -68,6 +67,7 @@ Item {
         anchors.left: userImageOrIcon.right
         anchors.right: root.keycardCreatedAccount? keycardIcon.left : parent.right
         anchors.leftMargin: Style.current.padding
+        anchors.rightMargin: root.keycardCreatedAccount ? 0 : Style.current.padding
         color: !!root.colorId ? Theme.palette.directColor1 : Theme.palette.primaryColor1
         elide: Text.ElideRight
     }

ui/imports/shared/controls/chat/UserImage.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.3
+import QtQuick 2.15
+
 import shared 1.0
 import shared.panels 1.0