From 06d549922f04cf0326190af824ac09c091d9aeb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Wed, 8 Jan 2025 18:53:39 +0100
Subject: [PATCH] fix(SettingsLeftTabView): fixup alignment of the Beta tag

- use a dedicated StatusListItem slot for the beta tag icon
- rename (Settings/)LeftTabView.qml to SettingsLeftTabView to avoid
naming confusion with the same component from wallet
- add the component to SB with options to explore

Fixes: #16906
---
 storybook/pages/SettingsLeftTabViewPage.qml   | 79 +++++++++++++++++++
 ui/app/AppLayouts/Profile/ProfileLayout.qml   |  2 +-
 .../Profile/controls/SettingsList.qml         | 15 +---
 ...eftTabView.qml => SettingsLeftTabView.qml} |  0
 ui/app/AppLayouts/Profile/views/qmldir        |  1 +
 5 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 storybook/pages/SettingsLeftTabViewPage.qml
 rename ui/app/AppLayouts/Profile/views/{LeftTabView.qml => SettingsLeftTabView.qml} (100%)

diff --git a/storybook/pages/SettingsLeftTabViewPage.qml b/storybook/pages/SettingsLeftTabViewPage.qml
new file mode 100644
index 00000000000..149d2faae1d
--- /dev/null
+++ b/storybook/pages/SettingsLeftTabViewPage.qml
@@ -0,0 +1,79 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import AppLayouts.Profile.views 1.0
+import AppLayouts.Profile.helpers 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    SettingsLeftTabView {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        model: SettingsEntriesModel {
+            showWalletEntries: ctrlShowWalletEntries.checked
+            showBackUpSeed: ctrlShowBackUpSeed.checked
+            syncingBadgeCount: ctrlSyncingBadgeCount.value
+            messagingBadgeCount: ctrlMessagingBadgeCount.value
+        }
+        onMenuItemClicked: (event) => logs.logEvent("onMenuItemClicked", ["event"], arguments)
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 100
+        SplitView.fillWidth: true
+
+        logsView.logText: logs.logText
+
+        RowLayout {
+            spacing: 20
+            Layout.fillHeight: true
+
+            RowLayout {
+                Label { text: "Syncing badge count:" }
+                SpinBox {
+                    id: ctrlSyncingBadgeCount
+                    value: 1
+                    from: 0
+                    to: 999
+                }
+            }
+            RowLayout {
+                Label { text: "Messaging badge count:" }
+                SpinBox {
+                    id: ctrlMessagingBadgeCount
+                    value: 2
+                    from: 0
+                    to: 999
+                }
+            }
+            Switch {
+                id: ctrlShowBackUpSeed
+                checked: true
+                text: "Show backup seed"
+            }
+            Switch {
+                id: ctrlShowWalletEntries
+                checked: true
+                text: "Show wallet entries"
+            }
+        }
+    }
+}
+
+// category: Views
+// status: good
diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml
index e75ca513bee..88099a2b1bf 100644
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@@ -125,7 +125,7 @@ StatusSectionLayout {
         visible: profileContainer.currentIndex === Constants.settingsSubsection.wallet && !!root.store.walletStore.selectedAccount
     }
 
-    leftPanel: LeftTabView {
+    leftPanel: SettingsLeftTabView {
         anchors.fill: parent
 
         model: settingsEntriesModel
diff --git a/ui/app/AppLayouts/Profile/controls/SettingsList.qml b/ui/app/AppLayouts/Profile/controls/SettingsList.qml
index f978f325428..3573df65d61 100644
--- a/ui/app/AppLayouts/Profile/controls/SettingsList.qml
+++ b/ui/app/AppLayouts/Profile/controls/SettingsList.qml
@@ -40,20 +40,13 @@ StatusListView {
         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
+        statusListItemTitleIcons.sourceComponent: model.isExperimental ? betaTagComponent : null
 
-            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 {
+        Component {
+            id: betaTagComponent
+            StatusBetaTag {
                 tooltipText: model.experimentalTooltip
                 cursorShape: Qt.PointingHandCursor
             }
diff --git a/ui/app/AppLayouts/Profile/views/LeftTabView.qml b/ui/app/AppLayouts/Profile/views/SettingsLeftTabView.qml
similarity index 100%
rename from ui/app/AppLayouts/Profile/views/LeftTabView.qml
rename to ui/app/AppLayouts/Profile/views/SettingsLeftTabView.qml
diff --git a/ui/app/AppLayouts/Profile/views/qmldir b/ui/app/AppLayouts/Profile/views/qmldir
index ae9757614bc..66556b15747 100644
--- a/ui/app/AppLayouts/Profile/views/qmldir
+++ b/ui/app/AppLayouts/Profile/views/qmldir
@@ -7,3 +7,4 @@ LanguageView 1.0 LanguageView.qml
 NotificationsView 1.0 NotificationsView.qml
 PrivacyAndSecurityView 1.0 PrivacyAndSecurityView.qml
 SyncingView 1.0 SyncingView.qml
+SettingsLeftTabView 1.0 SettingsLeftTabView.qml