add networking info in bar

Colors.qml

@@ -2,22 +2,10 @@ pragma ComponentBehavior: Bound
 pragma Singleton
 import QtQuick
 import Quickshell
-import Quickshell.Io
 import "Colors.js" as Colors
 
 Singleton {
     id: root    
-
-    Process {
-	running: true
-	id: checkRosePine
-	command: [ "tinty", "current" ]
-	stdout: StdioCollector {
-	    id: collector
-	}
-	onExited: { console.log(collector.text) }
-    }
-    
     readonly property color accent: base0D
     readonly property color barBg: base01
     readonly property color moduleBg: Qt.hsla(base01.hslHue, base01.hslSaturation, base01.hslLightness + 0.05, 1.0)

modules/Services/Network.qml

@@ -0,0 +1,44 @@
+pragma Singleton
+import Quickshell
+import Quickshell.Networking
+
+Singleton {
+    id: root
+    property bool wifiEnabled: Networking.wifiEnabled
+    readonly property list<NetworkDevice> devices: Networking.devices.values
+    property WifiDevice wifiDev: devices.find(dev => dev.type === DeviceType.Wifi) ?? null
+    property WiredDevice wiredDev: devices.find(dev => dev.type === DeviceType.Wired) ?? null
+    property list<WifiNetwork> wifiNetworks: wifiDev?.networks.values ?? []
+    property WifiNetwork connectedNet: wifiNetworks.find(net => net.connected) ?? null
+    function getWiredIcon() {
+        if (wiredDev?.hasLink ?? false) {
+            if (wiredDev.connected ?? false) {
+                return "network-wired-activated";
+            } else
+                return "network-wired-unavailable";
+        } else
+            return "network-wired-unavailable";
+    }
+    function getWifiIcon() {
+        Networking.checkConnectivity();
+        let state = wifiDev?.state ?? ConnectionState.Unknown;
+        if (state === ConnectionState.Disconnected || state === ConnectionState.Unknown)
+            return "network-wireless-disconnected";
+        if (state === ConnectionState.Connecting || state === ConnectionState.Disconnecting)
+            return "network-wireless-acquiring";
+
+        if (wifiDev?.connected ?? false) {
+            let strength = connectedNet?.signalStrength ?? 0.0;
+            if (strength <= 0.2)
+                return "network-wireless-signal-none";
+            if (strength <= 0.40)
+                return "network-wireless-signal-weak";
+            if (strength <= 0.60)
+                return "network-wireless-signal-ok";
+            if (strength <= 0.80)
+                return "network-wireless-signal-good";
+            if (strength > 0.80)
+                return "network-wireless-signal-excellect";
+        }
+    }
+}

modules/Services/Network.qml~

@@ -0,0 +1,21 @@
+pragma Singleton
+import Quickshell
+import Quickshell.Networking
+
+
+Singleton {
+    id: root
+    property bool wifiEnabled: Networking.wifiEnabled
+    property string connectivity: Networking.connectivity.toString(Networking.connectivity)
+    readonly property list<NetworkDevice> devices: Networking.devices.values
+
+    function getConnectedDevice() {
+	for(let i=0; i < devices.length; ++i) {
+	    console.log(i)
+	    if(devices[i].connected) {
+		return devices[i];
+	    }
+	    return null;
+	}
+    }  
+}

modules/bar/Bar.qml

@@ -46,7 +46,9 @@ Variants {
                 WallPicker {
                     screenHeight: root.screen.height
                 }
+
                 Pw {}
+				Netstatus {}
             }
         }
     }

modules/bar/Date.qml

