Settings list simplified

- UI simplified, made independent from the backend
- dedicated model created, filtering on the level of model instead of
  per delegate
- using ListView instead of mutliple Repeaters
- UI models removed from ProfileSectionStore

Closes: #16675

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -3,33 +3,34 @@ 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.popups.keycard 1.0
+import shared.stores 1.0 as SharedStores
 import shared.stores.send 1.0
+import utils 1.0
 
-import StatusQ.Core.Theme 0.1
-
-import AppLayouts.Wallet.controls 1.0
-import AppLayouts.Wallet.stores 1.0
-
-import "stores"
 import "popups"
 import "views"
 import "views/profile"
 
 import StatusQ 0.1
-import StatusQ.Core 0.1
-import StatusQ.Layout 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Popups.Dialog 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as SQUtils
+import StatusQ.Layout 0.1
+import StatusQ.Popups.Dialog 0.1
+
+import AppLayouts.Communities.stores 1.0 as CommunitiesStore
+import AppLayouts.Profile.helpers 1.0
+import AppLayouts.Profile.stores 1.0 as ProfileStores
+import AppLayouts.Wallet.controls 1.0
+import AppLayouts.Wallet.stores 1.0
+import AppLayouts.stores 1.0 as AppLayoutsStores
 
 import SortFilterProxyModel 0.2
-import AppLayouts.stores 1.0 as AppLayoutsStores
-import AppLayouts.Communities.stores 1.0 as CommunitiesStore
+
 
 StatusSectionLayout {
     id: root
@@ -41,7 +42,7 @@ StatusSectionLayout {
 
     property SharedStores.RootStore sharedRootStore
     property SharedStores.UtilsStore utilsStore
-    property ProfileSectionStore store
+    property ProfileStores.ProfileSectionStore store
     property AppLayoutsStores.RootStore globalStore
     property CommunitiesStore.CommunitiesStore communitiesStore
     required property var sendModalPopup
@@ -99,6 +100,17 @@ StatusSectionLayout {
         readonly property bool toastClashesWithDirtyBubble: root.Window.width <= 1650 // design
     }
 
+    SettingsEntriesModel {
+        id: settingsEntriesModel
+
+        showWalletEntries: root.store.walletMenuItemEnabled
+        showBackUpSeed: !root.store.privacyStore.mnemonicBackedUp
+
+        syncingBadgeCount: root.store.devicesStore.devicesModel.count -
+                           root.store.devicesStore.devicesModel.pairedCount
+        messagingBadgeCount: root.store.contactsStore.receivedContactRequestsModel.count
+    }
+
     headerBackground: AccountHeaderGradient {
         width: parent.width
         overview: root.store.walletStore.selectedAccount
@@ -106,8 +118,10 @@ StatusSectionLayout {
     }
 
     leftPanel: LeftTabView {
-        store: root.store
         anchors.fill: parent
+
+        model: settingsEntriesModel
+
         onMenuItemClicked: {
             if (profileContainer.currentItem.dirty && !profileContainer.currentItem.ignoreDirty) {
                 event.accepted = true;
@@ -137,9 +151,9 @@ StatusSectionLayout {
             root.store.backButtonName = ""
 
             if (currentIndex === Constants.settingsSubsection.contacts) {
-                root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.messaging)
+                root.store.backButtonName = settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.messaging)
             } else if (currentIndex === Constants.settingsSubsection.about_privacy || currentIndex === Constants.settingsSubsection.about_terms) {
-                root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.about)
+                root.store.backButtonName = settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.about)
             } else if (currentIndex === Constants.settingsSubsection.wallet) {
                 walletView.item.resetStack()
             } else if (currentIndex === Constants.settingsSubsection.keycard) {
@@ -161,7 +175,7 @@ StatusSectionLayout {
                 utilsStore: root.utilsStore
 
                 sendToAccountEnabled: root.networkConnectionStore.sendBuyBridgeEnabled
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.profile)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.profile)
                 contentWidth: d.contentWidth
                 sideBySidePreview: d.sideBySidePreviewAvailable
                 toastClashesWithDirtyBubble: d.toastClashesWithDirtyBubble
@@ -205,7 +219,7 @@ StatusSectionLayout {
                 privacyStore: root.store.privacyStore
                 passwordStrengthScoreFunction: root.sharedRootStore.getPasswordStrengthScore
                 contentWidth: d.contentWidth
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.password)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.password)
             }
         }
 
