quickshell/modules/bar/widgets/Network.qml

import QtQuick
import Quickshell
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] Refreshing... current status: " + NetworkState.status)
        NetworkState.networkScript.running = false
        NetworkState.networkScript.running = true
    }

    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
            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
            }

            Text {
                text: "interfaceType: " + NetworkState.interfaceType
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }

            Text {
                text: "connectionName: " + NetworkState.connectionName
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }

            Text {
                text: "ipv4: " + NetworkState.ipv4
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }

            Text {
                text: "wifiName: " + NetworkState.wifiName
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }

            Text {
                text: "signalStrength: " + NetworkState.signalStrength
                wrapMode: Text.WordWrap
                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
            }
        }
    }
}