BarSectionEditor: add search option (fixes #347)

Assets/Translations/de.json

@@ -746,7 +746,8 @@
         "apply": "Anwenden"
       },
       "section-editor": {
-        "placeholder": "Widget auswählen..."
+        "placeholder": "Widget auswählen...",
+        "search-placeholder": "Widgets suchen..."
       },
       "active-window": {
         "show-app-icon": "App-Symbol anzeigen"

Assets/Translations/en.json

@@ -758,7 +758,8 @@
         "apply": "Apply"
       },
       "section-editor": {
-        "placeholder": "Select a widget to add..."
+        "placeholder": "Select a widget to add...",
+        "search-placeholder": "Search widgets..."
       },
       "active-window": {
         "show-app-icon": "Show app icon"

Assets/Translations/es.json

@@ -756,7 +756,8 @@
         "apply": "Aplicar"
       },
       "section-editor": {
-        "placeholder": "Selecciona un widget para añadir..."
+        "placeholder": "Selecciona un widget para añadir...",
+        "search-placeholder": "Buscar widgets..."
       },
       "active-window": {
         "show-app-icon": "Mostrar icono de la aplicación"

Assets/Translations/fr.json

@@ -754,7 +754,8 @@
         "apply": "Appliquer"
       },
       "section-editor": {
-        "placeholder": "Sélectionnez un widget à ajouter..."
+        "placeholder": "Sélectionnez un widget à ajouter...",
+        "search-placeholder": "Rechercher des widgets..."
       },
       "active-window": {
         "show-app-icon": "Afficher l'icône de l'application"

Assets/Translations/pt.json

@@ -756,7 +756,8 @@
         "apply": "Aplicar"
       },
       "section-editor": {
-        "placeholder": "Selecione um widget para adicionar..."
+        "placeholder": "Selecione um widget para adicionar...",
+        "search-placeholder": "Pesquisar widgets..."
       },
       "active-window": {
         "show-app-icon": "Mostrar ícone do aplicativo"

Modules/Settings/Bar/BarSectionEditor.qml

@@ -79,16 +79,29 @@ NBox {
       Item {
         Layout.fillWidth: true
       }
-      NComboBox {
+      NSearchableComboBox {
         id: comboBox
         model: availableWidgets
         label: ""
         description: ""
         placeholder: I18n.tr("bar.widget-settings.section-editor.placeholder")
+        searchPlaceholder: I18n.tr("bar.widget-settings.section-editor.search-placeholder")
         onSelected: key => comboBox.currentKey = key
         popupHeight: 340 * scaling
+        minimumWidth: 200 * scaling
 
         Layout.alignment: Qt.AlignVCenter
+
+        // Re-filter when the model count changes (when widgets are loaded)
+        Connections {
+          target: availableWidgets
+          function onCountChanged() {
+            // Trigger a re-filter by clearing and re-setting the search text
+            var currentSearch = comboBox.searchText
+            comboBox.searchText = ""
+            comboBox.searchText = currentSearch
+          }
+        }
       }
 
       NIconButton {

Widgets/NSearchableComboBox.qml

@@ -53,6 +53,11 @@ RowLayout {
   function filterModel() {
     filteredModel.clear()
 
+    // Check if model exists and has items
+    if (!root.model || root.model.count === undefined || root.model.count === 0) {
+      return
+    }
+
     if (searchText.trim() === "") {
       // If no search text, show all items
       for (var i = 0; i < root.model.count; i++) {
@@ -242,11 +247,13 @@ RowLayout {
       }
     }
 
-    // Focus search input when popup opens
+    // Focus search input when popup opens and ensure model is filtered
     Connections {
       target: combo.popup
       function onVisibleChanged() {
         if (combo.popup.visible) {
+          // Ensure the model is filtered when popup opens
+          filterModel()
           // Small delay to ensure the popup is fully rendered
           Qt.callLater(function () {
             if (searchInput && searchInput.inputItem) {