Merge pull request #511 from sakarie9/activewindow-max-width

ActiveWindow: implement dynamic width with max width setting

Modules/Bar/Widgets/ActiveWindow.qml

@@ -35,7 +35,10 @@ Item {
   readonly property bool showIcon: (widgetSettings.showIcon !== undefined) ? widgetSettings.showIcon : widgetMetadata.showIcon
   readonly property string hideMode: (widgetSettings.hideMode !== undefined) ? widgetSettings.hideMode : widgetMetadata.hideMode
   readonly property string scrollingMode: (widgetSettings.scrollingMode !== undefined) ? widgetSettings.scrollingMode : (widgetMetadata.scrollingMode !== undefined ? widgetMetadata.scrollingMode : "hover")
-  readonly property int widgetWidth: (widgetSettings.width !== undefined) ? widgetSettings.width : Math.max(widgetMetadata.width, screen.width * 0.06)
+  
+  // Maximum widget width with user settings support
+  readonly property real maxWidth: (widgetSettings.maxWidth !== undefined) ? widgetSettings.maxWidth : Math.max(widgetMetadata.maxWidth, screen.width * 0.06)
+  readonly property bool useFixedWidth: (widgetSettings.useFixedWidth !== undefined) ? widgetSettings.useFixedWidth : widgetMetadata.useFixedWidth
 
   readonly property bool isVerticalBar: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right")
   readonly property bool hasFocusedWindow: CompositorService.getFocusedWindow() !== null
@@ -43,7 +46,7 @@ Item {
   readonly property string fallbackIcon: "user-desktop"
 
   implicitHeight: visible ? (isVerticalBar ? calculatedVerticalDimension() : Style.barHeight) : 0
-  implicitWidth: visible ? (isVerticalBar ? calculatedVerticalDimension() : widgetWidth) : 0
+  implicitWidth: visible ? (isVerticalBar ? calculatedVerticalDimension() : dynamicWidth) : 0
 
   // "visible": Always Visible, "hidden": Hide When Empty, "transparent": Transparent When Empty
   visible: hideMode !== "hidden" || hasFocusedWindow
@@ -59,6 +62,43 @@ Item {
     return Math.round((Style.baseWidgetSize - 5) * scaling)
   }
 
+  function calculateContentWidth() {
+    // Calculate the actual content width based on visible elements
+    var contentWidth = 0
+    var margins = Style.marginS * scaling * 2 // Left and right margins
+    
+    // Icon width (if visible)
+    if (showIcon) {
+      contentWidth += 18 * scaling
+      contentWidth += Style.marginS * scaling // Spacing after icon
+    }
+    
+    // Text width (use the measured width)
+    contentWidth += fullTitleMetrics.contentWidth
+    
+    // Additional small margin for text
+    contentWidth += Style.marginXXS * 2
+    
+    // Add container margins
+    contentWidth += margins
+    
+    return Math.ceil(contentWidth)
+  }
+
+  // Dynamic width: adapt to content but respect maximum width setting
+  readonly property real dynamicWidth: {
+    // If using fixed width mode, always use maxWidth
+    if (useFixedWidth) {
+      return maxWidth
+    }
+    // Otherwise, adapt to content
+    if (!hasFocusedWindow) {
+      return maxWidth
+    }
+    // Use content width but don't exceed user-set maximum width
+    return Math.min(calculateContentWidth(), maxWidth)
+  }
+
   function getAppIcon() {
     try {
       // Try CompositorService first
@@ -117,11 +157,19 @@ Item {
     visible: root.visible
     anchors.left: parent.left
     anchors.verticalCenter: parent.verticalCenter
-    width: isVerticalBar ? root.width : widgetWidth
+    width: isVerticalBar ? root.width : dynamicWidth
     height: isVerticalBar ? width : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
     color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
+    // Smooth width transition
+    Behavior on width {
+      NumberAnimation {
+        duration: Style.animationNormal
+        easing.type: Easing.InOutCubic
+      }
+    }
+
     Item {
       id: mainContainer
       anchors.fill: parent

Modules/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml

@@ -17,7 +17,8 @@ ColumnLayout {
   property bool valueShowIcon: widgetData.showIcon !== undefined ? widgetData.showIcon : widgetMetadata.showIcon
   property string valueHideMode: "hidden" // Default to 'Hide When Empty'
   property string valueScrollingMode: widgetData.scrollingMode || widgetMetadata.scrollingMode
-  property int valueWidth: widgetData.width !== undefined ? widgetData.width : widgetMetadata.width
+  property int valueMaxWidth: widgetData.maxWidth !== undefined ? widgetData.maxWidth : widgetMetadata.maxWidth
+  property bool valueUseFixedWidth: widgetData.useFixedWidth !== undefined ? widgetData.useFixedWidth : widgetMetadata.useFixedWidth
   property bool valueColorizeIcons: widgetData.colorizeIcons !== undefined ? widgetData.colorizeIcons : widgetMetadata.colorizeIcons
 
   Component.onCompleted: {
@@ -31,7 +32,8 @@ ColumnLayout {
     settings.hideMode = valueHideMode
     settings.showIcon = valueShowIcon
     settings.scrollingMode = valueScrollingMode
-    settings.width = parseInt(widthInput.text) || widgetMetadata.width
+    settings.maxWidth = parseInt(widthInput.text) || widgetMetadata.maxWidth
+    settings.useFixedWidth = valueUseFixedWidth
     settings.colorizeIcons = valueColorizeIcons
     return settings
   }
@@ -73,10 +75,18 @@ ColumnLayout {
   NTextInput {
     id: widthInput
     Layout.fillWidth: true
-    label: I18n.tr("bar.widget-settings.active-window.width.label")
-    description: I18n.tr("bar.widget-settings.active-window.width.description")
-    placeholderText: widgetMetadata.width
-    text: valueWidth
+    label: I18n.tr("bar.widget-settings.active-window.max-width.label")
+    description: I18n.tr("bar.widget-settings.active-window.max-width.description")
+    placeholderText: widgetMetadata.maxWidth
+    text: valueMaxWidth
+  }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.active-window.use-fixed-width.label")
+    description: I18n.tr("bar.widget-settings.active-window.use-fixed-width.description")
+    checked: valueUseFixedWidth
+    onToggled: checked => valueUseFixedWidth = checked
   }
 
   NComboBox {