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 = 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
        property int count: 17
        property var texts: [text1, text2, text3, text4, text5, text6, text7, text8, text9, text10, text11, text12, text13, text14, text15, text16, text17]
        implicitWidth: Config.maxTextWidth(count, texts) + (Config.spacing_fun(networkButton.height) * 3)
        implicitHeight: text1.height*count+(Config.spacing_fun(networkButton.height) * (count + 2))

        Column {
            width: parent.width
            spacing: Config.spacing_fun(networkButton.height)
            Text {
                id: text1
                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 {
                id: text2
                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 {
                id: text3
                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 {
                id: text4
                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 {
                id: text5
                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 {
                id: text6
                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 {
                id: text7
                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 {
                id: text8
                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 {
                id: text9
                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 {
                id: text10
                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 {
                id: text11
                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 {
                id: text12
                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 {
                id: text13
                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 {
                id: text14
                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 {
                id: text15
                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 {
                id: text16
                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 {
                id: text17
                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
            }
        }
    }
}