Chore: created Spacer component, moved x available networks, added connected networks

Helpers/Network.qml

@@ -8,8 +8,9 @@ Singleton {
 	id: root
 
 	property bool active: false
+	readonly property list<Network> connectedNetworks: networks.filter(n => n.connected)
 	readonly property list<NetworkDevice> devices: Networking.devices.values
-	readonly property list<Network> knownNetworks: networks.filter(n => n.known)
+	readonly property list<Network> knownNetworks: networks.filter(n => n.known && !n.known.ConnectionState.Connected)
 	readonly property list<Network> networks: {
 		const list = [];
 		for (const d of wifiDevices) {

Modules/SysTray/Popouts/NetworkPopout.qml

@@ -43,14 +43,6 @@ CustomClippingRect {
 
 			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 {
@@ -64,10 +56,36 @@ CustomClippingRect {
 
 		CustomText {
 			Layout.leftMargin: Appearance.padding.normal
-			text: qsTr("Known networks")
+			text: qsTr("Connected")
+			visible: Network.connectedNetworks.length > 0
 		}
 
 		Repeater {
+			visible: Network.connectedNetworks.length > 0
+
+			model: ScriptModel {
+				values: [...Network.connectedNetworks].sort((a, b) => {
+					return b.signalStrength - a.signalStrength;
+				})
+			}
+
+			NetworkItem {
+			}
+		}
+
+		Spacer {
+			visible: Network.connectedNetworks.length > 0
+		}
+
+		CustomText {
+			Layout.leftMargin: Appearance.padding.normal
+			text: qsTr("Known networks")
+			visible: Network.knownNetworks.length > 0
+		}
+
+		Repeater {
+			visible: Network.knownNetworks.length > 0
+
 			model: ScriptModel {
 				values: [...Network.knownNetworks].sort((a, b) => {
 					return b.signalStrength - a.signalStrength;
@@ -78,10 +96,8 @@ CustomClippingRect {
 			}
 		}
 
-		Item {
+		Spacer {
-			id: spacer
+			visible: Network.knownNetworks.length > 0
-
-			Layout.preferredHeight: networkRepeater.count > 0 ? Appearance.spacing.extraSmall : 0
 		}
 
 		CustomText {
@@ -89,6 +105,14 @@ CustomClippingRect {
 			text: qsTr("Networks")
 		}
 
+		CustomText {
+			Layout.leftMargin: Appearance.padding.normal
+			Layout.preferredHeight: visible ? implicitHeight : 0
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.extraSmall
+			text: qsTr("%1 networks available").arg(Network.networks.length) // qmllint disable missing-property
+		}
+
 		Repeater {
 			id: networkRepeater
 
@@ -168,9 +192,16 @@ CustomClippingRect {
 		StateLayer {
 			color: knownNetworkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
-			onClicked: {}
+			onClicked: {
+				NetworkPassword.requestOpen();
+			}
 		}
 	}
+	component Spacer: Item {
+		id: spacer
+
+		Layout.preferredHeight: networkRepeater.count > 0 ? Appearance.spacing.extraSmall : 0
+	}
 	component Toggle: RowLayout {
 		property alias checked: toggle.checked
 		required property string label