set scannerEnabled when popout is visible + remove scan button

Helpers/Network.qml

@@ -8,10 +8,21 @@ Singleton {
 	id: root
 
 	readonly property list<NetworkDevice> devices: Networking.devices.values
-	readonly property list<Network> networks: initialBuildNetworks()
+	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
 
@@ -53,37 +64,8 @@ Singleton {
 	}
 	//
 
-	function initialBuildNetworks(): void {
-		const init = [];
-		for (const d of wifiDevices) {
-			d.scannerEnabled = true;
-			init.push(...d.networks.values);
-			d.scannerEnabled = false;
-		}
-
-		networks = init;
-	}
-
 	function isSecure(security): bool {
-		return !(security === WifiSecurityType.Open);
+		return (security === WifiSecurityType.WpaPsk || security === WifiSecurityType.Wpa2Psk || security === WifiSecurityType.Sae);
-	}
-
-	function rebuildNetworks(): void {
-		if (!scanning)
-			return;
-
-		const next = [];
-		for (const d of wifiDevices) {
-			next.push(...d.networks.values);
-		}
-
-		networks = next;
-	}
-
-	function rescanWifi(): void {
-		scanning = true;
-		setScan(true);
-		scanTimer.restart();
 	}
 
 	function setScan(value: bool): void {
@@ -99,27 +81,4 @@ Singleton {
 	function wifiDevice(dev): bool {
 		return dev.type === DeviceType.Wifi;
 	}
-
-	Timer {
-		id: scanTimer
-
-		interval: 5000
-		repeat: false
-
-		onTriggered: {
-			root.rebuildNetworks();
-			root.setScan(false);
-			root.scanning = false;
-		}
-	}
-
-	Timer {
-		interval: 500
-		repeat: true
-		running: root.scanning
-
-		onTriggered: {
-			root.rebuildNetworks();
-		}
-	}
 }

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

@@ -18,6 +18,9 @@ CustomClippingRect {
 	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
 
@@ -59,9 +62,104 @@ CustomClippingRect {
 		anchors.right: parent.right
 		anchors.top: networkPopContent.bottom
 
+		CustomText {
+			text: qsTr("Known networks")
+		}
+
 		Repeater {
 			model: ScriptModel {
-				values: [...Network.networks]
+				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 {
@@ -119,9 +217,7 @@ CustomClippingRect {
 					StateLayer {
 						color: networkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
-						onClicked: {
+						onClicked: {}
-							console.log(Network.devices[1].scannerEnabled, Network.devices[2].scannerEnabled, Network.devices[3].scannerEnabled, Network.devices[4].scannerEnabled);
-						}
 					}
 
 					MaterialIcon {
@@ -143,59 +239,6 @@ CustomClippingRect {
 				}
 			}
 		}
-
-		CustomRect {
-			Layout.fillWidth: true
-			Layout.preferredHeight: visible ? implicitHeight : 0
-			Layout.topMargin: visible ? Appearance.spacing.small : 0
-			color: DynamicColors.palette.m3primaryContainer
-			implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small
-			radius: Appearance.rounding.full
-
-			StateLayer {
-				color: DynamicColors.palette.m3onPrimaryContainer
-				enabled: !Network.scanning
-
-				onClicked: Network.rescanWifi()
-			}
-
-			RowLayout {
-				id: rescanBtn
-
-				anchors.centerIn: parent
-				opacity: Network.scanning ? 0 : 1
-				spacing: Appearance.spacing.small
-
-				Behavior on opacity {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-
-				MaterialIcon {
-					id: scanIcon
-
-					Layout.topMargin: Math.round(fontInfo.pointSize * 0.0575)
-					animate: true
-					color: DynamicColors.palette.m3onPrimaryContainer
-					text: "wifi_find"
-				}
-
-				CustomText {
-					Layout.topMargin: -Math.round(scanIcon.fontInfo.pointSize * 0.0575)
-					color: DynamicColors.palette.m3onPrimaryContainer
-					text: qsTr("Rescan networks")
-				}
-			}
-
-			CircularIndicator {
-				anchors.centerIn: parent
-				bgColor: "transparent"
-				implicitSize: parent.implicitHeight - Appearance.padding.large
-				running: Network.scanning
-				strokeWidth: Appearance.padding.extraSmall / 2
-			}
-		}
 	}
 
 	component Toggle: RowLayout {