@@ -249,7 +263,7 @@ StatusSectionLayout {
                 implicitWidth: parent.width
                 implicitHeight: parent.height
                 messagingStore: root.store.messagingStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.messaging)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.messaging)
                 contactsStore: root.store.contactsStore
                 contentWidth: d.contentWidth
             }
@@ -276,7 +290,7 @@ StatusSectionLayout {
                 currencySymbol: root.sharedRootStore.currencyStore.currentCurrency
                 emojiPopup: root.emojiPopup
                 sendModalPopup: root.sendModalPopup
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.wallet)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.wallet)
             }
             onLoaded: root.store.backButtonName = ""
         }
@@ -289,7 +303,7 @@ StatusSectionLayout {
                 implicitHeight: parent.height
 
                 appearanceStore: root.store.appearanceStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.appearance)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.appearance)
                 contentWidth: d.contentWidth
                 systemPalette: root.systemPalette
             }
@@ -305,7 +319,7 @@ StatusSectionLayout {
                 languageSelectionEnabled: localAppSettings.translationsEnabled
                 languageStore: root.store.languageStore
                 currencyStore: root.currencyStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.language)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.language)
                 contentWidth: d.contentWidth
             }
         }
@@ -318,7 +332,7 @@ StatusSectionLayout {
                 implicitHeight: parent.height
 
                 notificationsStore: root.store.notificationsStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.notifications)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.notifications)
                 contentWidth: d.contentWidth
             }
         }
@@ -335,7 +349,7 @@ StatusSectionLayout {
                 devicesStore: root.store.devicesStore
                 privacyStore: root.store.privacyStore
                 advancedStore: root.store.advancedStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.syncingSettings)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.syncingSettings)
                 contentWidth: d.contentWidth
             }
         }
@@ -351,7 +365,7 @@ StatusSectionLayout {
                 advancedStore: root.store.advancedStore
                 walletStore: root.store.walletStore
                 isFleetSelectionEnabled: fleetSelectionEnabled
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.advanced)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.advanced)
                 contentWidth: d.contentWidth
             }
         }
@@ -362,7 +376,7 @@ StatusSectionLayout {
             sourceComponent: AboutView {
                 implicitWidth: parent.width
                 implicitHeight: parent.height
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.about)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.about)
                 contentWidth: d.contentWidth
 
                 store: QtObject {
@@ -411,7 +425,7 @@ StatusSectionLayout {
                 rootStore: root.globalStore
                 currencyStore: root.currencyStore
                 walletAssetsStore: root.walletAssetsStore
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.communitiesSettings)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.communitiesSettings)
                 contentWidth: d.contentWidth
             }
         }
@@ -427,8 +441,8 @@ StatusSectionLayout {
                 profileSectionStore: root.store
                 keycardStore: root.store.keycardStore
                 emojiPopup: root.emojiPopup
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.keycard)
-                mainSectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.keycard)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.keycard)
+                mainSectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.keycard)
                 contentWidth: d.contentWidth
             }
         }
@@ -483,7 +497,7 @@ StatusSectionLayout {
                 implicitWidth: parent.width
                 implicitHeight: parent.height
 
-                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity)
+                sectionTitle: settingsEntriesModel.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity)
                 contentWidth: d.contentWidth
             }
         }

