add material icons to status

modules/Bar/Bar.qml

@@ -19,13 +19,14 @@ Variants {
             right: true
         }
         implicitHeight: Settings.config.barHeight
-        Row {
+        RowLayout {
             id: leftStuff
             spacing: 10
             anchors.left: parent.left
             anchors.verticalCenter: parent.verticalCenter
             Workspaces {
-                property var screen: modelData
+                property var screen: root.modelData
+                Layout.leftMargin: 10
             }
             Title {
                 anchors.verticalCenter: parent.verticalCenter
@@ -35,17 +36,19 @@ Variants {
         Row {
             id: centerStuff
             anchors.centerIn: parent
+            Clock {}
         }
 
-        Row {
+        RowLayout {
             id: rightStuff
-            spacing: 10
+            spacing: 20
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            Clock {}
             Volume {}
-            SystemTray {}
             Battery {}
+            SystemTray {
+              Layout.rightMargin: 10
+            }
         }
     }
 }

modules/Bar/Battery.qml

@@ -12,28 +12,55 @@ Loader {
 
     sourceComponent: Item {
         id: root
+
+        property bool frame1: UPower.displayDevice.percentage <= 0.16
+        property bool frame2: UPower.displayDevice.percentage < 0.32
+        property bool frame3: UPower.displayDevice.percentage < 0.48
+        property bool frame4: UPower.displayDevice.percentage < 0.74
+        property bool frame5: UPower.displayDevice.percentage < 0.90
+        property bool frame6: UPower.displayDevice.percentage <= 1
+        property bool charging: UPower.displayDevice.Charging
+
+        function getBatteryIcon() {
+            if (charging) {
+                return "battery_android_frame_bolt"
+            }
+            if (frame1) {
+                return "battery_android_frame_1";
+            }
+            if (frame2) {
+                return "battery_android_frame_2";
+            }
+            if (frame3) {
+                return "battery_android_frame_3";
+            }
+            if (frame4) {
+                return "battery_android_frame_4";
+            }
+            if (frame5) {
+                return "battery_android_frame_5";
+            }
+            if (frame6) {
+                return "battery_android_frame_full";
+            }
+        }
+
         implicitWidth: batRow.implicitWidth
         implicitHeight: Settings.config.barHeight
-        Rectangle {
-            id: batRow
-            implicitWidth: batText.implicitWidth + batIcon.implicitWidth + 10
-            color: "transparent"
 
-            implicitHeight: Settings.config.barHeight
             Row {
-                anchors.centerIn: batRow
+                anchors.centerIn: parent
+                id: batRow
+                spacing: 5
                 CustomText {
                     id: batText
                     text: Math.round(UPower.displayDevice.percentage * 100) + "%"
                 }
-
+                CustomIcon {
-                IconImage {
                   id: batIcon
-                    anchors.verticalCenter: parent.verticalCenter
+                  text: root.getBatteryIcon()
-                    source: Quickshell.iconPath(UPower.displayDevice.iconName)
+                }
-                    implicitSize: 12
+
-                }
-            }
             }
         }
 }

modules/Bar/SystemTray.qml

@@ -7,8 +7,11 @@ Item {
     id: root
     implicitWidth: trayRow.implicitWidth
     implicitHeight: Settings.config.barHeight
+    anchors.verticalCenter: parent.verticalCenter
+
     Row {
         id: trayRow
+        anchors.verticalCenter: parent.verticalCenter
         Repeater {
             id: trayRepeater
             model: SystemTray.items

modules/Bar/Title.qml

@@ -6,13 +6,14 @@ import "../../"
 import Quickshell.Hyprland
 
 Item {
-    id: textContainer
+    id: root
+    readonly property var activeWindow: Hyprland.activeToplevel
     implicitWidth: text.implicitWidth
     implicitHeight: Settings.config.barHeight
     CustomText {
         id: text
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        text: Hyprland.activeToplevel ? Hyprland.activeToplevel.title : "Desktop"
+        text: root.activeWindow?.activated ?Hyprland.activeToplevel.title : "Desktop"
     }
 }

modules/Bar/Volume.qml

@@ -7,14 +7,45 @@ import "../../"
 
 Item {
     id: root
-    implicitWidth: volumeText.implicitWidth + 10
+    property var sink: Pipewire.defaultAudioSink
+    function getVolumeIcon() {
+        // Safety check: if Pipewire is dead or sink is missing
+        if (!sink)
+            return "volume_off";
+
+        // If muted, show the hush icon
+        if (sink.audio.muted)
+            return "volume_off";
+
+        // Volume is usually 0.0 to 1.0 (0% to 100%)
+        const vol = sink.audio.volume;
+
+        if (vol <= 0.25)
+            return "volume_mute";
+        if (vol < 0.75)
+            return "volume_down";
+        if (vol <= 1.00)
+            return "volume_up";
+
+        // If it's loud, prepare the ears!
+        return "volume_up";
+    }
+    implicitWidth: textRow.implicitWidth + 10
     implicitHeight: Settings.config.barHeight
+    Row {
+        anchors.centerIn: parent
+        spacing: 5
+        id: textRow
         CustomText {
             id: volumeText
-        anchors.centerIn: parent
             PwObjectTracker {
                 objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
             }
-        text: Pipewire.ready ? Pipewire.defaultAudioSink.audio.muted ? "mut: " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100) + "%" : "vol: " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100) + "%" : "failure"
+            text: Pipewire.ready ? Math.round(root.sink.audio.volume * 100) + "%" : "failure"
+        }
+        CustomIcon {
+          id: volumeIcon
+          text: root.getVolumeIcon()
+        }
     }
 }

modules/Bar/Workspaces.qml

@@ -13,7 +13,7 @@ Item {
     Row {
         id: workspaceRow
         anchors.centerIn: parent
-        spacing: 0 // Slightly increase spacing between workspace buttons
+        spacing: 10 // Slightly increase spacing between workspace buttons
 
         Repeater {
             id: wsRepeater
@@ -21,6 +21,7 @@ Item {
             anchors.centerIn: parent
             Rectangle {
                 id: workspaceNumber
+                radius: 20
                 property bool isOnMon: {
                     if (!modelData)
                         return false;
@@ -34,14 +35,15 @@ Item {
                 }
 
                 required property var modelData
-                width: isOnMon ? Settings.config.barHeight + 10 : 0
+                width: isOnMon ? Settings.config.barHeight - Settings.config.barHeight / 2 : 0
-                height: isOnMon ? Settings.config.barHeight : 0
+                height: isOnMon ? Settings.config.barHeight - Settings.config.barHeight / 2 : 0
-                color: modelData.active ? Colors.foreground : "transparent"
+                color: "transparent"
 
                 CustomText {
                     anchors.centerIn: workspaceNumber
                     text: parent.modelData.id
-                    color: parent.modelData.active ? Colors.background : Colors.foreground // Set contrasting color for workspace number
+                    color: Colors.foreground // Set contrasting color for workspace number
+                    opacity: workspaceNumber.modelData.focused ? 1 : 0.5
                 }
                 MouseArea {
                     anchors.fill: parent

reusables/CustomIcon.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import "../settings/"
+import "../"
+
+Text {
+    property real fill
+    font.family: "Material Symbols Rounded"
+    color: Colors.foreground
+    font.pixelSize: Settings.config.fontSize + 2
+    font.weight: 500
+}

reusables/CustomText.qml

@@ -3,6 +3,7 @@ import "../settings/"
 import "../"
 
 Text {
+    font.weight: 900
     color: Colors.foreground
     font.family: Settings.config.font
     font.pixelSize: Settings.config.fontSize

settings/Settings.qml

@@ -22,7 +22,7 @@ Singleton {
         adapter: JsonAdapter {
             id: settingsAdapter
             property var currentWall: "/home/lucy/.walls/faris.jpg"
-            property var barHeight: 18
+            property var barHeight: 28
             property var font: "JetBrainsMono Nerd Font"
             property var fontSize: 12
             property var rounding: 10

settings/config.json

@@ -1,5 +1,5 @@
 {
-    "barHeight": 18,
+    "barHeight": 28,
     "currentWall": "/home/lucy/.walls/faris.jpg",
     "floating": true,
     "font": "JetBrainsMono Nerd Font",