quickshell-toki-night/modules/bar/popouts/Network.qml

pragma ComponentBehavior: Bound

import qs.config
import qs.custom
import qs.services
import qs.util
import Quickshell
import QtQuick
import QtQuick.Layouts

ColumnLayout {
    id: root

    property string connectingToSsid: ""

    spacing: 5
    width: 320

    Toggle {
        label.text: qsTr("Wifi %1".arg(Network.wifiEnabled ? "Enabled" : "Disabled"))
        label.font.weight: 500
        checked: Network.wifiEnabled
        toggle.onToggled: Network.enableWifi(checked)
    }

    CustomText {
        Layout.topMargin: 7
        text: qsTr("%1 networks available").arg(Network.networks.length)
        color: Config.colors.primary
        font.pointSize: Config.font.size.small
    }

    CustomListView {
        id: list
        Layout.fillWidth: true
        Layout.preferredHeight: Math.min(contentHeight, 240)
        spacing: 5
        clip: true

        CustomScrollBar.vertical: CustomScrollBar {
            flickable: list
        }

        model: ScriptModel {
            values: [...Network.networks].sort((a, b) => {
                if (a.active !== b.active)
                    return b.active - a.active;
                return b.strength - a.strength;
            })
        }

        delegate: RowLayout {
            id: networkItem

            required property Network.AccessPoint modelData
            readonly property bool isConnecting: root.connectingToSsid === modelData.ssid
            readonly property bool loading: networkItem.isConnecting

            readonly property color iconColor: networkItem.modelData.active ? Config.colors.primary : Config.colors.inactive

            width: list.width - 8
            spacing: 5

            MaterialIcon {
                text: Icons.getNetworkIcon(networkItem.modelData.strength)
                color: iconColor

                MouseArea {
                    width: networkItem.width
                    height: networkItem.height

                    onClicked: {
                        if (Network.wifiEnabled && !networkItem.loading) {
                            if (networkItem.modelData.active) {
                                Network.disconnectFromNetwork();
                            } else {
                                root.connectingToSsid = networkItem.modelData.ssid;
                                Network.connectToNetwork(networkItem.modelData.ssid, "");
                            }
                        }
                    }
                }
            }

            MaterialIcon {
                opacity: networkItem.modelData.isSecure ? 1 : 0
                text: "lock"
                font.pointSize: Config.font.size.smaller
                color: iconColor
            }

            CustomText {
                Layout.fillWidth: true
                Layout.rightMargin: 10
                text: networkItem.modelData.ssid
                elide: Text.ElideRight
                font.weight: networkItem.modelData.active ? 500 : 400
                color: networkItem.modelData.active ? Config.colors.secondary : Config.colors.tertiary
            }

            CustomBusyIndicator {
                implicitWidth: implicitHeight
                implicitHeight: Config.font.size.normal

                running: opacity > 0
                opacity: networkItem.loading ? 1 : 0

                Behavior on opacity {
                    Anim {}
                }
            }
        }

        add: Transition {
            Anim {
                property: "opacity"
                from: 0
                to: 1
            }
            Anim {
                property: "scale"
                from: 0.7
                to: 1
            }
        }

        remove: Transition {
            Anim {
                property: "opacity"
                from: 1
                to: 0
            }
            Anim {
                property: "scale"
                from: 1
                to: 0.7
            }
        }

        addDisplaced: Transition {
            Anim {
                property: "y"
                duration: Config.anim.durations.small
            }
            Anim {
                properties: "opacity,scale"
                to: 1
            }
        }

        displaced: Transition {
            Anim {
                property: "y"
            }
            Anim {
                properties: "opacity,scale"
                to: 1
            }
        }
    }

    // Rescan button
    CustomRect {
        Layout.topMargin: 8
        Layout.fillWidth: true
        implicitHeight: rescanBtn.implicitHeight + 10

        radius: 17
        color: !Network.wifiEnabled ? Config.colors.inactive : Qt.alpha(Config.colors.network, Network.scanning ? 0.8 : 1)

        Behavior on color {
            CAnim { duration: Config.anim.durations.small }
        }

        StateLayer {
            id: layer
            anchors.fill: parent

            color: Config.colors.primaryDark
            disabled: Network.scanning || !Network.wifiEnabled

            function onClicked(): void {
                Network.rescanWifi();
            }
        }

        Row {
            id: rescanBtn
            anchors.centerIn: parent
            spacing: 7

            property color color: layer.disabled ? Config.colors.bg : Config.colors.primaryDark

            Behavior on color {
                CAnim { duration: Config.anim.durations.small }
            }

            MaterialIcon {
                id: scanIcon
                anchors.verticalCenter: parent.verticalCenter

                animate: true
                text: Network.scanning ? "refresh" : "wifi_find"
                color: parent.color

                RotationAnimation on rotation {
                    running: Network.scanning
                    loops: Animation.Infinite
                    from: 0
                    to: 360
                    duration: 1000
                }
            }

            CustomText {
                anchors.verticalCenter: parent.verticalCenter

                text: Network.scanning ? qsTr("Scanning...") : qsTr("Rescan networks")
                color: parent.color
            }
        }
    }

    // Reset connecting state when network changes
    Connections {
        target: Network

        function onActiveChanged(): void {
            if (Network.active && root.connectingToSsid === Network.active.ssid) {
                root.connectingToSsid = "";
            }
        }

        function onScanningChanged(): void {
            if (!Network.scanning)
                scanIcon.rotation = 0;
        }
    }

    component Toggle: RowLayout {
        property alias checked: toggle.checked
        property alias label: label
        property alias toggle: toggle

        Layout.fillWidth: true
        Layout.rightMargin: 5
        spacing: 15

        CustomText {
            id: label
            Layout.fillWidth: true
        }

        CustomSwitch {
            id: toggle
            accent: Color.mute(Config.colors.network)
        }
    }
}