feat(@desktop/onboarding): weird menu order on app login

Fixes: #9135

src/app/global/app_translatable_constants.nim

@@ -0,0 +1,2 @@
+const LOGIN_ACCOUNTS_LIST_ADD_NEW_USER* = "LOGIN-ACCOUNTS-LIST-ADD-NEW-USER"
+const LOGIN_ACCOUNTS_LIST_ADD_EXISTING_USER* = "LOGIN-ACCOUNTS-LIST-ADD-EXISTING-USER"

src/app/modules/startup/models/login_account_item.nim

@@ -5,7 +5,9 @@ import ../../shared_models/[color_hash_item, color_hash_model]
 
 type
   Item* = object
+    order: int
     name: string
+    icon: string
     thumbnailImage: string
     largeImage: string
     keyUid: string
@@ -14,10 +16,12 @@ type
     colorId: int
     keycardPairing: string
 
-proc initItem*(name, thumbnailImage, largeImage, keyUid: string, colorHash: seq[ColorHashSegment], colorId: int,
+proc initItem*(order: int, name, icon, thumbnailImage, largeImage, keyUid: string, colorHash: seq[ColorHashSegment] = @[], 
-  keycardPairing: string):
+  colorId: int = -1, keycardPairing: string = ""):
   Item =
+  result.order = order
   result.name = name
+  result.icon = icon
   result.thumbnailImage = thumbnailImage
   result.largeImage = largeImage
   result.keyUid = keyUid
