wallpaperPicker search functionality

modules/wp/WallpaperPicker.qml

@@ -12,6 +12,7 @@ PanelWindow {
     implicitHeight: screen.height * 0.5
     color: "transparent"
     visible: true
+    focusable: true
 
     Rectangle {
         anchors.fill: parent
@@ -21,6 +22,33 @@ PanelWindow {
         border.width: 2
         border.color: Colors.outlineVariant
 
+        clip: true
+
+        TextField {
+            id: filterText
+            placeholderText: "Search..."
+            onTextChanged: wallpaperContainer.filterImages()
+
+            anchors.top: parent.top
+            anchors.topMargin: 20
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            width: parent.width - 35
+            height: 45
+
+            color: "white"
+            placeholderTextColor: "#888"
+
+            background: Rectangle {
+
+                radius: 12
+                color: "#2b2b2b"
+                border.color: filterText.activeFocus ? "#4da3ff" : "#555"
+                border.width: 1
+            }
+
+        }
+
         
         //Wallpaper space
         Rectangle {
@@ -44,6 +72,31 @@ PanelWindow {
                 folder: "file://" + Quickshell.env("HOME") + "/.cache/wallpaper-thumbs"
                 nameFilters: ["*.png", "*.jpg", "*.jpeg"]
                 showDirs: false
+
+                onCountChanged: {
+                    wallpaperContainer.filterImages()  // ensure filteredModel is filled when folder loads
+                }
+            }
+
+            ListModel {
+                id: filteredModel
+
+            }
+
+            function filterImages(){
+                filteredModel.clear()
+
+                for (let i = 0; i < imagesModel.count; ++i) {
+                    let name = imagesModel.get(i, "fileName")
+                    let path = imagesModel.get(i, "filePath")
+                    let url = imagesModel.get(i, "fileUrl")
+
+
+                    if (name.toLowerCase().startsWith(filterText.text.toLowerCase())) {
+                        filteredModel.append({ fileName: name, filePath: path, fileUrl: url })
+                    }
+                }
+
             }
 
             // grid 
@@ -56,7 +109,7 @@ PanelWindow {
                     anchors.fill: parent
                     cellWidth: parent.width/6
                     cellHeight: parent.height/2 + 15
-                    model: imagesModel
+                    model:filteredModel
 
                     boundsBehavior: Flickable.StopAtBounds