Add FocusedApp compact mode and fix SystemTray to use IconImage

Common/SettingsData.qml

@@ -42,6 +42,7 @@ Singleton {
     property bool showWorkspacePadding: false
     property var workspaceNameIcons: ({})
     property bool clockCompactMode: false
+    property bool focusedWindowCompactMode: false
     property string clockDateFormat: "ddd d"
     property string lockDateFormat: "dddd, MMMM d"
     property int mediaSize: 1
@@ -329,6 +330,11 @@ Singleton {
         saveSettings();
     }
 
+    function setFocusedWindowCompactMode(enabled) {
+        focusedWindowCompactMode = enabled;
+        saveSettings();
+    }
+
     function setClockDateFormat(format) {
         clockDateFormat = format;
         saveSettings();

Modules/Settings/WidgetsTab.qml

@@ -593,6 +593,8 @@ Item {
                                     SettingsData.setClockCompactMode(value)
                                   } else if (widgetId === "music") {
                                     SettingsData.setMediaSize(value)
+                                  } else if (widgetId === "focusedWindow") {
+                                    SettingsData.setFocusedWindowCompactMode(value)
                                   }
                                 }
           onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -636,6 +638,8 @@ Item {
                                     SettingsData.setClockCompactMode(value)
                                   } else if (widgetId === "music") {
                                     SettingsData.setMediaSize(value)
+                                  } else if (widgetId === "focusedWindow") {
+                                    SettingsData.setFocusedWindowCompactMode(value)
                                   }
                                 }
           onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -679,6 +683,8 @@ Item {
                                     SettingsData.setClockCompactMode(value)
                                   } else if (widgetId === "music") {
                                     SettingsData.setMediaSize(value)
+                                  } else if (widgetId === "focusedWindow") {
+                                    SettingsData.setFocusedWindowCompactMode(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"
+              visible: modelData.id === "clock" || modelData.id === "music" || modelData.id === "focusedWindow"
               
               DankActionButton {
                 id: smallSizeButton
@@ -279,12 +279,24 @@ Column {
               DankActionButton {
                 id: compactModeButton
                 buttonSize: 28
-                visible: modelData.id === "clock"
+                visible: modelData.id === "clock" || modelData.id === "focusedWindow"
-                iconName: SettingsData.clockCompactMode ? "zoom_out" : "zoom_in"
+                iconName: {
+                  if (modelData.id === "clock") return SettingsData.clockCompactMode ? "zoom_out" : "zoom_in"
+                  if (modelData.id === "focusedWindow") return SettingsData.focusedWindowCompactMode ? "zoom_out" : "zoom_in"
+                  return "zoom_in"
+                }
                 iconSize: 16
-                iconColor: SettingsData.clockCompactMode ? Theme.primary : Theme.outline
+                iconColor: {
+                  if (modelData.id === "clock") return SettingsData.clockCompactMode ? Theme.primary : Theme.outline
+                  if (modelData.id === "focusedWindow") return SettingsData.focusedWindowCompactMode ? Theme.primary : Theme.outline
+                  return Theme.outline
+                }
                 onClicked: {
+                  if (modelData.id === "clock") {
                     root.compactModeChanged("clock", !SettingsData.clockCompactMode)
+                  } else if (modelData.id === "focusedWindow") {
+                    root.compactModeChanged("focusedWindow", !SettingsData.focusedWindowCompactMode)
+                  }
                 }
               }
 

Modules/TopBar/FocusedApp.qml

@@ -6,7 +6,7 @@ import qs.Widgets
 Rectangle {
   id: root
 
-  property bool compactMode: false
+  property bool compactMode: SettingsData.focusedWindowCompactMode
   property int availableWidth: 400
   readonly property int baseWidth: contentRow.implicitWidth + Theme.spacingS * 2
   readonly property int maxNormalWidth: 456
@@ -48,6 +48,7 @@ Rectangle {
       elide: Text.ElideRight
       maximumLineCount: 1
       width: Math.min(implicitWidth, compactMode ? 80 : 180)
+      visible: !compactMode && text.length > 0
     }
 
     StyledText {
@@ -55,7 +56,7 @@ Rectangle {
       font.pixelSize: Theme.fontSizeSmall
       color: Theme.outlineButton
       anchors.verticalCenter: parent.verticalCenter
-      visible: appText.text && titleText.text
+      visible: !compactMode && appText.text && titleText.text
     }
 
     StyledText {
@@ -68,7 +69,7 @@ Rectangle {
       anchors.verticalCenter: parent.verticalCenter
       elide: Text.ElideRight
       maximumLineCount: 1
-      width: Math.min(implicitWidth, compactMode ? 180 : 250)
+      width: Math.min(implicitWidth, compactMode ? 280 : 250)
       visible: text.length > 0
     }
   }

Modules/TopBar/SystemTrayBar.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Services.SystemTray
+import Quickshell.Widgets
 import qs.Common
 
 Rectangle {
@@ -74,14 +75,14 @@ Rectangle {
                     }
                 }
 
-                Image {
+                IconImage {
                     anchors.centerIn: parent
                     width: 18
                     height: 18
                     source: parent.iconSource
                     asynchronous: true
                     smooth: true
-                    fillMode: Image.PreserveAspectFit
+                    mipmap: true
                 }
 
                 MouseArea {

Modules/TopBar/TopBar.qml

@@ -651,7 +651,6 @@ PanelWindow {
                         id: focusedWindowComponent
 
                         FocusedApp {
-                            compactMode: topBarContent.spacingTight
                             availableWidth: topBarContent.leftToMediaGap
                         }
                     }