minor style changes and add tooltips

modules/bar/Bar.qml

@@ -39,7 +39,7 @@ Variants {
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
                 Workspaces {
-                    Layout.leftMargin: 5
+                    Layout.leftMargin: Settings.config.floating ? 5 : 20
                     property var screen: root.modelData
                 }
                 Title {}
@@ -59,7 +59,10 @@ Variants {
                 anchors.verticalCenter: parent.verticalCenter
                 SysTray {}
                 StatusIcons {
-                    Layout.rightMargin: 5
+                    margin: Layout.rightMargin
+                    barWindow: root
+                    barContainer: container
+                    Layout.rightMargin: Settings.config.floating ? 5 : 20
                 }
             }
         }

modules/bar/StatusIcons.qml

@@ -9,118 +9,50 @@ import QtQuick.Layouts
 import qs
 import qs.reusables
 import qs.settings
+import "functions.js" as Fn
 
 Rectangle {
     id: root
-    implicitWidth: statusLayout.implicitWidth + 10
+    implicitWidth: statusLayout.implicitWidth + 20
     implicitHeight: Settings.config.barHeight - 10
     color: Colors.surfaceContainer
     radius: implicitHeight / 2
+    required property var barWindow
+    required property var barContainer
+    required property var margin
     property var sink: Pipewire.defaultAudioSink
     property var sinkReady: Pipewire.defaultAudioSink.ready
     property var bat: UPower.displayDevice
+    property var perc: UPower.displayDevice.percentage
+    property var vol: Math.floor(Pipewire.defaultAudioSink.audio.volume * 100)
     Process {
         id: lowBat
         running: false
         command: ["sh", "-c", "notify-send", "'Low battery!'", "'Plug in your device!'"]
     }
-    // wifi functions
+    PopupWindow {
-    function getIcon(device) {
+        id: batPopup
-        if (device.type === DeviceType.Wifi) {
+        property string popupText
-            for (var i = 0; i < device.networks.values.length; i++) {
+        implicitWidth: root.width + 5
-                var net = device.networks.values[i];
+        implicitHeight: 30
-                if (net.connected) {
+        anchor.window: root.barWindow
-                    if (net.signalStrength <= 0.20)
+        anchor.rect.y: root.barContainer.height + 5
-                        return "\uf0b0";
+        anchor.rect.x: root.barContainer.width - root.width - root.margin
-                    //signa_wifi_0_bar
+        color: "transparent"
-                    if (net.signalStrength <= 0.40)
+        Rectangle {
-                        return "\uebe4";
+            anchors.fill: parent
-                    //network_wifi_1_bar
+            color: Colors.surfaceContainer
-                    if (net.signalStrength <= 0.60)
+            border.width: 5
-                        return "\uebd6";
+            border.color: Colors.surface
-                    //network_wifi_2_bar
+            radius: Settings.config.floating ? height / 2 : Settings.config.screenCornerRadius
-                    if (net.signalStrength <= 0.80)
+
-                        return "\uebe1";
+            CustomText {
-                    //network_wifi_3_bar
+                anchors.centerIn: parent
-                    if (net.signalStrength >= 0.80)
+                text: batPopup.popupText
-                        return "\ue1d8";
-                    // signal_wifi_4_bar
-                }
             }
-            return "\ue1da";
-        } else if (device.connected) {
-            return "settings_ethernet";
-        }
-        return "\ue1da";
-        // signal_wifi_off
-    }
-
-    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
-    function getBatteryIcon() {
-        if (UPower.displayDevice.state == UPowerDeviceState.Charging) {
-            return "battery_android_frame_bolt";
-        }
-        if (frame1) {
-            lowBat.running = true;
-            return "battery_android_alert";
-        }
-        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";
         }
     }
 
-    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";
-    }
-    // pipewire function
-    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";
-    }
     RowLayout {
         id: statusLayout
         anchors.centerIn: parent
@@ -131,7 +63,7 @@ Rectangle {
             PwObjectTracker {
                 objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
             }
-            text: root.getVolumeIcon()
+            text: Fn.getVolumeIcon()
             MouseArea {
                 id: pavuArea
                 Process {
@@ -143,6 +75,13 @@ Rectangle {
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.PointingHandCursor
                 hoverEnabled: true
+                onEntered: {
+                    batPopup.visible = true;
+                    batPopup.popupText = "Volume: " + root.vol + "%";
+                }
+                onExited: {
+                    batPopup.visible = false;
+                }
             }
         }
 
@@ -155,13 +94,26 @@ Rectangle {
                 id: netIcon
                 Layout.alignment: Qt.AlignVCenter
                 required property var modelData
-                text: root.getIcon(modelData)
+                text: Fn.getIcon(modelData)
             }
         }
         CustomIcon {
             id: batIcon
             Layout.alignment: Qt.AlignVCenter
-            text: root.getBatteryIcon()
+            text: Fn.getBatteryIcon(root.perc)
+            MouseArea {
+                id: batHover
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                hoverEnabled: true
+                onEntered: {
+                    batPopup.visible = true;
+                    batPopup.popupText = "Battery: " + Math.floor(UPower.displayDevice.percentage * 100) + "%";
+                }
+                onExited: {
+                    batPopup.visible = false;
+                }
+            }
         }
         CustomIcon {
             id: settingsIcon

modules/bar/SysTray.qml

@@ -5,7 +5,7 @@ import qs
 
 Rectangle {
     id: root
-    implicitWidth: trayRow.implicitWidth + 10
+    implicitWidth: implicitHeight + 2
     implicitHeight: Settings.config.barHeight - 10
     radius: implicitHeight / 2
     color: Colors.surfaceContainer

modules/bar/Title.qml

@@ -40,10 +40,7 @@ Rectangle {
                 Layout.rightMargin: 10
                 Layout.maximumWidth: 300
                 text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "Desktop" : "Desktop"
-                onTextChanged: {
+                onTextChanged: {}
-                    console.log(root.activeWindow.title);
-                    console.log(icon.source);
-                }
                 elide: Text.ElideRight
             }
         }

modules/bar/functions.js

@@ -0,0 +1,91 @@
+    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 getBatteryIcon(perc) {
+        if (UPower.displayDevice.state == UPowerDeviceState.Charging) {
+            return "battery_android_frame_bolt";
+        }
+        if (perc <= 0.16) {
+            lowBat.running = true;
+            return "battery_android_alert";
+        }
+        if (perc < 0.32) {
+            return "battery_android_frame_2";
+        }
+        if (perc < 0.48) {
+            return "battery_android_frame_3";
+        }
+        if (perc < 0.74) {
+            return "battery_android_frame_4";
+        }
+        if (perc < 0.9) {
+            return "battery_android_frame_5";
+        }
+        if (perc == 1) {
+            return "battery_android_frame_full";
+        }
+    }
+
+    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";
+    }
+    // pipewire function
+    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";
+    }
+

modules/widgets/settingsapp/Appearance.qml

@@ -27,6 +27,8 @@ ClippingWrapperRectangle {
     anchors.centerIn: parent
     clip: true
     color: Colors.surfaceContainerHigh
+    border.color: Colors.primary
+    border.width: 1
     radius: 12
     margin: 20
 

modules/widgets/settingsapp/MainWindow.qml

@@ -50,7 +50,7 @@ FloatingWindow {
             Layout.preferredWidth: 200
             Layout.rightMargin: 0
             margin: 20
-    	    color: Colors.surfaceContainer
+            color: Colors.surfaceContainer
             radius: 12
             ListView {
                 id: pageView

modules/widgets/settingsapp/WelcomePage.qml

@@ -8,7 +8,9 @@ ClippingWrapperRectangle {
     id: root
     anchors.centerIn: parent
     clip: true
-    color: Colors.surfaceContainerLow
+    color: Colors.surfaceContainerHigh
+    border.width: 1
+    border.color: Colors.primary
     radius: 12
     margin: 20
     ColumnLayout {

reusables/CustomIcon.qml

@@ -11,7 +11,7 @@ Text {
     renderType: Text.NativeRendering
     font {
         hintingPreference: Font.PreferNoHinting
-        family: "Material Symbols Rounded"
+        family: "Material Symbols Outlined"
         pixelSize: iconSize
         weight: Font.Normal + (Font.DemiBold - Font.Normal) * truncatedFill
         variableAxes: {
@@ -19,12 +19,4 @@ Text {
             "opsz": iconSize
         }
     }
-
-    Behavior on fill { // Leaky leaky, no good
-        NumberAnimation {
-            duration: 200
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: [0.34, 0.80, 0.34, 1.00, 1, 1]
-        }
-    }
 }