From a310f6fff01393b9eb98e639e0b41322bb117fea Mon Sep 17 00:00:00 2001
From: bbedward <bbedward@gmail.com>
Date: Tue, 24 Feb 2026 13:36:57 -0500
Subject: [PATCH] settings: use Image for per-mode previews

---
 quickshell/Modules/Settings/WallpaperTab.qml | 32 ++++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/quickshell/Modules/Settings/WallpaperTab.qml b/quickshell/Modules/Settings/WallpaperTab.qml
index b6e197c0..c0f83c18 100644
--- a/quickshell/Modules/Settings/WallpaperTab.qml
+++ b/quickshell/Modules/Settings/WallpaperTab.qml
@@ -401,19 +401,25 @@ Item {
                                 radius: Theme.cornerRadius
                                 color: Theme.surfaceVariant
 
-                                CachingImage {
+                                Image {
                                     anchors.fill: parent
                                     anchors.margins: 1
-                                    imagePath: {
-                                        var lightWallpaper = SessionData.wallpaperPathLight;
-                                        return (lightWallpaper !== "" && !lightWallpaper.startsWith("#")) ? lightWallpaper : "";
+                                    source: {
+                                        var wp = SessionData.wallpaperPathLight;
+                                        if (wp === "" || wp.startsWith("#"))
+                                            return "";
+                                        if (wp.startsWith("file://"))
+                                            wp = wp.substring(7);
+                                        return "file://" + wp.split('/').map(s => encodeURIComponent(s)).join('/');
                                     }
                                     fillMode: Image.PreserveAspectCrop
                                     visible: {
                                         var lightWallpaper = SessionData.wallpaperPathLight;
                                         return lightWallpaper !== "" && !lightWallpaper.startsWith("#");
                                     }
-                                    maxCacheSize: 160
+                                    sourceSize.width: 160
+                                    sourceSize.height: 160
+                                    asynchronous: true
                                     layer.enabled: true
                                     layer.effect: MultiEffect {
                                         maskEnabled: true
@@ -585,19 +591,25 @@ Item {
                                 radius: Theme.cornerRadius
                                 color: Theme.surfaceVariant
 
-                                CachingImage {
+                                Image {
                                     anchors.fill: parent
                                     anchors.margins: 1
-                                    imagePath: {
-                                        var darkWallpaper = SessionData.wallpaperPathDark;
-                                        return (darkWallpaper !== "" && !darkWallpaper.startsWith("#")) ? darkWallpaper : "";
+                                    source: {
+                                        var wp = SessionData.wallpaperPathDark;
+                                        if (wp === "" || wp.startsWith("#"))
+                                            return "";
+                                        if (wp.startsWith("file://"))
+                                            wp = wp.substring(7);
+                                        return "file://" + wp.split('/').map(s => encodeURIComponent(s)).join('/');
                                     }
                                     fillMode: Image.PreserveAspectCrop
                                     visible: {
                                         var darkWallpaper = SessionData.wallpaperPathDark;
                                         return darkWallpaper !== "" && !darkWallpaper.startsWith("#");
                                     }
-                                    maxCacheSize: 160
+                                    sourceSize.width: 160
+                                    sourceSize.height: 160
+                                    asynchronous: true
                                     layer.enabled: true
                                     layer.effect: MultiEffect {
                                         maskEnabled: true