ui/app/AppLayouts/Profile/controls/SettingsList.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.15
+
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+    \qmltype SettingsList
+    \inherits StatusListView
+    \inqmlmodule AppLayouts.Profile.controls
+
+    \brief List view rendering setting entries
+
+    Expected model structure:
+
+    subsection          [int]    - identifier of the entry (Constants.settingsSubsection)
+    text                [string] - readable name of the entry
+    icon                [string] - icon name
+    badgeCount          [int]    - number presented on the badge
+    isExperimental      [bool]   - indicates if the beta tag should be presented
+    experimentalTooltip [string] - tooltip text for the beta tag
+*/
+StatusListView {
+    id: root
+
+    property int currenctSubsection
+
+    readonly property int availableWidth: width - leftMargin - rightMargin
+
+    signal clicked(int subsection)
+
+    spacing: Theme.halfPadding
+
+    delegate: StatusNavigationListItem {
+        id: delegate
+
+        objectName: model.subsection + "-MenuItem"
+
+        width: ListView.view.availableWidth
+        title: model.text
+        asset.name: model.icon
+        selected: root.currenctSubsection === model.subsection
+        highlighted: !!betaTagLoader.item && betaTagLoader.item.hovered
+        badge.value: model.badgeCount
+
+        Loader {
+            id: betaTagLoader
+
+            active: model.isExperimental
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.padding +
+                                 (delegate.badge.visible
+                                  ? delegate.badge.width + Theme.halfPadding : 0)
+
+            sourceComponent: StatusBetaTag {
+                tooltipText: model.experimentalTooltip
+                cursorShape: Qt.PointingHandCursor
+            }
+        }
+
+        onClicked: root.clicked(model.subsection)
+    }
+
+    section.property: "group"
+
+    section.delegate: StatusBaseText {
+        text: section
+        color: Theme.palette.baseColor1
+
+        width: ListView.view.availableWidth
+
+        leftPadding: Theme.padding
+        rightPadding: Theme.padding
+        topPadding: Theme.smallPadding
+        bottomPadding: Theme.smallPadding
+    }
+}

ui/app/AppLayouts/Profile/controls/qmldir

@@ -1,7 +1,8 @@
 AddMoreAccountsLink 1.0 AddMoreAccountsLink.qml
 ProfileShowcasePanelDelegate 1.0 ProfileShowcasePanelDelegate.qml
+SettingsList 1.0 SettingsList.qml
 ShowcaseDelegate 1.0 ShowcaseDelegate.qml
 StaticSocialLinkInput 1.0 StaticSocialLinkInput.qml
 WalletAccountDelegate 1.0 WalletAccountDelegate.qml
-WalletKeyPairDelegate 1.0 WalletKeyPairDelegate.qml
 WalletAccountDetailsKeypairItem 1.0 WalletAccountDetailsKeypairItem.qml
+WalletKeyPairDelegate 1.0 WalletKeyPairDelegate.qml

ui/app/AppLayouts/Profile/helpers/SettingsEntriesModel.qml

