feat: add "sharding" section to Community Settings

Needed for https://github.com/status-im/status-desktop/issues/12197

storybook/pages/CommunityInfoEditor.qml

@@ -16,7 +16,9 @@ ColumnLayout {
     property color color: "orchid"
     property url image: Style.png("tokens/UNI")
     property bool colorVisible: false
-    property url banner: Style.png("settings/communities@2x")
+    property url banner: ctrlCommunityBanner.checked ? Style.png("settings/communities@2x") : ""
+    readonly property bool shardingEnabled: ctrlShardingEnabled.checked
+    readonly property int shardIndex: ctrlShardIndex.value
 
     spacing: 24
 
@@ -133,11 +135,26 @@ ColumnLayout {
         RadioButton {
             checked: true
             text: "No banner"
-            onCheckedChanged: if(checked) root.banner = ""
         }
         RadioButton {
+            id: ctrlCommunityBanner
             text: "Communities"
-            onCheckedChanged: if(checked) root.banner = Style.png("settings/communities@2x")
+        }
+    }
+    RowLayout {
+        Layout.fillWidth: true
+        CheckBox {
+            id: ctrlShardingEnabled
+            text: "Sharding enabled"
+            checkable: true
+            checked: false
+        }
+        SpinBox {
+            id: ctrlShardIndex
+            visible: ctrlShardingEnabled.checked
+            from: -1
+            to: 1023
+            value: -1 // -1 == disabled
         }
     }
 }

storybook/pages/EditSettingsPanelPage.qml

@@ -18,13 +18,15 @@ SplitView {
         logoImageData: communityEditor.image
         description: communityEditor.description
         bannerImageData: communityEditor.banner
+        communityShardingEnabled: communityEditor.shardingEnabled
+        communityShardIndex: communityEditor.shardIndex
     }
 
     ScrollView {
          SplitView.minimumWidth: 300
          SplitView.preferredWidth: 300
 
-         CommunityInfoEditor{
+         CommunityInfoEditor {
              id: communityEditor
              anchors.fill: parent
              colorVisible: true

storybook/pages/OverviewSettingsPanelPage.qml

@@ -16,17 +16,21 @@ SplitView {
         description: communityEditor.description
         logoImageData: communityEditor.image
         color: communityEditor.color
+        bannerImageData: communityEditor.banner
 
         editable: communityEditor.isCommunityEditable
-        owned: communityEditor.amISectionAdmin
+        isOwner: communityEditor.amISectionAdmin
         communitySettingsDisabled: !editable
+
+        communityShardingEnabled: communityEditor.shardingEnabled
+        communityShardIndex: communityEditor.shardIndex
     }
 
     Pane {
         SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
 
-        CommunityInfoEditor{
+        CommunityInfoEditor {
             id: communityEditor
             anchors.fill: parent
         }

ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml

@@ -2,10 +2,14 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1
 
 import AppLayouts.Communities.controls 1.0
 
+import utils 1.0
+
 StatusScrollView {
     id: root
     objectName: "communityEditPanelScrollView"
@@ -18,6 +22,8 @@ StatusScrollView {
     property alias tags: baseLayout.tags
     property alias selectedTags: baseLayout.selectedTags
     property alias options: baseLayout.options
+    property bool communityShardingEnabled
+    property int communityShardIndex: -1
 
     property alias logoImageData: baseLayout.logoImageData
     property alias logoImagePath: baseLayout.logoImagePath
@@ -35,10 +41,11 @@ StatusScrollView {
                                                        (outroMessageTextInput.input.dirty && !outroMessageTextInput.valid))
 
     padding: 0
+
     ColumnLayout {
         id: mainLayout
         width: baseLayout.width
-        spacing: 16
+        spacing: Style.current.padding
         EditCommunitySettingsForm {
             id: baseLayout
             Layout.fillHeight: true
@@ -62,6 +69,32 @@ StatusScrollView {
             Layout.fillWidth: true
         }
 
+        StatusModalDivider {
+            Layout.fillWidth: true
+            Layout.topMargin: -baseLayout.spacing
+            Layout.bottomMargin: 2
+            visible: root.communityShardingEnabled
+        }
+
+        RowLayout {
+            spacing: Style.current.halfPadding
+            visible: root.communityShardingEnabled
+            StatusBaseText {
+                Layout.fillWidth: true
+                text: qsTr("Community sharding")
+            }
+            Item { Layout.fillWidth: true }
+            StatusBaseText {
+                color: Theme.palette.baseColor1
+                visible: root.communityShardIndex !== -1
+                text: qsTr("Active: on shard #%1").arg(root.communityShardIndex)
+            }
+            StatusButton {
+                size: StatusBaseButton.Size.Small
+                text: root.communityShardIndex === -1 ? qsTr("Make %1 a sharded community").arg(root.name) : qsTr("Manage")
+            }
+        }
+
         Item {
             // settingsDirtyToastMessage placeholder
             visible: root.bottomReservedSpaceActive

ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml

@@ -41,7 +41,6 @@ StackLayout {
 
     property bool archiveSupporVisible: true
     property bool editable: false
-    property bool owned: false
     property bool isControlNode: false
     property int loginType: Constants.LoginType.Password
     property bool communitySettingsDisabled
@@ -51,6 +50,9 @@ StackLayout {
 
     property string overviewChartData: ""
 
+    property bool communityShardingEnabled
+    property int communityShardIndex: -1
+
     function navigateBack() {
         if (editSettingsPanelLoader.item.dirty)
             settingsDirtyToastMessage.notifyDirty()
@@ -278,6 +280,9 @@ StackLayout {
                     pinMessagesEnabled: root.pinMessagesEnabled
                 }
 
+                communityShardingEnabled: root.communityShardingEnabled
+                communityShardIndex: root.communityShardIndex
+
                 bottomReservedSpace:
                     Qt.size(settingsDirtyToastMessage.implicitWidth,
                             settingsDirtyToastMessage.implicitHeight +

ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml

@@ -176,11 +176,12 @@ StatusSectionLayout {
             requestToJoinEnabled: root.community.access === Constants.communityChatOnRequestAccess
             pinMessagesEnabled: root.community.pinMessageAllMembersEnabled
             editable: true
-            owned: root.community.memberRole === Constants.memberRole.owner
             loginType: root.rootStore.loginType
             isControlNode: root.isControlNode
             communitySettingsDisabled: root.communitySettingsDisabled
             overviewChartData: rootStore.overviewChartData
+            communityShardingEnabled: localAppSettings.wakuV2ShardedCommunitiesEnabled ?? false
+            communityShardIndex: root.community.shardIndex ?? -1 // TODO community sharding backend
 
             sendModalPopup: root.sendModalPopup
             tokensModel: root.community.communityTokens