Add NetworkManager VPN integration: VpnService + Control Center detail; move to TopBar VPN widget with popout; fix logs and parsing; default top bar item 'vpn' added; minor layout fixes

2025-12-10 07:25:37 -05:00 · 2025-08-30 13:57:47 -04:00
parent e55c97185a
commit 952e5604d9
8 changed files with 595 additions and 1 deletions
--- a/Modules/TopBar/Vpn.qml
+++ b/Modules/TopBar/Vpn.qml
@@ -0,0 +1,106 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    // Passed in by TopBar
+    property int widgetHeight: 28
+    property int barHeight: 32
+    property string section: "right"
+    property var popupTarget: null
+    property var parentScreen: null
+
+    signal toggleVpnPopup()
+
+    width: Math.max(24, contentRow.implicitWidth + Theme.spacingXS * 2)
+    height: widgetHeight
+
+    Row {
+        id: contentRow
+        anchors.fill: parent
+        anchors.margins: 0
+        spacing: Theme.spacingXS
+
+        Rectangle {
+            anchors.fill: parent
+            radius: 6
+            color: "transparent"
+        }
+
+        DankIcon {
+            id: icon
+            name: VpnService.isBusy ? "sync" : (VpnService.connected ? "vpn_lock" : "vpn_key_off")
+            size: Theme.iconSize - 6
+            color: VpnService.connected ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+
+            RotationAnimation on rotation {
+                running: VpnService.isBusy
+                loops: Animation.Infinite
+                from: 0
+                to: 360
+                duration: 900
+            }
+        }
+
+        Text {
+            id: label
+            text: VpnService.connected ? (VpnService.activeName || "VPN") : "VPN"
+            font.pixelSize: Theme.fontSizeSmall
+            font.weight: Font.Medium
+            color: VpnService.connected ? Theme.primary : Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+            visible: true
+            elide: Text.ElideRight
+        }
+    }
+
+    MouseArea {
+        id: clickArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: {
+            if (popupTarget && popupTarget.setTriggerPosition) {
+                var globalPos = mapToGlobal(0, 0)
+                var currentScreen = parentScreen || Screen
+                var screenX = currentScreen.x || 0
+                var relativeX = globalPos.x - screenX
+                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen)
+            }
+            root.toggleVpnPopup()
+        }
+    }
+
+    Rectangle {
+        id: tooltip
+        width: Math.max(120, tooltipText.contentWidth + Theme.spacingM * 2)
+        height: tooltipText.contentHeight + Theme.spacingS * 2
+        radius: Theme.cornerRadius
+        color: Theme.surfaceContainer
+        border.color: Theme.surfaceVariantAlpha
+        border.width: 1
+        visible: clickArea.containsMouse && !(popupTarget && popupTarget.shouldBeVisible)
+        anchors.bottom: parent.top
+        anchors.bottomMargin: Theme.spacingS
+        anchors.horizontalCenter: parent.horizontalCenter
+        opacity: clickArea.containsMouse ? 1 : 0
+
+        Text {
+            id: tooltipText
+            anchors.centerIn: parent
+            text: VpnService.connected ? ("VPN Connected • " + (VpnService.activeName || "")) : "VPN Disconnected"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+        }
+
+        Behavior on opacity {
+            NumberAnimation { duration: Theme.shortDuration; easing.type: Theme.standardEasing }
+        }
+    }
+}