bar: resources/music: dynamic show/hide

.config/quickshell/modules/bar/Battery.qml

@@ -80,7 +80,6 @@ Rectangle {
             NumberAnimation {
                 duration: Appearance.animation.elementDecel.duration
                 easing.type: Appearance.animation.elementDecel.type
-                easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
             }
 
         }

.config/quickshell/modules/bar/Media.qml

@@ -77,7 +77,7 @@ Rectangle {
             horizontalAlignment: Text.AlignHCenter
             elide: Text.ElideRight // Truncates the text on the right
             color: Appearance.colors.colOnLayer1
-            text: `${cleanedTitle} • ${activePlayer?.trackArtist}`
+            text: `${cleanedTitle}${activePlayer?.trackArtist ? ' • ' + activePlayer.trackArtist : ''}`
         }
 
     }

.config/quickshell/modules/bar/Resource.qml

@@ -5,32 +5,56 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
 
-RowLayout {
+Rectangle {
     required property string iconName
     required property double percentage
-    spacing: 4
+    property bool shown: true
+    clip: true
+    implicitWidth: resourceRowLayout.x < 0 ? 0 : childrenRect.width
+    implicitHeight: childrenRect.height
+    color: "transparent"
 
-    CircularProgress {
+    RowLayout {
-        Layout.alignment: Qt.AlignVCenter
+        spacing: 4
-        lineWidth: 2
+        id: resourceRowLayout
-        value: percentage
+        x: shown ? 0 : -resourceRowLayout.width
-        size: 26
-        secondaryColor: Appearance.m3colors.m3secondaryContainer
-        primaryColor: Appearance.m3colors.m3onSecondaryContainer
 
-        MaterialSymbol {
+        CircularProgress {
-            anchors.centerIn: parent
+            Layout.alignment: Qt.AlignVCenter
-            text: iconName
+            lineWidth: 2
-            font.pointSize: Appearance.font.pointSize.normal
+            value: percentage
-            color: Appearance.m3colors.m3onSecondaryContainer
+            size: 26
+            secondaryColor: Appearance.m3colors.m3secondaryContainer
+            primaryColor: Appearance.m3colors.m3onSecondaryContainer
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                text: iconName
+                font.pointSize: Appearance.font.pointSize.normal
+                color: Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Appearance.colors.colOnLayer1
+            text: `${Math.round(percentage * 100)}%`
+        }
+
+        Behavior on x {
+            NumberAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+            }
         }
 
     }
 
-    StyledText {
+    Behavior on implicitWidth {
-        Layout.alignment: Qt.AlignVCenter
+        NumberAnimation {
-        color: Appearance.colors.colOnLayer1
+            duration: Appearance.animation.elementDecel.duration
-        text: `${Math.round(percentage * 100)}%`
+            easing.type: Appearance.animation.elementDecel.type
+        }
     }
-
+}
-}

.config/quickshell/modules/bar/Resources.qml

@@ -4,9 +4,10 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
+import Quickshell.Services.Mpris
 
 Rectangle {
-    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: 32
     color: Appearance.colors.colLayer1
     radius: Appearance.rounding.small
@@ -14,20 +15,28 @@ Rectangle {
     RowLayout {
         id: rowLayout
 
-        spacing: 4
+        spacing: 0
-        anchors.centerIn: parent
+        anchors.fill: parent
+        anchors.leftMargin: 4
+        anchors.rightMargin: 4
 
         Resource {
             iconName: "memory"
             percentage: ResourceUsage.memoryUsedPercentage
         }
+
         Resource {
             iconName: "swap_horiz"
             percentage: ResourceUsage.swapUsedPercentage
+            shown: ConfigOptions.bar.resources.alwaysShowSwap || (MprisController.activePlayer == null)
+            Layout.leftMargin: shown ? 4 : 0
         }
+
         Resource {
             iconName: "settings_slow_motion"
             percentage: ResourceUsage.cpuUsage
+            shown: ConfigOptions.bar.resources.alwaysShowCpu || (MprisController.activePlayer == null)
+            Layout.leftMargin: shown ? 4 : 0
         }
 
     }

.config/quickshell/modules/common/Appearance.qml

@@ -146,7 +146,7 @@ Singleton {
         }
         property QtObject menuDecel: QtObject {
             property int duration: 350
-            property int type: Easing.OutQuint
+            property int type: Easing.OutExpo
         }
     }
 

.config/quickshell/modules/common/ConfigOptions.qml

@@ -6,6 +6,10 @@ Singleton {
     property QtObject bar: QtObject {
         property int workspacesShown: 10
         property int batteryLowThreshold: 20
+        property QtObject resources: QtObject {
+            property bool alwaysShowSwap: true
+            property bool alwaysShowCpu: false
+        }
     }
     property QtObject resources: QtObject {
         property int updateInterval: 3000

.config/quickshell/shell.qml

@@ -4,8 +4,11 @@ import QtQuick.Layouts
 import Quickshell
 import "./modules/bar"
 
+import QtQuick.Window
+
 ShellRoot {
     Bar {
     }
+    
 
 }