refactor: Modularize header components

client/resources.qrc

@@ -144,6 +144,9 @@
         <file>ui/qml/Controls2/FlickableType.qml</file>
         <file>ui/qml/Controls2/Header2Type.qml</file>
         <file>ui/qml/Controls2/HeaderType.qml</file>
+        <file>ui/qml/Controls2/BaseHeaderType.qml</file>
+        <file>ui/qml/Controls2/HeaderTypeWithButton.qml</file>
+        <file>ui/qml/Controls2/HeaderTypeWithSwitcher.qml</file>
         <file>ui/qml/Controls2/HorizontalRadioButton.qml</file>
         <file>ui/qml/Controls2/ImageButtonType.qml</file>
         <file>ui/qml/Controls2/LabelWithButtonType.qml</file>

client/ui/qml/Controls2/BaseHeaderType.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+
+import Style 1.0
+
+import "TextTypes"
+
+Item {
+    id: root
+
+    property string headerText
+    property int headerTextMaximumLineCount: 2
+    property int headerTextElide: Qt.ElideRight
+    property string descriptionText
+    property alias headerRow: headerRow
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    ColumnLayout {
+        id: content
+        anchors.fill: parent
+
+        RowLayout {
+            id: headerRow
+            
+            Header1TextType {
+                id: header
+                Layout.fillWidth: true
+                text: root.headerText
+                maximumLineCount: root.headerTextMaximumLineCount
+                elide: root.headerTextElide
+            }
+        }
+
+        ParagraphTextType {
+            id: description
+            Layout.topMargin: 16
+            Layout.fillWidth: true
+            text: root.descriptionText
+            color: AmneziaStyle.color.mutedGray
+            visible: root.descriptionText !== ""
+        }
+    }
+} 

client/ui/qml/Controls2/HeaderType.qml

@@ -1,101 +1,4 @@
 import QtQuick
-import QtQuick.Layouts
 
-import Style 1.0
+// @deprecated Use BaseHeaderType, HeaderTypeWithButton or HeaderTypeWithSwitcher instead
-
+HeaderTypeWithButton {}
-import "TextTypes"
-
-Item {
-    id: root
-
-    property string actionButtonImage
-    property var actionButtonFunction
-    property var switcherFunction
-    property bool showSwitcher: false
-
-    property alias actionButton: headerActionButton
-    property alias switcher: headerSwitcher
-
-    property string headerText
-    property int headerTextMaximumLineCount: 2
-    property int headerTextElide: Qt.ElideRight
-
-    property string descriptionText
-
-    implicitWidth: content.implicitWidth
-    implicitHeight: content.implicitHeight
-
-    ColumnLayout {
-        id: content
-        anchors.fill: parent
-
-        RowLayout {
-            Header1TextType {
-                id: header
-
-                Layout.fillWidth: true
-
-                text: root.headerText
-                maximumLineCount: root.headerTextMaximumLineCount
-                elide: root.headerTextElide
-            }
-
-            ImageButtonType {
-                id: headerActionButton
-
-                implicitWidth: 40
-                implicitHeight: 40
-
-                Layout.alignment: Qt.AlignRight
-
-                image: root.actionButtonImage
-                imageColor: AmneziaStyle.color.paleGray
-
-                visible: image ? true : false
-
-                onClicked: {
-                    if (actionButtonFunction && typeof actionButtonFunction === "function") {
-                        actionButtonFunction()
-                    }
-                }
-            }
-
-            SwitcherType {
-                id: headerSwitcher
-                Layout.alignment: Qt.AlignRight
-                visible: root.showSwitcher
-
-                onToggled: {
-                    if (switcherFunction && typeof switcherFunction === "function") {
-                        switcherFunction(checked)
-                    }
-                }
-            }
-        }
-
-        ParagraphTextType {
-            id: description
-
-            Layout.topMargin: 16
-            Layout.fillWidth: true
-
-            text: root.descriptionText
-
-            color: AmneziaStyle.color.mutedGray
-
-            visible: root.descriptionText !== ""
-        }
-    }
-
-    Keys.onEnterPressed: {
-        if (actionButtonFunction && typeof actionButtonFunction === "function") {
-            actionButtonFunction()
-        }
-    }
-
-    Keys.onReturnPressed: {
-        if (actionButtonFunction && typeof actionButtonFunction === "function") {
-            actionButtonFunction()
-        }
-    }
-}

client/ui/qml/Controls2/HeaderTypeWithButton.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Layouts
+
+import Style 1.0
+
+BaseHeaderType {
+    id: root
+
+    property string actionButtonImage
+    property var actionButtonFunction
+    property alias actionButton: headerActionButton
+
+    Component.onCompleted: {
+        headerRow.children.push(headerActionButton)
+    }
+
+    ImageButtonType {
+        id: headerActionButton
+        implicitWidth: 40
+        implicitHeight: 40
+        Layout.alignment: Qt.AlignRight
+        image: root.actionButtonImage
+        imageColor: AmneziaStyle.color.paleGray
+        visible: image ? true : false
+
+        onClicked: {
+            if (actionButtonFunction && typeof actionButtonFunction === "function") {
+                actionButtonFunction()
+            }
+        }
+    }
+
+    Keys.onEnterPressed: {
+        if (actionButtonFunction && typeof actionButtonFunction === "function") {
+            actionButtonFunction()
+        }
+    }
+
+    Keys.onReturnPressed: {
+        if (actionButtonFunction && typeof actionButtonFunction === "function") {
+            actionButtonFunction()
+        }
+    }
+} 

client/ui/qml/Controls2/HeaderTypeWithSwitcher.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Layouts
+
+import Style 1.0
+
+BaseHeaderType {
+    id: root
+
+    property var switcherFunction
+    property bool showSwitcher: false
+    property alias switcher: headerSwitcher
+
+    Component.onCompleted: {
+        headerRow.children.push(headerSwitcher)
+    }
+
+    SwitcherType {
+        id: headerSwitcher
+        Layout.alignment: Qt.AlignRight
+        visible: root.showSwitcher
+
+        onToggled: {
+            if (switcherFunction && typeof switcherFunction === "function") {
+                switcherFunction(checked)
+            }
+        }
+    }
+} 

client/ui/qml/Pages2/PageSettingsKillSwitch.qml

@@ -32,7 +32,7 @@ PageType {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            HeaderType {
+            HeaderTypeWithSwitcher {
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16