config: add config for bar tray recolour & bg

Closes #337

README.md

@@ -248,6 +248,10 @@ All configuration options are in `~/.config/caelestia/shell.json`.
             "showKbLayout": false,
             "showNetwork": true
         },
+        "tray": {
+            "background": false,
+            "recolour": false
+        },
         "workspaces": {
             "activeIndicator": true,
             "activeLabel": "󰮯 ",

config/BarConfig.qml

@@ -5,6 +5,7 @@ JsonObject {
     property bool showOnHover: true
     property int dragThreshold: 20
     property Workspaces workspaces: Workspaces {}
+    property Tray tray: Tray {}
     property Status status: Status {}
     property Sizes sizes: Sizes {}
 
@@ -60,6 +61,11 @@ JsonObject {
         property string activeLabel: "󰮯 "
     }
 
+    component Tray: JsonObject {
+        property bool background: false
+        property bool recolour: false
+    }
+
     component Status: JsonObject {
         property bool showAudio: false
         property bool showKbLayout: false

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 {

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
     }
 }