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/StylingView.qml

@@ -1,10 +1,16 @@
+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 {
+    StyledPane {
         GridLayout {
 
             columnSpacing: Styling.layout.spacing.xl
@@ -16,4 +22,19 @@ StyledPane {
 
             ThemeComboBox {}
         }
+    }
+    // StyledPane {
+    //     WallpaperList {}
+    // }
+
+    StyledPane {
+        padding: 2
+        ClippingWrapperRectangle {
+
+            radius: Styling.theme.radiusBox
+            color: "transparent"
+
+            WallpaperList {}
+        }
+    }
 }

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
+    })
+}