add animations to wallpaper switch

modules/bar/Title.qml

@@ -31,8 +31,8 @@ Rectangle {
                 Layout.leftMargin: 10
                 IconImage {
                     id: icon
-                    source: root.activeWindow.activated ? Quickshell.iconPath(root.activeWindow.appId, "kitty") : Quickshell.iconPath("kitty")
-                    implicitSize: 16
+                    source: root.activeWindow.activated ? Quickshell.iconPath(root.activeWindow.appId, "kitty") : ""
+                    implicitSize: root.activeWindow.activated ? 16 : 0
                 }
             }
             CustomText {

modules/overlays/Wallpaper.qml

@@ -1,32 +1,75 @@
 pragma ComponentBehavior: Bound
-import Quickshell
 import QtQuick
+import QtQuick.Controls // <--- Needed for StackView
 import Quickshell.Wayland
 import qs.settings
 
-Variants {
+WlrLayershell {
     id: root
-    model: Quickshell.screens
-    delegate: WlrLayershell {
-        id: wpShell
-        aboveWindows: false
-        exclusionMode: ExclusionMode.Ignore
+    layer: WlrLayer.Background
+    keyboardFocus: WlrKeyboardFocus.None
+    anchors {
+        top: true
+        bottom: true
+        left: true
+        right: true
+    }
 
-        required property var modelData
-        screen: modelData
-        anchors {
-            left: true
-            top: true
-            bottom: true
-            right: true
-        }
-        layer: WlrLayer.Background
+    // We need to accept the screen from Variants
+    required property var modelData
 
-        Image {
-            anchors.fill: parent
-            fillMode: Image.Stretch
-            source: Settings.config.currentWall
+    // 1. The StackView manages the images
+    StackView {
+        id: wallStack
+        width: parent.width
+        height: parent.height
+
+        // 2. Define what a "Wallpaper" looks like
+        Component {
+            id: wallComponent
+            Image {
+                fillMode: Image.PreserveAspectCrop
+                width: wallStack.width
+                height: wallStack.height
+                asynchronous: true // ⚡ VERY IMPORTANT: Prevents lag while loading!
+            }
+        }
+
+        // 4. THE ANIMATIONS 🎬
+        // When a new wall replaces the old one:
+
+        // New One: Fades In (0 -> 1)
+        replaceEnter: Transition {
+            NumberAnimation {
+                property: "x"
+                from: wallStack.width
+                to: 0
+                duration: 800 // Slower = Smoother
+                easing.type: Easing.OutQuad
+            }
+        }
+
+        // Old One: Fades Out (1 -> 0)
+        replaceExit: Transition {
+            NumberAnimation {
+                property: "x"
+                from: 0
+                to: -wallStack.width
+                duration: 800
+                easing.type: Easing.OutQuad
+            }
+        }
+    }
+
+    // 5. The Trigger 🔫
+    // We listen for the singleton to change, then tell the Stack to update
+    Connections {
+        target: Settings
+
+        function onCurrentWallChanged() {
+            wallStack.replace(wallComponent, {
+                "source": Settings.currentWall
+            });
         }
-        ScreenCorners {}
     }
 }

reusables/CustomIcon.qml

@@ -9,7 +9,7 @@ CustomText {
     renderType: Text.NativeRendering
     font {
         hintingPreference: Font.PreferNoHinting
-        family: "Material Symbols Outlined"
+        family: "Material Symbols Rounded"
         pixelSize: iconSize
         weight: Font.Normal + (Font.DemiBold - Font.Normal) * truncatedFill
         variableAxes: {

settings/Settings.qml

@@ -7,6 +7,7 @@ import Quickshell.Io
 Singleton {
     id: root
     property alias config: settingsAdapter
+    property alias currentWall: settingsAdapter.currentWall
     onConfigChanged: settingsView.writeAdapter()
     FileView {
         id: settingsView