@@ -0,0 +1,197 @@
+import QtQuick 2.15
+
+import StatusQ 0.1
+import utils 1.0
+
+import SortFilterProxyModel 0.2
+
+/*!
+    \qmltype SettingsEntriesModel
+    \inherits SortFilterProxyModel
+    \inqmlmodule AppLayouts.Profile.helpers
+
+    Model providing entries to the settings section.
+
+    Model structure:
+
+    subsection          [int]    - identifier of the entry (Constants.settingsSubsection)
+    text                [string] - readable name of the entry
+    icon                [string] - icon name
+    badgeCount          [int]    - number presented on the badge
+    isExperimental      [bool]   - indicates if the beta tag should be presented
+    experimentalTooltip [string] - tooltip text for the beta tag
+*/
+SortFilterProxyModel {
+    id: root
+
+    // Determines if wallet-related entries should be included
+    property bool showWalletEntries
+
+    // Determines if back up seed phrase entry should be included
+    property bool showBackUpSeed
+
+    // Badge count for the syncing entry
+    property int syncingBadgeCount: 0
+
+    // Badge count for the messaging section
+    property int messagingBadgeCount: 0
+
+    readonly property string appsGroupTitle: qsTr("Apps")
+    readonly property string preferencesGroupTitle: qsTr("Preferences")
+    readonly property string aboutAndHelpGroupTitle: qsTr("About & Help")
+
+    readonly property var entries: [
+        {
+            subsection: Constants.settingsSubsection.backUpSeed,
+            text: qsTr("Back up seed phrase"),
+            icon: "seed-phrase"
+        },
+        {
+            subsection: Constants.settingsSubsection.profile,
+            text: qsTr("Profile"),
+            icon: "profile"
+        },
+        {
+            subsection: Constants.settingsSubsection.password,
+            text: qsTr("Password"),
+            icon: "password"
+        },
+        {
+            subsection: Constants.settingsSubsection.keycard,
+            text: qsTr("Keycard"),
+            icon: "keycard"
+        },
+        {
+            subsection: Constants.settingsSubsection.ensUsernames,
+            text: qsTr("ENS usernames"),
+            icon: "username",
+            isExperimental: true,
+            experimentalTooltip: qsTr("This section is going through a redesign.")
+        },
+        {
+            subsection: Constants.settingsSubsection.syncingSettings,
+            text: qsTr("Syncing"),
+            icon: "rotate",
+            isExperimental: true,
+            experimentalTooltip: qsTr("Connection problems can happen.<br>If they do, please use the Enter a Seed Phrase feature instead.")
+        },
+        {
+            subsection: Constants.settingsSubsection.messaging,
+            text: qsTr("Messaging"),
+            icon: "chat",
+            group: root.appsGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.wallet,
+            text: qsTr("Wallet"),
+            icon: "wallet",
+            group: root.appsGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.communitiesSettings,
+            text: qsTr("Communities"),
+            icon: "communities",
+            group: root.appsGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.privacyAndSecurity,
+            text: qsTr("Privacy and security"),
+            icon: "security",
+            group: root.preferencesGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.appearance,
+            text: qsTr("Appearance"),
+            icon: "appearance",
+            group: root.preferencesGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.notifications,
+            text: qsTr("Notifications & Sounds"),
+            icon: "notification",
+            group: root.preferencesGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.language,
+            text: qsTr("Language & Currency"),
+            icon: "language",
+            group: root.preferencesGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.advanced,
+            text: qsTr("Advanced"),
+            icon: "settings",
+            group: root.preferencesGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.about,
+            text: qsTr("About"),
+            icon: "info",
+            group: root.aboutAndHelpGroupTitle
+        },
+        {
+            subsection: Constants.settingsSubsection.signout,
+            text: qsTr("Sign out & Quit"),
+            icon: "logout",
+            group: root.aboutAndHelpGroupTitle
+        }
+    ]
+
+    // Update model after retranslation
+    onEntriesChanged: {
+        entries.forEach((elem, index) => {
+            baseModel.setProperty(index, "text", elem.text)
+
+            if (elem.group)
+                baseModel.setProperty(index, "group", elem.group)
+        })
+    }
+
+    function getNameForSubsection(subsection) {
+        const entry = root.entries.find(entry => entry.subsection === subsection)
+        return entry ? entry.text : ""
+    }
+
+    sourceModel: ObjectProxyModel {
+        sourceModel: ListModel {
+            id: baseModel
+
+            Component.onCompleted: append(root.entries)
+        }
+
+        delegate: QtObject {
+            readonly property bool visible: {
+                switch (model.subsection) {
+                    case Constants.settingsSubsection.ensUsernames:
+                    case Constants.settingsSubsection.wallet:
+                        return root.showWalletEntries
+                    case Constants.settingsSubsection.backUpSeed:
+                        return root.showBackUpSeed
+
+                    default: return true
+                }
+            }
+
+            readonly property int badgeCount: {
+                switch (model.subsection) {
+                    case Constants.settingsSubsection.backUpSeed:
+                        return root.showBackUpSeed
+                    case Constants.settingsSubsection.syncingSettings:
+                        return root.syncingBadgeCount
+                    case Constants.settingsSubsection.messaging:
+                        return root.messagingBadgeCount
+
+                    default: return 0
+                }
+            }
+        }
+
+        expectedRoles: ["subsection"]
+        exposedRoles: ["visible", "badgeCount"]
+    }
+
+    filters: ValueFilter {
+        roleName: "visible"
+        value: true
+    }
+}

ui/app/AppLayouts/Profile/helpers/qmldir

@@ -1,6 +1,7 @@
+ContactDetails 1.0 ContactDetails.qml
 ProfileShowcaseDirtyState 1.0 ProfileShowcaseDirtyState.qml
 ProfileShowcaseModelAdapter 1.0 ProfileShowcaseModelAdapter.qml
-ProfileShowcaseSettingsModelAdapter 1.0 ProfileShowcaseSettingsModelAdapter.qml
 ProfileShowcaseModels 1.0 ProfileShowcaseModels.qml
+ProfileShowcaseSettingsModelAdapter 1.0 ProfileShowcaseSettingsModelAdapter.qml
+SettingsEntriesModel 1.0 SettingsEntriesModel.qml
 VisibilityAndPositionDirtyStateModel 1.0 VisibilityAndPositionDirtyStateModel.qml
