wallpaper selector: show folders

.config/quickshell/ii/modules/common/Directories.qml

@@ -16,6 +16,7 @@ Singleton {
     readonly property string documents: StandardPaths.standardLocations(StandardPaths.DocumentsLocation)[0]
     readonly property string downloads: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
     readonly property string pictures: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
+    readonly property string music: StandardPaths.standardLocations(StandardPaths.MusicLocation)[0]
     readonly property string videos: StandardPaths.standardLocations(StandardPaths.MoviesLocation)[0]
 
     // Other dirs used by the shell, without "file://"

.config/quickshell/ii/modules/common/Images.qml

@@ -0,0 +1,12 @@
+pragma Singleton
+
+import Quickshell
+
+Singleton {
+    readonly property list<string> validImageTypes: ["jpeg", "png", "webp", "tiff", "svg"]
+    readonly property list<string> validImageExtensions: ["jpg", "jpeg", "png", "webp", "tif", "tiff", "svg"]
+
+    function isValidImageByName(name: string): bool {
+        return validImageExtensions.some(t => name.endsWith(`.${t}`));
+    }
+}

.config/quickshell/ii/modules/common/widgets/DirectoryIcon.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.modules.common
+
+// From https://github.com/caelestia-dots/shell with modifications.
+// License: GPLv3
+
+Image {
+    id: root
+    required property var fileModelData
+    asynchronous: true
+    fillMode: Image.PreserveAspectFit
+
+    source: {
+        if (!fileModelData.fileIsDir)
+            return Quickshell.iconPath("application-x-zerosize");
+
+        const name = fileModelData.fileName;
+        const homeDir = Directories.home
+        if ([Directories.documents, Directories.downloads, Directories.music, Directories.pictures, Directories.videos].includes(name))
+            return Quickshell.iconPath(`folder-${name.toLowerCase()}`);
+
+        return Quickshell.iconPath("inode-directory");
+    }
+
+    onStatusChanged: {
+        if (status === Image.Error)
+            source = Quickshell.iconPath("error");
+    }
+
+    Process {
+        running: !fileModelData.fileIsDir
+        command: ["file", "--mime", "-b", fileModelData.filePath]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                const mime = text.split(";")[0].replace("/", "-");
+                root.source = Images.validImageTypes.some(t => mime === `image-${t}`) ? fileModelData.fileUrl : Quickshell.iconPath(mime, "image-missing");
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/wallpaperSelector/WallpaperDirectoryItem.qml

@@ -12,14 +12,16 @@ import Quickshell.Io
 
 Item {
     id: root
-    required property string path
+    required property var fileModelData
+    property bool isDirectory: fileModelData.fileIsDir
+    property bool useThumbnail: Images.isValidImageByName(fileModelData.fileName)
     property bool isHovered: false
 
     property alias color: background.color
     property alias radius: background.radius
     property alias padding: background.anchors.margins
 
-    signal activated()
+    signal activated
 
     Rectangle {
         id: background
@@ -45,21 +47,27 @@ Item {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
 
-                StyledRectangularShadow {
+                Loader {
-                    target: thumbnailImageLoader
+                    id: thumbnailShadowLoader
-                    radius: Appearance.rounding.small
+                    active: thumbnailImageLoader.active && thumbnailImageLoader.item.status === Image.Ready
+                    anchors.fill: thumbnailImageLoader
+                    sourceComponent: StyledRectangularShadow {
+                        target: thumbnailImageLoader
+                        anchors.fill: undefined
+                        radius: Appearance.rounding.small
+                    }
                 }
 
                 Loader {
                     id: thumbnailImageLoader
                     anchors.fill: parent
-                    active: root.visible
+                    active: root.useThumbnail
                     sourceComponent: Image {
                         id: thumbnailImage
                         source: {
-                            if (root.path.length == 0)
+                            if (fileModelData.filePath.length == 0)
                                 return;
-                            const resolvedUrl = Qt.resolvedUrl(root.path);
+                            const resolvedUrl = Qt.resolvedUrl(fileModelData.filePath);
                             const md5Hash = Qt.md5(resolvedUrl);
                             const cacheSize = "normal";
                             const thumbnailPath = `${Directories.genericCache}/thumbnails/${cacheSize}/${md5Hash}.png`;
@@ -79,6 +87,8 @@ Item {
                         Behavior on opacity {
                             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
                         }
+                        onStatusChanged: if (status === Image.Error)
+                            root.useThumbnail = false
 
                         layer.enabled: true
                         layer.effect: OpacityMask {
@@ -90,6 +100,17 @@ Item {
                         }
                     }
                 }
+
+                Loader {
+                    id: iconLoader
+                    active: !root.useThumbnail
+                    anchors.fill: parent
+                    sourceComponent: DirectoryIcon {
+                        fileModelData: root.fileModelData
+                        sourceSize.width: wallpaperItemColumnLayout.width
+                        sourceSize.height: wallpaperItemColumnLayout.height - wallpaperItemColumnLayout.spacing - wallpaperItemName.height
+                    }
+                }
             }
 
             StyledText {
@@ -105,7 +126,7 @@ Item {
                 Behavior on color {
                     animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
                 }
-                text: FileUtils.fileNameForPath(root.path)
+                text: fileModelData.fileName
             }
         }
     }

.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml

@@ -14,8 +14,6 @@ Item {
     id: root
     property int columns: 4
     property real previewCellAspectRatio: 4 / 3
-    property var wallpapers: Wallpapers.wallpapers
-    property string filterQuery: ""
     property bool useDarkMode: Appearance.m3colors.darkmode
 
     Keys.onPressed: event => {
@@ -118,14 +116,46 @@ Item {
                         implicitWidth: 140
                         clip: true
                         model: [
-                            { icon: "home", name: "Home", path: Directories.home },
+                            {
-                            { icon: "folder", name: "Documents", path: Directories.documents },
+                                icon: "home",
-                            { icon: "download", name: "Downloads", path: Directories.downloads },
+                                name: "Home",
-                            { icon: "image", name: "Pictures", path: Directories.pictures },
+                                path: Directories.home
-                            { icon: "movie", name: "Videos", path: Directories.videos },
+                            },
-                            { icon: "", name: "---", path: "INTENTIONALLY_INVALID_DIR" },
+                            {
-                            { icon: "wallpaper", name: "Wallpapers", path: `${Directories.pictures}/Wallpapers` },
+                                icon: "folder",
-                            { icon: "favorite", name: "Homework", path: `${Directories.pictures}/homework` },
+                                name: "Documents",
+                                path: Directories.documents
+                            },
+                            {
+                                icon: "download",
+                                name: "Downloads",
+                                path: Directories.downloads
+                            },
+                            {
+                                icon: "image",
+                                name: "Pictures",
+                                path: Directories.pictures
+                            },
+                            {
+                                icon: "movie",
+                                name: "Videos",
+                                path: Directories.videos
+                            },
+                            {
+                                icon: "",
+                                name: "---",
+                                path: "INTENTIONALLY_INVALID_DIR"
+                            },
+                            {
+                                icon: "wallpaper",
+                                name: "Wallpapers",
+                                path: `${Directories.pictures}/Wallpapers`
+                            },
+                            {
+                                icon: "favorite",
+                                name: "Homework",
+                                path: `${Directories.pictures}/homework`
+                            },
                         ]
                         delegate: RippleButton {
                             id: quickDirButton
@@ -191,7 +221,7 @@ Item {
 
                     GridView {
                         id: grid
-                        visible: root.wallpapers.length > 0
+                        visible: Wallpapers.folderModel.count > 0
 
                         readonly property int columns: root.columns
                         readonly property int rows: Math.max(1, Math.ceil(count / columns))
@@ -217,36 +247,29 @@ Item {
                                     item.isHovered = false;
                                 }
                             }
-                            currentIndex = Math.max(0, Math.min(root.wallpapers.length - 1, currentIndex + delta));
+                            currentIndex = Math.max(0, Math.min(grid.model.count - 1, currentIndex + delta));
                             positionViewAtIndex(currentIndex, GridView.Contain);
                         }
 
                         function activateCurrent() {
-                            print("ACTIVATE");
+                            const filePath = grid.model.get(currentIndex, "filePath")
-                            const path = grid.model.values[currentIndex];
+                            Wallpapers.select(filePath, root.useDarkMode);
-                            if (!path)
-                                return;
-                            GlobalStates.wallpaperSelectorOpen = false;
                             filterField.text = "";
-                            Wallpapers.apply(path, root.useDarkMode);
                         }
 
-                        model: ScriptModel {
+                        model: Wallpapers.folderModel
-                            values: root.wallpapers.filter(w => (w.toLowerCase().includes(root.filterQuery.toLowerCase())))
-                        }
                         onModelChanged: currentIndex = 0
 
                         delegate: WallpaperDirectoryItem {
                             required property var modelData
                             required property int index
-                            visible: modelData.length > 0
+                            fileModelData: modelData
                             width: grid.cellWidth
                             height: grid.cellHeight
-                            path: modelData
                             color: (index === grid?.currentIndex || parent?.isHovered) ? Appearance.colors.colPrimary : ColorUtils.transparentize(Appearance.colors.colPrimary)
                             onActivated: {
-                                Wallpapers.apply(path, root.useDarkMode);
+                                Wallpapers.select(fileModelData.filePath, root.useDarkMode);
-                                GlobalStates.wallpaperSelectorOpen = false;
+                                
                                 filterField.text = "";
                             }
                         }
@@ -339,7 +362,7 @@ Item {
                                     }
 
                                     onTextChanged: {
-                                        root.filterQuery = text;
+                                        Wallpapers.searchQuery = text;
                                     }
 
                                     Keys.onPressed: event => {
@@ -389,4 +412,11 @@ Item {
             }
         }
     }
+
+    Connections {
+        target: Wallpapers
+        function onChanged() {
+            GlobalStates.wallpaperSelectorOpen = false;
+        }
+    }
 }

.config/quickshell/ii/services/Wallpapers.qml

@@ -15,12 +15,15 @@ Singleton {
     id: root
 
     property string directory: FileUtils.trimFileProtocol(`${Directories.pictures}/Wallpapers`)
+    property alias folderModel: folderModel // Expose for direct binding when needed
+    property string searchQuery: ""
     readonly property list<string> extensions: [ // TODO: add videos
         "jpg", "jpeg", "png", "webp", "avif", "bmp", "svg"
     ]
-    property alias filesModel: files // Expose for direct binding when needed
     property list<string> wallpapers: [] // List of absolute file paths (without file://)
 
+    signal changed()
+
     // Executions
     Process {
         id: applyProc
@@ -37,6 +40,29 @@ Singleton {
             "--image", path,
             "--mode", (darkMode ? "dark" : "light")
         ])
+        root.changed()
+    }
+
+    Process {
+        id: selectProc
+        property string filePath: ""
+        property bool darkMode: Appearance.m3colors.darkmode
+        function select(filePath, darkMode = Appearance.m3colors.darkmode) {
+            selectProc.filePath = filePath
+            selectProc.darkMode = darkMode
+            selectProc.exec(["test", "-d", FileUtils.trimFileProtocol(filePath)])
+        }
+        onExited: (exitCode, exitStatus) => {
+            if (exitCode === 0) {
+                setDirectory(selectProc.filePath);
+                return;
+            }
+            root.apply(selectProc.filePath, selectProc.darkMode);
+        }
+    }
+
+    function select(filePath, darkMode = Appearance.m3colors.darkmode) {
+        selectProc.select(filePath);
     }
 
     Process {
@@ -59,9 +85,10 @@ Singleton {
 
     // Folder model
     FolderListModel {
-        id: files
+        id: folderModel
         folder: Qt.resolvedUrl(root.directory)
-        nameFilters: root.extensions.map(ext => `*.${ext}`)
+        caseSensitive: false
+        nameFilters: root.extensions.map(ext => `*${searchQuery.split(" ").filter(s => s.length > 0).map(s => `*${s}*`)}*.${ext}`)
         showDirs: true
         showDotAndDotDot: false
         showOnlyReadable: true
@@ -69,8 +96,8 @@ Singleton {
         sortReversed: false
         onCountChanged: {
             root.wallpapers = []
-            for (let i = 0; i < files.count; i++) {
+            for (let i = 0; i < folderModel.count; i++) {
-                const path = files.get(i, "filePath") || FileUtils.trimFileProtocol(files.get(i, "fileURL"))
+                const path = folderModel.get(i, "filePath") || FileUtils.trimFileProtocol(folderModel.get(i, "fileURL"))
                 if (path && path.length) root.wallpapers.push(path)
             }
         }