Merge branch 'main' into module/wifi

.gitignore

@@ -15,3 +15,4 @@ dist/
 **/target/
 **/test-plugins/
 **/Charts/
+**/network-dev/

Config/BarConfig.qml

@@ -40,10 +40,6 @@ JsonObject {
 			id: "tray",
 			enabled: true
 		},
-		{
-			id: "network",
-			enabled: false
-		},
 		{
 			id: "clock",
 			enabled: true

Helpers/Network.qml

@@ -0,0 +1,84 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Networking
+import QtQuick
+
+Singleton {
+	id: root
+
+	readonly property list<NetworkDevice> devices: Networking.devices.values
+	readonly property list<Network> networks: {
+		const list = []
+		for (const d of wifiDevices)
+			list.push(...d.networks.values)
+		return list;
+	}
+	property bool scanning: false
+	readonly property list<WifiDevice> wifiDevices: devices.filter(d => wifiDevice(d))
+	readonly property bool wifiEnabled: Networking.wifiEnabled
+	property bool active: false
+
+	onActiveChanged: {
+		for (const d of wifiDevices)
+			d.scannerEnabled = active;
+	}
+
+	// Original code
+
+	readonly property list<NetworkDevice> netDevice: Networking.devices.values
+	readonly property string networkName: getNetworkName()
+	readonly property list<string> nicNames: networkInterfaceCardNames()
+
+	// Useless will prob remove
+	function getConnectedDevices() {
+		let connectedDevices = [];
+
+		for (var i = 0; i < netDevice.length; i++) {
+			if (netDevice[i].connected === true) {
+				connectedDevices.push(netDevice[i].name);
+			}
+		}
+		return connectedDevices;
+	}
+
+	// SHOULD retrieve network names of connected devices
+	// Currently only gives connected nic name
+	function getNetworkName() {
+		const devices = netDevice.filter(device => device.connected === true);
+		for (var i = 0; i < devices.length; i++) {
+			return devices[i].name;
+		}
+		return "Failed network name";
+	}
+
+	// Searches wired/wireless devices and sets them in a list
+	function networkInterfaceCardNames() {
+		let nicList = [];
+
+		for (let i = 0; i < netDevice.length; ++i) {
+			nicList.push(netDevice[i].name);
+		}
+
+		return nicList;
+	}
+	//
+
+	function isSecure(security): bool {
+		return (security === WifiSecurityType.WpaPsk || security === WifiSecurityType.Wpa2Psk || security === WifiSecurityType.Sae);
+	}
+
+	function setScan(value: bool): void {
+		for (const d of wifiDevices) {
+			d.scannerEnabled = value;
+		}
+	}
+
+	function setWifi(value: bool): void {
+		Networking.wifiEnabled = value;
+	}
+
+	function wifiDevice(dev): bool {
+		return dev.type === DeviceType.Wifi;
+	}
+}

Modules/Bar/Bar.qml

@@ -6,7 +6,6 @@ import QtQuick.Layouts
 import qs.Modules
 import qs.Config
 import qs.Modules.SysTray
-import qs.Modules.Network
 import qs.Modules.Updates
 
 RowLayout {
@@ -169,15 +168,6 @@ RowLayout {
 				}
 			}
 
-			DelegateChoice {
-				roleValue: "network"
-
-				delegate: WrappedLoader {
-					sourceComponent: NetworkWidget {
-					}
-				}
-			}
-
 			DelegateChoice {
 				roleValue: "media"
 

Modules/Bar/BarLoader.qml

@@ -10,7 +10,6 @@ import qs.Config
 import qs.Helpers
 import qs.Modules.SysTray
 import qs.Modules.SysTray.Widgets
-import qs.Modules.Network
 
 Item {
 	id: root

Modules/Content.qml

@@ -6,7 +6,6 @@ import QtQuick
 import qs.Config
 import qs.Components
 import qs.Modules.WSOverview
-import qs.Modules.Network
 import qs.Modules.SysTray.Popouts
 import qs.Modules.Updates
 

Modules/Network/NetworkPopout.qml

@@ -1,36 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import Quickshell.Networking
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Modules
-import qs.Helpers as Helpers
-
-Item {
-	id: root
-
-	required property var wrapper
-
-	ColumnLayout {
-		id: layout
-
-		spacing: 8
-
-		Repeater {
-			model: Helpers.Network.devices
-
-			CustomRadioButton {
-				id: network
-
-				required property NetworkDevice modelData
-
-				checked: Helpers.Network.activeDevice?.name === modelData.name
-				text: modelData.description
-				visible: modelData.name !== "lo"
-			}
-		}
-	}
-}

Modules/Network/NetworkWidget.qml

@@ -1,25 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Modules
-
-Item {
-	id: root
-
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitWidth: layout.implicitWidth
-
-	RowLayout {
-		id: layout
-
-		anchors.bottom: parent.bottom
-		anchors.top: parent.top
-
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			text: "android_wifi_4_bar"
-		}
-	}
-}

Modules/Settings/Pages/Panels/Bar/BarStatusIcons.qml

@@ -39,13 +39,14 @@ PageBase {
 			onToggled: Config.bar.tray.showMicrophone = checked
 		}
 
+		ToggleRow {
+			checked: Config.bar.tray.showNetwork
+			text: qsTr("Network")
+
+			onToggled: Config.bar.tray.showNetwork = checked
+		}
+
 		//////// FOR LATER:
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showNetwork
-		// 	text: qsTr("Network")
-		//
-		// 	onToggled: Config.bar.tray.showNetwork = checked
-		// }
 		//
 		// ToggleRow {
 		// 	checked: Config.bar.tray.showWifi
@@ -94,5 +95,15 @@ PageBase {
 
 			onToggled: Config.bar.popouts.upower = checked
 		}
+
+		ToggleRow {
+			checked: Config.bar.popouts.network
+			last: true
+			settingAnchor: "bar-status-network-popout"
+			subtext: qsTr("Show a details popout when hovering the network icon")
+			text: qsTr("Network popout on hover")
+
+			onToggled: Config.bar.popouts.network = checked
+		}
 	}
 }

