wallpaper picker

Helpers/WallpaperPath.qml

@@ -0,0 +1,23 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property alias currentWallpaperPath: adapter.currentWallpaperPath
+
+    FileView {
+        id: fileView
+        path: Quickshell.env("HOME") + "/.local/state/z-bar/wallpaper_path.json"
+
+        watchChanges: true
+        onFileChanged: reload()
+        onAdapterUpdated: writeAdapter()
+        JsonAdapter {
+            id: adapter
+            property string currentWallpaperPath: ""
+        }
+    }
+}

Modules/CustomTextField.qml

@@ -1,6 +1,7 @@
 import Quickshell
 import QtQuick
 import QtQuick.Controls
+import qs.Helpers
 
 TextField {
     id: root
@@ -63,15 +64,25 @@ TextField {
 
     Keys.onPressed: {
         if ( event.key === Qt.Key_Down ) {
-            appListView.decrementCurrentIndex();
+            if ( appListLoader.active ) {
+                appListLoader.item.decrementCurrentIndex();
+            } else {
+                wallpaperPickerLoader.item.decrementCurrentIndex();
+            }
             event.accepted = true;
         } else if ( event.key === Qt.Key_Up ) {
-            appListView.incrementCurrentIndex();
+            if ( appListLoader.active ) {
+                appListLoader.item.incrementCurrentIndex();
+            } else {
+                wallpaperPickerLoader.item.incrementCurrentIndex();
+            }
             event.accepted = true;
         } else if ( event.key === Qt.Key_Return || event.key === Qt.Key_Enter ) {
-            if ( appListView.currentItem ) {
-                Search.launch(appListView.currentItem.modelData);
+            if ( appListLoader.active ) {
+                Search.launch(appListLoader.item.currentItem.modelData);
                 launcherWindow.visible = false;
+            } else if ( wallpaperPickerLoader.active ) {
+                WallpaperPath.currentWallpaperPath = wallpaperPickerLoader.item.currentItem.modelData.path;
             }
             event.accepted = true;
         } else if ( event.key === Qt.Key_Escape ) {

Modules/Launcher.qml

@@ -55,7 +55,7 @@ Scope {
         Rectangle {
             id: shadowRect
             anchors {
-                top: appListView.count > 0 ? appListRect.top : backgroundRect.top
+                top: appListRect.top
                 bottom: backgroundRect.bottom
                 left: appListRect.left
                 right: appListRect.right
@@ -85,7 +85,7 @@ Scope {
             anchors.bottom: parent.bottom
             anchors.bottomMargin: -1
             implicitHeight: mainLayout.childrenRect.height + 20
-            implicitWidth: 600
+            implicitWidth: appListRect.implicitWidth
             x: Math.round(( parent.width - width ) / 2 )
             color: "#d01a1a1a"
             opacity: 1
@@ -100,7 +100,7 @@ Scope {
                     easing.bezierCurve: MaterialEasing.expressiveDefaultSpatial
                     property: "implicitHeight"
                     from: 40
-                    to: appListView.implicitHeight + 20
+                    to: appListContainer.implicitHeight + 20
                 }
                 Anim {
                     target: appListRect
@@ -135,7 +135,7 @@ Scope {
                     duration: MaterialEasing.expressiveFastSpatialTime
                     easing.bezierCurve: MaterialEasing.expressiveDefaultSpatial
                     property: "implicitHeight"
-                    from: appListView.implicitHeight
+                    from: appListContainer.implicitHeight
                     to: 40
                 }
                 SequentialAnimation {
@@ -196,6 +196,7 @@ Scope {
             topRightRadius: 8
             topLeftRadius: 8
             border.color: backgroundRect.border.color
+            clip: true
 
             Behavior on implicitHeight {
                 Anim {
@@ -204,10 +205,17 @@ Scope {
                 }
             }
 
+            Behavior on implicitWidth {
+                Anim {
+                    duration: MaterialEasing.expressiveFastSpatialTime
+                    easing.bezierCurve: MaterialEasing.expressiveDefaultSpatial
+                }
+            }
+
             Item {
                 anchors.centerIn: parent
                 id: appListContainer
-                visible: appListView.count > 0
+                visible: true
                 clip: true
                 property var showWallpapers: searchInput.text.startsWith(">")
                 state: showWallpapers ? "wallpaperpicker" : "apps"
@@ -216,7 +224,7 @@ Scope {
                         name: "apps"
                         PropertyChanges {
                             appListLoader.active: true
-                            appListContainer.implicitHeight: appListView.implicitHeight + 20
+                            appListContainer.implicitHeight: appListLoader.implicitHeight
                             appListContainer.implicitWidth: 600
                         }
                     },
@@ -224,8 +232,8 @@ Scope {
                         name: "wallpaperpicker"
                         PropertyChanges {
                             wallpaperPickerLoader.active: true
-                            appListContainer.implicitHeight: wallpaperPickerView.implicitHeight + 20
-                            appListContainer.implicitWidth: wallpaperPickerView.implicitWidth + 20
+                            appListContainer.implicitHeight: wallpaperPickerLoader.implicitHeight 
+                            appListContainer.implicitWidth: wallpaperPickerLoader.implicitWidth
                         }
                     }
                 ]
@@ -233,7 +241,7 @@ Scope {
                     id: wallpaperPickerLoader
                     active: false
                     anchors.fill: parent
-                    sourceComponent: ListView {
+                    sourceComponent: PathView {
                         id: wallpaperPickerView
                         anchors.fill: parent
                         model: ScriptModel {
@@ -243,15 +251,40 @@ Scope {
                             values: SearchWallpapers.query( search )
                         }
 
-                        orientation: ListView.Horizontal
-                        spacing: 10
-                        implicitHeight: 300
-                        implicitWidth: Math.min( wallpaperModel.count, 7 ) * 192 + Math.max(0, wallpaperModel.count -1) * 10
+                        cacheItemCount: 5
+                        snapMode: PathView.SnapToItem
+                        preferredHighlightBegin: 0.5
+                        preferredHighlightEnd: 0.5
+                        highlightRangeMode: PathView.StrictlyEnforceRange
+
+                        pathItemCount: 7
+                        implicitHeight: 212
+                        implicitWidth: Math.min( wallpaperModel.values.length, 7 ) * 192 + Math.max(0, wallpaperModel.values.length -1) * 10
+
+                        path: Path {
+                            startY: wallpaperPickerView.height / 2
+
+                            PathAttribute {
+                                name: "z"
+                                value: 0
+                            }
+                            PathLine {
+                                x: wallpaperPickerView.width / 2
+                                relativeY: 0
+                            }
+                            PathAttribute {
+                                name: "z"
+                                value: 1
+                            }
+                            PathLine {
+                                x: wallpaperPickerView.width
+                                relativeY: 0
+                            }
+                        }
 
                         focus: true
 
                         delegate: WallpaperItem { }
-
                     }
                 }
                 Loader {

Modules/WallpaperItem.qml

@@ -1,18 +1,44 @@
 import Quickshell
+import Quickshell.Widgets
 import QtQuick
 import Caelestia.Models
 
 Item {
     id: root
     required property FileSystemEntry modelData
-    implicitWidth: 192
-    implicitHeight: 108
+    implicitWidth: 288
+    implicitHeight: 162
 
-    Image {
-        id: thumbnailImage
+    scale: 0.5
+    opacity: 0
+    z: PathView.z ?? 0
 
+    Component.onCompleted: {
+        scale = Qt.binding(() => PathView.isCurrentItem ? 1 : PathView.onPath ? 0.8 : 0);
+        opacity = Qt.binding(() => PathView.onPath ? 1 : 0);
+    }
+
+    ClippingRectangle {
         anchors.fill: parent
-        fillMode: Image.PreserveAspectCrop
-        source: root.modelData.path
+        radius: 8
+        color: "#10FFFFFF"
+        Image {
+            id: thumbnailImage
+
+            asynchronous: true
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectCrop
+            source: root.modelData.path
+            sourceSize.width: 960
+            sourceSize.height: 540
+        }
+    }
+
+    Behavior on scale {
+        Anim {}
+    }
+
+    Behavior on opacity {
+        Anim {}
     }
 }

Wallpaper.qml

@@ -1,6 +1,7 @@
 import Quickshell
 import QtQuick
 import Quickshell.Wayland
+import qs.Helpers
 
 Scope {
     Variants {
@@ -21,8 +22,8 @@ Scope {
             Image {
                 id: wallpaperImage
                 anchors.fill: parent
-                source: "/mnt/IronWolf/SDImages/SWWW_Wals/ComfyUI_00037_.png"
-                fillMode: Image.PreserveAspectFit
+                source: WallpaperPath.currentWallpaperPath
+                fillMode: Image.PreserveAspectCrop
             }
         }
     }

shell.qml

@@ -5,7 +5,7 @@ import qs.Modules
 
 Scope {
     Bar {}
-    // Wallpaper {}
+    Wallpaper {}
     NotifServer {}
     Launcher {}
 }