z-bar-qt/Modules/SysTray/Popouts/NetworkPopout.qml

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import Quickshell
import qs.Modules.SysTray.Popouts.Network
import qs.Components
import qs.Config
import qs.Helpers

CustomClippingRect {
	id: root

	required property var wrapper

	anchors.horizontalCenter: parent.horizontalCenter
	implicitHeight: networkPopContent.height + networks.implicitHeight + networkPopContent.anchors.margins + networks.anchors.margins * 2
	implicitWidth: 500 + 8 * 2
	radius: (20 - Appearance.padding.small) * Appearance.rounding.scale

	Component.onCompleted: Network.active = true
	Component.onDestruction: Network.active = false

	ColumnLayout {
		id: networkPopContent

		anchors.left: parent.left
		anchors.margins: Appearance.padding.large
		anchors.right: parent.right
		anchors.top: parent.top
		spacing: Appearance.spacing.extraSmall / 2

		CustomText {
			Layout.preferredHeight: visible ? implicitHeight : 0
			Layout.rightMargin: Appearance.padding.extraSmall
			font.pointSize: Appearance.font.size.large
			text: qsTr("Wifi")
		}

		Toggle {
			Layout.preferredHeight: visible ? implicitHeight : 0
			checked: Network.wifiEnabled
			first: true
			last: connected.count === 0
			subtext: qsTr("Toggle WiFi device state")
			text: checked ? qsTr("Enabled") : qsTr("Disabled")

			onToggled: Network.setWifi(checked)
		}

		Repeater {
			id: connected

			visible: Network.connectedNetworks.length > 0

			model: ScriptModel {
				values: [...Network.connectedNetworks].sort((a, b) => {
					return b.signalStrength - a.signalStrength;
				})
			}

			NetworkItem {
				first: false
				known: true
				repeater: connected
			}
		}
	}

	ColumnLayout {
		id: networks

		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.margins: Appearance.padding.large
		anchors.right: parent.right
		anchors.top: networkPopContent.bottom
		spacing: Appearance.spacing.extraSmall / 2

		Spacer {
			repeater: known
			visible: Network.connectedNetworks.length > 0
		}

		CustomText {
			Layout.leftMargin: Appearance.padding.normal
			Layout.preferredHeight: visible ? implicitHeight : 0
			color: DynamicColors.palette.m3onSurfaceVariant
			font.pointSize: Appearance.font.size.small
			text: Network.knownNetworks.length > 1 ? qsTr("%1 known networks available").arg(Network.knownNetworks.length) : qsTr("1 known network available") // qmllint disable missing-property
			visible: Network.knownNetworks.length > 0
		}

		Repeater {
			id: known

			visible: Network.knownNetworks.length > 0

			model: ScriptModel {
				values: [...Network.knownNetworks].sort((a, b) => {
					return b.signalStrength - a.signalStrength;
				})
			}

			NetworkItem {
				known: true
				repeater: known
			}
		}

		Spacer {
			repeater: unknown
			visible: Network.knownNetworks.length > 0
		}

		CustomText {
			Layout.leftMargin: Appearance.padding.normal
			Layout.preferredHeight: visible ? implicitHeight : 0
			color: DynamicColors.palette.m3onSurfaceVariant
			font.pointSize: Appearance.font.size.small
			text: Network.unknownNetworks.length > 1 ? qsTr("%1 networks available").arg(Network.unknownNetworks.length) : qsTr("1 network available") // qmllint disable missing-property
			visible: Network.unknownNetworks.length > 0
		}

		Repeater {
			id: unknown

			model: ScriptModel {
				values: [...Network.unknownNetworks].sort((a, b) => {
					return b.signalStrength - a.signalStrength;
				})
			}

			NetworkItem {
				known: false
				repeater: unknown
			}
		}
	}

	NetworkOverlay {
		anchors.fill: parent
	}

	component ConnectedRect: CustomRect {
		id: bg

		property bool first
		property bool last

		bottomLeftRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
		bottomRightRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
		color: DynamicColors.tPalette.m3surfaceContainer
		topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
		topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
	}
	component NetworkItem: ConnectedRect {
		id: networkItem

		readonly property bool connecting: Network.connectingNetwork === modelData
		property int horizontalPadding: Appearance.padding.largeIncreased
		required property int index
		readonly property bool isSecure: Network.isSecure(modelData.security)
		required property bool known
		required property var modelData
		required property Repeater repeater

		Layout.fillWidth: true
		Layout.preferredHeight: visible ? rowLayout.implicitHeight + Appearance.padding.smaller * 2 : 0
		first: index === 0
		last: index === (repeater.count - 1)
		radius: Appearance.rounding.small

		RowLayout {
			id: rowLayout

			anchors.fill: parent
			anchors.leftMargin: networkItem.horizontalPadding
			anchors.rightMargin: networkItem.horizontalPadding

			Column {
				id: column

				Layout.fillWidth: true

				CustomText {
					Layout.fillWidth: true
					Layout.leftMargin: Appearance.spacing.extraSmall
					Layout.rightMargin: Appearance.spacing.extraSmall
					color: networkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
					elide: Text.ElideRight
					text: networkItem.modelData.name
				}

				CustomText {
					id: subtext

					anchors.left: parent.left
					anchors.right: parent.right
					color: DynamicColors.palette.m3outline
					elide: Text.ElideRight
					font.pointSize: Appearance.font.size.small
					text: qsTr("%1 strength").arg(Math.round(networkItem.modelData.signalStrength * 100) + "%")
				}
			}

			Item {
				Layout.alignment: Qt.AlignRight
				implicitHeight: icon.height
				implicitWidth: icon.width

				MaterialIcon {
					id: icon

					color: networkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
					font.pointSize: Appearance.font.size.large
					opacity: networkItem.connecting ? 0 : 1
					text: Icons.getNetworkIcon(networkItem.modelData.signalStrength * 100, networkItem.isSecure)

					Behavior on opacity {
						Anim {
						}
					}
				}

				Loader {
					active: opacity > 0
					anchors.fill: parent
					opacity: networkItem.connecting ? 1 : 0

					Behavior on opacity {
						Anim {
						}
					}
					sourceComponent: CircularIndicator {
						bgColor: "transparent"
						running: true
					}
				}
			}
		}

		StateLayer {
			color: networkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface

			onClicked: {
				if (networkItem.isSecure && !networkItem.known) {
					PopupManager.requestOpen(Qt.resolvedUrl("Network/PSKOverlay.qml"), {
						network: networkItem.modelData
					});
				} else {
					Network.requestConnect(networkItem.modelData);
				}
			}
		}

		IconButton {
			anchors.right: rowLayout.right
			anchors.rightMargin: rowLayout.anchors.rightMargin + icon.width
			anchors.verticalCenter: parent.verticalCenter
			font.pointSize: Appearance.font.size.large
			icon: "cancel"
			implicitHeight: parent.height - Appearance.padding.larger * 2
			type: IconButton.Text
			visible: networkItem.known

			onClicked: networkItem.modelData.forget()
		}
	}
	component Spacer: Item {
		id: spacer

		required property Repeater repeater

		Layout.preferredHeight: repeater.count > 0 ? Appearance.spacing.extraSmall : 0
	}
	component Toggle: CustomSwitch {
		id: toggleItem

		readonly property alias bg: bg
		property alias first: bg.first
		property alias last: bg.last
		property string subtext

		Layout.fillWidth: true
		cLayer: 2
		horizontalPadding: Appearance.padding.largeIncreased
		implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
		implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
		indicator.anchors.right: right
		indicator.anchors.rightMargin: toggleItem.horizontalPadding
		indicator.anchors.verticalCenter: verticalCenter
		verticalPadding: Appearance.padding.normal

		background: ConnectedRect {
			id: bg

			StateLayer {
				id: stateLayer

				manualPressOverride: toggleItem.pressed
			}
		}
		contentItem: Item {
			anchors.left: parent.left
			anchors.leftMargin: toggleItem.horizontalPadding
			anchors.right: toggleItem.indicator.left
			anchors.rightMargin: Appearance.spacing.normal
			implicitHeight: column.implicitHeight
			implicitWidth: column.implicitWidth

			Column {
				id: column

				anchors.left: parent.left
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				spacing: 0

				CustomText {
					id: label

					anchors.left: parent.left
					anchors.right: parent.right
					elide: Text.ElideRight
					font: {
						const f = Qt.font(label.font);
						f.pointSize = Appearance.font.size.smaller;
						return f;
					}
					text: toggleItem.text
				}

				CustomText {
					id: subtext

					anchors.left: parent.left
					anchors.right: parent.right
					color: DynamicColors.palette.m3outline
					elide: Text.ElideRight
					font: {
						const f = Qt.font(subtext.font);
						f.pointSize = Appearance.font.size.small;
						return f;
					}
					text: toggleItem.subtext
					visible: toggleItem.subtext
				}
			}
		}

		onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
	}
}