feat(taskbar): add title display options and width settings

- Updated the Taskbar QML component to conditionally render titles and adjusted layout accordingly.
- Enhanced the settings UI to include toggles and sliders for the new title display options, ensuring they are only enabled for horizontal taskbars.
- Default values for the new settings are set to hide titles and a width of 120 pixels.

Assets/Translations/de.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Zeige nur Apps von dem Bildschirm, auf dem sich die Taskbar befindet.",
           "label": "Nur vom gleichen Bildschirm"
+        },
+        "show-title": {
+          "description": "Fenstertitel in der Taskleiste anzeigen.",
+          "description-disabled": "Vertikale Taskleiste unterstützt keine Titelanzeige.",
+          "label": "Titel anzeigen"
+        },
+        "title-width": {
+          "description": "Breite der Fenstertitel in der Taskleiste festlegen (in Pixel).",
+          "label": "Titelbreite",
+          "reset-tooltip": "Titelbreite zurücksetzen"
         }
       },
       "taskbar-grouped": {

Assets/Translations/en.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Show only apps from the output where the bar is located.",
           "label": "Only from same output"
+        },
+        "show-title": {
+          "description": "Display window titles in the taskbar.",
+          "description-disabled": "Vertical taskbar does not support showing titles.",
+          "label": "Show title"
+        },
+        "title-width": {
+          "description": "Set the width of window titles in the taskbar (in pixels).",
+          "label": "Title width",
+          "reset-tooltip": "Reset title width"
         }
       },
       "taskbar-grouped": {

Assets/Translations/es.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Muestra solo las aplicaciones del resultado donde se encuentra la barra.",
           "label": "Solo de la misma salida"
+        },
+        "show-title": {
+          "description": "Mostrar títulos de ventanas en la barra de tareas.",
+          "description-disabled": "La barra de tareas vertical no admite mostrar títulos.",
+          "label": "Mostrar título"
+        },
+        "title-width": {
+          "description": "Establecer el ancho de los títulos de ventanas en la barra de tareas (en píxeles).",
+          "label": "Ancho del título",
+          "reset-tooltip": "Restablecer ancho del título"
         }
       },
       "taskbar-grouped": {

Assets/Translations/fr.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Afficher uniquement les applications de la sortie où la barre est située.",
           "label": "Seulement à partir de la même sortie"
+        },
+        "show-title": {
+          "description": "Afficher les titres des fenêtres dans la barre des tâches.",
+          "description-disabled": "La barre des tâches verticale ne prend pas en charge l'affichage des titres.",
+          "label": "Afficher le titre"
+        },
+        "title-width": {
+          "description": "Définir la largeur des titres de fenêtres dans la barre des tâches (en pixels).",
+          "label": "Largeur du titre",
+          "reset-tooltip": "Réinitialiser la largeur du titre"
         }
       },
       "taskbar-grouped": {

Assets/Translations/ja.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "バーが配置されているディスプレイ上のアプリのみを表示します。",
           "label": "同じディスプレイのみ"
+        },
+        "show-title": {
+          "description": "タスクバーにウィンドウタイトルを表示します。",
+          "description-disabled": "縦型タスクバーはタイトル表示に対応していません。",
+          "label": "タイトルを表示"
+        },
+        "title-width": {
+          "description": "タスクバーのウィンドウタイトルの幅を設定します（ピクセル単位）。",
+          "label": "タイトル幅",
+          "reset-tooltip": "タイトル幅をリセット"
         }
       },
       "taskbar-grouped": {

Assets/Translations/nl.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Toon alleen apps van de output waarop de balk zich bevindt.",
           "label": "Alleen van dezelfde output"
+        },
+        "show-title": {
+          "description": "Venster titels weergeven in de taakbalk.",
+          "description-disabled": "Verticale taakbalk ondersteunt geen titelopties.",
+          "label": "Titel weergeven"
+        },
+        "title-width": {
+          "description": "Stel de breedte van venstertitels in de taakbalk in (in pixels).",
+          "label": "Titelbreedte",
+          "reset-tooltip": "Titelbreedte resetten"
         }
       },
       "taskbar-grouped": {

Assets/Translations/pt.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Mostrar apenas os aplicativos da saída onde a barra está localizada.",
           "label": "Apenas da mesma saída"
+        },
+        "show-title": {
+          "description": "Exibir títulos de janelas na barra de tarefas.",
+          "description-disabled": "A barra de tarefas vertical não suporta exibir títulos.",
+          "label": "Mostrar título"
+        },
+        "title-width": {
+          "description": "Definir a largura dos títulos de janelas na barra de tarefas (em pixels).",
+          "label": "Largura do título",
+          "reset-tooltip": "Redefinir largura do título"
         }
       },
       "taskbar-grouped": {

Assets/Translations/ru.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Показывать только приложения с того же вывода, где расположена панель.",
           "label": "Только с того же вывода"
+        },
+        "show-title": {
+          "description": "Отображать заголовки окон на панели задач.",
+          "description-disabled": "Вертикальная панель задач не поддерживает отображение заголовков.",
+          "label": "Показать заголовок"
+        },
+        "title-width": {
+          "description": "Установить ширину заголовков окон на панели задач (в пикселях).",
+          "label": "Ширина заголовка",
+          "reset-tooltip": "Сбросить ширину заголовка"
         }
       },
       "taskbar-grouped": {

Assets/Translations/tr.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Sadece çubuğun bulunduğu çıktıdan uygulamaları göster.",
           "label": "Sadece aynı çıktıdan"
+        },
+        "show-title": {
+          "description": "Görev çubuğunda pencere başlıklarını göster.",
+          "description-disabled": "Dikey görev çubuğu başlık göstermeyi desteklemiyor.",
+          "label": "Başlığı göster"
+        },
+        "title-width": {
+          "description": "Görev çubuğundaki pencere başlıklarının genişliğini ayarla (piksel olarak).",
+          "label": "Başlık genişliği",
+          "reset-tooltip": "Başlık genişliğini sıfırla"
         }
       },
       "taskbar-grouped": {

Assets/Translations/uk-UA.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "Показувати тільки застосунки з виходу, де розташована панель.",
           "label": "Тільки з того ж виходу"
+        },
+        "show-title": {
+          "description": "Відображати заголовки вікон на панелі завдань.",
+          "description-disabled": "Вертикальна панель завдань не підтримує відображення заголовків.",
+          "label": "Показати заголовок"
+        },
+        "title-width": {
+          "description": "Встановити ширину заголовків вікон на панелі завдань (у пікселях).",
+          "label": "Ширина заголовка",
+          "reset-tooltip": "Скинути ширину заголовка"
         }
       },
       "taskbar-grouped": {

Assets/Translations/zh-CN.json

@@ -333,6 +333,16 @@
         "only-same-output": {
           "description": "仅显示任务栏所在屏幕上的应用程序",
           "label": "仅显示同屏幕"
+        },
+        "show-title": {
+          "description": "在任务栏中显示窗口标题。",
+          "description-disabled": "垂直任务栏不支持显示标题。",
+          "label": "显示标题"
+        },
+        "title-width": {
+          "description": "设置任务栏中窗口标题的宽度（以像素为单位）。",
+          "label": "标题宽度",
+          "reset-tooltip": "重置标题宽度"
         }
       },
       "taskbar-grouped": {

Modules/Bar/Widgets/Taskbar.qml

@@ -40,12 +40,17 @@ Rectangle {
   readonly property string hideMode: (widgetSettings.hideMode !== undefined) ? widgetSettings.hideMode : widgetMetadata.hideMode
   readonly property bool onlySameOutput: (widgetSettings.onlySameOutput !== undefined) ? widgetSettings.onlySameOutput : widgetMetadata.onlySameOutput
   readonly property bool onlyActiveWorkspaces: (widgetSettings.onlyActiveWorkspaces !== undefined) ? widgetSettings.onlyActiveWorkspaces : widgetMetadata.onlyActiveWorkspaces
+  readonly property bool showTitle: isVerticalBar ? false : (widgetSettings.showTitle !== undefined) ? widgetSettings.showTitle : widgetMetadata.showTitle
+  readonly property int titleWidth: (widgetSettings.titleWidth !== undefined) ? widgetSettings.titleWidth : widgetMetadata.titleWidth
 
   // Context menu state
   property var selectedWindow: null
   property string selectedAppName: ""
   property int modelUpdateTrigger: 0  // Dummy property to force model re-evaluation
 
+  // Hover state
+  property var hoveredWindowId: ""
+
   NPopupContextMenu {
     id: contextMenu
     model: {
@@ -136,7 +141,7 @@ Rectangle {
     }
   }
 
-  implicitWidth: visible ? (isVerticalBar ? Style.capsuleHeight : Math.round(taskbarLayout.implicitWidth + Style.marginM * 2)) : 0
+  implicitWidth: visible ? (isVerticalBar ? Style.capsuleHeight : showTitle ? taskbarLayout.implicitWidth : Math.round(taskbarLayout.implicitWidth + Style.marginM * 2)) : 0
   implicitHeight: visible ? (isVerticalBar ? Math.round(taskbarLayout.implicitHeight + Style.marginM * 2) : Style.capsuleHeight) : 0
   radius: Style.radiusM
   color: Style.capsuleColor
@@ -145,8 +150,8 @@ Rectangle {
     id: taskbarLayout
     anchors.fill: parent
     anchors {
-      leftMargin: isVerticalBar ? undefined : Style.marginM
-      rightMargin: isVerticalBar ? undefined : Style.marginM
+      leftMargin: (root.showTitle || isVerticalBar) ? undefined : Style.marginM
+      rightMargin: (root.showTitle || isVerticalBar) ? undefined : Style.marginM
       topMargin: (density === "compact") ? 0 : isVerticalBar ? Style.marginM : undefined
       bottomMargin: (density === "compact") ? 0 : isVerticalBar ? Style.marginM : undefined
     }
@@ -169,37 +174,100 @@ Rectangle {
           return ws.id;
         }).includes(modelData.workspaceId))
 
-        Layout.preferredWidth: root.itemSize
+        readonly property bool isHovered: root.hoveredWindowId === modelData.id
+        readonly property real itemSpacing: Style.marginS
+        readonly property real contentWidth: root.showTitle ? root.itemSize + itemSpacing + root.titleWidth : root.itemSize
+
+        readonly property string title: modelData.title || modelData.appId || "Unknown application"
+        readonly property color titleBgColor: (isHovered || modelData.isFocused) ? Color.mHover : Style.capsuleColor
+        readonly property color titleFgColor: (isHovered || modelData.isFocused) ? Color.mOnHover : Color.mOnSurface
+
+        Layout.preferredWidth: root.showTitle ? contentWidth + Style.marginM * 2 : contentWidth
         Layout.preferredHeight: root.itemSize
         Layout.alignment: Qt.AlignCenter
 
-        IconImage {
-          id: appIcon
+        Rectangle {
+          id: titleBackground
+          visible: root.showTitle
+          anchors.centerIn: parent
           width: parent.width
-          height: parent.height
-          source: ThemeIcons.iconForAppId(taskbarItem.modelData.appId)
-          smooth: true
-          asynchronous: true
-          opacity: modelData.isFocused ? Style.opacityFull : 0.6
+          height: root.height
+          color: titleBgColor
+          radius: Style.radiusM
 
-          // Apply dock shader to all taskbar icons
-          layer.enabled: widgetSettings.colorizeIcons !== false
-          layer.effect: ShaderEffect {
-            property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant
-            property real colorizeMode: 0.0 // Dock mode (grayscale)
-
-            fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+          Behavior on color {
+            ColorAnimation {
+              duration: Style.animationFast
+              easing.type: Easing.InOutQuad
+            }
           }
+        }
 
-          Rectangle {
-            id: iconBackground
-            anchors.bottomMargin: -2
-            anchors.bottom: parent.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: 4
-            height: 4
-            color: modelData.isFocused ? Color.mPrimary : Color.transparent
-            radius: Math.min(Style.radiusXXS, width / 2)
+        Rectangle {
+          anchors.centerIn: parent
+          width: taskbarItem.contentWidth
+          height: parent.height
+          color: "transparent"
+
+          RowLayout {
+            id: itemLayout
+            anchors.fill: parent
+            spacing: taskbarItem.itemSpacing
+
+            Item {
+              Layout.preferredWidth: root.itemSize
+              Layout.preferredHeight: root.itemSize
+              Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+              IconImage {
+                id: appIcon
+                anchors.fill: parent
+
+                source: ThemeIcons.iconForAppId(taskbarItem.modelData.appId)
+                smooth: true
+                asynchronous: true
+                opacity: (root.showTitle || modelData.isFocused) ? Style.opacityFull : 0.6
+
+                // Apply dock shader to all taskbar icons
+                layer.enabled: widgetSettings.colorizeIcons !== false
+                layer.effect: ShaderEffect {
+                  property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant
+                  property real colorizeMode: 0.0 // Dock mode (grayscale)
+
+                  fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+                }
+              }
+
+              Rectangle {
+                id: iconBackground
+                visible: !root.showTitle
+                anchors.bottomMargin: -2
+                anchors.bottom: parent.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: 4
+                height: 4
+                color: modelData.isFocused ? Color.mPrimary : Color.transparent
+                radius: Math.min(Style.radiusXXS, width / 2)
+              }
+            }
+
+            NText {
+              id: titleText
+              visible: root.showTitle
+              Layout.preferredWidth: root.titleWidth
+              Layout.preferredHeight: root.itemSize
+              Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+              Layout.fillWidth: false
+
+              text: taskbarItem.title
+              elide: Text.ElideRight
+              verticalAlignment: Text.AlignVCenter
+              horizontalAlignment: Text.AlignLeft
+
+              pointSize: root.itemSize * 0.5
+              color: titleFgColor
+              opacity: Style.opacityFull
+            }
           }
         }
 
@@ -240,8 +308,14 @@ Rectangle {
               contextMenuOpenTimer.restart();
             }
           }
-          onEntered: TooltipService.show(taskbarItem, taskbarItem.modelData.title || taskbarItem.modelData.appId || "Unknown app.", BarService.getTooltipDirection())
-          onExited: TooltipService.hide()
+          onEntered: {
+            root.hoveredWindowId = taskbarItem.modelData.id;
+            TooltipService.show(taskbarItem, taskbarItem.title, BarService.getTooltipDirection());
+          }
+          onExited: {
+            root.hoveredWindowId = "";
+            TooltipService.hide();
+          }
         }
       }
     }

Modules/Panels/Settings/Bar/WidgetSettings/TaskbarSettings.qml

@@ -12,11 +12,15 @@ ColumnLayout {
   property var widgetData: null
   property var widgetMetadata: null
 
+  readonly property bool isVerticalBar: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+
   // Local state
   property string valueHideMode: "hidden"
   property bool valueOnlyActiveWorkspaces: widgetData.onlyActiveWorkspaces !== undefined ? widgetData.onlyActiveWorkspaces : widgetMetadata.onlyActiveWorkspaces
   property bool valueOnlySameOutput: widgetData.onlySameOutput !== undefined ? widgetData.onlySameOutput : widgetMetadata.onlySameOutput
   property bool valueColorizeIcons: widgetData.colorizeIcons !== undefined ? widgetData.colorizeIcons : widgetMetadata.colorizeIcons
+  property bool valueShowTitle: isVerticalBar ? false : widgetData.showTitle !== undefined ? widgetData.showTitle : widgetMetadata.showTitle
+  property int valueTitleWidth: widgetData.titleWidth !== undefined ? widgetData.titleWidth : widgetMetadata.titleWidth
 
   Component.onCompleted: {
     if (widgetData && widgetData.hideMode !== undefined) {
@@ -32,6 +36,8 @@ ColumnLayout {
     settings.onlySameOutput = valueOnlySameOutput;
     settings.onlyActiveWorkspaces = valueOnlyActiveWorkspaces;
     settings.colorizeIcons = valueColorizeIcons;
+    settings.showTitle = valueShowTitle;
+    settings.titleWidth = valueTitleWidth;
     return settings;
   }
 
@@ -80,4 +86,50 @@ ColumnLayout {
     checked: root.valueColorizeIcons
     onToggled: checked => root.valueColorizeIcons = checked
   }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.taskbar.show-title.label")
+    description: isVerticalBar ? I18n.tr("bar.widget-settings.taskbar.show-title.description-disabled") : I18n.tr("bar.widget-settings.taskbar.show-title.description")
+    checked: root.valueShowTitle
+    onToggled: checked => root.valueShowTitle = checked
+    enabled: !isVerticalBar
+  }
+
+  NLabel {
+    visible: root.valueShowTitle && !isVerticalBar
+    label: I18n.tr("bar.widget-settings.taskbar.title-width.label")
+    description: I18n.tr("bar.widget-settings.taskbar.title-width.description")
+  }
+
+  RowLayout {
+    visible: root.valueShowTitle && !isVerticalBar
+    spacing: Style.marginL
+    Layout.fillWidth: true
+
+    NValueSlider {
+      Layout.fillWidth: true
+      from: 30
+      to: 300
+      stepSize: 5
+      value: root.valueTitleWidth
+      onMoved: value => root.valueTitleWidth = value
+      text: root.valueTitleWidth + "px"
+    }
+
+    // Reset button container
+    Item {
+      Layout.preferredWidth: 30 * Style.uiScaleRatio
+      Layout.preferredHeight: 30 * Style.uiScaleRatio
+
+      NIconButton {
+        icon: "refresh"
+        baseSize: Style.baseWidgetSize * 0.8
+        tooltipText: I18n.tr("bar.widget-settings.taskbar.title-width.reset-tooltip")
+        onClicked: root.valueTitleWidth = 120
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+      }
+    }
+  }
 }

Services/UI/BarWidgetRegistry.qml

@@ -202,7 +202,9 @@ Singleton {
                                     "onlySameOutput": true,
                                     "onlyActiveWorkspaces": true,
                                     "hideMode": "hidden",
-                                    "colorizeIcons": false
+                                    "colorizeIcons": false,
+                                    "showTitle": false,
+                                    "titleWidth": 120
                                   },
                                   "TaskbarGrouped": {
                                     "allowUserSettings": true,