-ContactDetails 1.0 ContactDetails.qml

ui/app/AppLayouts/Profile/panels/MenuPanel.qml

@@ -1,144 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-
-import shared 1.0
-import utils 1.0
-
-import "../stores"
-
-Column {
-    id: root
-    spacing: 8
-
-    property PrivacyStore privacyStore
-    property ContactsStore contactsStore
-    property DevicesStore devicesStore
-    property alias mainMenuItems: mainMenuItems.model
-    property alias settingsMenuItems: settingsMenuItems.model
-    property alias extraMenuItems: extraMenuItems.model
-    property alias appsMenuItems: appsMenuItems.model
-
-    property bool walletMenuItemEnabled: false
-
-    property int settingsSubsection
-
-    signal menuItemClicked(var menu_item)
-
-    Repeater {
-        id: mainMenuItems
-        delegate: StatusNavigationListItem {
-            id: navigationItem
-            objectName: itemId + "-MainMenuItem"
-            width: root.width
-            itemId: model.subsection
-            title: model.text
-            asset.name: model.icon
-            selected: root.settingsSubsection === model.subsection
-            highlighted: !!betaTagLoader.item && betaTagLoader.item.hovered
-            onClicked: root.menuItemClicked(model)
-            badge.value: {
-                switch (model.subsection) {
-                    case Constants.settingsSubsection.backUpSeed:
-                        return !root.privacyStore.mnemonicBackedUp
-                    case Constants.settingsSubsection.syncingSettings:
-                        return root.devicesStore.devicesModel.count - root.devicesStore.devicesModel.pairedCount
-                    default: return 0
-                }
-            }
-            visible: {
-                switch (model.subsection) {
-                case Constants.settingsSubsection.ensUsernames:
-                    return root.walletMenuItemEnabled;
-                case Constants.settingsSubsection.backUpSeed:
-                    return !root.privacyStore.mnemonicBackedUp;
-                default: return true;
-                }
-            }
-
-            Loader {
-                id: betaTagLoader
-                readonly property string experimentalTooltip: model.experimentalTooltip ?? ""
-                active: model.isExperimental
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: Theme.padding + (navigationItem.badge.visible ? navigationItem.badge.width + Theme.halfPadding : 0)
-
-                sourceComponent: StatusBetaTag {
-                    tooltipText: betaTagLoader.experimentalTooltip
-                    cursorShape: Qt.PointingHandCursor
-                }
-            }
-        }
-    }
-
-    StatusListSectionHeadline {
-        text: qsTr("Apps")
-        width: root.width
-    }
-    
-    Repeater {
-        id: appsMenuItems
-        delegate: StatusNavigationListItem {
-            id: appsMenuDelegate
-            objectName: itemId + "-AppMenuItem"
-            width: root.width
-            itemId: model.subsection
-            title: model.text
-            asset.name: model.icon
-            selected: root.settingsSubsection === model.subsection
-            onClicked: root.menuItemClicked(model)
-            visible: {
-                (model.subsection !== Constants.settingsSubsection.wallet) ||
-                (model.subsection === Constants.settingsSubsection.communitiesSettings) ||
-                (model.subsection === Constants.settingsSubsection.wallet && root.walletMenuItemEnabled)
-            }
-            badge.value: {
-                switch (model.subsection) {
-                    case Constants.settingsSubsection.messaging:
-                        return root.contactsStore.receivedContactRequestsModel.count
-                    default: return ""
-                }
-            }
-        }
-    }
-
-    StatusListSectionHeadline {
-        text: qsTr("Preferences")
-        width: root.width
-    }
-
-    Repeater {
-        id: settingsMenuItems
-        delegate: StatusNavigationListItem {
-            id: settingsMenuDelegate
-            objectName:  itemId + "-SettingsMenuItem"
-            width: root.width
-            itemId: model.subsection
-            title: model.text
-            asset.name: model.icon
-            selected: root.settingsSubsection === model.subsection
-            onClicked: root.menuItemClicked(model)
-        }
-    }
-
-    StatusListSectionHeadline {
-        text: qsTr("About & Help")
-        width: root.width
-    }
-
-    Repeater {
-        id: extraMenuItems
-        delegate: StatusNavigationListItem {
-            objectName:  itemId + "-ExtraMenuItem"
-            width: root.width
-            itemId: model.subsection
-            title: model.text
-            asset.name: model.icon
-            selected: root.settingsSubsection === model.subsection
-            onClicked: root.menuItemClicked(model)
-        }
-    }
-}

ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml

