From 7d08bf3366f206b1d096f413fd70fc27fcb8c8d3 Mon Sep 17 00:00:00 2001
From: lucy <lucykaufmann@protonmail.com>
Date: Fri, 6 Feb 2026 13:56:41 +0100
Subject: [PATCH] add network block to bar, only supports wifi for now

---
 modules/bar/Bar.qml     |   1 +
 modules/bar/Network.qml | 100 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 modules/bar/Network.qml

diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index f563d1d..00e7990 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -57,6 +57,7 @@ Variants {
                 spacing: 10
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
+                Network {}
                 Volume {}
                 Battery {}
                 SysTray {}
diff --git a/modules/bar/Network.qml b/modules/bar/Network.qml
new file mode 100644
index 0000000..34862d2
--- /dev/null
+++ b/modules/bar/Network.qml
@@ -0,0 +1,100 @@
+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
+    color: "transparent"
+    implicitHeight: Settings.config.barHeight - 10
+    implicitWidth: mainLayout.implicitWidth
+    anchors.verticalCenter: parent.verticalCenter
+
+    // --- 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 "android_wifi_0_bar";
+                    if (net.signalStrength <= 0.40)
+                        return "android_wifi_1_bar";
+                    if (net.signalStrength <= 0.60)
+                        return "android_wifi_2_bar";
+                    if (net.signalStrength <= 0.80)
+                        return "android_wifi_3_bar";
+                    return "android_wifi_4_bar";
+                }
+            }
+            return "wifi_off";
+        } else if (device.connected) {
+            return "settings_ethernet";
+        }
+        return "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: Rectangle {
+                id: devicePill
+
+                // Style settings for the "Pill"
+                color: Colors.surfaceContainer // Or use a specific grey: "#333333"
+                height: root.implicitHeight
+                radius: height / 2
+
+                // Calculate width: Content width + Padding (12px on each side)
+                width: innerContent.implicitWidth + 24
+
+                RowLayout {
+                    id: innerContent
+                    // THIS fixes the centering issue:
+                    anchors.centerIn: parent
+                    spacing: 8
+
+                    CustomIcon {
+                        id: netIcon
+                        Layout.alignment: Qt.AlignVCenter
+                        text: root.getIcon(modelData)
+                    }
+
+                    CustomText {
+                        id: netText
+                        Layout.topMargin: 2
+                        Layout.alignment: Qt.AlignVCenter
+                        text: root.getStatus(modelData)
+                        // Ensures the text font aligns vertically within its own line-height
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                }
+            }
+        }
+    }
+}