Add NInputButton widget and FileManagerService integration

NInputButton.qml: new input+button widget
FileManagerService.qml: singleton service for file/folder dialogs
NFileManager.qml: create first iteration of filemanager
WallpaperTab.qml: integrate NInputButton
ScreenRecorderTab.qml: integrate NInputButton
GeneralTab.qml: integrate NInputButton

Modules/SettingsPanel/Tabs/GeneralTab.qml

@@ -30,15 +30,30 @@ ColumnLayout {
       Layout.alignment: Qt.AlignTop
     }
 
-    NTextInput {
-      Layout.fillWidth: true
+    NInputButton {
       label: `${Quickshell.env("USER") || "user"}'s profile picture`
       description: "Your profile picture that appears throughout the interface."
       text: Settings.data.general.avatarImage
       placeholderText: "/home/user/.face"
-      onEditingFinished: {
+      buttonIcon: "photo"
+      buttonTooltip: "Browse for avatar image"
+
+      onInputEditingFinished: {
         Settings.data.general.avatarImage = text
       }
+      onButtonClicked: {
+        FileManagerService.open({
+                                  "title": "Select Avatar Image",
+                                  "initialPath": Settings.data.general.avatarImage || Quickshell.env("HOME"),
+                                  "selectFiles": true,
+                                  "scaling": scaling,
+                                  "onSelected": function (path) {
+                                    Settings.data.general.avatarImage = path
+                                    text = path
+                                  },
+                                  "parent": root
+                                })
+      }
     }
   }
 

Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml

@@ -20,16 +20,30 @@ ColumnLayout {
     spacing: Style.marginS * scaling
     Layout.fillWidth: true
 
-    NTextInput {
+    NInputButton {
       label: "Output folder"
       description: "Folder where screen recordings will be saved."
       placeholderText: "/home/xxx/Videos"
       text: Settings.data.screenRecorder.directory
-      onEditingFinished: {
+      buttonIcon: "folder-open"
+      buttonTooltip: "Browse for output folder"
+
+      onInputEditingFinished: {
         Settings.data.screenRecorder.directory = text
       }
-
-      Layout.maximumWidth: 420 * scaling
+      onButtonClicked: {
+        FileManagerService.open({
+                                  "title": "Select Output Folder",
+                                  "initialPath": Settings.data.screenRecorder.directory || Quickshell.env("HOME") + "/Videos",
+                                  "selectFiles": false,
+                                  "scaling": scaling,
+                                  "onSelected": function (path) {
+                                    Settings.data.screenRecorder.directory = path
+                                    text = path
+                                  },
+                                  "parent": root
+                                })
+      }
     }
 
     ColumnLayout {

Modules/SettingsPanel/Tabs/WallpaperTab.qml

@@ -29,14 +29,21 @@ ColumnLayout {
     spacing: Style.marginL * scaling
     Layout.fillWidth: true
 
-    NTextInput {
+    NInputButton {
+      id: wallpaperPathInput
       label: "Wallpaper folder"
       description: "Path to your main wallpaper folder."
       text: Settings.data.wallpaper.directory
-      onEditingFinished: {
+      buttonIcon: "folder-open"
+      buttonTooltip: "Browse for wallpaper folder"
+      Layout.fillWidth: true
+
+      onInputEditingFinished: {
         Settings.data.wallpaper.directory = text
       }
-      Layout.maximumWidth: 420 * scaling
+      onButtonClicked: {
+        openFileManager()
+      }
     }
 
     // Monitor-specific directories
@@ -73,11 +80,22 @@ ColumnLayout {
               Layout.preferredWidth: 90 * scaling
             }
             NTextInput {
+              id: monitorPathInput
               Layout.fillWidth: true
               text: WallpaperService.getMonitorDirectory(modelData.name)
               onEditingFinished: WallpaperService.setMonitorDirectory(modelData.name, text)
               Layout.maximumWidth: 420 * scaling
             }
+
+            NIconButton {
+              icon: "folder-open"
+              tooltipText: "Browse for wallpaper folder"
+              baseSize: Style.baseWidgetSize * 0.8
+              Layout.alignment: Qt.AlignBottom
+              onClicked: {
+                openMonitorFileManager(modelData.name)
+              }
+            }
           }
         }
       }
@@ -324,4 +342,32 @@ ColumnLayout {
     Layout.topMargin: Style.marginXL * scaling
     Layout.bottomMargin: Style.marginXL * scaling
   }
+
+  // File manager functions
+  function openFileManager() {
+    FileManagerService.open({
+                              "title": "Select Wallpaper Folder",
+                              "initialPath": Settings.data.wallpaper.directory || Quickshell.env("HOME"),
+                              "selectFiles": false,
+                              "scaling": scaling,
+                              "onSelected": function (path) {
+                                Settings.data.wallpaper.directory = path
+                                wallpaperPathInput.text = path
+                              },
+                              "parent": root
+                            })
+  }
+
+  function openMonitorFileManager(monitorName) {
+    FileManagerService.open({
+                              "title": "Select Monitor Wallpaper Folder",
+                              "initialPath": WallpaperService.getMonitorDirectory(monitorName),
+                              "selectFiles": false,
+                              "scaling": scaling,
+                              "onSelected": function (path) {
+                                WallpaperService.setMonitorDirectory(monitorName, path)
+                              },
+                              "parent": root
+                            })
+  }
 }