wallpaper: rewrite CachingImage and make it work with file browser

fixes #2756

quickshell/Modals/FileBrowser/FileBrowserGridDelegate.qml

@@ -169,8 +169,6 @@ StyledRect {
                 property string imagePath: {
                     if (weMode && delegateRoot.fileIsDir)
                         return delegateRoot.filePath + "/preview" + weExtensions[weExtIndex];
-                    if (!delegateRoot.fileIsDir && isImage)
-                        return delegateRoot.filePath;
                     if (_videoThumb)
                         return _videoThumb;
                     return "";
@@ -192,13 +190,28 @@ StyledRect {
                 visible: false
             }
 
+            CachingImage {
+                anchors.fill: parent
+                anchors.margins: 2
+                imagePath: !delegateRoot.fileIsDir && isImage ? delegateRoot.filePath : ""
+                maxCacheSize: 256
+                visible: !delegateRoot.fileIsDir && isImage
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    maskEnabled: true
+                    maskSource: gridImageMask
+                    maskThresholdMin: 0.5
+                    maskSpreadAtMin: 1
+                }
+            }
+
             MultiEffect {
                 anchors.fill: parent
                 anchors.margins: 2
                 source: gridPreviewImage
                 maskEnabled: true
                 maskSource: gridImageMask
-                visible: gridPreviewImage.status === Image.Ready && ((!delegateRoot.fileIsDir && (isImage || isVideo)) || (weMode && delegateRoot.fileIsDir))
+                visible: gridPreviewImage.status === Image.Ready && ((!delegateRoot.fileIsDir && isVideo) || (weMode && delegateRoot.fileIsDir))
                 maskThresholdMin: 0.5
                 maskSpreadAtMin: 1
             }

quickshell/Modals/FileBrowser/FileBrowserListDelegate.qml

@@ -168,13 +168,7 @@ StyledRect {
             Image {
                 id: listPreviewImage
                 anchors.fill: parent
-                property string imagePath: {
+                property string imagePath: _videoThumb
-                    if (!listDelegateRoot.fileIsDir && isImage)
-                        return listDelegateRoot.filePath;
-                    if (_videoThumb)
-                        return _videoThumb;
-                    return "";
-                }
                 source: imagePath ? "file://" + imagePath.split('/').map(s => encodeURIComponent(s)).join('/') : ""
                 fillMode: Image.PreserveAspectCrop
                 sourceSize.width: 32
@@ -183,12 +177,26 @@ StyledRect {
                 visible: false
             }
 
+            CachingImage {
+                anchors.fill: parent
+                imagePath: !listDelegateRoot.fileIsDir && isImage ? listDelegateRoot.filePath : ""
+                maxCacheSize: 256
+                visible: !listDelegateRoot.fileIsDir && isImage
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    maskEnabled: true
+                    maskSource: listImageMask
+                    maskThresholdMin: 0.5
+                    maskSpreadAtMin: 1
+                }
+            }
+
             MultiEffect {
                 anchors.fill: parent
                 source: listPreviewImage
                 maskEnabled: true
                 maskSource: listImageMask
-                visible: listPreviewImage.status === Image.Ready && !listDelegateRoot.fileIsDir && (isImage || isVideo)
+                visible: listPreviewImage.status === Image.Ready && !listDelegateRoot.fileIsDir && isVideo
                 maskThresholdMin: 0.5
                 maskSpreadAtMin: 1
             }

quickshell/Modules/DankDash/WallpaperTab.qml

@@ -20,12 +20,11 @@ Item {
     property int itemsPerPage: 16
     property int totalPages: Math.max(1, Math.ceil(wallpaperFolderModel.count / itemsPerPage))
     property bool active: false
-    property Item focusTarget: wallpaperGrid
+    property Item focusTarget: pager
     property Item tabBarItem: null
     property int gridIndex: 0
     property Item keyForwardTarget: null
     property var parentPopout: null
-    property int lastPage: 0
     property bool enableAnimation: false
     property string homeDir: StandardPaths.writableLocation(StandardPaths.HomeLocation)
     property string selectedFileName: ""
@@ -86,12 +85,12 @@ Item {
         }
     }
 
-    onCurrentPageChanged: {
+    onCurrentPageChanged: updateSelectedFileName()
-        if (currentPage !== lastPage) {
+
-            enableAnimation = false;
+    onTotalPagesChanged: {
-            lastPage = currentPage;
+        if (currentPage >= totalPages) {
+            currentPage = Math.max(0, totalPages - 1);
         }
-        updateSelectedFileName();
     }
 
     onGridIndexChanged: {
@@ -257,6 +256,7 @@ Item {
     }
 
     function setInitialSelection() {
+        enableAnimation = false;
         const currentWallpaper = getCurrentWallpaper();
         if (!currentWallpaper || wallpaperFolderModel.count === 0) {
             gridIndex = 0;
@@ -447,147 +447,176 @@ Item {
             width: parent.width
             height: parent.height - 50
 
-            GridView {
+            ListView {
-                id: wallpaperGrid
+                id: pager
                 anchors.centerIn: parent
                 width: parent.width - Theme.spacingS
                 height: parent.height - Theme.spacingS
-                cellWidth: width / 4
+                orientation: ListView.Vertical
-                cellHeight: height / 4
+                snapMode: ListView.SnapOneItem
+                highlightRangeMode: ListView.StrictlyEnforceRange
+                preferredHighlightBegin: 0
+                preferredHighlightEnd: height
+                highlightMoveDuration: root.enableAnimation ? Theme.mediumDuration : 0
+                boundsBehavior: Flickable.StopAtBounds
                 clip: true
                 enabled: root.active
                 interactive: root.active
-                boundsBehavior: Flickable.StopAtBounds
                 keyNavigationEnabled: false
                 activeFocusOnTab: false
-                highlightFollowsCurrentItem: true
-                highlightMoveDuration: enableAnimation ? Theme.shortDuration : 0
                 focus: false
+                cacheBuffer: Math.max(0, height * 2)
+                model: root.totalPages
 
-                highlight: Item {
+                onCurrentIndexChanged: {
-                    z: 1000
+                    if (!moving) {
-                    Rectangle {
+                        return;
-                        anchors.fill: parent
+                    }
-                        anchors.margins: Theme.spacingXS
+                    if (currentIndex >= 0 && currentIndex !== root.currentPage) {
-                        color: "transparent"
+                        root.currentPage = currentIndex;
-                        border.width: 3
-                        border.color: Theme.primary
-                        radius: Theme.cornerRadius
                     }
                 }
 
-                model: {
+                Component.onCompleted: currentIndex = root.currentPage
-                    root.gridRevision; // re-evaluate when sort order changes in place
-                    const startIndex = currentPage * itemsPerPage;
-                    const endIndex = Math.min(startIndex + itemsPerPage, wallpaperFolderModel.count);
-                    const items = [];
-                    for (var i = startIndex; i < endIndex; i++) {
-                        const filePath = wallpaperFolderModel.get(i, "filePath");
-                        if (filePath) {
-                            items.push(filePath.toString().replace(/^file:\/\//, ''));
-                        }
-                    }
-                    return items;
-                }
-
-                onModelChanged: {
-                    const clampedIndex = model.length > 0 ? Math.min(Math.max(0, gridIndex), model.length - 1) : 0;
-                    if (gridIndex !== clampedIndex) {
-                        gridIndex = clampedIndex;
-                    }
-                }
-
-                onCountChanged: {
-                    if (count > 0) {
-                        const clampedIndex = Math.min(gridIndex, count - 1);
-                        currentIndex = clampedIndex;
-                        positionViewAtIndex(clampedIndex, GridView.Contain);
-                    }
-                    Qt.callLater(() => {
-                        enableAnimation = true;
-                    });
-                }
 
                 Connections {
                     target: root
-                    function onGridIndexChanged() {
+                    function onCurrentPageChanged() {
-                        if (wallpaperGrid.count > 0) {
+                        if (pager.currentIndex !== root.currentPage) {
-                            wallpaperGrid.currentIndex = gridIndex;
+                            pager.currentIndex = root.currentPage;
-                            if (!enableAnimation) {
-                                wallpaperGrid.positionViewAtIndex(gridIndex, GridView.Contain);
-                            }
                         }
                     }
                 }
 
-                delegate: Item {
+                delegate: GridView {
-                    width: wallpaperGrid.cellWidth
+                    id: pageGrid
-                    height: wallpaperGrid.cellHeight
 
-                    property string wallpaperPath: modelData || ""
+                    property int pageIndex: index
-                    property bool isSelected: getCurrentWallpaper() === modelData
 
-                    Rectangle {
+                    width: pager.width
-                        id: wallpaperCard
+                    height: pager.height
-                        anchors.fill: parent
+                    cellWidth: width / 4
-                        anchors.margins: Theme.spacingXS
+                    cellHeight: height / 4
-                        color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                    interactive: false
-                        radius: Theme.cornerRadius
+                    keyNavigationEnabled: false
-                        clip: true
+                    activeFocusOnTab: false
+                    focus: false
+                    highlightFollowsCurrentItem: true
+                    highlightMoveDuration: root.enableAnimation ? Theme.shortDuration : 0
+                    currentIndex: root.currentPage === pageIndex ? root.gridIndex : -1
 
+                    highlight: Item {
+                        z: 1000
                         Rectangle {
                             anchors.fill: parent
-                            color: isSelected ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
+                            anchors.margins: Theme.spacingXS
-                            radius: parent.radius
+                            color: "transparent"
+                            border.width: 3
+                            border.color: Theme.primary
+                            radius: Theme.cornerRadius
+                        }
+                    }
 
-                            Behavior on color {
+                    model: {
-                                ColorAnimation {
+                        root.gridRevision; // re-evaluate when sort order changes in place
-                                    duration: Theme.shortDuration
+                        const startIndex = pageIndex * root.itemsPerPage;
-                                    easing.type: Theme.standardEasing
+                        const endIndex = Math.min(startIndex + root.itemsPerPage, wallpaperFolderModel.count);
+                        const items = [];
+                        for (var i = startIndex; i < endIndex; i++) {
+                            const filePath = wallpaperFolderModel.get(i, "filePath");
+                            if (filePath) {
+                                items.push(filePath.toString().replace(/^file:\/\//, ''));
+                            }
+                        }
+                        return items;
+                    }
+
+                    onCountChanged: {
+                        if (root.currentPage !== pageIndex || count === 0) {
+                            return;
+                        }
+                        if (root.gridIndex >= count) {
+                            root.gridIndex = count - 1;
+                        }
+                    }
+
+                    delegate: Item {
+                        width: pageGrid.cellWidth
+                        height: pageGrid.cellHeight
+
+                        property string wallpaperPath: modelData || ""
+                        property bool isSelected: getCurrentWallpaper() === modelData
+
+                        Rectangle {
+                            id: wallpaperCard
+                            anchors.fill: parent
+                            anchors.margins: Theme.spacingXS
+                            color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                            radius: Theme.cornerRadius
+                            clip: true
+
+                            Rectangle {
+                                anchors.fill: parent
+                                color: isSelected ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
+                                radius: parent.radius
+
+                                Behavior on color {
+                                    ColorAnimation {
+                                        duration: Theme.shortDuration
+                                        easing.type: Theme.standardEasing
+                                    }
                                 }
                             }
-                        }
 
-                        Rectangle {
+                            Rectangle {
-                            id: maskRect
+                                id: maskRect
-                            width: thumbnailImage.width
+                                width: thumbnailImage.width
-                            height: thumbnailImage.height
+                                height: thumbnailImage.height
-                            radius: Theme.cornerRadius
+                                radius: Theme.cornerRadius
-                            visible: false
+                                visible: false
-                            layer.enabled: true
+                                layer.enabled: true
-                        }
-
-                        CachingImage {
-                            id: thumbnailImage
-                            anchors.fill: parent
-                            imagePath: modelData || ""
-                            maxCacheSize: 256
-
-                            layer.enabled: true
-                            layer.effect: MultiEffect {
-                                maskEnabled: true
-                                maskThresholdMin: 0.5
-                                maskSpreadAtMin: 1.0
-                                maskSource: maskRect
                             }
-                        }
 
-                        StateLayer {
+                            CachingImage {
-                            anchors.fill: parent
+                                id: thumbnailImage
-                            cornerRadius: parent.radius
+                                anchors.fill: parent
-                            stateColor: Theme.primary
+                                imagePath: modelData || ""
-                        }
+                                maxCacheSize: 256
+                                opacity: status === Image.Ready ? 1 : 0
 
-                        MouseArea {
+                                layer.enabled: true
-                            id: wallpaperMouseArea
+                                layer.effect: MultiEffect {
-                            anchors.fill: parent
+                                    maskEnabled: true
-                            hoverEnabled: true
+                                    maskThresholdMin: 0.5
-                            cursorShape: Qt.PointingHandCursor
+                                    maskSpreadAtMin: 1.0
+                                    maskSource: maskRect
+                                }
 
-                            onClicked: {
+                                Behavior on opacity {
-                                gridIndex = index;
+                                    NumberAnimation {
-                                if (modelData) {
+                                        duration: Theme.shortDuration
-                                    setCurrentWallpaper(modelData);
+                                        easing.type: Theme.standardEasing
+                                    }
+                                }
+                            }
+
+                            StateLayer {
+                                anchors.fill: parent
+                                cornerRadius: parent.radius
+                                stateColor: Theme.primary
+                            }
+
+                            MouseArea {
+                                id: wallpaperMouseArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+
+                                onClicked: {
+                                    gridIndex = index;
+                                    if (modelData) {
+                                        setCurrentWallpaper(modelData);
+                                    }
                                 }
                             }
                         }

quickshell/Widgets/CachingImage.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import Quickshell.Io
 import qs.Common
 
 Item {
@@ -9,6 +8,7 @@ Item {
     property int maxCacheSize: 512
     property int status: isAnimated ? animatedImg.status : staticImg.status
     property int fillMode: Image.PreserveAspectCrop
+    property bool _fromCache: false
 
     readonly property bool isRemoteUrl: imagePath.startsWith("http://") || imagePath.startsWith("https://")
     readonly property bool isAnimated: {
@@ -69,58 +69,46 @@ Item {
         smooth: true
 
         onStatusChanged: {
-            if (source === root.cachePath && status === Image.Error) {
+            switch (status) {
+            case Image.Error:
+                if (!root._fromCache)
+                    return;
+                root._fromCache = false;
                 source = root.encodedImagePath;
                 return;
-            }
+            case Image.Ready:
-            if (root.isRemoteUrl || source !== root.encodedImagePath || status !== Image.Ready || !root.cachePath)
+                if (root._fromCache || root.isRemoteUrl || !root.cachePath)
-                return;
+                    return;
-            Paths.mkdir(Paths.imagecache);
+                if (!visible || width <= 0 || height <= 0 || !Window.window?.visible)
-            const grabPath = root.cachePath;
+                    return;
-            if (visible && width > 0 && height > 0 && Window.window?.visible) {
+                Paths.mkdir(Paths.imagecache);
+                const grabPath = root.cachePath;
                 grabToImage(res => res.saveToFile(grabPath));
-            }
-        }
-    }
-
-    Process {
-        id: cacheProbe
-
-        property string cachePath: ""
-        property string fallbackSource: ""
-
-        running: false
-        command: ["test", "-f", cachePath]
-
-        onExited: exitCode => {
-            if (cacheProbe.cachePath !== root.cachePath)
                 return;
-            staticImg.source = exitCode === 0 ? cacheProbe.cachePath : cacheProbe.fallbackSource;
+            }
         }
     }
 
     onImagePathChanged: {
         if (!imagePath) {
+            _fromCache = false;
             staticImg.source = "";
             return;
         }
         if (isAnimated)
             return;
         if (isRemoteUrl) {
+            _fromCache = false;
             staticImg.source = imagePath;
             return;
         }
-        Paths.mkdir(Paths.imagecache);
+        if (!cachePath) {
-        const hash = djb2Hash(normalizedPath);
+            _fromCache = false;
-        const cPath = hash ? `${Paths.stringify(Paths.imagecache)}/${hash}@${maxCacheSize}x${maxCacheSize}.png` : "";
+            staticImg.source = encodedImagePath;
-        const encoded = "file://" + normalizedPath.split('/').map(s => encodeURIComponent(s)).join('/');
-        if (!cPath) {
-            staticImg.source = encoded;
             return;
         }
-        cacheProbe.running = false;
+        Paths.mkdir(Paths.imagecache);
-        cacheProbe.cachePath = cPath;
+        _fromCache = true;
-        cacheProbe.fallbackSource = encoded;
+        staticImg.source = cachePath;
-        cacheProbe.running = true;
     }
 }