config: add config for bar tray recolour & bg

Closes #337

2 files changed, 16 insertions, 8 deletions

diff --git a/modules/bar/components/Tray.qml b/modules/bar/components/Tray.qml
index efe4267..c921409 100644
--- a/modules/bar/components/Tray.qml
+++ b/modules/bar/components/Tray.qml
@@ -1,21 +1,27 @@
+import qs.components
+import qs.services
 import qs.config
 import Quickshell.Services.SystemTray
 import QtQuick
 
-Item {
+StyledRect {
     id: root
 
-    readonly property Repeater items: items
+    readonly property alias items: items
 
     clip: true
     visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
 
-    implicitWidth: layout.implicitWidth
-    implicitHeight: layout.implicitHeight
+    implicitWidth: layout.implicitWidth + Math.floor(Appearance.padding.normal * 1.8)
+    implicitHeight: layout.implicitHeight + (Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small) * 2
+
+    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.tray.background ? Colours.tPalette.m3surfaceContainer.a : 0)
+    radius: Appearance.rounding.full
 
     Column {
         id: layout
 
+        anchors.centerIn: parent
         spacing: Appearance.spacing.small
 
         add: Transition {
diff --git a/modules/bar/components/TrayItem.qml b/modules/bar/components/TrayItem.qml
index 3b95949..1f0a21c 100644
--- a/modules/bar/components/TrayItem.qml
+++ b/modules/bar/components/TrayItem.qml
@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
+import qs.components.effects
+import qs.services
 import qs.config
-import Quickshell.Widgets
 import Quickshell.Services.SystemTray
 import QtQuick
 
@@ -21,9 +22,10 @@ MouseArea {
             modelData.secondaryActivate();
     }
 
-    IconImage {
+    ColouredIcon {
         id: icon
 
+        anchors.fill: parent
         source: {
             let icon = root.modelData.icon;
             if (icon.includes("?path=")) {
@@ -32,7 +34,7 @@ MouseArea {
             }
             return icon;
         }
-        asynchronous: true
-        anchors.fill: parent
+        colour: Colours.palette.m3secondary
+        layer.enabled: Config.bar.tray.recolour
     }
 }