controlcenter: added VPN settings & management (#1095)

* feat: add VPN settings and management UI

- Add VPN configuration UI
- Update VPN toggle visibility to check enabled providers

* controlcenter: VPN modal transitions & cleanup

* controlcenter: VPN modal styling

* controlcenter: VPN modal scrim

* controlcenter: VPN modal padding

* controlcenter: VPN modal enter & exit behaviour

1 files changed, 74 insertions, 0 deletions

diff --git a/modules/controlcenter/network/NetworkSettings.qml b/modules/controlcenter/network/NetworkSettings.qml
index 22e07cb..04746af 100644
--- a/modules/controlcenter/network/NetworkSettings.qml
+++ b/modules/controlcenter/network/NetworkSettings.qml
@@ -4,10 +4,12 @@ import ".."
 import "../components"
 import qs.components
 import qs.components.controls
+import qs.components.containers
 import qs.components.effects
 import qs.services
 import qs.config
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
 ColumnLayout {
@@ -61,6 +63,45 @@ ColumnLayout {
 
     SectionHeader {
         Layout.topMargin: Appearance.spacing.large
+        title: qsTr("VPN")
+        description: qsTr("VPN provider settings")
+        visible: Config.utilities.vpn.enabled || Config.utilities.vpn.provider.length > 0
+    }
+
+    SectionContainer {
+        visible: Config.utilities.vpn.enabled || Config.utilities.vpn.provider.length > 0
+
+        ToggleRow {
+            label: qsTr("VPN enabled")
+            checked: Config.utilities.vpn.enabled
+            toggle.onToggled: {
+                Config.utilities.vpn.enabled = checked;
+                Config.save();
+            }
+        }
+
+        PropertyRow {
+            showTopMargin: true
+            label: qsTr("Providers")
+            value: qsTr("%1").arg(Config.utilities.vpn.provider.length)
+        }
+
+        TextButton {
+            Layout.fillWidth: true
+            Layout.topMargin: Appearance.spacing.normal
+            Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
+            text: qsTr("⚙ Manage VPN Providers")
+            inactiveColour: Colours.palette.m3secondaryContainer
+            inactiveOnColour: Colours.palette.m3onSecondaryContainer
+
+            onClicked: {
+                vpnSettingsDialog.open();
+            }
+        }
+    }
+
+    SectionHeader {
+        Layout.topMargin: Appearance.spacing.large
         title: qsTr("Current connection")
         description: qsTr("Active network connection information")
     }
@@ -94,5 +135,38 @@ ColumnLayout {
             value: Nmcli.active ? qsTr("%1 MHz").arg(Nmcli.active.frequency) : qsTr("N/A")
         }
     }
+
+    Popup {
+        id: vpnSettingsDialog
+        
+        parent: Overlay.overlay
+        anchors.centerIn: parent
+        width: Math.min(600, parent.width - Appearance.padding.large * 2)
+        height: Math.min(700, parent.height - Appearance.padding.large * 2)
+        
+        modal: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+        
+        background: StyledRect {
+            color: Colours.palette.m3surface
+            radius: Appearance.rounding.large
+        }
+        
+        StyledFlickable {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large * 1.5
+            flickableDirection: Flickable.VerticalFlick
+            contentHeight: vpnSettingsContent.height
+            clip: true
+            
+            VpnSettings {
+                id: vpnSettingsContent
+                
+                anchors.left: parent.left
+                anchors.right: parent.right
+                session: root.session
+            }
+        }
+    }
 }