@@ -1,11 +1,11 @@
-import QtQuick 2.13
-import utils 1.0
+import QtQuick 2.15
+
+import StatusQ.Core.Utils 0.1
 
 import AppLayouts.Chat.stores 1.0
 import AppLayouts.Communities.stores 1.0
 import AppLayouts.Profile.helpers 1.0
-
-import StatusQ.Core.Utils 0.1
+import utils 1.0
 
 import SortFilterProxyModel 0.2
 
@@ -88,80 +88,6 @@ QtObject {
     }
     property var communitiesProfileModule: profileSectionModuleInst.communitiesModule
 
-    property ListModel mainMenuItems: ListModel {
-        Component.onCompleted: {
-            append({subsection: Constants.settingsSubsection.backUpSeed,
-                       text: qsTr("Back up seed phrase"),
-                       icon: "seed-phrase"})
-            append({subsection: Constants.settingsSubsection.profile,
-                       text: qsTr("Profile"),
-                       icon: "profile"})
-            append({subsection: Constants.settingsSubsection.password,
-                       text: qsTr("Password"),
-                       icon: "password"})
-            append({subsection: Constants.settingsSubsection.keycard,
-                       text: qsTr("Keycard"),
-                       icon: "keycard"})
-            append({subsection: Constants.settingsSubsection.ensUsernames,
-                       text: qsTr("ENS usernames"),
-                       icon: "username",
-                       isExperimental: true,
-                       experimentalTooltip: qsTr("This section is going through a redesign.")
-                   })
-            append({subsection: Constants.settingsSubsection.syncingSettings,
-                       text: qsTr("Syncing"),
-                       icon: "rotate",
-                       isExperimental: true,
-                       experimentalTooltip: qsTr("Connection problems can happen.<br>If they do, please use the Enter a Seed Phrase feature instead.")
-                   })
-        }
-    }
-
-    property ListModel appsMenuItems: ListModel {
-        Component.onCompleted: {
-            append({subsection: Constants.settingsSubsection.messaging,
-                       text: qsTr("Messaging"),
-                       icon: "chat"})
-            append({subsection: Constants.settingsSubsection.wallet,
-                       text: qsTr("Wallet"),
-                       icon: "wallet"})
-            append({subsection: Constants.settingsSubsection.communitiesSettings,
-                       text: qsTr("Communities"),
-                       icon: "communities"})
-        }
-    }
-
-    property ListModel settingsMenuItems: ListModel {
-        Component.onCompleted: {
-            append({subsection: Constants.settingsSubsection.privacyAndSecurity,
-                       text: qsTr("Privacy and security"),
-                       icon: "security"})
-            append({subsection: Constants.settingsSubsection.appearance,
-                       text: qsTr("Appearance"),
-                       icon: "appearance"})
-            append({subsection: Constants.settingsSubsection.notifications,
-                       text: qsTr("Notifications & Sounds"),
-                       icon: "notification"})
-            append({subsection: Constants.settingsSubsection.language,
-                       text: qsTr("Language & Currency"),
-                       icon: "language"})
-            append({subsection: Constants.settingsSubsection.advanced,
-                       text: qsTr("Advanced"),
-                       icon: "settings"})
-        }
-    }
-
-    property ListModel extraMenuItems: ListModel {
-        Component.onCompleted: {
-            append({subsection: Constants.settingsSubsection.about,
-                       text: qsTr("About"),
-                       icon: "info"})
-            append({subsection: Constants.settingsSubsection.signout,
-                       text: qsTr("Sign out & Quit"),
-                       icon: "logout"})
-        }
-    }
-
     readonly property alias ownShowcaseCommunitiesModel: ownShowcaseModels.adaptedCommunitiesSourceModel
     readonly property alias ownShowcaseAccountsModel: ownShowcaseModels.adaptedAccountsSourceModel
     readonly property alias ownShowcaseCollectiblesModel: ownShowcaseModels.adaptedCollectiblesSourceModel
@@ -224,35 +150,6 @@ QtObject {
         aboutModuleInst.checkForUpdates()
     }
 
