wallpaper selection

components/composite/WallpaperItem.qml

@@ -0,0 +1,14 @@
+import QtQuick
+
+Image {
+    asynchronous: true
+    fillMode: Image.PreserveAspectCrop
+    sourceSize.width: parent.width
+    sourceSize.height: parent.height
+
+    Behavior on scale {
+        NumberAnimation {
+            duration: 200
+        }
+    }
+}

components/composite/WallpaperList.qml

@@ -0,0 +1,65 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.services
+import QtQuick
+import Qt.labs.folderlistmodel 2.9
+import Quickshell.Widgets
+
+ListView {
+    id: list
+
+    orientation: ListView.Horizontal
+
+    clip: true
+    spacing: 8
+    snapMode: ListView.SnapToItem
+
+    implicitWidth: 160 * 3
+    implicitHeight: 90
+    model: FolderListModel {
+        nameFilters: ["*.jpg"]
+        folder: `${Paths.home}/Wallpapers`
+        showDirs: false
+    }
+    delegate: Item {
+        id: delegate
+
+        required property url fileUrl
+        required property int index
+        property bool hovered: ListView.isCurrentItem
+
+        implicitWidth: 160
+        implicitHeight: 90
+
+        Rectangle {
+            color: Styling.theme.base200
+            anchors.fill: parent
+            radius: 12
+            scale: delegate.hovered ? 1.0 : 0.9
+            Behavior on scale {
+                NumberAnimation {
+                    duration: Styling.animations.veryFast
+                }
+            }
+
+            Image {
+                id: image
+
+                asynchronous: true
+                anchors.fill: parent
+                fillMode: Image.PreserveAspectCrop
+                source: delegate.fileUrl
+            }
+
+            MouseArea {
+                anchors.fill: image
+
+                cursorShape: Qt.PointingHandCursor
+                hoverEnabled: true
+                onEntered: list.currentIndex = delegate.index
+                onClicked: WallpaperService.currentWallpaper = delegate.fileUrl
+            }
+        }
+    }
+}

modules/Shell.qml

@@ -5,6 +5,7 @@ import "launcher"
 import "pomodoro"
 import "powermenu"
 import "storybook"
