NSearchableComboBox is now agnostic to badges. Also replaced [L], [C], [R] by icons

Modules/Panels/Settings/Tabs/BarTab.qml

@@ -227,6 +227,9 @@ ColumnLayout {
 
     NHeader {
       label: I18n.tr("settings.bar.widgets.section.label")
+    }
+
+    NLabel {
       description: I18n.tr("settings.bar.widgets.section.description")
     }
 
@@ -415,14 +418,36 @@ ColumnLayout {
       if (instances[i].widgetId === widgetId) {
         const section = instances[i].section;
         if (section === "left")
-          locations["L"] = true;
+          locations["arrow-bar-to-left"] = true;
         else if (section === "center")
-          locations["C"] = true;
+          locations["layout-columns"] = true;
         else if (section === "right")
-          locations["R"] = true;
+          locations["arrow-bar-to-right"] = true;
       }
     }
-    return Object.keys(locations).join('');
+    return Object.keys(locations);
+  }
+
+  function createBadges(isPlugin, locations) {
+    const badges = [];
+
+    // Add plugin badge first (with custom color)
+    if (isPlugin) {
+      badges.push({
+                    "icon": "plugin",
+                    "color": Color.mSecondary
+                  });
+    }
+
+    // Add location badges (with default styling)
+    locations.forEach(function (location) {
+      badges.push({
+                    "icon": location,
+                    "color": Color.mOnSurfaceVariant
+                  });
+    });
+
+    return badges;
   }
 
   function updateAvailableWidgetsModel() {
@@ -447,8 +472,7 @@ ColumnLayout {
                       availableWidgets.append({
                                                 "key": entry,
                                                 "name": displayName,
-                                                "badgeLocations": getWidgetLocations(entry),
-                                                "isPlugin": isPlugin
+                                                "badges": createBadges(isPlugin, getWidgetLocations(entry))
                                               });
                     });
   }

Widgets/NSearchableComboBox.qml

@@ -219,33 +219,30 @@ RowLayout {
                 }
 
                 RowLayout {
-                  spacing: Style.marginS
+                  spacing: 0
                   Layout.alignment: Qt.AlignRight
 
-                  // Plugin badge indicator
-                  NIcon {
-                    visible: typeof isPlugin !== 'undefined' && isPlugin === true
-                    icon: "plugin"
-                    pointSize: Style.fontSizeXS
-                    color: highlighted ? Color.mOnHover : Color.mSecondary
-                    Layout.preferredWidth: Style.baseWidgetSize * 0.7
-                    Layout.preferredHeight: Style.baseWidgetSize * 0.7
-                  }
-
+                  // Generic badge renderer
                   Repeater {
-                    model: typeof badgeLocations !== 'undefined' ? badgeLocations : []
+                    model: (typeof badges !== 'undefined' && badges !== null) ? badges.count : 0
 
-                    delegate: Item {
-                      width: Style.baseWidgetSize * 0.7
-                      height: Style.baseWidgetSize * 0.7
+                    delegate: NIcon {
+                      required property int index
+                      readonly property var badgeData: badges.get(index)
 
-                      NText {
-                        anchors.centerIn: parent
-                        text: modelData
-                        pointSize: Style.fontSizeXXS
-                        font.weight: Style.fontWeightBold
-                        color: highlighted ? Color.mOnHover : Color.mOnSurface
+                      icon: badgeData.icon || ""
+                      pointSize: {
+                        if (badgeData.size === "xsmall")
+                          return Style.fontSizeXXS;
+                        else if (badgeData.size === "medium")
+                          return Style.fontSizeM;
+                        else
+                          return Style.fontSizeXS;
                       }
+                      color: highlighted ? Color.mOnHover : (badgeData.color || Color.mOnSurface)
+                      Layout.preferredWidth: Style.baseWidgetSize * 0.6
+                      Layout.preferredHeight: Style.baseWidgetSize * 0.6
+                      visible: badgeData && badgeData.icon !== undefined && badgeData.icon !== ""
                     }
                   }
                 }