@@ -18,15 +18,8 @@ BarComponent {
     RowLayout {
 	id: clockLayout
 	anchors.centerIn: parent
-	IconImage {
+	StyledIcon {
-	    source: Quickshell.iconPath("clock-applet-symbolic")
+	    iconName: "clock-alt-symbolic"
-	    implicitSize: Config.iconSize
-	    layer.enabled: true
-	    layer.effect: MultiEffect {
-		colorization: 1.0
-		colorizationColor: Colors.text
-		brightness: 0.5
-	    }
 	}
 	StyledText {
             id: clockText

modules/bar/Netstatus.qml

@@ -0,0 +1,22 @@
+import qs.modules.Services
+import qs.widgets
+import QtQuick
+import QtQuick.Layouts
+
+BarComponent {
+    id: root
+    implicitWidth: networkLayout.implicitWidth + 24
+    RowLayout {
+        id: networkLayout
+        anchors.centerIn: root
+        spacing: 10
+        StyledIcon {
+            iconName: Network.getWifiIcon()
+        }
+        StyledIcon {
+            Layout.topMargin: 2
+            iconName: Network.getWiredIcon()
+	    visible: Network.wiredDev != null
+        }
+    }
+}

modules/bar/Netstatus.qml~

@@ -0,0 +1,29 @@
+import qs
+import qs.modules.Services
+import qs.widgets
+import qs.settings
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+BarComponent {
+    id: root
+    implicitWidth: networkLayout.implicitWidth + 24
+    RowLayout {
+	anchors.centerIn: root
+	id: networkLayout
+	StyledText {
+	    id: status
+	    text: Network.wifiEnabled ? "Wifi enabled :3" : "Wifi disabled :("
+	}
+	StyledText {
+	    id: wifiDevName
+	    text: Network.connectedWifiDev?.name ?? "not connected via wifi"
+	}
+	StyledText{
+	    id: wiredDevName
+	    text: Network.connectedWiredDev?.name ?? "not connected via wired"
+	}
+    } 
+}

modules/bar/Pw.qml

@@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound
 import Quickshell.Services.Pipewire
-import Quickshell.Io
 import Quickshell.Widgets
 import Quickshell
 import QtQuick
@@ -13,24 +12,15 @@ import qs.modules.Services
 
 BarComponent {
     id: root
-    color: clickHandler.containsMouse ? Colors.activeModuleBg : Colors.moduleBg
+    active: clickHandler.containsMouse
-    property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null
-    property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null
     implicitHeight: Config.moduleHeight
     implicitWidth: pwLayout.implicitWidth + 16
     RowLayout {
         id: pwLayout
         anchors.centerIn: root
         spacing: 4
-        IconImage {
+        StyledIcon {
-            source: Quickshell.iconPath(Audio.getVolumeIcon(Audio.defaultAudio))
+	    iconName: Audio.getVolumeIcon(Audio.preferredAudio)
-            implicitSize: 14
-            layer.enabled: true
-            layer.effect: MultiEffect {
-                colorization: 1.0
-                colorizationColor: Colors.text
-                brightness: 0.0
-            }
 	}
         StyledText {
             text: Audio.percentage + "%"

modules/bar/VolPopup.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import qs
 import qs.settings
 import Quickshell
@@ -6,8 +7,7 @@ import qs.widgets
 import qs.modules.Services
 import QtQuick.Layouts
 import QtQuick.Controls
-import Quickshell.Widgets
+
-import QtQuick.Effects
 
 PopupWindow {
     implicitWidth: 400
@@ -16,8 +16,9 @@ PopupWindow {
     anchor.gravity: Edges.Bottom | Edges.Left
     anchor.margins.top: 40
     color: 'transparent'
+    grabFocus: true
     Rectangle {
-        id: test
+        id: root
         anchors.fill: parent
         color: Colors.moduleBg
         radius: Config.rounding
@@ -49,41 +50,25 @@ PopupWindow {
                             Layout.leftMargin: 10
                             Layout.fillWidth: true
                         }
-                        IconImage {
+                        StyledIcon {
-                            source: Quickshell.iconPath(Audio.getVolumeIcon(audioDelContainer.modelData))
+                            iconName: Audio.getVolumeIcon(audioDelContainer.modelData)
-                            implicitSize: 16
-			    layer.enabled: true
-			    layer.effect: MultiEffect {
-				colorization: 1.0
-				colorizationColor: Colors.text
-
-
-			    }
                             MouseArea {
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 acceptedButtons: Qt.LeftButton
                                 onClicked: {
-				    audioDelContainer.modelData.audio.muted = !audioDelContainer.modelData.audio.muted
+                                    audioDelContainer.modelData.audio.muted = !audioDelContainer.modelData.audio.muted;
                                 }
                             }
                         }
-			IconImage {
+                        StyledIcon {
-                            source: Quickshell.iconPath(audioDelContainer.modelData === Audio.preferredAudio ? "radio-checked-symbolic" : "radio-symbolic")
+                            iconName: audioDelContainer.modelData === Audio.preferredAudio ? "radio-checked-symbolic" : "radio-symbolic"
-                            implicitSize: 16
-			    layer.enabled: true
-			    layer.effect: MultiEffect {
-				colorization: 1.0
-				colorizationColor: Colors.text
-				brightness: 0.5
-
-			    }
                             MouseArea {
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 acceptedButtons: Qt.LeftButton
                                 onClicked: {
-				    Audio.setDefaultSink(audioDelContainer.modelData)
+                                    Audio.setDefaultSink(audioDelContainer.modelData);
                                 }
                             }
                         }

modules/wallpaper/WallPicker.qml

@@ -15,16 +15,9 @@ BarComponent {
     implicitWidth: Config.moduleHeight
     required property int screenHeight
     id: main
-    IconImage {
+    StyledIcon {
-	source: Quickshell.iconPath("preferences-desktop-wallpaper-symbolic")
+	iconName: "preferences-desktop-wallpaper-symbolic"
-	implicitSize: Config.iconSize
 	anchors.centerIn: parent
-	layer.enabled: true
-	layer.effect: MultiEffect {
-		colorization: 1.0
-		colorizationColor: Colors.text
-		brightness: 0.5
-	}
     }
     MouseArea {
         id: clickHandler

settings/settings.ini

@@ -9,4 +9,4 @@ primaryMon=eDP-1
 rounding=16
 showCorners=true
 wallDir=file:///home/lucy/.walls
-wallpaper=@Variant(\0\0\0\x11\0\0\0\x1b/home/lucy/.walls/faris.png)
+wallpaper=@Variant(\0\0\0\x11\0\0\0\x1f/home/lucy/.walls/lain_blue.png)

widgets/StyledIcon.qml

@@ -0,0 +1,17 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick.Effects
+import qs
+import qs.settings
+
+IconImage {
+    required property string iconName
+    implicitSize: Config.iconSize
+    source: Quickshell.iconPath(iconName)
+    layer.enabled: true
+    layer.effect: MultiEffect {
+	colorization: 1.0
+	colorizationColor: Colors.text
+	brightness: 1.0
+    }
+}

widgets/StyledIcon.qml~

@@ -0,0 +1,17 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick.Effects
+import qs
+import qs.settings
+
+IconImage {
+    required property string iconName
+    implicitSize: Config.iconSize
+    source: iconName
+    layer.enabled: true
+    layer.effect: MultiEffect {
+	colorization: 1.0
+	colorizationColor: Colors.text
+	brightness: 0.5
+    }
+}