quickshell/modules/bar/widgets/Network.qml

import QtQuick
import "../../../config"
import "../states/Network"

MouseArea {
    id: networkButton

    width: Math.max(networkText.width + Config.spacing_fun(height)*2, height)
    height: bar.height
    hoverEnabled: true
    cursorShape: Qt.PointingHandCursor

    onClicked: {
        console.log("[Network] Manual refresh")
        NetworkState.updateAll()
    }

    Rectangle {
        anchors.fill: parent
        color: networkButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
        radius: Config.radius_fun(networkButton.height)
        border.width: Config.border_width
        border.color: networkButton.containsMouse ? Colors.tertiaryContainer_fg
            : Colors.secondaryContainer_fg

        Text {
            id: networkText
            text: NetworkState.status
            anchors.centerIn: parent
            font.pixelSize: Config.iconSize(bar.height)
            font.family: Config.font
            color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary
        }
    }

    BarPopup {
        id: clockPopup
        anchorItem: networkButton
        anchorHovered: networkButton.containsMouse
        spacingValue: Config.spacing_fun(networkButton.height)
        radiusValue: Config.radius_fun(networkButton.height)

        Column {
            spacing: parent.spacing

            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: "no connection"
                color: Colors.error
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
                visible: !NetworkState.internetAvailable
            }

            Text {
                text: "VPN: disconnected"
                color: Colors.primary
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
                visible: NetworkState.vpnExists && !NetworkState.vpnConnected
            }

            Text {
                text: "VPN: " + NetworkState.vpnName
                color: Colors.primary
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
                visible: NetworkState.vpnConnected
            }

            Text {
                text: "Tailscale: disconnected"
                color: Colors.primary
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
                visible: NetworkState.tailscaleExists && !NetworkState.tailscaleConnected
            }

            Text {
                text: "Tailscale: " + NetworkState.tailscaleIp
                color: Colors.primary
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
                visible: NetworkState.tailscaleConnected
            }
        }
    }
}