Modules/SysTray/Popouts/NetworkPopout.qml

@@ -0,0 +1,262 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+CustomClippingRect {
+	id: root
+
+	required property var wrapper
+
+	anchors.horizontalCenter: parent.horizontalCenter
+	color: DynamicColors.tPalette.m3surfaceContainer
+	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
+
+		CustomText {
+			Layout.preferredHeight: visible ? implicitHeight : 0
+			Layout.rightMargin: Appearance.padding.extraSmall
+			font.pointSize: Appearance.font.size.large
+			text: qsTr("Network")
+		}
+
+		Toggle {
+			Layout.preferredHeight: visible ? implicitHeight : 0
+			checked: Network.wifiEnabled
+			label: qsTr("WiFi enabled")
+
+			toggle.onToggled: Network.setWifi(checked)
+		}
+
+		CustomText {
+			Layout.preferredHeight: visible ? implicitHeight : 0
+			Layout.rightMargin: Appearance.padding.extraSmall
+			Layout.topMargin: visible ? Appearance.spacing.small : 0
+			color: DynamicColors.palette.m3onSurfaceVariant
+			text: qsTr("%1 networks available").arg(Network.networks.length) // qmllint disable missing-property
+		}
+	}
+
+	ColumnLayout {
+		id: networks
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		anchors.top: networkPopContent.bottom
+
+		CustomText {
+			text: qsTr("Known networks")
+		}
+
+		Repeater {
+			model: ScriptModel {
+				values: [...Network.networks].filter(n => n.known)
+			}
+
+			RowLayout {
+				id: knownNetworkItem
+
+				required property var modelData
+
+				Layout.fillWidth: true
+				Layout.preferredHeight: visible ? implicitHeight : 0
+				Layout.rightMargin: Appearance.padding.extraSmall
+				opacity: 0
+				scale: 0.7
+				spacing: Appearance.spacing.small
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.DefaultEffects
+					}
+				}
+				Behavior on scale {
+					Anim {
+					}
+				}
+
+				Component.onCompleted: {
+					opacity = 1;
+					scale = 1;
+				}
+
+				MaterialIcon {
+					color: knownNetworkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+					text: Icons.getNetworkIcon(knownNetworkItem.modelData.signalStrength * 100, Network.isSecure(knownNetworkItem.modelData.security))
+				}
+
+				CustomText {
+					Layout.fillWidth: true
+					Layout.leftMargin: Appearance.spacing.extraSmall
+					Layout.rightMargin: Appearance.spacing.extraSmall
+					color: knownNetworkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+					elide: Text.ElideRight
+					text: knownNetworkItem.modelData.name
+				}
+
+				CustomRect {
+					color: Qt.alpha(DynamicColors.palette.m3primary, knownNetworkItem.modelData.active ? 1 : 0)
+					implicitHeight: knownWirelessConnectIcon.implicitHeight + Appearance.padding.extraSmall
+					implicitWidth: implicitHeight
+					radius: Appearance.rounding.full
+
+					// CircularIndicator {
+					//     anchors.fill: parent
+					//     running: knownNetworkItem.loading
+					// }
+
+					StateLayer {
+						color: knownNetworkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
+						onClicked: {}
+					}
+
+					MaterialIcon {
+						id: knownWirelessConnectIcon
+
+						anchors.centerIn: parent
+						animate: true
+						color: knownNetworkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+						text: knownNetworkItem.modelData.active ? "link_off" : "link"
+
+						// opacity: knownNetworkItem.loading ? 0 : 1
+
+						Behavior on opacity {
+							Anim {
+								type: Anim.DefaultEffects
+							}
+						}
+					}
+				}
+			}
+		}
+
+		Item {
+			id: spacer
+
+			Layout.preferredHeight: networkRepeater.count > 0 ? Appearance.spacing.normal : 0
+		}
+
+		Repeater {
+			id: networkRepeater
+
+			model: ScriptModel {
+				values: [...Network.networks].filter(n => !n.known)
+			}
+
+			RowLayout {
+				id: networkItem
+
+				required property var modelData
+
+				Layout.fillWidth: true
+				Layout.preferredHeight: visible ? implicitHeight : 0
+				Layout.rightMargin: Appearance.padding.extraSmall
+				opacity: 0
+				scale: 0.7
+				spacing: Appearance.spacing.small
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.DefaultEffects
+					}
+				}
+				Behavior on scale {
+					Anim {
+					}
+				}
+
+				Component.onCompleted: {
+					opacity = 1;
+					scale = 1;
+				}
+
+				MaterialIcon {
+					color: networkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+					text: Icons.getNetworkIcon(networkItem.modelData.signalStrength * 100, Network.isSecure(networkItem.modelData.security))
+				}
+
+				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
+				}
+
+				CustomRect {
+					color: Qt.alpha(DynamicColors.palette.m3primary, networkItem.modelData.active ? 1 : 0)
+					implicitHeight: wirelessConnectIcon.implicitHeight + Appearance.padding.extraSmall
+					implicitWidth: implicitHeight
+					radius: Appearance.rounding.full
+
+					// CircularIndicator {
+					//     anchors.fill: parent
+					//     running: networkItem.loading
+					// }
+
+					StateLayer {
+						color: networkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
+						onClicked: {}
+					}
+
+					MaterialIcon {
+						id: wirelessConnectIcon
+
+						anchors.centerIn: parent
+						animate: true
+						color: networkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+						text: networkItem.modelData.active ? "link_off" : "link"
+
+						// opacity: networkItem.loading ? 0 : 1
+
+						Behavior on opacity {
+							Anim {
+								type: Anim.DefaultEffects
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	component Toggle: RowLayout {
+		property alias checked: toggle.checked
+		required property string label
+		property alias toggle: toggle
+
+		Layout.fillWidth: true
+		Layout.rightMargin: Appearance.padding.extraSmall
+		spacing: Appearance.spacing.small
+
+		CustomText {
+			Layout.fillWidth: true
+			text: parent.label
+		}
+
+		CustomSwitch {
+			id: toggle
+		}
+	}
+}

Modules/SysTray/TrayWidget.qml

@@ -52,6 +52,11 @@ RowLayout {
 						id: "audio",
 						item: child
 					};
+				if (child.objectName === "networkWidget" && Config.bar.popouts.network)
+					return {
+						id: "network",
+						item: child
+					};
 				if (child.objectName === "upowerWidget" && Config.bar.popouts.upower)
 					return {
 						id: "upower",
@@ -146,6 +151,10 @@ RowLayout {
 				}
 			}
 
+			NetworkWidget {
+				objectName: "networkWidget"
+			}
+
 			UPowerWidget {
 				Layout.fillHeight: true
 				objectName: "upowerWidget"

Modules/SysTray/Widgets/NetworkWidget.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Services.Pipewire
+import qs.Daemons
+import qs.Modules
+import qs.Config
+import qs.Components
+
+RowLayout {
+	id: root
+
+	// property color barColor: DynamicColors.palette.m3primary
+	property color textColor: DynamicColors.palette.m3onSurface
+
+	MaterialIcon {
+		Layout.alignment: Qt.AlignVCenter
+		animate: true
+		color: root.textColor // Network.connected ? root.textColor : DynamicColors.palette.m3error
+		fill: 1
+		font.pointSize: Appearance.font.size.larger
+		text: "android_wifi_4_bar"
+	}
+}