feat(profile): Implement side-by-side preview

- restored dirty tracking for Identity; showcase is handled by the NIM
backend atm
- StatusSectionLayout: make the right panel width configurable and clean
the docu

Fixes #13331

ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml

@@ -52,22 +52,22 @@ SplitView {
     handle: Item { }
 
     /*!
-        \qmlproperty Item StatusAppLayout::leftPanel
+        \qmlproperty Item StatusSectionLayout::leftPanel
         This property holds the left panel of the component.
     */
     property Item leftPanel
     /*!
-        \qmlproperty Item StatusAppLayout::centerPanel
+        \qmlproperty Item StatusSectionLayout::centerPanel
         This property holds the center panel of the component.
     */
     property Item centerPanel
     /*!
-        \qmlproperty Component StatusAppLayout::rightPanel
+        \qmlproperty Component StatusSectionLayout::rightPanel
         This property holds the right panel of the component.
     */
     property Component rightPanel
     /*!
-        \qmlproperty Component StatusAppLayout::footer
+        \qmlproperty Item StatusSectionLayout::footer
         This property holds the footer of the component.
     */
     property Item footer
@@ -77,47 +77,54 @@ SplitView {
     */
     property Item headerBackground
     /*!
-        \qmlproperty bool StatusAppLayout::showRightPanel
+        \qmlproperty bool StatusSectionLayout::showRightPanel
         This property sets the right panel component's visibility to true/false.
         Default value is false.
     */
     property bool showRightPanel: false
+
     /*!
-        \qmlproperty bool StatusAppLayout::showHeader
+        \qmlproperty int StatusSectionLayout::rightPanelWidth
+        This property sets the right panel component's width.
+        Default value is 250.
+    */
+    property int rightPanelWidth: 250
+    /*!
+        \qmlproperty bool StatusSectionLayout::showHeader
         This property sets the header component's visibility to true/false.
         Default value is true.
     */
     property bool showHeader: true
 
     /*!
-        \qmlproperty alias StatusAppLayout::notificationCount
+        \qmlproperty alias StatusSectionLayout::notificationCount
         This property holds a reference to the notificationCount property of the
         header component.
     */
     property alias notificationCount: statusToolBar.notificationCount
 
     /*!
-        \qmlproperty alias StatusAppLayout::hasUnseenNotifications
+        \qmlproperty alias StatusSectionLayout::hasUnseenNotifications
         This property holds a reference to the hasUnseenNotifications property of the
         header component.
     */
     property alias hasUnseenNotifications: statusToolBar.hasUnseenNotifications
 
     /*!
-        \qmlproperty alias StatusAppLayout::backButtonName
+        \qmlproperty alias StatusSectionLayout::backButtonName
         This property holds a reference to the backButtonName property of the
         header component.
     */
     property alias backButtonName: statusToolBar.backButtonName
 
     /*!
-        \qmlproperty alias StatusAppLayout::headerContent
+        \qmlproperty alias StatusSectionLayout::headerContent
         This property holds a reference to the custom header content of
         the header component.
     */
     property alias headerContent: statusToolBar.headerContent
     /*!
-        \qmlproperty alias StatusAppLayout::notificationButton
+        \qmlproperty alias StatusSectionLayout::notificationButton
         This property holds a reference to the notification button of the header
         component.
     */
@@ -176,7 +183,7 @@ SplitView {
             Item {
                 id: headerBackgroundSlot
                 anchors.top: parent.top
-		// Needed cause I see a gap otherwise
+                // Needed cause I see a gap otherwise
                 anchors.topMargin: -3
                 width: visible ? parent.width : 0
                 height: visible ? childrenRect.height : 0
@@ -212,7 +219,7 @@ SplitView {
     }
 
     Control {
-        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
+        SplitView.preferredWidth: root.showRightPanel ? root.rightPanelWidth : 0
         SplitView.minimumWidth: root.showRightPanel ? 58 : 0
         opacity: root.showRightPanel ? 1.0 : 0.0
         visible: (opacity > 0.1)

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -1,11 +1,12 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
 
 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
-import shared.stores 1.0 as SharedStores
+import shared.stores 1.0
 import shared.popups.keycard 1.0
 import shared.stores.send 1.0
 
@@ -15,6 +16,7 @@ import AppLayouts.Wallet.stores 1.0
 import "stores"
 import "popups"
 import "views"
+import "views/profile"
 
 import StatusQ.Core 0.1
 import StatusQ.Layout 0.1
@@ -36,7 +38,7 @@ StatusSectionLayout {
     required property TransactionStore transactionStore
     required property WalletAssetsStore walletAssetsStore
     required property CollectiblesStore collectiblesStore
-    required property SharedStores.CurrenciesStore currencyStore
+    required property CurrenciesStore currencyStore
 
     backButtonName: root.store.backButtonName
     notificationCount: activityCenterStore.unreadNotificationsCount
@@ -74,6 +76,10 @@ StatusSectionLayout {
         readonly property int leftMargin: 64
 
         readonly property int contentWidth: 560
+        readonly property int rightPanelWidth: 768
+
+        readonly property bool isProfilePanelActive: profileContainer.currentIndex === Constants.settingsSubsection.profile
+        readonly property bool sideBySidePreviewAvailable: root.Window.width >= 1840 // design
     }
 
     headerBackground: AccountHeaderGradient {
@@ -137,6 +143,7 @@ StatusSectionLayout {
                 communitiesModel: root.store.communitiesList
                 sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.profile)
                 contentWidth: d.contentWidth
+                sideBySidePreview: d.sideBySidePreviewAvailable
             }
         }
 
@@ -227,7 +234,7 @@ StatusSectionLayout {
                 implicitHeight: parent.height
 
                 languageStore: root.store.languageStore
-                currencyStore: SharedStores.RootStore.currencyStore
+                currencyStore: root.currencyStore
                 sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.language)
                 contentWidth: d.contentWidth
             }
@@ -405,6 +412,16 @@ StatusSectionLayout {
         }
     }
 
+    showRightPanel: d.isProfilePanelActive && d.sideBySidePreviewAvailable
+    rightPanelWidth: d.rightPanelWidth
+    rightPanel: MyProfilePreview {
+        profileStore: root.store.profileStore
+        contactsStore: root.store.contactsStore
+        networkConnectionStore: root.networkConnectionStore
+        dirtyValues: d.isProfilePanelActive ? profileContainer.currentItem.dirtyValues : ({})
+        dirty: d.isProfilePanelActive ? profileContainer.currentItem.dirty : false
+    }
+
     Connections {
         target: root.store.keycardStore.keycardModule
         enabled: profileContainer.currentIndex === Constants.settingsSubsection.wallet ||

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

@@ -35,17 +35,18 @@ SettingsContentBase {
 
     property var communitiesModel
 
-    titleRowComponentLoader.sourceComponent: RowLayout {
+    property bool sideBySidePreview
-        StatusButton {
+
-            objectName: "profileSettingsChangePasswordButton"
+    property QtObject dirtyValues: QtObject {
-            text: qsTr("Change Password")
+        property string displayName: descriptionPanel.displayName.text
-            onClicked: Global.openPopup(changePasswordModal)
+        property string bio: descriptionPanel.bio.text
-            enabled: !userProfile.isKeycardUser
+        property url profileLargeImage: profileHeader.previewIcon
-        }
+    }
-        StatusButton {
+
-            text: qsTr("Preview")
+    titleRowComponentLoader.sourceComponent: StatusButton {
-            onClicked: Global.openPopup(profilePreview)
+        text: qsTr("Preview")
-        }
+        onClicked: Global.openPopup(profilePreview)
+        visible: !root.sideBySidePreview
     }
 
     dirty: (!descriptionPanel.isEnsName &&

ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml

@@ -28,7 +28,7 @@ Item {
     SharedViews.ProfileDialogView {
         id: profilePreview
         anchors.fill: parent
-        anchors.margins: 24
+        anchors.margins: 64
         readOnly: true
     }
 

ui/imports/shared/views/ProfileDialogView.qml

@@ -36,13 +36,13 @@ Pane {
     property var networkConnectionStore
     property var communitiesModel
 
-    property QtObject dirtyValues: null
+    property var dirtyValues: ({})
     property bool dirty: false
 
     signal closeRequested()
 
     padding: 0
-    topPadding: 40
+    topPadding: 32
 
     background: StatusDialogBackground {
         id: background