updates to networking

modules/bar/widgets/Network.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import Quickshell
 import "../../../config"
 import "../states/Network"
 
@@ -12,9 +11,8 @@ MouseArea {
     cursorShape: Qt.PointingHandCursor
 
     onClicked: {
-        console.log("[Network] Refreshing... current status: " + NetworkState.status)
-        NetworkState.networkScript.running = false
-        NetworkState.networkScript.running = true
+        console.log("[Network] Manual refresh")
+        NetworkState.updateAll()
     }
 
     Rectangle {
@@ -44,167 +42,143 @@ MouseArea {
 
         Column {
             spacing: parent.spacing
-            Text {
-                text: "interfaceName: " + NetworkState.interfaceName
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
+
+            Repeater {
+                model: NetworkState.activeConnections
+                delegate: Column {
+                    spacing: 2
+                    Text {
+                        text: model.interfaceType === "wifi" ? "Wifi" : "Ethernet"
+                        color: Colors.secondary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                        font.bold: true
+                    }
+                    Text {
+                        text: "  interface: " + model.interfaceName
+                        color: Colors.primary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                    }
+                    Text {
+                        text: "  connection: " + model.connectionName
+                        color: Colors.primary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                    }
+                    Text {
+                        text: "  ipv4: " + model.ipv4
+                        color: Colors.primary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                        visible: model.ipv4 !== ""
+                    }
+                    Text {
+                        text: "  wifi: " + model.wifiName + "  signal: " + model.signalStrength + "%"
+                        color: Colors.primary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                        visible: model.interfaceType === "wifi"
+                    }
+                    Text {
+                        text: "  linkSpeed: " + model.linkSpeed
+                        color: Colors.primary
+                        font.pixelSize: Config.font_size_tiny(bar.height)
+                        font.family: Config.font
+                        visible: model.interfaceType === "ethernet"
+                    }
+                }
+            }
+
+            Item { width: 1; height: parent.spacing }
+
+            Column {
+                width: parent.width
+                spacing: 2
+                Text {
+                    text: "download: " + NetworkState.downloadSpeed
+                    color: Colors.primary
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+                Sparkline {
+                    values: NetworkState.downloadHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                }
+            }
+
+            Column {
+                width: parent.width
+                spacing: 2
+                Text {
+                    text: "upload: " + NetworkState.uploadSpeed
+                    color: Colors.primary
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+                Sparkline {
+                    values: NetworkState.uploadHistory
+                    lineColor: Colors.tertiary
+                    width: parent.width
+                }
+            }
+
+            Column {
+                width: parent.width
+                spacing: 2
+                Text {
+                    text: "ping: " + NetworkState.ping + " ms"
+                    color: Colors.primary
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+                Sparkline {
+                    values: NetworkState.pingHistory
+                    lineColor: Colors.error
+                    width: parent.width
+                }
             }
 
             Text {
-                text: "interfaceType: " + NetworkState.interfaceType
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
+                text: "no connection"
+                color: Colors.error
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
+                visible: !NetworkState.internetAvailable
             }
 
             Text {
-                text: "connectionName: " + NetworkState.connectionName
-                wrapMode: Text.WordWrap
+                text: "VPN: disconnected"
                 color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
+                visible: NetworkState.vpnExists && !NetworkState.vpnConnected
             }
 
             Text {
-                text: "ipv4: " + NetworkState.ipv4
-                wrapMode: Text.WordWrap
+                text: "VPN: " + NetworkState.vpnName
                 color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
+                visible: NetworkState.vpnConnected
             }
 
             Text {
-                text: "wifiName: " + NetworkState.wifiName
-                wrapMode: Text.WordWrap
+                text: "Tailscale: disconnected"
                 color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
+                visible: NetworkState.tailscaleExists && !NetworkState.tailscaleConnected
             }
 
             Text {
-                text: "signalStrength: " + NetworkState.signalStrength
-                wrapMode: Text.WordWrap
+                text: "Tailscale: " + NetworkState.tailscaleIp
                 color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "wifiChannel: " + NetworkState.wifiChannel
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "wifiFrequency: " + NetworkState.wifiFrequency
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "linkSpeed: " + NetworkState.linkSpeed
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "downloadSpeed: " + NetworkState.downloadSpeed
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "uploadSpeed: " + NetworkState.uploadSpeed
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "ping: " + NetworkState.ping
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "internetAvailable: " + NetworkState.internetAvailable
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "vpnConnected: " + NetworkState.vpnConnected
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "vpnName: " + NetworkState.vpnName
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "vpnIp: " + NetworkState.vpnIp
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "tailscaleConnected: " + NetworkState.tailscaleConnected
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-
-            Text {
-                text: "tailscaleIp: " + NetworkState.tailscaleIp
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
+                visible: NetworkState.tailscaleConnected
             }
         }
     }
-}
+}

modules/bar/widgets/Sparkline.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import "../../../config"
+
+Item {
+    id: root
+
+    property var values: []
+    property color lineColor: Colors.primary
+    property color fillColor: Qt.alpha(Colors.primary, 0.15)
+    property int pointCount: 60
+    property real minWidth: 120
+    property real graphHeight: 30
+
+    width: Math.max(minWidth, parent ? parent.width : minWidth)
+    height: graphHeight
+
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+
+        onPaint: {
+            var ctx = getContext("2d")
+            ctx.clearRect(0, 0, width, height)
+
+            var data = root.values
+            if (!data || data.length < 2) return
+
+            var displayCount = Math.min(data.length, root.pointCount)
+            var startIdx = data.length - displayCount
+            var slice = data.slice(startIdx)
+
+            var maxVal = 0
+            for (var i = 0; i < slice.length; i++) {
+                if (slice[i] > maxVal) maxVal = slice[i]
+            }
+            if (maxVal === 0) maxVal = 1
+
+            var stepX = width / (slice.length - 1)
+            var padY = 2
+            var drawH = height - padY * 2
+
+            ctx.beginPath()
+            ctx.moveTo(0, height - padY - (slice[0] / maxVal) * drawH)
+            for (var j = 1; j < slice.length; j++) {
+                var x = j * stepX
+                var y = height - padY - (slice[j] / maxVal) * drawH
+                ctx.lineTo(x, y)
+            }
+            ctx.strokeStyle = root.lineColor
+            ctx.lineWidth = 1.5
+            ctx.stroke()
+
+            ctx.lineTo(width, height)
+            ctx.lineTo(0, height)
+            ctx.closePath()
+            ctx.fillStyle = root.fillColor
+            ctx.fill()
+        }
+
+        Connections {
+            target: root
+            function onValuesChanged() { canvas.requestPaint() }
+            function onWidthChanged() { canvas.requestPaint() }
+            function onHeightChanged() { canvas.requestPaint() }
+        }
+    }
+}