@@ -27,9 +31,15 @@ proc initItem*(name, thumbnailImage, largeImage, keyUid: string, colorHash: seq[
   result.colorId = colorId
   result.keycardPairing = keycardPairing
 
+proc getOrder*(self: Item): int =
+  return self.order
+
 proc getName*(self: Item): string =
   return self.name
 
+proc getIcon*(self: Item): string =
+  return self.icon
+
 proc getThumbnailImage*(self: Item): string =
   return self.thumbnailImage
 

src/app/modules/startup/models/login_account_model.nim

@@ -4,7 +4,9 @@ import login_account_item
 
 type
   ModelRole {.pure.} = enum
-    Name = UserRole + 1
+    Order = UserRole + 1
+    Name
+    Icon
     ThumbnailImage
     LargeImage
     KeyUid
@@ -34,7 +36,9 @@ QtObject:
 
   method roleNames(self: Model): Table[int, string] =
     {
+      ModelRole.Order.int:"order",
       ModelRole.Name.int:"username",
+      ModelRole.Icon.int:"icon",
       ModelRole.ThumbnailImage.int:"thumbnailImage",
       ModelRole.LargeImage.int:"largeImage",
       ModelRole.KeyUid.int:"keyUid",
@@ -55,8 +59,12 @@ QtObject:
     let enumRole = role.ModelRole
 
     case enumRole:
+    of ModelRole.Order:
+      result = newQVariant(item.getOrder())
     of ModelRole.Name:
       result = newQVariant(item.getName())
+    of ModelRole.Icon:
+      result = newQVariant(item.getIcon())
     of ModelRole.ThumbnailImage:
       result = newQVariant(item.getThumbnailImage())
     of ModelRole.LargeImage:

src/app/modules/startup/module.nim

@@ -7,6 +7,7 @@ import models/generated_account_item as gen_acc_item
 import models/login_account_item as login_acc_item
 import models/fetching_data_model as fetch_model
 import ../../global/global_singleton
+import ../../global/app_translatable_constants as atc
 import ../../core/eventemitter
 
 import ../../../app_service/service/keychain/service as keychain_service
@@ -95,19 +96,24 @@ method load*[T](self: Module[T]) =
   else:
     let openedAccounts = self.controller.getOpenedAccounts()
     var items: seq[login_acc_item.Item]
-    for acc in openedAccounts:
+    for i in 0..<openedAccounts.len:
+      let acc = openedAccounts[i]
       var thumbnailImage: string
       var largeImage: string
       self.extractImages(acc, thumbnailImage, largeImage)
-      items.add(login_acc_item.initItem(acc.name, thumbnailImage, largeImage, acc.keyUid, acc.colorHash, acc.colorId, 
+      items.add(login_acc_item.initItem(order = i, acc.name, icon = "", thumbnailImage, largeImage, acc.keyUid, acc.colorHash, 
-      acc.keycardPairing))
+        acc.colorId, acc.keycardPairing))
-    self.view.setLoginAccountsModelItems(items)
     # set the first account as slected one
     if items.len == 0:
       # we should never be here, since else block of `if (shouldStartWithOnboardingScreen)` 
       # ensures that `openedAccounts` is not empty array
       error "cannot run the app in login flow cause list of login accounts is empty"
       quit() # quit the app
+    items.add(login_acc_item.initItem(order = items.len, name = atc.LOGIN_ACCOUNTS_LIST_ADD_NEW_USER, icon = "add", 
+      thumbnailImage = "", largeImage = "", keyUid = ""))
+    items.add(login_acc_item.initItem(order = items.len, name = atc.LOGIN_ACCOUNTS_LIST_ADD_EXISTING_USER, icon = "wallet", 
+      thumbnailImage = "", largeImage = "", keyUid = ""))
+    self.view.setLoginAccountsModelItems(items)
     self.setSelectedLoginAccount(items[0])
   self.delegate.startupDidLoad()
 

ui/app/AppLayouts/Onboarding/views/LoginView.qml

@@ -276,6 +276,10 @@ Item {
                 SortFilterProxyModel {
                     id: proxyModel
                     sourceModel: root.startupStore.startupModuleInst.loginAccountsModel
+                    sorters: StringSorter {
+                        roleName: "order"
+                        sortOrder: Qt.AscendingOrder
+                    }
                     filters: ValueFilter {
                         roleName: "keyUid"
                         value: root.startupStore.selectedLoginAccount.keyUid
@@ -283,17 +287,44 @@ Item {
                     }
                 }
 
+                onAboutToShow: {
+                    repeaterId.model = []
+                    repeaterId.model = proxyModel
+                }
+
                 Repeater {
+                    id: repeaterId
                     objectName: "LoginView_AccountsRepeater"
-                    model: proxyModel
 
                     delegate: AccountMenuItemPanel {
-                        label: model.username
+                        objectName: {
+                            if (model.username === Constants.appTranslatableConstants.loginAccountsListAddNewUser) {
+                                return "LoginView_addNewUserItem"
+                            }
+                            return ""
+                        }
+                        label: {
+                            if (model.username === Constants.appTranslatableConstants.loginAccountsListAddNewUser ||
+                                    model.username === Constants.appTranslatableConstants.loginAccountsListAddExistingUser) {
+                                return Constants.appTranslationMap[model.username]
+                            }
+                            return model.username
+                        }
                         image: model.thumbnailImage
-                        colorId: model.colorId
+                        asset.name: model.icon
+                        colorId: model.colorId > -1? model.colorId : ""
                         colorHash: model.colorHash
                         keycardCreatedAccount: model.keycardCreatedAccount
                         onClicked: {
+                            if (model.username === Constants.appTranslatableConstants.loginAccountsListAddNewUser) {
+                                accountsPopup.close()
+                                root.startupStore.doTertiaryAction()
+                            }
+                            else if (model.username === Constants.appTranslatableConstants.loginAccountsListAddExistingUser) {
+                                accountsPopup.close()
+                                root.startupStore.doQuaternaryAction()
+                            }
+                            else {
                                 d.resetLogin()
                                 accountsPopup.close()
                                 const realIndex = proxyModel.mapToSource(index)
@@ -301,24 +332,6 @@ Item {
                             }
                         }
                     }
-
-                AccountMenuItemPanel {
-                    objectName: "LoginView_addNewUserItem"
-                    label: qsTr("Add new user")
-                    asset.name: "add"
-                    onClicked: {
-                        accountsPopup.close()
-                        root.startupStore.doTertiaryAction()
-                    }
-                }
-
-                AccountMenuItemPanel {
-                    label: qsTr("Add existing Status user")
-                    asset.name: "wallet"
-                    onClicked: {
-                        accountsPopup.close()
-                        root.startupStore.doQuaternaryAction()
-                    }
                 }
             }
         }

ui/imports/utils/Constants.qml

@@ -777,4 +777,15 @@ QtObject {
         StatusColors.colors['moss'],
         StatusColors.colors['brown'],
         StatusColors.colors['brown2'] ]
+
+    readonly property QtObject appTranslatableConstants: QtObject {
+        readonly property string loginAccountsListAddNewUser: "LOGIN-ACCOUNTS-LIST-ADD-NEW-USER"
+        readonly property string loginAccountsListAddExistingUser: "LOGIN-ACCOUNTS-LIST-ADD-EXISTING-USER"
+    }
+
+    readonly property var appTranslationMap: ({})
+    Component.onCompleted: {
+        appTranslationMap[appTranslatableConstants.loginAccountsListAddNewUser] = qsTr("Add new user")
+        appTranslationMap[appTranslatableConstants.loginAccountsListAddExistingUser] = qsTr("Add existing Status user")
+    }
 }