Support expanded mode on running apps

Common/SettingsData.qml

@@ -43,6 +43,7 @@ Singleton {
     property var workspaceNameIcons: ({})
     property bool clockCompactMode: false
     property bool focusedWindowCompactMode: false
+    property bool runningAppsCompactMode: true
     property string clockDateFormat: "ddd d"
     property string lockDateFormat: "dddd, MMMM d"
     property int mediaSize: 1
@@ -139,6 +140,8 @@ Singleton {
                 showWorkspacePadding = settings.showWorkspacePadding !== undefined ? settings.showWorkspacePadding : false;
                 workspaceNameIcons = settings.workspaceNameIcons !== undefined ? settings.workspaceNameIcons : ({});
                 clockCompactMode = settings.clockCompactMode !== undefined ? settings.clockCompactMode : false;
+                focusedWindowCompactMode = settings.focusedWindowCompactMode !== undefined ? settings.focusedWindowCompactMode : false;
+                runningAppsCompactMode = settings.runningAppsCompactMode !== undefined ? settings.runningAppsCompactMode : true;
                 clockDateFormat = settings.clockDateFormat !== undefined ? settings.clockDateFormat : "ddd d";
                 lockDateFormat = settings.lockDateFormat !== undefined ? settings.lockDateFormat : "dddd, MMMM d";
                 mediaSize = settings.mediaSize !== undefined ? settings.mediaSize : (settings.mediaCompactMode !== undefined ? (settings.mediaCompactMode ? 0 : 1) : 1);
@@ -236,6 +239,8 @@ Singleton {
             "showWorkspacePadding": showWorkspacePadding,
             "workspaceNameIcons": workspaceNameIcons,
             "clockCompactMode": clockCompactMode,
+            "focusedWindowCompactMode": focusedWindowCompactMode,
+            "runningAppsCompactMode": runningAppsCompactMode,
             "clockDateFormat": clockDateFormat,
             "lockDateFormat": lockDateFormat,
             "mediaSize": mediaSize,
@@ -335,6 +340,11 @@ Singleton {
         saveSettings();
     }
 
+    function setRunningAppsCompactMode(enabled) {
+        runningAppsCompactMode = enabled;
+        saveSettings();
+    }
+
     function setClockDateFormat(format) {
         clockDateFormat = format;
         saveSettings();

Modules/Settings/WidgetsTab.qml

@@ -595,6 +595,8 @@ Item {
                                     SettingsData.setMediaSize(value)
                                   } else if (widgetId === "focusedWindow") {
                                     SettingsData.setFocusedWindowCompactMode(value)
+                                  } else if (widgetId === "runningApps") {
+                                    SettingsData.setRunningAppsCompactMode(value)
                                   }
                                 }
           onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -640,6 +642,8 @@ Item {
                                     SettingsData.setMediaSize(value)
                                   } else if (widgetId === "focusedWindow") {
                                     SettingsData.setFocusedWindowCompactMode(value)
+                                  } else if (widgetId === "runningApps") {
+                                    SettingsData.setRunningAppsCompactMode(value)
                                   }
                                 }
           onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -685,6 +689,8 @@ Item {
                                     SettingsData.setMediaSize(value)
                                   } else if (widgetId === "focusedWindow") {
                                     SettingsData.setFocusedWindowCompactMode(value)
+                                  } else if (widgetId === "runningApps") {
+                                    SettingsData.setRunningAppsCompactMode(value)
                                   }
                                 }
           onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {

Modules/Settings/WidgetsTabSection.qml

@@ -238,7 +238,7 @@ Column {
 
             Row {
               spacing: Theme.spacingXS
-              visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow"
+              visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow" || modelData.id === "runningApps"
               
               DankActionButton {
                 id: smallSizeButton
@@ -279,16 +279,18 @@ Column {
               DankActionButton {
                 id: compactModeButton
                 buttonSize: 28
-                visible: modelData.id === "clock" || modelData.id === "focusedWindow"
+                visible: modelData.id === "clock" || modelData.id === "focusedWindow" || modelData.id === "runningApps"
                 iconName: {
                   if (modelData.id === "clock") return SettingsData.clockCompactMode ? "zoom_out" : "zoom_in"
                   if (modelData.id === "focusedWindow") return SettingsData.focusedWindowCompactMode ? "zoom_out" : "zoom_in"
+                  if (modelData.id === "runningApps") return SettingsData.runningAppsCompactMode ? "zoom_out" : "zoom_in"
                   return "zoom_in"
                 }
                 iconSize: 16
                 iconColor: {
                   if (modelData.id === "clock") return SettingsData.clockCompactMode ? Theme.primary : Theme.outline
                   if (modelData.id === "focusedWindow") return SettingsData.focusedWindowCompactMode ? Theme.primary : Theme.outline
+                  if (modelData.id === "runningApps") return SettingsData.runningAppsCompactMode ? Theme.primary : Theme.outline
                   return Theme.outline
                 }
                 onClicked: {
@@ -296,6 +298,8 @@ Column {
                     root.compactModeChanged("clock", !SettingsData.clockCompactMode)
                   } else if (modelData.id === "focusedWindow") {
                     root.compactModeChanged("focusedWindow", !SettingsData.focusedWindowCompactMode)
+                  } else if (modelData.id === "runningApps") {
+                    root.compactModeChanged("runningApps", !SettingsData.runningAppsCompactMode)
                   }
                 }
               }

Modules/TopBar/RunningApps.qml

@@ -16,7 +16,14 @@ Rectangle {
     // The visual root for this window
     property Item windowRoot: (Window.window ? Window.window.contentItem : null)
     readonly property int windowCount: NiriService.windows.length
-    readonly property int calculatedWidth: windowCount > 0 ? windowCount * 24 + (windowCount - 1) * Theme.spacingXS + Theme.spacingS * 2 : 0
+    readonly property int calculatedWidth: {
+        if (windowCount === 0) return 0;
+        if (SettingsData.runningAppsCompactMode) {
+            return windowCount * 24 + (windowCount - 1) * Theme.spacingXS + Theme.spacingS * 2;
+        } else {
+            return windowCount * (24 + Theme.spacingXS + 120) + (windowCount - 1) * Theme.spacingXS + Theme.spacingS * 2;
+        }
+    }
 
     width: calculatedWidth
     height: 30
@@ -58,7 +65,7 @@ Rectangle {
                     return appName + (windowTitle ? " • " + windowTitle : "");
                 }
 
-                width: 24
+                width: SettingsData.runningAppsCompactMode ? 24 : (24 + Theme.spacingXS + 120)
                 height: 24
 
                 Rectangle {
@@ -85,7 +92,9 @@ Rectangle {
                 IconImage {
                     id: iconImg
 
-                    anchors.centerIn: parent
+                    anchors.left: parent.left
+                    anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
                     width: 18
                     height: 18
                     source: {
@@ -107,7 +116,9 @@ Rectangle {
 
                 // Fallback text if no icon found
                 Text {
-                    anchors.centerIn: parent
+                    anchors.left: parent.left
+                    anchors.leftMargin: SettingsData.runningAppsCompactMode ? (parent.width - 18) / 2 : Theme.spacingXS
+                    anchors.verticalCenter: parent.verticalCenter
                     visible: !iconImg.visible
                     text: {
                         if (!appId)
@@ -124,6 +135,22 @@ Rectangle {
                     font.weight: Font.Medium
                 }
 
+                // Window title text (only visible in expanded mode)
+                StyledText {
+                    anchors.left: iconImg.right
+                    anchors.leftMargin: Theme.spacingXS
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingS
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !SettingsData.runningAppsCompactMode
+                    text: windowTitle
+                    font.pixelSize: Theme.fontSizeMedium - 1
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                    elide: Text.ElideRight
+                    maximumLineCount: 1
+                }
+
                 MouseArea {
                     id: mouseArea