+import "wallpaper"
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
@@ -17,6 +18,23 @@ Variants {
 
         required property ShellScreen modelData
 
+        PanelWindow {
+            id: background
+
+            // visible: false
+            anchors.top: true
+            anchors.left: true
+            anchors.right: true
+            anchors.bottom: true
+
+            color: "transparent"
+
+            WlrLayershell.exclusionMode: ExclusionMode.Ignore
+            WlrLayershell.layer: WlrLayer.Background
+
+            Wallpaper {}
+        }
+
         PanelWindow {
             id: exclusionZone
 

modules/configuration/Configuration.qml

@@ -118,12 +118,6 @@ StyledPanelWindow {
             title: "Styling"
             view: StylingView {}
         }
-
-        ConfigurationView {
-            icon: Styling.lucide.icons.swatchBook
-            title: "Wallpapers"
-            view: Wallpaper {}
-        }
     }
 
     component ConfigurationView: QtObject {

modules/configuration/StylingView.qml

@@ -1,19 +1,40 @@
+pragma ComponentBehavior: Bound
+
 import qs.components
 import qs.components.composite
 import qs.config
+import qs.services
 import QtQuick
 import QtQuick.Layouts
+import Qt.labs.folderlistmodel 2.9
+import Quickshell.Widgets
 
-StyledPane {
+ColumnLayout {
-    GridLayout {
+    StyledPane {
+        GridLayout {
 
-        columnSpacing: Styling.layout.spacing.xl
+            columnSpacing: Styling.layout.spacing.xl
 
-        StyledText {
+            StyledText {
-            text: "Theme"
+                text: "Theme"
-            font.pixelSize: Styling.typography.textSize.lg
+                font.pixelSize: Styling.typography.textSize.lg
+            }
+
+            ThemeComboBox {}
         }
+    }
+    // StyledPane {
+    //     WallpaperList {}
+    // }
 
-        ThemeComboBox {}
+    StyledPane {
+        padding: 2
+        ClippingWrapperRectangle {
+
+            radius: Styling.theme.radiusBox
+            color: "transparent"
+
+            WallpaperList {}
+        }
     }
 }

modules/configuration/Wallpaper.qml

@@ -1,13 +0,0 @@
-import qs.services
-import QtQuick
-import QtQuick.Layouts
-
-ColumnLayout {
-    Repeater {
-        model: WallpaperService.files
-        delegate: Text {
-            required property string dataModel
-            text: dataModel
-        }
-    }
-}

modules/storybook/Components.qml

@@ -1,7 +1,7 @@
 import qs.components
 import qs.components.composite
 import qs.config
-import qs.config
+import qs.services
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts

modules/wallpaper/Wallpaper.qml

@@ -0,0 +1,32 @@
+import qs.services
+import QtQuick
+import QtQuick.Controls
+
+StackView {
+    id: stack
+    property url wallpaper: WallpaperService.currentWallpaper
+
+    anchors.fill: parent
+
+    replaceEnter: Transition {
+        OpacityAnimator {
+            from: 0.0
+            to: 1.0
+            duration: 1000
+        }
+    }
+    replaceExit: Transition {
+        PauseAnimation {
+            duration: 1100
+        }
+    }
+
+    Component {
+        id: img
+        Image {}
+    }
+
+    onWallpaperChanged: stack.replace(img, {
+        "source": stack.wallpaper
+    })
+}

services/WallpaperService.qml

@@ -1,5 +1,7 @@
 pragma Singleton
 
+import qs.config
+import qs.utils
 import Quickshell
 import Quickshell.Io
 
@@ -7,18 +9,44 @@ Singleton {
     id: root
 
     property string directory: "~/Wallpapers/"
-    property list<url> files: []
+    property alias files: properties.files
+    property alias currentWallpaper: properties.currentWallpaper
     property list<string> fileTypes: ["jpg", "jpeg", "png"]
+    property string command: `find ${root.directory} -maxdepth 1 -type f`
 
     Process {
         running: true
-        command: ["bash", "-c", `find "$dir" -maxdepth 1 -type f & inotifywait -m -r ${root.directory} -e modify,move,create,delete | while read dir action; do find "$dir" -maxdepth 1 -type f; done`]
+        command: ["bash", "-c", `find ${root.directory} -maxdepth 1 -type f`]
-        stderr: StdioCollector {
+        stdout: StdioCollector {
-            onStreamFinished: console.log(`line read: ${this.text}`)
+            onStreamFinished: {
+                root.files = this.text.split("\n");
+            }
         }
-        stdout: SplitParser {
+    }
-            splitMarker: "\n"
+
-            onRead: data => root.files = data?.split("\n") ?? []
+    DirectoryWatcher {
+        path: root.directory
+        fileFilter: ["jpg", "jpeg", "png"]
+        onCreated: path => root.files.push(path)
+        onDeleted: path => root.files.filter(file => file != path)
+        onMovedFrom: path => root.files.filter(file => file != path)
+        onMovedTo: path => path => root.files.push(path)
+    }
+
+    FileView {
+        path: `${Paths.cache}/wallpaper.json`
+
+        watchChanges: true
+        onFileChanged: reload()
+
+        // when changes are made to properties in the adapter, save them
+        onAdapterUpdated: writeAdapter()
+
+        JsonAdapter {
+            id: properties
+
+            property url currentWallpaper: ""
+            property list<string> files: []
         }
     }
 }

utils/DirectoryWatcher.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import Quickshell.Io
+
+Item {
+    id: root
+
+    required property string path
+    property bool recursive: true
+    property list<string> fileFilter: []
+    signal created(path: string)
+    signal modified(path: string)
+    signal deleted(path: string)
+    signal movedFrom(path: string)
+    signal movedTo(path: string)
+
+    Process {
+        running: true
+        command: ["bash", "-c", `inotifywait -m ${root.recursive ? "-r" : ""} ${root.path} -e modify,move,create,delete --format "%e-%w%f"`]
+        stderr: StdioCollector {
+            onStreamFinished: console.error(`DirectoryWatcher: ${this.text}`)
+        }
+        stdout: SplitParser {
+            splitMarker: "\n"
+            onRead: data => {
+                const [action, path] = data.split("-");
+                if (path.endsWith("~") || root.fileFilter.length > 0 && !root.fileFilter.some(filter => path.endsWith(filter))) {
+                    return;
+                }
+                if (action.includes("CREATE")) {
+                    root.created(path);
+                } else if (action.includes("MODIFY")) {
+                    root.modified(path);
+                } else if (action.includes("DELETE")) {
+                    root.deleted(path);
+                } else if (action.includes("MOVED_FROM")) {
+                    root.movedFrom(path);
+                } else if (action.includes("MOVED_TO")) {
+                    root.movedTo(path);
+                }
+            }
+        }
+    }
+}