fade in/out for dynamic modules, fix tray icon theming

modules/Backlight.qml

@@ -5,7 +5,8 @@ import "." as M
 M.BarSection {
     id: root
     spacing: M.Theme.moduleSpacing
-    visible: M.Modules.backlight && percent > 0
+    opacity: M.Modules.backlight && percent > 0 ? 1 : 0
+    visible: opacity > 0
     tooltip: "Brightness: " + root.percent + "%"
 
     property int percent: 0

modules/BarSection.qml

@@ -8,6 +8,8 @@ Row {
     property string tooltip: ""
     property bool _hovered: false
 
+    Behavior on opacity { NumberAnimation { duration: 150 } }
+
     layer.enabled: _hovered
     layer.effect: MultiEffect {
         shadowEnabled: true

modules/Battery.qml

@@ -6,7 +6,8 @@ import "." as M
 M.BarSection {
     id: root
     spacing: M.Theme.moduleSpacing
-    visible: M.Modules.battery && (UPower.displayDevice?.isLaptopBattery ?? false)
+    opacity: M.Modules.battery && (UPower.displayDevice?.isLaptopBattery ?? false) ? 1 : 0
+    visible: opacity > 0
     tooltip: {
         const state = root.charging ? "Charging" : "Discharging";
         const t = root.charging ? root.dev?.timeToFull : root.dev?.timeToEmpty;

modules/Bluetooth.qml

@@ -5,7 +5,8 @@ import "." as M
 M.BarSection {
     id: root
     spacing: M.Theme.moduleSpacing
-    visible: M.Modules.bluetooth && root.state !== "unavailable"
+    opacity: M.Modules.bluetooth && root.state !== "unavailable" ? 1 : 0
+    visible: opacity > 0
     tooltip: {
         if (root.state === "off")
             return "Bluetooth: off";

modules/Mpris.qml

@@ -5,7 +5,8 @@ import "." as M
 M.BarSection {
     id: root
     spacing: M.Theme.moduleSpacing
-    visible: M.Modules.mpris && player !== null
+    opacity: M.Modules.mpris && player !== null ? 1 : 0
+    visible: opacity > 0
     tooltip: {
         const p = root.player;
         if (!p)

modules/Tray.qml

@@ -34,10 +34,8 @@ RowLayout {
                 onRunningChanged: if (!running) iconItem._pulseOpacity = 1
             }
 
-            M.ThemedIcon {
+            Item {
                 anchors.fill: parent
-                source: iconItem.modelData.icon
-                tint: iconItem._needsAttention ? M.Theme.base08 : M.Theme.base0D
                 opacity: iconItem._pulseOpacity
 
                 layer.enabled: iconItem._needsAttention
@@ -48,6 +46,12 @@ RowLayout {
                     shadowVerticalOffset: 0
                     shadowHorizontalOffset: 0
                 }
+
+                M.ThemedIcon {
+                    anchors.fill: parent
+                    source: iconItem.modelData.icon
+                    tint: iconItem._needsAttention ? M.Theme.base08 : M.Theme.base0D
+                }
             }
 
             HoverHandler {