replace FlickableType with ListViewType in PageSetupWizardViewConfig

client/ui/qml/Pages2/PageSetupWizardViewConfig.qml

@@ -23,6 +23,12 @@ PageType {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.topMargin: 20
+        
+        onActiveFocusChanged: {
+            if(backButton.enabled && backButton.activeFocus) {
+                listView.positionViewAtBeginning()
+            }
+        }
     }
 
     Connections {
@@ -46,27 +52,29 @@ PageType {
         }
     }
 
-    FlickableType {
-        id: fl
+    ListViewType {
+        id: listView
+
         anchors.top: backButton.bottom
         anchors.bottom: parent.bottom
-        contentHeight: content.implicitHeight + connectButton.implicitHeight
+        anchors.right: parent.right
+        anchors.left: parent.left
 
-        ColumnLayout {
-            id: content
-
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.leftMargin: 16
+        header: ColumnLayout {
+            width: listView.width
 
             BaseHeaderType {
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+                
                 headerText: qsTr("New connection")
             }
 
             RowLayout {
                 Layout.topMargin: 32
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
                 spacing: 8
 
                 visible: fileName.text !== ""
@@ -88,7 +96,9 @@ PageType {
             BasicButtonType {
                 id: showContentButton
                 Layout.topMargin: 16
-                Layout.leftMargin: -8
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
                 implicitHeight: 32
 
                 defaultColor: AmneziaStyle.color.transparent
@@ -99,8 +109,6 @@ PageType {
 
                 text: showContent ? qsTr("Collapse content") : qsTr("Show content")
 
-                parentFlickable: fl
-
                 clickedFunc: function() {
                     showContent = !showContent
                 }
@@ -108,16 +116,28 @@ PageType {
 
             CheckBoxType {
                 id: cloakingCheckBox
+                objectName: "cloakingCheckBox"
 
                 visible: ImportController.isNativeWireGuardConfig()
 
                 Layout.fillWidth: true
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
                 text: qsTr("Enable WireGuard obfuscation. It may be useful if WireGuard is blocked on your provider.")
             }
+        }
+
+        model: 1 // fake model to force the ListView to be created without a model
+
+        delegate: ColumnLayout { // TODO(CyAn84): add DelegateChooser after have migrated to 6.9
+            width: listView.width
 
             WarningType {
-                Layout.topMargin: 16
                 Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
 
                 textString: ImportController.getMaliciousWarningText()
                 textFormat: Qt.RichText
@@ -130,8 +150,10 @@ PageType {
             }
 
             WarningType {
-                Layout.topMargin: 16
                 Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
 
                 textString: qsTr("Use connection codes only from sources you trust. Codes from public sources may have been created to intercept your data.")
 
@@ -140,7 +162,10 @@ PageType {
 
             Rectangle {
                 Layout.fillWidth: true
+                Layout.topMargin: 16
                 Layout.bottomMargin: 48
+                Layout.rightMargin: 16
+                Layout.leftMargin: 16
 
                 implicitHeight: configContent.implicitHeight
 
@@ -161,34 +186,38 @@ PageType {
                 }
             }
         }
-    }
 
-    Rectangle {
-        anchors.fill: columnContent
-        anchors.bottomMargin: -24
-        color: AmneziaStyle.color.midnightBlack
-        opacity: 0.8
-    }
+        footer: ColumnLayout {
+            width: listView.width
 
-    ColumnLayout {
-        id: columnContent
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.leftMargin: 16
+            BasicButtonType {
+                id: connectButton
 
-        BasicButtonType {
-            id: connectButton
-            Layout.fillWidth: true
-            Layout.bottomMargin: 32
+                Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.bottomMargin: 32
+                Layout.rightMargin: 16
+                Layout.leftMargin: 16
 
-            text: qsTr("Connect")
-            clickedFunc: function() {
-                if (cloakingCheckBox.checked) {
-                    ImportController.processNativeWireGuardConfig()
+                text: qsTr("Connect")
+                clickedFunc: function() {
+                    const headerItem = listView.headerItem;
+                    if (!headerItem) {
+                        console.error("Header item not found in ListView")
+                        return
+                    }
+
+                    const cloakingCheckBoxItem = listView.findChildWithObjectName(headerItem.children, "cloakingCheckBox");
+                    if (!cloakingCheckBoxItem) {
+                        console.error("cloakingCheckBox not found")
+                        return
+                    }
+
+                    if (cloakingCheckBoxItem.checked) {
+                        ImportController.processNativeWireGuardConfig()
+                    }
+                    ImportController.importConfig()
                 }
-                ImportController.importConfig()
             }
         }
     }