controlcenter: remove qt5compat dep

1 files changed, 90 insertions, 50 deletions

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();