Merge branch 'main' of https://github.com/noctalia-dev/noctalia-shell

Modules/Bar/Widgets/MediaMini.qml

@@ -7,7 +7,7 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Row {
+RowLayout {
   id: root
 
   property ShellScreen screen
@@ -15,7 +15,7 @@ Row {
   readonly property real minWidth: 160
   readonly property real maxWidth: 400
 
-  anchors.verticalCenter: parent.verticalCenter
+  Layout.alignment: Qt.AlignVCenter
   spacing: Style.marginS * scaling
   visible: MediaService.currentPlayer !== null && MediaService.canPlay
   width: MediaService.currentPlayer !== null && MediaService.canPlay ? implicitWidth : 0
@@ -24,7 +24,6 @@ Row {
     return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
   }
 
-  //  A hidden text element to safely measure the full title width
   NText {
     id: fullTitleMetrics
     visible: false
@@ -34,169 +33,134 @@ Row {
 
   Rectangle {
     id: mediaMini
-
+    width: contentLayout.implicitWidth + Style.marginS * 2 * scaling
-    // Let the Rectangle size itself based on its content (the Row)
-    width: row.width + Style.marginM * 2 * scaling
-
     height: Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
     color: Color.mSurfaceVariant
+    Layout.alignment: Qt.AlignVCenter
 
-    anchors.verticalCenter: parent.verticalCenter
+    // --- Visualizer Loaders ---
-
+    Loader {
-    // Used to anchor the tooltip, so the tooltip does not move when the content expands
+      anchors.centerIn: parent
-    Item {
+      active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear"
-      id: anchor
+              && MediaService.isPlaying && MediaService.trackLength > 0
-      height: parent.height
+      z: 0
-      width: 200 * scaling
+      sourceComponent: LinearSpectrum {
+        width: mediaMini.width - Style.marginS * scaling
+        height: 20 * scaling
+        values: CavaService.values
+        fillColor: Color.mOnSurfaceVariant
+        opacity: 0.4
+      }
     }
 
-    Item {
+    Loader {
-      id: mainContainer
+      anchors.centerIn: parent
-      anchors.fill: parent
+      active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored"
+              && MediaService.isPlaying && MediaService.trackLength > 0
+      z: 0
+      sourceComponent: MirroredSpectrum {
+        width: mediaMini.width - Style.marginS * scaling
+        height: mediaMini.height - Style.marginS * scaling
+        values: CavaService.values
+        fillColor: Color.mOnSurfaceVariant
+        opacity: 0.4
+      }
+    }
+
+    Loader {
+      anchors.centerIn: parent
+      active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave"
+              && MediaService.isPlaying && MediaService.trackLength > 0
+      z: 0
+      sourceComponent: WaveSpectrum {
+        width: mediaMini.width - Style.marginS * scaling
+        height: mediaMini.height - Style.marginS * scaling
+        values: CavaService.values
+        fillColor: Color.mOnSurfaceVariant
+        opacity: 0.4
+      }
+    }
+
+    // --- Main Content Layout ---
+    RowLayout {
+      id: contentLayout
+      anchors.left: parent.left
+      anchors.verticalCenter: parent.verticalCenter
       anchors.leftMargin: Style.marginS * scaling
-      anchors.rightMargin: Style.marginS * scaling
+      spacing: Style.marginS * scaling
+      z: 1
 
-      Loader {
+      NIcon {
-        anchors.verticalCenter: parent.verticalCenter
+        id: windowIcon
-        anchors.horizontalCenter: parent.horizontalCenter
+        text: MediaService.isPlaying ? "pause" : "play_arrow"
-        active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear"
+        font.pointSize: Style.fontSizeL * scaling
-                && MediaService.isPlaying && MediaService.trackLength > 0
+        Layout.alignment: Qt.AlignVCenter
-        z: 0
+        visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible
+      }
 
-        sourceComponent: LinearSpectrum {
+      NImageCircled {
-          width: mainContainer.width - Style.marginS * scaling
+        id: trackArt
-          height: 20 * scaling
+        imagePath: MediaService.trackArtUrl
-          values: CavaService.values
+        fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
-          fillColor: Color.mOnSurfaceVariant
+        borderWidth: 0
-          opacity: 0.4
+        border.color: Color.transparent
-        }
+        Layout.preferredWidth: Math.round(18 * scaling)
+        Layout.preferredHeight: Math.round(18 * scaling)
+        Layout.alignment: Qt.AlignVCenter
+        visible: Settings.data.audio.showMiniplayerAlbumArt
+      }
 
-        Loader {
+      NText {
-          anchors.verticalCenter: parent.verticalCenter
+        id: titleText
-          anchors.horizontalCenter: parent.horizontalCenter
+        Layout.preferredWidth: {
-          active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored"
+          if (mouseArea.containsMouse) {
-                  && MediaService.isPlaying && MediaService.trackLength > 0
+            return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling))
-          z: 0
+          } else {
-
+            return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling))
-          sourceComponent: MirroredSpectrum {
-            width: mainContainer.width - Style.marginS * scaling
-            height: mainContainer.height - Style.marginS * scaling
-            values: CavaService.values
-            fillColor: Color.mOnSurfaceVariant
-            opacity: 0.4
           }
         }
+        text: getTitle()
+        font.pointSize: Style.fontSizeS * scaling
+        font.weight: Style.fontWeightMedium
+        elide: Text.ElideRight
+        color: Color.mTertiary
+        Layout.alignment: Qt.AlignVCenter
 
-        Loader {
+        Behavior on Layout.preferredWidth {
-          anchors.verticalCenter: parent.verticalCenter
+          NumberAnimation {
-          anchors.horizontalCenter: parent.horizontalCenter
+            duration: Style.animationSlow
-          active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave"
+            easing.type: Easing.InOutCubic
-                  && MediaService.isPlaying && MediaService.trackLength > 0
-          z: 0
-
-          sourceComponent: WaveSpectrum {
-            width: mainContainer.width - Style.marginS * scaling
-            height: mainContainer.height - Style.marginS * scaling
-            values: CavaService.values
-            fillColor: Color.mOnSurfaceVariant
-            opacity: 0.4
           }
         }
       }
+    }
 
-      Row {
+    MouseArea {
-        id: row
+      id: mouseArea
-        anchors.verticalCenter: parent.verticalCenter
+      anchors.fill: parent
-        spacing: Style.marginS * scaling
+      hoverEnabled: true
-        z: 1 // Above the visualizer
+      cursorShape: Qt.PointingHandCursor
-
+      acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-        NIcon {
+      onClicked: mouse => {
-          id: windowIcon
+                   if (mouse.button === Qt.LeftButton) {
-          text: MediaService.isPlaying ? "pause" : "play_arrow"
+                     MediaService.playPause()
-          font.pointSize: Style.fontSizeL * scaling
+                   } else if (mouse.button == Qt.RightButton) {
-          verticalAlignment: Text.AlignVCenter
+                     MediaService.next()
-          anchors.verticalCenter: parent.verticalCenter
+                     tooltip.visible = false
-          visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible
+                   } else if (mouse.button == Qt.MiddleButton) {
-        }
+                     MediaService.previous()
-
+                     tooltip.visible = false
-        Column {
-          anchors.verticalCenter: parent.verticalCenter
-          visible: Settings.data.audio.showMiniplayerAlbumArt
-
-          Item {
-            width: Math.round(18 * scaling)
-            height: Math.round(18 * scaling)
-
-            NImageCircled {
-              id: trackArt
-              anchors.fill: parent
-              imagePath: MediaService.trackArtUrl
-              fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
-              borderWidth: 0
-              border.color: Color.transparent
-            }
-          }
-        }
-
-        NText {
-          id: titleText
-
-          // For short titles, show full. For long titles, truncate and expand on hover
-          width: {
-            if (mouseArea.containsMouse) {
-              return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling))
-            } else {
-              return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling))
-            }
-          }
-          text: getTitle()
-          font.pointSize: Style.fontSizeS * scaling
-          font.weight: Style.fontWeightMedium
-          elide: Text.ElideRight
-          anchors.verticalCenter: parent.verticalCenter
-          verticalAlignment: Text.AlignVCenter
-          color: Color.mTertiary
-
-          Behavior on width {
-            NumberAnimation {
-              duration: Style.animationSlow
-              easing.type: Easing.InOutCubic
-            }
-          }
-        }
-      }
-
-      // Mouse area for hover detection
-      MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-        onClicked: mouse => {
-                     if (mouse.button === Qt.LeftButton) {
-                       MediaService.playPause()
-                     } else if (mouse.button == Qt.RightButton) {
-                       MediaService.next()
-                       // Need to hide the tooltip instantly
-                       tooltip.visible = false
-                     } else if (mouse.button == Qt.MiddleButton) {
-                       MediaService.previous()
-                       // Need to hide the tooltip instantly
-                       tooltip.visible = false
-                     }
                    }
-
+                 }
-        onEntered: {
+      onEntered: {
-          if (tooltip.text !== "") {
+        if (tooltip.text !== "") {
-            tooltip.show()
+          tooltip.show()
-          }
-        }
-        onExited: {
-          tooltip.hide()
         }
       }
+      onExited: {
+        tooltip.hide()
+      }
     }
   }
 
@@ -212,7 +176,7 @@ Row {
       }
       return str
     }
-    target: anchor
+    target: mediaMini
     positionAbove: Settings.data.bar.position === "bottom"
   }
 }

Modules/Bar/Widgets/SystemMonitor.qml

@@ -1,145 +1,146 @@
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
 import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Row {
+RowLayout {
   id: root
 
   property ShellScreen screen
   property real scaling: 1.0
 
-  anchors.verticalCenter: parent.verticalCenter
+  Layout.alignment: Qt.AlignVCenter
   spacing: Style.marginS * scaling
 
   Rectangle {
-    // Let the Rectangle size itself based on its content (the Row)
+    Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling)
-    width: row.width + Style.marginM * scaling * 2
+    Layout.preferredWidth: mainLayout.implicitWidth + Style.marginM * scaling * 2
+    Layout.alignment: Qt.AlignVCenter
 
-    height: Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
     color: Color.mSurfaceVariant
 
-    anchors.verticalCenter: parent.verticalCenter
+    RowLayout {
-
+      id: mainLayout
-    Item {
-      id: mainContainer
       anchors.fill: parent
       anchors.leftMargin: Style.marginS * scaling
       anchors.rightMargin: Style.marginS * scaling
+      spacing: Style.marginS * scaling
 
-      Row {
+      // CPU Usage Component
-        id: row
+      RowLayout {
-        anchors.verticalCenter: parent.verticalCenter
+        id: cpuUsageLayout
-        spacing: Style.marginS * scaling
+        spacing: Style.marginXS * scaling
-        Row {
+        Layout.alignment: Qt.AlignVCenter
-          id: cpuUsageLayout
-          spacing: Style.marginXS * scaling
 
-          NIcon {
+        NIcon {
-            id: cpuUsageIcon
+          id: cpuUsageIcon
-            text: "speed"
+          text: "speed"
-            anchors.verticalCenter: parent.verticalCenter
+          Layout.alignment: Qt.AlignVCenter
-          }
-
-          NText {
-            id: cpuUsageText
-            text: `${SystemStatService.cpuUsage}%`
-            font.family: Settings.data.ui.fontFixed
-            font.pointSize: Style.fontSizeS * scaling
-            font.weight: Style.fontWeightMedium
-            anchors.verticalCenter: parent.verticalCenter
-            verticalAlignment: Text.AlignVCenter
-            color: Color.mPrimary
-          }
         }
 
-        // CPU Temperature Component
+        NText {
-        Row {
+          id: cpuUsageText
-          id: cpuTempLayout
+          text: `${SystemStatService.cpuUsage}%`
-          // spacing is thin here to compensate for the vertical thermometer icon
+          font.family: Settings.data.ui.fontFixed
-          spacing: Style.marginXXS * scaling
+          font.pointSize: Style.fontSizeS * scaling
+          font.weight: Style.fontWeightMedium
+          Layout.alignment: Qt.AlignVCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mPrimary
+        }
+      }
 
-          NIcon {
+      // CPU Temperature Component
-            text: "thermometer"
+      RowLayout {
-            anchors.verticalCenter: parent.verticalCenter
+        id: cpuTempLayout
-          }
+        // spacing is thin here to compensate for the vertical thermometer icon
+        spacing: Style.marginXXS * scaling
+        Layout.alignment: Qt.AlignVCenter
 
-          NText {
+        NIcon {
-            text: `${SystemStatService.cpuTemp}°C`
+          text: "thermometer"
-            font.family: Settings.data.ui.fontFixed
+          Layout.alignment: Qt.AlignVCenter
-            font.pointSize: Style.fontSizeS * scaling
-            font.weight: Style.fontWeightMedium
-            anchors.verticalCenter: parent.verticalCenter
-            verticalAlignment: Text.AlignVCenter
-            color: Color.mPrimary
-          }
         }
 
-        // Memory Usage Component
+        NText {
-        Row {
+          text: `${SystemStatService.cpuTemp}°C`
-          id: memoryUsageLayout
+          font.family: Settings.data.ui.fontFixed
-          spacing: Style.marginXS * scaling
+          font.pointSize: Style.fontSizeS * scaling
+          font.weight: Style.fontWeightMedium
+          Layout.alignment: Qt.AlignVCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mPrimary
+        }
+      }
 
-          NIcon {
+      // Memory Usage Component
-            text: "memory"
+      RowLayout {
-            anchors.verticalCenter: parent.verticalCenter
+        id: memoryUsageLayout
-          }
+        spacing: Style.marginXS * scaling
+        Layout.alignment: Qt.AlignVCenter
 
-          NText {
+        NIcon {
-            text: `${SystemStatService.memoryUsageGb}G`
+          text: "memory"
-            font.family: Settings.data.ui.fontFixed
+          Layout.alignment: Qt.AlignVCenter
-            font.pointSize: Style.fontSizeS * scaling
-            font.weight: Style.fontWeightMedium
-            anchors.verticalCenter: parent.verticalCenter
-            verticalAlignment: Text.AlignVCenter
-            color: Color.mPrimary
-          }
         }
 
-        // Network Download Speed Component
+        NText {
-        Row {
+          text: `${SystemStatService.memoryUsageGb}G`
-          id: networkDownloadLayout
+          font.family: Settings.data.ui.fontFixed
-          spacing: Style.marginXS * scaling
+          font.pointSize: Style.fontSizeS * scaling
-          visible: Settings.data.bar.showNetworkStats
+          font.weight: Style.fontWeightMedium
+          Layout.alignment: Qt.AlignVCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mPrimary
+        }
+      }
 
-          NIcon {
+      // Network Download Speed Component
-            text: "download"
+      RowLayout {
-            anchors.verticalCenter: parent.verticalCenter
+        id: networkDownloadLayout
-          }
+        spacing: Style.marginXS * scaling
+        Layout.alignment: Qt.AlignVCenter
+        visible: Settings.data.bar.showNetworkStats
 
-          NText {
+        NIcon {
-            text: SystemStatService.formatSpeed(SystemStatService.rxSpeed)
+          text: "download"
-            font.family: Settings.data.ui.fontFixed
+          Layout.alignment: Qt.AlignVCenter
-            font.pointSize: Style.fontSizeS * scaling
-            font.weight: Style.fontWeightMedium
-            anchors.verticalCenter: parent.verticalCenter
-            verticalAlignment: Text.AlignVCenter
-            color: Color.mPrimary
-          }
         }
 
-        // Network Upload Speed Component
+        NText {
-        Row {
+          text: SystemStatService.formatSpeed(SystemStatService.rxSpeed)
-          id: networkUploadLayout
+          font.family: Settings.data.ui.fontFixed
-          spacing: Style.marginXS * scaling
+          font.pointSize: Style.fontSizeS * scaling
-          visible: Settings.data.bar.showNetworkStats
+          font.weight: Style.fontWeightMedium
+          Layout.alignment: Qt.AlignVCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mPrimary
+        }
+      }
 
-          NIcon {
+      // Network Upload Speed Component
-            text: "upload"
+      RowLayout {
-            anchors.verticalCenter: parent.verticalCenter
+        id: networkUploadLayout
-          }
+        spacing: Style.marginXS * scaling
+        Layout.alignment: Qt.AlignVCenter
+        visible: Settings.data.bar.showNetworkStats
 
-          NText {
+        NIcon {
-            text: SystemStatService.formatSpeed(SystemStatService.txSpeed)
+          text: "upload"
-            font.family: Settings.data.ui.fontFixed
+          Layout.alignment: Qt.AlignVCenter
-            font.pointSize: Style.fontSizeS * scaling
+        }
-            font.weight: Style.fontWeightMedium
+
-            anchors.verticalCenter: parent.verticalCenter
+        NText {
-            verticalAlignment: Text.AlignVCenter
+          text: SystemStatService.formatSpeed(SystemStatService.txSpeed)
-            color: Color.mPrimary
+          font.family: Settings.data.ui.fontFixed
-          }
+          font.pointSize: Style.fontSizeS * scaling
+          font.weight: Style.fontWeightMedium
+          Layout.alignment: Qt.AlignVCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mPrimary
         }
       }
     }

Services/SystemStatService.qml

@@ -22,7 +22,7 @@ Singleton {
     if (bytesPerSecond < 1024) {
       return bytesPerSecond.toFixed(0) + "B/s"
     } else if (bytesPerSecond < 1024 * 1024) {
-      return (bytesPerSecond / 1024).toFixed(1) + "KB/s"
+      return (bytesPerSecond / 1024).toFixed(0) + "KB/s"
     } else if (bytesPerSecond < 1024 * 1024 * 1024) {
       return (bytesPerSecond / (1024 * 1024)).toFixed(1) + "MB/s"
     } else {