new settings options and integrate them into bar

modules/Bar/Bar.qml

@@ -7,9 +7,14 @@ import qs
 Variants {
     model: Quickshell.screens
     delegate: PanelWindow {
-	required property ShellScreen modelData
-	screen: modelData
         id: root
+        required property ShellScreen modelData
+        margins {
+            top: Settings.config.floating ? Settings.config.margins : 0
+            left: Settings.config.floating ? Settings.config.margins : 0
+            right: Settings.config.floating ? Settings.config.margins : 0
+        }
+        screen: modelData
         anchors {
             top: true
             left: true
@@ -19,16 +24,19 @@ Variants {
         color: "transparent"
         Rectangle {
             id: bar
+            radius: Settings.config.floating ? Settings.config.rounding * 2 : 0
             anchors.fill: parent
             color: ThemeLoader.colors.base00
             RowLayout {
                 id: left
-		anchors.leftMargin: 10
+                anchors.leftMargin: Settings.config.floating ? Settings.config.barHeight / 2  - 10: 10
                 anchors {
                     left: parent.left
                     verticalCenter: parent.verticalCenter
                 }
-                Ws {barScreen: root.modelData}
+                Ws {
+                    barScreen: root.modelData
+                }
                 MPris {}
             }
             RowLayout {
@@ -43,7 +51,10 @@ Variants {
                 anchors {
                     right: parent.right
                     verticalCenter: parent.verticalCenter
+                    rightMargin: Settings.config.floating ? Settings.config.barHeight / 2 - 10 : 10
                 }
+                Clock {}
+                StatusIcons {}
             }
         }
     }

modules/Bar/Clock.qml

@@ -0,0 +1,22 @@
+import Quickshell
+import QtQuick
+import qs.settings
+import qs
+import qs.widgets
+
+Rectangle {
+    id: root
+    color: ThemeLoader.colors.base03
+    implicitWidth: clockText.implicitWidth + 14
+    implicitHeight: Settings.config.barHeight / 2 + 6
+    radius: Settings.config.rounding
+    SystemClock {
+        id: clock
+        precision: SystemClock.Minutes
+    }
+    CText {
+        id: clockText
+        anchors.centerIn: root
+        text: Qt.formatDateTime(clock.date, "hh:mm")
+    }
+}

modules/Bar/MPris.qml

@@ -9,10 +9,11 @@ import qs.widgets
 Rectangle {
     id: root
     color: ThemeLoader.colors.base03
-    implicitWidth: playingSong.implicitWidth + 14
+    implicitWidth: songLayout.implicitWidth + 14
     implicitHeight: Settings.config.barHeight / 2 + 6
     radius: Settings.config.rounding
     property var spotify: root.getSpotify()
+    visible: getSpotify() == null ? false : true
 
     function getSpotify() {
         for (var i = 0; i < Mpris.players.values.length; i++) {
@@ -22,9 +23,14 @@ Rectangle {
         }
         return null;
     }
+    RowLayout {
+        id: songLayout
+        anchors.centerIn: parent
         CText {
             id: playingSong
-        anchors.centerIn: parent
+            Layout.maximumWidth: 400
             text: root.spotify == null ? "" : root.spotify.trackTitle + " - " + root.spotify.trackArtist
+            elide: Text.ElideRight
+        }
     }
 }

modules/Bar/StatusIcons.qml

@@ -0,0 +1,83 @@
+import Quickshell.Services.UPower
+import Quickshell.Services.Pipewire
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: root
+    color: ThemeLoader.colors.base03
+    implicitWidth: iconLayout.implicitWidth + 14
+    implicitHeight: Settings.config.barHeight / 2 + 6
+    radius: Settings.config.rounding
+    property var battery: UPower.displayDevice
+    property var percentage: UPower.displayDevice.percentage
+    property bool charging: UPower.displayDevice.state == UPowerDeviceState.Charging
+    property bool hasBattery: UPower.displayDevice.isLaptopBattery
+    property var audio: Pipewire.ready ? Pipewire.defaultAudioSink : ""
+    property var audioPercentage: Pipewire.ready ? Pipewire.defaultAudioSink.audio.volume : 0
+    property bool audioMute: Pipewire.ready ? Pipewire.defaultAudioSink.audio.muted : false
+
+    function getBatteryIcon() {
+        if (charging) {
+            return "\uf250";
+        }
+        if (percentage < 0.12) {
+            return "\uf30d";
+        }
+        if (percentage < 0.24) {
+            return "\uf257";
+        }
+        if (percentage < 0.36) {
+            return "\uf256";
+        }
+        if (percentage < 0.48) {
+            return "\uf255";
+        }
+        if (percentage < 0.60) {
+            return "\uf254";
+        }
+        if (percentage < 0.72) {
+            return "\uf253";
+        }
+        if (percentage < 0.84) {
+            return "\uf252";
+        }
+        if (percentage > 0.84) {
+            return "\uf24f";
+        }
+    }
+    function getVolumeIcon() {
+        if (audioMute) {
+            return "\ue04f";
+        }
+        if (audioPercentage < 0.33) {
+            return "\ue04e";
+        }
+        if (audioPercentage < 0.66) {
+            return "\ue04d";
+        }
+        if (audioPercentage > 0.66) {
+            return "\ue050";
+        }
+    }
+    RowLayout {
+        id: iconLayout
+        anchors.centerIn: parent
+        CIcon {
+            id: batteryIcon
+            text: root.getBatteryIcon()
+        }
+        CIcon {
+            id: volIcon
+            text: root.getVolumeIcon()
+        }
+    }
+
+    property var audioSink: Pipewire.defaultAudioSink
+    PwObjectTracker {
+        objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
+    }
+}

modules/Bar/Title.qml

@@ -1,6 +1,7 @@
 import Quickshell
 import Quickshell.Wayland
 import QtQuick
+import QtQuick.Layouts
 import qs
 import qs.widgets
 import qs.settings
@@ -12,10 +13,14 @@ Rectangle {
     radius: Settings.config.rounding
     color: active ? ThemeLoader.colors.base03 : "transparent"
     implicitHeight: Settings.config.barHeight / 2 + 6
-    implicitWidth: titleText.implicitWidth + 14
+    implicitWidth: titleText.width + 14
-    CText {
+    RowLayout {
 	anchors.centerIn: parent
+        CText {
             id: titleText
+	    Layout.maximumWidth: 300
             text: root.activeWindow ? root.activeWindow.activated ? root.activeWindow.title : "" : ""
+            elide: Text.ElideRight   // Allows wrapping
+        }
     }
 }

settings/Settings.qml

@@ -8,15 +8,16 @@ Singleton {
     FileView {
         id: settingsView
         path: "file:///home/lucy/.config/qs.json"
-        onAdapterUpdated: writeAdapter()
+	onFileChanged: reload()
-	onDataChanged: writeAdapter()
+	watchChanges: true
         adapter: JsonAdapter {
             id: settingsAdapter
-            property int barHeight: 40
+            property int barHeight
-            property int rounding: 16
+            property int rounding
             property bool floating
             property string font
-            property int fontSize: 14
+            property int fontSize
+            property int margins
         }
     }
 }

widgets/CIcon.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import qs
+import qs.settings
+
+Text {
+    id: root
+    color: ThemeLoader.colors.base05
+    property real iconSize: 14
+    property real fill: 1
+    renderType: Text.NativeRendering
+    font {
+        family: "Material Symbols Rounded"
+        pointSize: iconSize
+        variableAxes: {
+            "FILL": fill.toFixed(1),
+            "opsz": iconSize
+        }
+    }
+}