-    function getNameForSubsection(subsection) {
-        let i = 0;
-        for (; i < mainMenuItems.count; i++) {
-            let elem = mainMenuItems.get(i)
-            if(elem.subsection === subsection)
-                return elem.text
-        }
-
-        for (i=0; i < appsMenuItems.count; i++) {
-            let elem = appsMenuItems.get(i)
-            if(elem.subsection === subsection)
-                return elem.text
-        }
-
-        for (i=0; i < settingsMenuItems.count; i++) {
-            let elem = settingsMenuItems.get(i)
-            if(elem.subsection === subsection)
-                return elem.text
-        }
-
-        for (i=0; i < extraMenuItems.count; i++) {
-            let elem = extraMenuItems.get(i)
-            if(elem.subsection === subsection)
-                return elem.text
-        }
-
-        return ""
-    }
-
     function addressWasShown(address) {
         return root.mainModuleInst.addressWasShown(address)
     }

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

@@ -1,25 +1,21 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.15
 
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 import utils 1.0
-import shared 1.0
 import shared.popups 1.0
 
-import "../panels"
-import AppLayouts.Profile.stores 1.0
+import AppLayouts.Profile.controls 1.0
 
 Item {
     id: root
 
-    property ProfileSectionStore store
+    property alias model: settingsList.model
 
     signal menuItemClicked(var event)
 
-    property alias settingsSubsection: profileMenu.settingsSubsection
+    property alias settingsSubsection: settingsList.currenctSubsection
 
     StatusNavigationPanelHeadline {
         id: title
@@ -30,49 +26,38 @@ Item {
         anchors.leftMargin: Theme.bigPadding
     }
 
-    StatusScrollView {
-        id: scrollView
-        contentWidth: availableWidth
-        contentHeight: profileMenu.height + Theme.bigPadding
+    SettingsList {
+        id: settingsList
+
         anchors.right: parent.right
         anchors.left: parent.left
-        leftPadding: Theme.halfPadding
         anchors.top: title.bottom
-        anchors.topMargin: Theme.halfPadding
         anchors.bottom: parent.bottom
 
-        MenuPanel {
-            id: profileMenu
-            width: scrollView.availableWidth
-            privacyStore: store.privacyStore
-            contactsStore: store.contactsStore
-            devicesStore: store.devicesStore
-            mainMenuItems: store.mainMenuItems
-            settingsMenuItems: store.settingsMenuItems
-            extraMenuItems: store.extraMenuItems
-            appsMenuItems: store.appsMenuItems
-            walletMenuItemEnabled: store.walletMenuItemEnabled
+        anchors.topMargin: Theme.bigPadding
+        anchors.bottomMargin: Theme.padding
 
-            objectName: "leftTabViewProfileMenu"
+        leftMargin: Theme.halfPadding
+        rightMargin: Theme.padding
+        bottomMargin: Theme.bigPadding
 
-            onMenuItemClicked: {
-                if (menu_item.subsection === Constants.settingsSubsection.backUpSeed) {
-                    Global.openBackUpSeedPopup();
-                    return;
+        onClicked: {
+            if (subsection === Constants.settingsSubsection.backUpSeed) {
+                Global.openBackUpSeedPopup()
+                return
             }
 
-                let event = { accepted: false, item: menu_item.subsection };
+            const event = { accepted: false, item: subsection };
 
-                root.menuItemClicked(event);
+            root.menuItemClicked(event)
 
             if (event.accepted)
-                    return;
+                return
 
-                if (menu_item.subsection === Constants.settingsSubsection.signout)
+            if (subsection === Constants.settingsSubsection.signout)
                 return confirmDialog.open()
 
-                profileMenu.settingsSubsection = menu_item.subsection
-            }
+            root.settingsSubsection = subsection
         }
     }
 
@@ -82,8 +67,6 @@ Item {
         headerSettings.title: qsTr("Sign out")
         confirmationText: qsTr("Make sure you have your account password and seed phrase stored. Without them you can lock yourself out of your account and lose funds.")
         confirmButtonLabel: qsTr("Sign out & Quit")
-        onConfirmButtonClicked: {
-            Qt.quit()
-        }
+        onConfirmButtonClicked: Qt.quit()
     }
 }