MediaMini rebuilt to behave the same as activewindow

Modules/Bar/ActiveWindow.qml

@@ -10,7 +10,7 @@ Row {
   id: root
   anchors.verticalCenter: parent.verticalCenter
   spacing: Style.marginSmall * scaling
-  visible: Settings.data.bar.showActiveWindow
+  visible: (Settings.data.bar.showActiveWindow && getTitle() !== "")
 
   property bool showingFullTitle: false
   property int lastWindowIndex: -1
@@ -94,7 +94,8 @@ Row {
 
           // If hovered or just switched window, show up to 300 pixels
           // If not hovered show up to 150 pixels
-          width: (showingFullTitle || mouseArea.containsMouse) ? Math.min(fullTitleMetrics.contentWidth, 300 * scaling) : Math.min(
+          width: (showingFullTitle || mouseArea.containsMouse) ? Math.min(fullTitleMetrics.contentWidth,
+                                                                          300 * scaling) : Math.min(
                                                                    fullTitleMetrics.contentWidth, 150 * scaling)
           text: getTitle()
           font.pointSize: Style.fontSizeReduced * scaling
@@ -102,7 +103,7 @@ Row {
           elide: Text.ElideRight
           anchors.verticalCenter: parent.verticalCenter
           verticalAlignment: Text.AlignVCenter
-          color: Color.mTertiary
+          color: Color.mSecondary
 
           Behavior on width {
             NumberAnimation {

Modules/Bar/MediaMini.qml

@@ -1,54 +1,92 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
 import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Item {
+Row {
   id: root
-
+  anchors.verticalCenter: parent.verticalCenter
-  width: visible ? mediaRow.width : 0
+  spacing: Style.marginSmall * scaling
-  height: Style.barHeight * scaling
   visible: Settings.data.bar.showMedia && (MediaService.canPlay || MediaService.canPause)
 
-  RowLayout {
+  function getTitle() {
-    id: mediaRow
+    return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
-    height: parent.height
+  }
-    spacing: Style.spacingTiniest * scaling
 
-    // NIconButton {
+  //  A hidden text element to safely measure the full title width
-    //   icon: MediaService.isPlaying ? "pause" : "play_arrow"
-    //   tooltipText: "Play/pause media"
-    //   sizeMultiplier: 0.8
-    //   showBorder: false
-    //   onClicked: MediaService.playPause()
-    // }
   NText {
+    id: fullTitleMetrics
+    visible: false
+    text: titleText.text
+    font: titleText.font
+  }
+
+  Rectangle {
+    // Let the Rectangle size itself based on its content (the Row)
+    width: row.width + Style.marginMedium * scaling * 2
+    height: row.height + Style.marginSmall * scaling
+    color: Color.mSurfaceVariant
+    radius: Style.radiusSmall * scaling
+    anchors.verticalCenter: parent.verticalCenter
+
+    Item {
+      id: mainContainer
+      anchors.fill: parent
+      anchors.leftMargin: Style.marginSmall * scaling
+      anchors.rightMargin: Style.marginSmall * scaling
+
+      Row {
+        id: row
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Style.marginTiny * scaling
+
+        // Window icon
+        NText {
+          id: windowIcon
           text: MediaService.isPlaying ? "pause" : "play_arrow"
           font.family: "Material Symbols Outlined"
           font.pointSize: Style.fontSizeLarge * scaling
           verticalAlignment: Text.AlignVCenter
+          anchors.verticalCenter: parent.verticalCenter
+          visible: getTitle() !== ""
+        }
 
+        NText {
+          id: titleText
+
+          // If hovered or just switched window, show up to 300 pixels
+          // If not hovered show up to 150 pixels
+          width: (mouseArea.containsMouse) ? Math.min(fullTitleMetrics.contentWidth,
+                                                                          400 * scaling) : Math.min(
+                                                                   fullTitleMetrics.contentWidth, 150 * scaling)
+          text: getTitle()
+          font.pointSize: Style.fontSizeReduced * scaling
+          font.weight: Style.fontWeightBold
+          elide: Text.ElideRight
+          anchors.verticalCenter: parent.verticalCenter
+          verticalAlignment: Text.AlignVCenter
+          color: Color.mSecondary
+
+          Behavior on width {
+            NumberAnimation {
+              duration: Style.animationSlow
+              easing.type: Easing.InOutCubic
+            }
+          }
+        }
+      }
+
+      // Mouse area for hover detection
       MouseArea {
-        id: titleContainerMouseArea
+        id: mouseArea
         anchors.fill: parent
-
+        hoverEnabled: true
-        onClicked: {
+        cursorShape: Qt.PointingHandCursor
         onClicked: MediaService.playPause()
       }
     }
   }
-
-    // Track info
-    NText {
-      text: MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - {MediaService.trackArtist}` : "")
-      font.pointSize: Style.fontSizeReduced * scaling
-      font.weight: Style.fontWeightBold
-      elide: Text.ElideRight
-      color: Color.mSecondary
-      verticalAlignment: Text.AlignVCenter
-      Layout.maximumWidth: 200 * scaling
-      Layout.alignment: Qt.AlignVCenter
-    }
-  }
 }