pragma ComponentBehavior: Bound import Quickshell.Networking import QtQuick import QtQuick.Layouts import qs.reusables import qs.settings import qs Rectangle { id: root // This is the background of the entire bar/module // You might want to make this transparent if you only want the "pills" to show implicitHeight: Settings.config.barHeight - 10 implicitWidth: mainLayout.implicitWidth + 20 color: Colors.base00 radius: implicitHeight / 2 // --- Logic Functions --- function getIcon(device) { if (device.type === DeviceType.Wifi) { for (var i = 0; i < device.networks.values.length; i++) { var net = device.networks.values[i]; if (net.connected) { if (net.signalStrength <= 0.20) return "\uf0b0"; //signa_wifi_0_bar if (net.signalStrength <= 0.40) return "\uebe4"; //network_wifi_1_bar if (net.signalStrength <= 0.60) return "\uebd6"; //network_wifi_2_bar if (net.signalStrength <= 0.80) return "\uebe1"; //network_wifi_3_bar if (net.signalStrength >= 0.80) return "\ue1d8"; // signal_wifi_4_bar } } return "\ue1da"; } else if (device.connected) { return "settings_ethernet"; } return "\ue1da"; // signal_wifi_off } function getStatus(device) { if (device.type === DeviceType.Wifi) { for (var i = 0; i < device.networks.values.length; i++) { var net = device.networks.values[i]; if (net.connected) { return net.name; } } return "Disconnected"; } return device.connected ? "Connected" : "Disconnected"; } // --- Main Layout --- RowLayout { id: mainLayout anchors.centerIn: parent spacing: 10 // Space between multiple device pills (if you have ethernet + wifi) Repeater { id: netRepeater model: Networking.devices delegate: RowLayout { id: innerContent required property var modelData // THIS fixes the centering issue: spacing: 8 CustomIcon { id: netIcon Layout.alignment: Qt.AlignVCenter text: root.getIcon(innerContent.modelData) } CustomText { id: netText Layout.topMargin: 1 Layout.alignment: Qt.AlignVCenter text: root.getStatus(innerContent.modelData) // Ensures the text font aligns vertically within its own line-height verticalAlignment: Text.AlignVCenter } } } } }