fix(ProfileShowcase): Add live preview support in the profile view (#13972)

* fix(ProfileShowcase): Add live preview support in the profile view

* Update ui/imports/shared/views/profile/ProfileShowcaseView.qml

Co-authored-by: Lukáš Tinkl <lukast@status.im>

---------

Co-authored-by: Lukáš Tinkl <lukast@status.im>

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -44,6 +44,10 @@ SettingsContentBase {
         property string displayName: descriptionPanel.displayName.text
         property string bio: descriptionPanel.bio.text
         property url profileLargeImage: profileHeader.previewIcon
+        property var socialLinks: priv.showcaseModels.socialLinksVisibleModel
+        property var communitiesModel: priv.showcaseModels.communitiesVisibleModel
+        property var accountsModel: priv.showcaseModels.accountsVisibleModel
+        property var collectiblesModel: priv.showcaseModels.collectiblesVisibleModel
     }
 
     enum TabIndex {
@@ -322,6 +326,8 @@ SettingsContentBase {
                 contactsStore: root.contactsStore
                 networkConnectionStore: root.networkConnectionStore
                 onClosed: destroy()
+                dirtyValues: root.dirtyValues
+                dirty: root.dirty
             }
         }
 

ui/imports/shared/popups/ProfileDialog.qml

@@ -15,6 +15,9 @@ StatusDialog {
     property var contactsStore
     property var networkConnectionStore
 
+    property var dirtyValues: ({})
+    property bool dirty: false
+
     width: 640
     padding: 0
 
@@ -27,5 +30,7 @@ StatusDialog {
         contactsStore: root.contactsStore
         networkConnectionStore: root.networkConnectionStore
         onCloseRequested: root.close()
+        dirtyValues: root.dirtyValues
+        dirty: root.dirty
     }
 }

ui/imports/shared/views/ProfileDialogView.qml

@@ -610,6 +610,9 @@ Pane {
                     profileStore: root.profileStore
                     walletStore: root.walletStore
                     networkConnectionStore: root.networkConnectionStore
+                    
+                    livePreview: root.dirty
+                    livePreviewValues: root.dirtyValues
 
                     onCloseRequested: root.closeRequested()
                 }

ui/imports/shared/views/profile/ProfileShowcaseView.qml

@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
+import StatusQ 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
@@ -26,14 +27,17 @@ Control {
     property var walletStore
     property var networkConnectionStore
 
+    property bool livePreview: false
+    property var livePreviewValues: ({})
+
     signal closeRequested()
 
-    onVisibleChanged: if (visible) profileStore.requestProfileShowcase(publicKey)
+    onVisibleChanged: if (visible && !livePreview) profileStore.requestProfileShowcase(publicKey)
 
     horizontalPadding: readOnly ? 20 : 40 // smaller in settings/preview
     topPadding: Style.current.bigPadding
 
-    QtObject {
+    StatusQUtils.QObject {
         id: d
 
         readonly property string copyLiteral: qsTr("Copy")
@@ -41,6 +45,66 @@ Control {
         readonly property var timer: Timer {
             id: timer
         }
+
+        readonly property var communitiesModel: root.livePreview ? liveCommunitiesModel
+                                                                 : communitiesStoreModel
+        readonly property var accountsModel: root.livePreview ? root.livePreviewValues.accountsModel
+                                                              : accountsStoreModel
+        readonly property var collectiblesModel: root.livePreview ? root.livePreviewValues.collectiblesModel
+                                                                  : collectiblesStoreModel
+        // TODO: add dirty values to the livePreviewValues once assets are supported
+        // readonly property assetsModel: root.livePreview ? root.livePreviewValues.assetsModel
+        //                                                     : root.profileStore.profileShowcaseAssetsModel
+        readonly property var assetsModel: root.profileStore.profileShowcaseAssetsModel
+        readonly property var socialLinksModel: root.livePreview ? root.livePreviewValues.socialLinksModel
+                                                            : root.profileStore.socialLinksModel
+        SortFilterProxyModel {
+            id: liveCommunitiesModel
+            sourceModel: root.livePreviewValues.communitiesModel
+            proxyRoles: [
+                FastExpressionRole {
+                    name: "membersCount"
+                    expression: model.members.count
+                    expectedRoles: ["members"]
+                }
+            ]
+        }
+
+        SortFilterProxyModel {
+            id: communitiesStoreModel
+            sourceModel: root.profileStore.profileShowcaseCommunitiesModel
+            filters: [
+                ValueFilter {
+                    roleName: "showcaseVisibility"
+                    value: Constants.ShowcaseVisibility.NoOne
+                    inverted: true
+                },
+                ValueFilter {
+                    roleName: "loading"
+                    value: false
+                }
+            ]
+        }
+
+        SortFilterProxyModel {
+            id: accountsStoreModel
+            sourceModel: root.profileStore.profileShowcaseAccountsModel
+            filters: ValueFilter {
+                roleName: "showcaseVisibility"
+                value: Constants.ShowcaseVisibility.NoOne
+                inverted: true
+            }
+        }
+
+        SortFilterProxyModel {
+            id: collectiblesStoreModel
+            sourceModel: root.profileStore.profileShowcaseCollectiblesModel
+            filters: ValueFilter {
+                roleName: "showcaseVisibility"
+                value: Constants.ShowcaseVisibility.NoOne
+                inverted: true
+            }
+        }
     }
 
     background: StatusDialogBackground {
@@ -79,20 +143,7 @@ Control {
                 cellWidth: (width-rightMargin)/2
                 cellHeight: cellWidth/2
                 visible: count
-                model: SortFilterProxyModel {
+                model: d.communitiesModel
-                    sourceModel: root.profileStore.profileShowcaseCommunitiesModel
-                    filters: [
-                        ValueFilter {
-                            roleName: "showcaseVisibility"
-                            value: Constants.ShowcaseVisibility.NoOne
-                            inverted: true
-                        },
-                        ValueFilter {
-                            roleName: "loading"
-                            value: false
-                        }
-                    ]
-                }
                 ScrollBar.vertical: StatusScrollBar { }
                 delegate: StatusListItem { // TODO custom delegate
                     width: GridView.view.cellWidth - Style.current.smallPadding
@@ -149,14 +200,7 @@ Control {
                 id: accountsView
                 spacing: Style.current.halfPadding
                 visible: count
-                model: SortFilterProxyModel {
+                model: d.accountsModel
-                    sourceModel: root.profileStore.profileShowcaseAccountsModel
-                    filters: ValueFilter {
-                        roleName: "showcaseVisibility"
-                        value: Constants.ShowcaseVisibility.NoOne
-                        inverted: true
-                    }
-                }
                 delegate: StatusListItem {
                     id: accountDelegate
                     property bool saved: {
@@ -253,14 +297,7 @@ Control {
                 cellHeight: cellWidth
                 visible: count
                 // TODO Issue #11637: Dedicated controller for user's list of collectibles (no watch-only entries)
-                model: SortFilterProxyModel {
+                model: d.collectiblesModel
-                    sourceModel: root.profileStore.profileShowcaseCollectiblesModel
-                    filters: ValueFilter {
-                        roleName: "showcaseVisibility"
-                        value: Constants.ShowcaseVisibility.NoOne
-                        inverted: true
-                    }
-                }
                 ScrollBar.vertical: StatusScrollBar { }
                 delegate: StatusRoundedImage {
                     width: GridView.view.cellWidth - Style.current.smallPadding
@@ -347,7 +384,7 @@ Control {
                 cellHeight: cellWidth/2.5
                 visible: count
                 model: SortFilterProxyModel {
-                    sourceModel: root.profileStore.profileShowcaseAssetsModel
+                    sourceModel: d.assetsModel
                     filters: ValueFilter {
                         roleName: "showcaseVisibility"
                         value: Constants.ShowcaseVisibility.NoOne