fix(@desktop/browser): settings -> Browser, connected dapps items do not follow figma

Fixes #5906

src/app/modules/main/browser_section/dapps/accounts.nim

@@ -6,6 +6,7 @@ type
     Name = UserRole + 1
     Address
     Color
+    Emoji
 
 QtObject:
   type
@@ -47,6 +48,7 @@ QtObject:
       ModelRole.Name.int:"name",
       ModelRole.Address.int:"address",
       ModelRole.Color.int:"color",
+      ModelRole.Emoji.int:"emoji"
     }.toTable
 
   method data(self: AccountsModel, index: QModelIndex, role: int): QVariant =
@@ -66,6 +68,8 @@ QtObject:
       result = newQVariant(item.address)
     of ModelRole.Color:
       result = newQVariant(item.color)
+    of ModelRole.Emoji:
+      result = newQVariant(item.emoji)
 
   proc addItem*(self: AccountsModel, item: WalletAccountDto) =
     let parentModelIndex = newQModelIndex()

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 07e711e30c4d1dd3f6677210a7b1335d7ae172d9
+Subproject commit be0f49a8d80a8489e9f26f765167c3239c0c92c1

ui/app/AppLayouts/Profile/views/wallet/PermissionsListView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.14
+import QtWebEngine 1.10
 import shared.status 1.0
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
@@ -19,10 +20,16 @@ Column {
         delegate: Item {
             width: parent.width
             height: listItem.height + spacer.height
+            WebEngineView {
+                id: webView
+                url: model.name.startsWith("http")? model.name : "http://%1".arg(model.name)
+                visible: false
+            }
             StatusListItem {
                 id: listItem
-                title: model.name
-                icon.isLetterIdenticon: true
+                title: webView.title !== ""? webView.title : model.name
+                subTitle: model.name
+                image.source: webView.icon != ""? webView.icon : Style.svg("compassActive")
                 width: parent.width
                 highlighted: true
                 sensor.enabled: false
@@ -41,8 +48,13 @@ Column {
                     property int outerIndex: listItem.index
 
                     title: model.name
-                    icon.isLetterIdenticon: true
+
+                    icon.emoji: !!model.emoji ? model.emoji: ""
                     icon.color: model.color
+                    icon.name: !model.emoji ? "filled-account": ""
+                    icon.letterSize: 14
+                    icon.isLetterIdenticon: !!model.emoji
+                    icon.background.color: Theme.palette.indirectColor1
                     onClicked: {
                         const dappName = walletStore.dappList.rowData(outerIndex, 'name')
                         walletStore.disconnectAddress(dappName, model.address)