NPanel: add bar detection while dragging

WallpaperSelectorPanel: adjust layout

Modules/WallpaperSelectorPanel/WallpaperSelectorPanel.qml

@@ -6,6 +6,7 @@ import Quickshell.Wayland
 import qs.Commons
 import qs.Services
 import qs.Widgets
+import "../../Helpers/FuzzySort.js" as FuzzySort
 
 NPanel {
   id: root
@@ -13,7 +14,7 @@ NPanel {
   preferredWidth: 640
   preferredHeight: 480
   preferredWidthRatio: 0.4
-  preferredHeightRatio: 0.41
+  preferredHeightRatio: 0.48
   panelAnchorHorizontalCenter: true
   panelAnchorVerticalCenter: true
   panelKeyboardFocus: true
@@ -23,11 +24,14 @@ NPanel {
   // Local reactive state
   property list<string> wallpapersList: []
   property string currentWallpaper: ""
+  property string filterText: ""
+  property list<string> filteredWallpapers: []
 
   function refreshForScreen() {
     const name = Screen.name
     wallpapersList = WallpaperService.getWallpapersList(name)
     currentWallpaper = WallpaperService.getWallpaper(name)
+    updateFiltered()
   }
 
   onOpened: refreshForScreen()
@@ -51,6 +55,28 @@ NPanel {
     }
   }
 
+  function updateFiltered() {
+    if (!filterText || filterText.trim().length === 0) {
+      filteredWallpapers = wallpapersList
+      return
+    }
+    // Build objects with basename for ranking
+    const items = wallpapersList.map(function (p) {
+      return {
+        "path": p,
+        "name": p.split('/').pop()
+      }
+    })
+    const results = FuzzySort.go(filterText.trim(), items, {
+                                   "key": 'name',
+                                   "limit": 200
+                                 })
+    // Map back to path list
+    filteredWallpapers = results.map(function (r) {
+      return r.obj.path
+    })
+  }
+
   panelContent: Rectangle {
     color: Color.transparent
 
@@ -95,10 +121,9 @@ NPanel {
 
       NDivider {
         Layout.fillWidth: true
-        Layout.topMargin: Style.marginXL * scaling
-        Layout.bottomMargin: Style.marginXL * scaling
       }
 
+      // Scroll container mirrors SettingsPanel to avoid overflow and keep interactions smooth
       Flickable {
         Layout.fillWidth: true
         Layout.fillHeight: true
@@ -124,20 +149,43 @@ NPanel {
               visible: (wallpapersList.length > 0)
             }
 
+            // Filter input
+            RowLayout {
+              Layout.fillWidth: true
+              spacing: Style.marginM * scaling
+
+              NText {
+                text: "Search:"
+                color: Color.mOnSurface
+                font.pointSize: Style.fontSizeM * scaling
+                Layout.preferredWidth: implicitWidth
+              }
+
+              NTextInput {
+                placeholderText: "Type to filter wallpapers..."
+                text: filterText
+                onTextChanged: {
+                  filterText = text
+                  updateFiltered()
+                }
+                Layout.fillWidth: true
+              }
+            }
+
             // Grid container
             Item {
               visible: !WallpaperService.scanning
               Layout.fillWidth: true
-              Layout.preferredHeight: Math.ceil(wallpapersList.length / wallpaperGridView.columns) * wallpaperGridView.cellHeight
+              Layout.preferredHeight: Math.ceil(filteredWallpapers.length / wallpaperGridView.columns) * wallpaperGridView.cellHeight
 
               GridView {
                 id: wallpaperGridView
                 anchors.fill: parent
-                model: wallpapersList
+                model: filteredWallpapers
                 interactive: false
                 clip: true
 
-                property int columns: 5
+                property int columns: 4
                 property int itemSize: Math.floor((width - leftMargin - rightMargin - (columns * Style.marginS * scaling)) / columns)
 
                 cellWidth: Math.floor((width - leftMargin - rightMargin) / columns)
@@ -227,7 +275,7 @@ NPanel {
               radius: Style.radiusM * scaling
               border.color: Color.mOutline
               border.width: Math.max(1, Style.borderS * scaling)
-              visible: wallpapersList.length === 0 || WallpaperService.scanning
+              visible: (filteredWallpapers.length === 0 && !WallpaperService.scanning) || WallpaperService.scanning
               Layout.fillWidth: true
               Layout.preferredHeight: 130 * scaling
 
@@ -241,7 +289,7 @@ NPanel {
 
               ColumnLayout {
                 anchors.fill: parent
-                visible: wallpapersList.length === 0 && !WallpaperService.scanning
+                visible: filteredWallpapers.length === 0 && !WallpaperService.scanning
                 Item {
                   Layout.fillHeight: true
                 }
@@ -252,13 +300,13 @@ NPanel {
                   Layout.alignment: Qt.AlignHCenter
                 }
                 NText {
-                  text: "No wallpaper found."
+                  text: (filterText && filterText.length > 0) ? "No match for filter." : "No wallpaper found."
                   color: Color.mOnSurface
                   font.weight: Style.fontWeightBold
                   Layout.alignment: Qt.AlignHCenter
                 }
                 NText {
-                  text: "Configure your wallpaper directory with images."
+                  text: (filterText && filterText.length > 0) ? "Try a different query." : "Configure your wallpaper directory with images."
                   color: Color.mOnSurfaceVariant
                   wrapMode: Text.WordWrap
                   Layout.alignment: Qt.AlignHCenter
@@ -268,6 +316,12 @@ NPanel {
                 }
               }
             }
+
+            NDivider {
+              Layout.fillWidth: true
+              Layout.topMargin: Style.marginXL * scaling
+              Layout.bottomMargin: Style.marginXL * scaling
+            }
           }
         }
       }

Widgets/NPanel.qml

@@ -441,11 +441,21 @@ Loader {
             var nx = dragStartX + translation.x
             var ny = dragStartY + translation.y
 
-            // Clamp within screen bounds accounting for margins
-            var maxX = panelWindow.width - panelBackground.width - panelBackground.marginRight
-            var minX = panelBackground.marginLeft
-            var maxY = panelWindow.height - panelBackground.height - panelBackground.marginBottom
-            var minY = panelBackground.marginTop
+            // Calculate gaps so we never overlap the bar on any side
+            var baseGap = Style.marginS * scaling
+            var floatExtraH = Settings.data.bar.floating ? Settings.data.bar.marginHorizontal * 2 * Style.marginXL * scaling : 0
+            var floatExtraV = Settings.data.bar.floating ? Settings.data.bar.marginVertical * 2 * Style.marginXL * scaling : 0
+
+            var insetLeft = baseGap + ((barIsVisible && barPosition === "left") ? (Style.barHeight * scaling + floatExtraH) : 0)
+            var insetRight = baseGap + ((barIsVisible && barPosition === "right") ? (Style.barHeight * scaling + floatExtraH) : 0)
+            var insetTop = baseGap + ((barIsVisible && barPosition === "top") ? (Style.barHeight * scaling + floatExtraV) : 0)
+            var insetBottom = baseGap + ((barIsVisible && barPosition === "bottom") ? (Style.barHeight * scaling + floatExtraV) : 0)
+
+            // Clamp within screen bounds accounting for insets
+            var maxX = panelWindow.width - panelBackground.width - insetRight
+            var minX = insetLeft
+            var maxY = panelWindow.height - panelBackground.height - insetBottom
+            var minY = insetTop
 
             panelBackground.manualX = Math.round(Math.max(minX, Math.min(nx, maxX)))
             panelBackground.manualY = Math.round(Math.max(minY, Math.min(ny, maxY)))