controlcenter: remove qt5compat dep

2 files changed, 166 insertions, 97 deletions

diff --git a/modules/controlcenter/network/VpnDetails.qml b/modules/controlcenter/network/VpnDetails.qml
index 76a9b17..1c71cd7 100644
--- a/modules/controlcenter/network/VpnDetails.qml
+++ b/modules/controlcenter/network/VpnDetails.qml
@@ -12,7 +12,6 @@ import qs.utils
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 DeviceDetails {
     id: root
@@ -20,11 +19,12 @@ DeviceDetails {
     required property Session session
     readonly property var vpnProvider: root.session.vpn.active
     readonly property bool providerEnabled: {
-        if (!vpnProvider || vpnProvider.index === undefined) return false;
+        if (!vpnProvider || vpnProvider.index === undefined)
+            return false;
         const provider = Config.utilities.vpn.provider[vpnProvider.index];
         return provider && typeof provider === "object" && provider.enabled === true;
     }
-    
+
     device: vpnProvider
 
     headerComponent: Component {
@@ -49,10 +49,11 @@ DeviceDetails {
                         label: qsTr("Enable this provider")
                         checked: root.providerEnabled
                         toggle.onToggled: {
-                            if (!root.vpnProvider) return;
+                            if (!root.vpnProvider)
+                                return;
                             const providers = [];
                             const index = root.vpnProvider.index;
-                            
+
                             // Copy providers and update enabled state
                             for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                                 const p = Config.utilities.vpn.provider[i];
@@ -62,7 +63,7 @@ DeviceDetails {
                                         displayName: p.displayName,
                                         interface: p.interface
                                     };
-                                    
+
                                     if (checked) {
                                         // Enable this one, disable others
                                         newProvider.enabled = (i === index);
@@ -70,13 +71,13 @@ DeviceDetails {
                                         // Just disable this one
                                         newProvider.enabled = (i === index) ? false : (p.enabled !== false);
                                     }
-                                    
+
                                     providers.push(newProvider);
                                 } else {
                                     providers.push(p);
                                 }
                             }
-                            
+
                             Config.utilities.vpn.provider = providers;
                             Config.save();
                         }
@@ -86,7 +87,7 @@ DeviceDetails {
                         Layout.fillWidth: true
                         Layout.topMargin: Appearance.spacing.normal
                         spacing: Appearance.spacing.normal
-                        
+
                         TextButton {
                             Layout.fillWidth: true
                             Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2
@@ -171,9 +172,12 @@ DeviceDetails {
                         showTopMargin: true
                         label: qsTr("Status")
                         value: {
-                            if (!root.providerEnabled) return qsTr("Disabled");
-                            if (VPN.connecting) return qsTr("Connecting...");
-                            if (VPN.connected) return qsTr("Connected");
+                            if (!root.providerEnabled)
+                                return qsTr("Disabled");
+                            if (VPN.connecting)
+                                return qsTr("Connecting...");
+                            if (VPN.connected)
+                                return qsTr("Connected");
                             return qsTr("Enabled (Not connected)");
                         }
                     }
@@ -191,62 +195,80 @@ DeviceDetails {
     // Edit VPN Dialog
     Popup {
         id: editVpnDialog
-        
+
         property int editIndex: -1
         property string providerName: ""
         property string displayName: ""
         property string interfaceName: ""
-        
+
         parent: Overlay.overlay
         anchors.centerIn: parent
         width: Math.min(400, parent.width - Appearance.padding.large * 2)
         padding: Appearance.padding.large * 1.5
-        
+
         modal: true
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-        
+
         opacity: 0
         scale: 0.7
-        
+
         enter: Transition {
-            ParallelAnimation {
-                NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial }
-                NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial }
+            Anim {
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+            Anim {
+                property: "scale"
+                from: 0.7
+                to: 1
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
             }
         }
 
         exit: Transition {
-            ParallelAnimation {
-                NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial }
-                NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.expressiveFastSpatial; easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial }
+            Anim {
+                property: "opacity"
+                from: 1
+                to: 0
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+            Anim {
+                property: "scale"
+                from: 1
+                to: 0.7
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
             }
         }
-        
+
         function closeWithAnimation(): void {
             close();
         }
-        
+
         Overlay.modal: Rectangle {
             color: Qt.rgba(0, 0, 0, 0.4 * editVpnDialog.opacity)
         }
-        
-        
+
         background: StyledRect {
             color: Colours.palette.m3surfaceContainerHigh
             radius: Appearance.rounding.large
 
-            layer.enabled: true
-            layer.effect: DropShadow {
-                color: Qt.rgba(0, 0, 0, 0.3)
-                radius: 16
-                samples: 33
-                verticalOffset: 4
+            Elevation {
+                anchors.fill: parent
+                radius: parent.radius
+                level: 3
+                z: -1
             }
         }
-        
+
         contentItem: ColumnLayout {
             spacing: Appearance.spacing.normal
-            
+
             StyledText {
                 text: qsTr("Edit VPN Provider")
                 font.pointSize: Appearance.font.size.large
@@ -271,8 +293,12 @@ DeviceDetails {
                     border.width: 1
                     border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
 
-                    Behavior on color { CAnim {} }
-                    Behavior on border.color { CAnim {} }
+                    Behavior on color {
+                        CAnim {}
+                    }
+                    Behavior on border.color {
+                        CAnim {}
+                    }
 
                     StyledTextField {
                         id: displayNameField
@@ -303,8 +329,12 @@ DeviceDetails {
                     border.width: 1
                     border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
 
-                    Behavior on color { CAnim {} }
-                    Behavior on border.color { CAnim {} }
+                    Behavior on color {
+                        CAnim {}
+                    }
+                    Behavior on border.color {
+                        CAnim {}
+                    }
 
                     StyledTextField {
                         id: interfaceNameField
@@ -316,13 +346,12 @@ DeviceDetails {
                     }
                 }
             }
-            
-            Item { Layout.preferredHeight: Appearance.spacing.normal }
-            
+
             RowLayout {
+                Layout.topMargin: Appearance.spacing.normal
                 Layout.fillWidth: true
                 spacing: Appearance.spacing.normal
-                
+
                 TextButton {
                     Layout.fillWidth: true
                     text: qsTr("Cancel")
@@ -330,19 +359,19 @@ DeviceDetails {
                     inactiveOnColour: Colours.palette.m3onSurface
                     onClicked: editVpnDialog.closeWithAnimation()
                 }
-                
+
                 TextButton {
                     Layout.fillWidth: true
                     text: qsTr("Save")
                     enabled: editVpnDialog.interfaceName.length > 0
                     inactiveColour: Colours.palette.m3primaryContainer
                     inactiveOnColour: Colours.palette.m3onPrimaryContainer
-                    
+
                     onClicked: {
                         const providers = [];
                         const oldProvider = Config.utilities.vpn.provider[editVpnDialog.editIndex];
                         const wasEnabled = typeof oldProvider === "object" ? (oldProvider.enabled !== false) : true;
-                        
+
                         for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                             if (i === editVpnDialog.editIndex) {
                                 providers.push({
@@ -355,7 +384,7 @@ DeviceDetails {
                                 providers.push(Config.utilities.vpn.provider[i]);
                             }
                         }
-                        
+
                         Config.utilities.vpn.provider = providers;
                         Config.save();
                         editVpnDialog.closeWithAnimation();
diff --git a/modules/controlcenter/network/VpnList.qml b/modules/controlcenter/network/VpnList.qml
index 665f8cc..81f4a45 100644
--- a/modules/controlcenter/network/VpnList.qml
+++ b/modules/controlcenter/network/VpnList.qml
@@ -3,16 +3,13 @@ pragma ComponentBehavior: Bound
 import ".."
 import qs.components
 import qs.components.controls
-import qs.components.containers
 import qs.components.effects
 import qs.services
 import qs.config
-import qs.utils
 import Quickshell
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 ColumnLayout {
     id: root
@@ -29,7 +26,7 @@ ColumnLayout {
             if (!VPN.connected && root.pendingSwitchIndex >= 0) {
                 const targetIndex = root.pendingSwitchIndex;
                 root.pendingSwitchIndex = -1;
-                
+
                 const providers = [];
                 for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                     const p = Config.utilities.vpn.provider[i];
@@ -47,8 +44,8 @@ ColumnLayout {
                 }
                 Config.utilities.vpn.provider = providers;
                 Config.save();
-                
-                Qt.callLater(function() {
+
+                Qt.callLater(function () {
                     VPN.toggle();
                 });
             }
@@ -82,7 +79,7 @@ ColumnLayout {
                 const displayName = isObject ? (provider.displayName || name) : name;
                 const iface = isObject ? (provider.interface || "") : "";
                 const enabled = isObject ? (provider.enabled === true) : false;
-                
+
                 return {
                     index: index,
                     name: name,
@@ -160,9 +157,12 @@ ColumnLayout {
                             StyledText {
                                 Layout.fillWidth: true
                                 text: {
-                                    if (modelData.enabled && VPN.connected) return qsTr("Connected");
-                                    if (modelData.enabled && VPN.connecting) return qsTr("Connecting...");
-                                    if (modelData.enabled) return qsTr("Enabled");
+                                    if (modelData.enabled && VPN.connected)
+                                        return qsTr("Connected");
+                                    if (modelData.enabled && VPN.connecting)
+                                        return qsTr("Connecting...");
+                                    if (modelData.enabled)
+                                        return qsTr("Enabled");
                                     return qsTr("Disabled");
                                 }
                                 color: modelData.enabled ? (VPN.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface) : Colours.palette.m3outline
@@ -210,7 +210,7 @@ ColumnLayout {
                                         Config.utilities.vpn.provider = providers;
                                         Config.save();
 
-                                        Qt.callLater(function() {
+                                        Qt.callLater(function () {
                                             VPN.toggle();
                                         });
                                     }
@@ -261,7 +261,7 @@ ColumnLayout {
             }
         }
     }
-    
+
     Popup {
         id: vpnDialog
 
@@ -279,21 +279,45 @@ ColumnLayout {
 
         modal: true
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-        
+
         opacity: 0
         scale: 0.7
 
         enter: Transition {
             ParallelAnimation {
-                NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized }
-                NumberAnimation { property: "scale"; from: 0.7; to: 1; duration: Appearance.anim.durations.normal; easing.bezierCurve: Appearance.anim.curves.emphasized }
+                Anim {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                    duration: Appearance.anim.durations.normal
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
+                Anim {
+                    property: "scale"
+                    from: 0.7
+                    to: 1
+                    duration: Appearance.anim.durations.normal
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
             }
         }
 
         exit: Transition {
             ParallelAnimation {
-                NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized }
-                NumberAnimation { property: "scale"; from: 1; to: 0.7; duration: Appearance.anim.durations.small; easing.bezierCurve: Appearance.anim.curves.emphasized }
+                Anim {
+                    property: "opacity"
+                    from: 1
+                    to: 0
+                    duration: Appearance.anim.durations.small
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
+                Anim {
+                    property: "scale"
+                    from: 1
+                    to: 0.7
+                    duration: Appearance.anim.durations.small
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
             }
         }
 
@@ -346,7 +370,7 @@ ColumnLayout {
             id: transitionToForm
 
             ParallelAnimation {
-                NumberAnimation {
+                Anim {
                     target: selectionContent
                     property: "opacity"
                     to: 0
@@ -362,7 +386,7 @@ ColumnLayout {
             }
 
             ParallelAnimation {
-                NumberAnimation {
+                Anim {
                     target: formContent
                     property: "opacity"
                     to: 1
@@ -376,16 +400,15 @@ ColumnLayout {
             color: Colours.palette.m3surfaceContainerHigh
             radius: Appearance.rounding.large
 
-            layer.enabled: true
-            layer.effect: DropShadow {
-                color: Qt.rgba(0, 0, 0, 0.3)
-                radius: 16
-                samples: 33
-                verticalOffset: 4
+            Elevation {
+                anchors.fill: parent
+                radius: parent.radius
+                level: 3
+                z: -1
             }
 
             Behavior on implicitHeight {
-                NumberAnimation {
+                Anim {
                     duration: Appearance.anim.durations.normal
                     easing.bezierCurve: Appearance.anim.curves.emphasized
                 }
@@ -396,7 +419,7 @@ ColumnLayout {
             implicitHeight: vpnDialog.currentState === "selection" ? selectionContent.implicitHeight : formContent.implicitHeight
 
             Behavior on implicitHeight {
-                NumberAnimation {
+                Anim {
                     duration: Appearance.anim.durations.normal
                     easing.bezierCurve: Appearance.anim.curves.emphasized
                 }
@@ -404,19 +427,19 @@ ColumnLayout {
 
             ColumnLayout {
                 id: selectionContent
-                
+
                 anchors.fill: parent
                 spacing: Appearance.spacing.normal
                 visible: vpnDialog.currentState === "selection"
                 opacity: vpnDialog.currentState === "selection" ? 1 : 0
 
                 Behavior on opacity {
-                    NumberAnimation {
+                    Anim {
                         duration: Appearance.anim.durations.small
                         easing.bezierCurve: Appearance.anim.curves.emphasized
                     }
                 }
-                
+
                 StyledText {
                     text: qsTr("Add VPN Provider")
                     font.pointSize: Appearance.font.size.large
@@ -431,9 +454,8 @@ ColumnLayout {
                     font.pointSize: Appearance.font.size.small
                 }
 
-                Item { Layout.preferredHeight: Appearance.spacing.small }
-
                 TextButton {
+                    Layout.topMargin: Appearance.spacing.normal
                     Layout.fillWidth: true
                     text: qsTr("NetBird")
                     inactiveColour: Colours.tPalette.m3surfaceContainerHigh
@@ -443,13 +465,17 @@ ColumnLayout {
                         for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                             providers.push(Config.utilities.vpn.provider[i]);
                         }
-                        providers.push({ name: "netbird", displayName: "NetBird", interface: "wt0" });
+                        providers.push({
+                            name: "netbird",
+                            displayName: "NetBird",
+                            interface: "wt0"
+                        });
                         Config.utilities.vpn.provider = providers;
                         Config.save();
                         vpnDialog.closeWithAnimation();
                     }
                 }
-                
+
                 TextButton {
                     Layout.fillWidth: true
                     text: qsTr("Tailscale")
@@ -460,13 +486,17 @@ ColumnLayout {
                         for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                             providers.push(Config.utilities.vpn.provider[i]);
                         }
-                        providers.push({ name: "tailscale", displayName: "Tailscale", interface: "tailscale0" });
+                        providers.push({
+                            name: "tailscale",
+                            displayName: "Tailscale",
+                            interface: "tailscale0"
+                        });
                         Config.utilities.vpn.provider = providers;
                         Config.save();
                         vpnDialog.closeWithAnimation();
                     }
                 }
-                
+
                 TextButton {
                     Layout.fillWidth: true
                     text: qsTr("Cloudflare WARP")
@@ -477,13 +507,17 @@ ColumnLayout {
                         for (let i = 0; i < Config.utilities.vpn.provider.length; i++) {
                             providers.push(Config.utilities.vpn.provider[i]);
                         }
-                        providers.push({ name: "warp", displayName: "Cloudflare WARP", interface: "CloudflareWARP" });
+                        providers.push({
+                            name: "warp",
+                            displayName: "Cloudflare WARP",
+                            interface: "CloudflareWARP"
+                        });
                         Config.utilities.vpn.provider = providers;
                         Config.save();
                         vpnDialog.closeWithAnimation();
                     }
                 }
-                
+
                 TextButton {
                     Layout.fillWidth: true
                     text: qsTr("WireGuard (Custom)")
@@ -494,9 +528,8 @@ ColumnLayout {
                     }
                 }
 
-                Item { Layout.preferredHeight: Appearance.spacing.small }
-
                 TextButton {
+                    Layout.topMargin: Appearance.spacing.normal
                     Layout.fillWidth: true
                     text: qsTr("Cancel")
                     inactiveColour: Colours.palette.m3secondaryContainer
@@ -507,19 +540,19 @@ ColumnLayout {
 
             ColumnLayout {
                 id: formContent
-                
+
                 anchors.fill: parent
                 spacing: Appearance.spacing.normal
                 visible: vpnDialog.currentState === "form"
                 opacity: vpnDialog.currentState === "form" ? 1 : 0
 
                 Behavior on opacity {
-                    NumberAnimation {
+                    Anim {
                         duration: Appearance.anim.durations.small
                         easing.bezierCurve: Appearance.anim.curves.emphasized
                     }
                 }
-                
+
                 StyledText {
                     text: vpnDialog.editIndex >= 0 ? qsTr("Edit VPN Provider") : qsTr("Add %1 VPN").arg(vpnDialog.displayName)
                     font.pointSize: Appearance.font.size.large
@@ -544,8 +577,12 @@ ColumnLayout {
                         border.width: 1
                         border.color: displayNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
 
-                        Behavior on color { CAnim {} }
-                        Behavior on border.color { CAnim {} }
+                        Behavior on color {
+                            CAnim {}
+                        }
+                        Behavior on border.color {
+                            CAnim {}
+                        }
 
                         StyledTextField {
                             id: displayNameField
@@ -576,8 +613,12 @@ ColumnLayout {
                         border.width: 1
                         border.color: interfaceNameField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
 
-                        Behavior on color { CAnim {} }
-                        Behavior on border.color { CAnim {} }
+                        Behavior on color {
+                            CAnim {}
+                        }
+                        Behavior on border.color {
+                            CAnim {}
+                        }
 
                         StyledTextField {
                             id: interfaceNameField
@@ -590,9 +631,8 @@ ColumnLayout {
                     }
                 }
 
-                Item { Layout.preferredHeight: Appearance.spacing.normal }
-
                 RowLayout {
+                    Layout.topMargin: Appearance.spacing.normal
                     Layout.fillWidth: true
                     spacing: Appearance.spacing.normal
 
@@ -633,7 +673,7 @@ ColumnLayout {
                                 }
                                 providers.push(newProvider);
                             }
-                            
+
                             Config.utilities.vpn.provider = providers;
                             Config.save();
                             vpnDialog.closeWithAnimation();