feat(settings): Add usage badges to widget selector

Adds a visual indicator to the "Add Widget" dropdown in the Bar
settings panel to show which widgets are already in use and where.

- A small text badge ("L", "C", "R") now appears next to any widget
  that is already on a panel.
- The badges are reactive and update automatically when widgets are
  added or removed.
- This helps prevent accidental duplicate additions and makes widget
  management easier.

Modules/Settings/Extras/SectionEditor.qml

@@ -83,6 +83,7 @@ NBox {
       Item {
         Layout.fillWidth: true
       }
+
       NSearchableComboBox {
         id: comboBox
         model: availableWidgets

Modules/Settings/Tabs/BarTab.qml

@@ -300,9 +300,7 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginXL
   }
 
-  // ---------------------------------
   // Signal functions
-  // ---------------------------------
   function _addWidgetToSection(widgetId, section) {
     var newWidget = {
       "id": widgetId
@@ -372,19 +370,51 @@ ColumnLayout {
     }
   }
 
+  // Data model functions
+  function getWidgetLocations(widgetId) {
+    if (!BarService)
+      return []
+    const instances = BarService.getAllRegisteredWidgets()
+    const locations = {}
+    for (var i = 0; i < instances.length; i++) {
+      if (instances[i].widgetId === widgetId) {
+        const section = instances[i].section
+        if (section === "left")
+          locations["L"] = true
+        else if (section === "center")
+          locations["C"] = true
+        else if (section === "right")
+          locations["R"] = true
+      }
+    }
+    return Object.keys(locations).join('')
+  }
+
+  function updateAvailableWidgetsModel() {
+    availableWidgets.clear()
+    const widgets = BarWidgetRegistry.getAvailableWidgets()
+    widgets.forEach(entry => {
+      availableWidgets.append({
+                              "key": entry,
+                              "name": entry,
+                              "badgeLocations": getWidgetLocations(entry)
+                            })
+    })
+  }
+
   // Base list model for all combo boxes
   ListModel {
     id: availableWidgets
   }
 
   Component.onCompleted: {
-    // Fill out availableWidgets ListModel
-    availableWidgets.clear()
-    BarWidgetRegistry.getAvailableWidgets().forEach(entry => {
-                                                      availableWidgets.append({
-                                                                                "key": entry,
-                                                                                "name": entry
-                                                                              })
-                                                    })
+    updateAvailableWidgetsModel()
+  }
+
+  Connections {
+    target: BarService
+    function onActiveWidgetsChanged() {
+      updateAvailableWidgetsModel()
+    }
   }
 }

Services/BarService.qml

@@ -15,6 +15,8 @@ Singleton {
   // Key format: "screenName|section|widgetId|index"
   property var widgetInstances: ({})
 
+  signal activeWidgetsChanged()
+
   signal barReadyChanged(string screenName)
 
   // Simple timer that run once when the widget structure has changed
@@ -68,6 +70,7 @@ Singleton {
     timerCheckVisualizer.restart()
 
     Logger.log("BarService", "Registered widget:", key)
+    root.activeWidgetsChanged()
   }
 
   // Unregister a widget instance
@@ -75,6 +78,7 @@ Singleton {
     const key = [screenName, section, widgetId, index].join("|")
     delete widgetInstances[key]
     Logger.log("BarService", "Unregistered widget:", key)
+    root.activeWidgetsChanged()
   }
 
   // Lookup a specific widget instance (returns the actual QML instance)

Widgets/NSearchableComboBox.qml

@@ -20,6 +20,7 @@ RowLayout {
   property string currentKey: ""
   property string placeholder: ""
   property string searchPlaceholder: I18n.tr("placeholders.search")
+  property Component delegate: null
 
   readonly property real preferredHeight: Style.baseWidgetSize * 1.1
 
@@ -187,7 +188,12 @@ RowLayout {
           horizontalPolicy: ScrollBar.AlwaysOff
           verticalPolicy: ScrollBar.AsNeeded
 
-          delegate: ItemDelegate {
+          delegate: root.delegate ? root.delegate : defaultDelegate
+
+          Component {
+            id: defaultDelegate
+            ItemDelegate {
+              id: delegateRoot
               width: listView.width
               hoverEnabled: true
               highlighted: ListView.view.currentIndex === index
@@ -204,12 +210,17 @@ RowLayout {
                 combo.popup.close()
               }
 
-            contentItem: NText {
+                          contentItem: RowLayout {
+                            width: parent.width
+                            spacing: Style.marginM
+              
+                            NText {
                               text: name
                               pointSize: Style.fontSizeM
                               color: highlighted ? Color.mOnTertiary : Color.mOnSurface
                               verticalAlignment: Text.AlignVCenter
                               elide: Text.ElideRight
+                              Layout.fillWidth: true
                               Behavior on color {
                                 ColorAnimation {
                                   duration: Style.animationFast
@@ -217,6 +228,31 @@ RowLayout {
                               }
                             }
               
+                            RowLayout {
+                              spacing: Style.marginS
+                              Layout.alignment: Qt.AlignRight
+              
+                              Repeater {
+                                model: badgeLocations
+              
+                  delegate: NBox {
+                    width: Style.baseWidgetSize * 0.7
+                    height: Style.baseWidgetSize * 0.7
+                    color: "transparent"
+                    radius: Style.radiusS
+                    border.width: 0
+
+                    NText {
+                      anchors.centerIn: parent
+                      text: modelData
+                      pointSize: Style.fontSizeXXS
+                      font.weight: Style.fontWeightBold
+                      color: highlighted ? Color.mOnTertiary : Color.mOnSurface
+                    }
+                  }
+                }
+              }
+            }
               background: Rectangle {
                 width: listView.width
                 color: highlighted ? Color.mTertiary : Color.transparent
@@ -230,6 +266,7 @@ RowLayout {
             }
           }
         }
+      }
 
       background: Rectangle {
         color: Color.mSurfaceVariant