Scrolling text media widget and larger size variant

Common/SettingsData.qml

@@ -44,7 +44,7 @@ Singleton {
   property bool showWorkspaceIndex: false
   property bool showWorkspacePadding: false
   property bool clockCompactMode: false
-  property bool mediaCompactMode: false
+  property int mediaSize: 1
   property var topBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
   property var topBarCenterWidgets: ["music", "clock", "weather"]
   property var topBarRightWidgets: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
@@ -202,8 +202,7 @@ Singleton {
             !== undefined ? settings.showWorkspacePadding : false
         clockCompactMode = settings.clockCompactMode
             !== undefined ? settings.clockCompactMode : false
-        mediaCompactMode = settings.mediaCompactMode
+        mediaSize = settings.mediaSize !== undefined ? settings.mediaSize : (settings.mediaCompactMode !== undefined ? (settings.mediaCompactMode ? 0 : 1) : 1)
-            !== undefined ? settings.mediaCompactMode : false
         if (settings.topBarWidgetOrder) {
           topBarLeftWidgets = settings.topBarWidgetOrder.filter(
                 w => ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(
@@ -302,7 +301,7 @@ Singleton {
                                           "showWorkspaceIndex": showWorkspaceIndex,
                                           "showWorkspacePadding": showWorkspacePadding,
                                           "clockCompactMode": clockCompactMode,
-                                          "mediaCompactMode": mediaCompactMode,
+                                          "mediaSize": mediaSize,
                                           "topBarLeftWidgets": topBarLeftWidgets,
                                           "topBarCenterWidgets": topBarCenterWidgets,
                                           "topBarRightWidgets": topBarRightWidgets,
@@ -341,8 +340,8 @@ Singleton {
     saveSettings()
   }
 
-  function setMediaCompactMode(enabled) {
+  function setMediaSize(size) {
-    mediaCompactMode = enabled
+    mediaSize = size
     saveSettings()
   }
 

Modules/Settings/WidgetsTab.qml

@@ -614,11 +614,11 @@ Item {
                                                                   itemId,
                                                                   newSize)
                              }
-        onCompactModeChanged: (widgetId, enabled) => {
+        onCompactModeChanged: (widgetId, value) => {
                                 if (widgetId === "clock") {
-                                  SettingsData.setClockCompactMode(enabled)
+                                  SettingsData.setClockCompactMode(value)
                                 } else if (widgetId === "music") {
-                                  SettingsData.setMediaCompactMode(enabled)
+                                  SettingsData.setMediaSize(value)
                                 }
                               }
         onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -657,11 +657,11 @@ Item {
                                                                   itemId,
                                                                   newSize)
                              }
-        onCompactModeChanged: (widgetId, enabled) => {
+        onCompactModeChanged: (widgetId, value) => {
                                 if (widgetId === "clock") {
-                                  SettingsData.setClockCompactMode(enabled)
+                                  SettingsData.setClockCompactMode(value)
                                 } else if (widgetId === "music") {
-                                  SettingsData.setMediaCompactMode(enabled)
+                                  SettingsData.setMediaSize(value)
                                 }
                               }
         onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -700,11 +700,11 @@ Item {
                                                                   itemId,
                                                                   newSize)
                              }
-        onCompactModeChanged: (widgetId, enabled) => {
+        onCompactModeChanged: (widgetId, value) => {
                                 if (widgetId === "clock") {
-                                  SettingsData.setClockCompactMode(enabled)
+                                  SettingsData.setClockCompactMode(value)
                                 } else if (widgetId === "music") {
-                                  SettingsData.setMediaCompactMode(enabled)
+                                  SettingsData.setMediaSize(value)
                                 }
                               }
         onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {

Modules/Settings/WidgetsTabSection.qml

@@ -18,7 +18,7 @@ Column {
   signal addWidget(string sectionId)
   signal removeWidget(string sectionId, int widgetIndex)
   signal spacerSizeChanged(string sectionId, string itemId, int newSize)
-  signal compactModeChanged(string widgetId, bool enabled)
+  signal compactModeChanged(string widgetId, var value)
   signal gpuSelectionChanged(string sectionId, int widgetIndex, int selectedIndex)
 
   width: parent.width
@@ -236,33 +236,56 @@ Column {
               }
             }
 
-            Item {
+            Row {
-              width: 32
+              spacing: Theme.spacingXS
-              height: 32
               visible: modelData.id === "clock" || modelData.id === "music"
               
               DankActionButton {
-                id: compactModeButton
+                id: smallSizeButton
-                anchors.fill: parent
+                buttonSize: 28
-                buttonSize: 32
+                visible: modelData.id === "music"
-                iconName: (modelData.id === "clock"
+                iconName: "photo_size_select_small"
-                           && SettingsData.clockCompactMode)
+                iconSize: 16
-                          || (modelData.id === "music"
+                iconColor: SettingsData.mediaSize === 0 ? Theme.primary : Theme.outline
-                              && SettingsData.mediaCompactMode) ? "zoom_out" : "zoom_in"
-                iconSize: 18
-                iconColor: ((modelData.id === "clock"
-                             && SettingsData.clockCompactMode)
-                            || (modelData.id === "music"
-                                && SettingsData.mediaCompactMode)) ? Theme.primary : Theme.outline
                 onClicked: {
-                  if (modelData.id === "clock") {
+                  root.compactModeChanged("music", 0)
-                    root.compactModeChanged("clock",
-                                            !SettingsData.clockCompactMode)
-                  } else if (modelData.id === "music") {
-                    root.compactModeChanged("music",
-                                            !SettingsData.mediaCompactMode)
                 }
               }
+              
+              DankActionButton {
+                id: mediumSizeButton
+                buttonSize: 28
+                visible: modelData.id === "music"
+                iconName: "photo_size_select_actual"
+                iconSize: 16
+                iconColor: SettingsData.mediaSize === 1 ? Theme.primary : Theme.outline
+                onClicked: {
+                  root.compactModeChanged("music", 1)
+                }
+              }
+              
+              DankActionButton {
+                id: largeSizeButton
+                buttonSize: 28
+                visible: modelData.id === "music"
+                iconName: "photo_size_select_large"
+                iconSize: 16
+                iconColor: SettingsData.mediaSize === 2 ? Theme.primary : Theme.outline
+                onClicked: {
+                  root.compactModeChanged("music", 2)
+                }
+              }
+              
+              DankActionButton {
+                id: compactModeButton
+                buttonSize: 28
+                visible: modelData.id === "clock"
+                iconName: SettingsData.clockCompactMode ? "zoom_out" : "zoom_in"
+                iconSize: 16
+                iconColor: SettingsData.clockCompactMode ? Theme.primary : Theme.outline
+                onClicked: {
+                  root.compactModeChanged("clock", !SettingsData.clockCompactMode)
+                }
               }
 
               Rectangle {
@@ -273,8 +296,7 @@ Column {
                 color: Theme.surfaceContainer
                 border.color: Theme.outline
                 border.width: 1
-                visible: compactModeButton.children[1]
+                visible: false
-                         && compactModeButton.children[1].containsMouse
                 opacity: visible ? 1 : 0
                 x: -width - Theme.spacingS
                 y: (parent.height - height) / 2

Modules/TopBar/Media.qml

@@ -10,9 +10,19 @@ Rectangle {
   readonly property MprisPlayer activePlayer: MprisController.activePlayer
   readonly property bool playerAvailable: activePlayer !== null
   property bool compactMode: false
-  readonly property int baseContentWidth: mediaRow.implicitWidth + Theme.spacingS * 2
+  readonly property int textWidth: {
-  readonly property int normalContentWidth: Math.min(280, baseContentWidth)
+    switch(SettingsData.mediaSize) {
-  readonly property int compactContentWidth: Math.min(120, baseContentWidth)
+      case 0: return 0  // No text in small mode
+      case 2: return 180  // Large text area
+      default: return 120  // Medium text area  
+    }
+  }
+  
+  readonly property int currentContentWidth: {
+    // AudioViz (20) + spacing + text + spacing + controls (~90) + padding
+    const baseWidth = 20 + Theme.spacingXS + 90 + Theme.spacingS * 2
+    return baseWidth + textWidth + (textWidth > 0 ? Theme.spacingXS : 0)
+  }
   property string section: "center"
   property var popupTarget: null
   property var parentScreen: null
@@ -34,7 +44,7 @@ Rectangle {
       PropertyChanges {
         target: root
         opacity: 1
-        width: SettingsData.mediaCompactMode ? compactContentWidth : normalContentWidth
+        width: currentContentWidth
       }
     },
     State {
@@ -92,13 +102,17 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
       }
 
-      StyledText {
+      Rectangle {
-        id: mediaText
+        id: textContainer
         
         anchors.verticalCenter: parent.verticalCenter
-        width: SettingsData.mediaCompactMode ? 60 : 140
+        width: textWidth
-        visible: !SettingsData.mediaCompactMode
+        height: 20
-        text: {
+        visible: SettingsData.mediaSize > 0
+        clip: true
+        color: "transparent"
+        
+        property string displayText: {
           if (!activePlayer || !activePlayer.trackTitle)
             return ""
 
@@ -119,12 +133,54 @@ Rectangle {
           }
           return subtitle.length > 0 ? title + " • " + subtitle : title
         }
+
+        StyledText {
+          id: mediaText
+
+          anchors.verticalCenter: parent.verticalCenter
+          text: textContainer.displayText
           font.pixelSize: Theme.fontSizeSmall
           color: Theme.surfaceText
           font.weight: Font.Medium
-        elide: Text.ElideRight
           wrapMode: Text.NoWrap
-        maximumLineCount: 1
+          
+          property bool needsScrolling: implicitWidth > textContainer.width
+          property real scrollOffset: 0
+          
+          x: needsScrolling ? -scrollOffset : 0
+          
+          SequentialAnimation {
+            id: scrollAnimation
+            running: mediaText.needsScrolling && textContainer.visible
+            loops: Animation.Infinite
+            
+            PauseAnimation { duration: 2000 }
+            
+            NumberAnimation {
+              target: mediaText
+              property: "scrollOffset"
+              from: 0
+              to: mediaText.implicitWidth - textContainer.width + 5
+              duration: 5000
+              easing.type: Easing.Linear
+            }
+            
+            PauseAnimation { duration: 2000 }
+            
+            NumberAnimation {
+              target: mediaText
+              property: "scrollOffset"
+              to: 0
+              duration: 5000
+              easing.type: Easing.Linear
+            }
+          }
+          
+          onTextChanged: {
+            scrollOffset = 0
+            scrollAnimation.restart()
+          }
+        }
 
         MouseArea {
           anchors.fill: parent