feat(bar): add independent widget radius controls and optional plugin radius override

Assets/Translations/en.json

@@ -853,6 +853,10 @@
       "appearance-floating-label": "Floating bar",
       "appearance-font-scale-description": "Adjust the font size scale for text displayed in the bar.",
       "appearance-font-scale-label": "Font scale",
+      "appearance-widget-radius-description": "Adjust the corner roundness of bar widget capsules.",
+      "appearance-widget-radius-label": "Widget radius",
+      "appearance-override-plugin-widget-radius-description": "Apply the bar widget radius to plugin widgets automatically.",
+      "appearance-override-plugin-widget-radius-label": "Override plugin widget radius",
       "appearance-frame-radius": "Inner Radius",
       "appearance-frame-settings-description": "Adjust frame thickness and inner corner radius",
       "appearance-frame-settings-label": "Frame Settings",

Assets/settings-default.json

@@ -12,6 +12,8 @@
     "widgetSpacing": 6,
     "contentPadding": 2,
     "fontScale": 1,
+    "widgetRadiusRatio": 1,
+    "overridePluginWidgetRadius": true,
     "enableExclusionZoneInset": true,
     "backgroundOpacity": 0.93,
     "useSeparateOpacity": false,

Assets/settings-search-index.json

@@ -218,6 +218,24 @@
     "subTab": 0,
     "subTabLabel": "common.appearance"
   },
+  {
+    "labelKey": "panels.bar.appearance-widget-radius-label",
+    "descriptionKey": "panels.bar.appearance-widget-radius-description",
+    "widget": "NValueSlider",
+    "tab": 4,
+    "tabLabel": "panels.bar.title",
+    "subTab": 0,
+    "subTabLabel": "common.appearance"
+  },
+  {
+    "labelKey": "panels.bar.appearance-override-plugin-widget-radius-label",
+    "descriptionKey": "panels.bar.appearance-override-plugin-widget-radius-description",
+    "widget": "NToggle",
+    "tab": 4,
+    "tabLabel": "panels.bar.title",
+    "subTab": 0,
+    "subTabLabel": "common.appearance"
+  },
   {
     "labelKey": "panels.bar.appearance-widget-spacing-label",
     "descriptionKey": "panels.bar.appearance-widget-spacing-description",
@@ -2725,4 +2743,4 @@
     "subTab": 1,
     "subTabLabel": "common.look"
   }
-]
+]

Commons/Settings.qml

@@ -213,6 +213,8 @@ Singleton {
       property int widgetSpacing: 6
       property int contentPadding: 2
       property real fontScale: 1.0
+      property real widgetRadiusRatio: 1.0
+      property bool overridePluginWidgetRadius: true
       property bool enableExclusionZoneInset: true
 
       // Bar background opacity settings

Commons/Style.qml

@@ -39,6 +39,14 @@ Singleton {
   readonly property int iRadiusM: Math.round(16 * Settings.data.general.iRadiusRatio)
   readonly property int iRadiusL: Math.round(20 * Settings.data.general.iRadiusRatio)
 
+  // Bar widget radii: bar capsules and bar widget surfaces
+  readonly property int barRadiusXXXS: Math.round(3 * Settings.data.bar.widgetRadiusRatio)
+  readonly property int barRadiusXXS: Math.round(4 * Settings.data.bar.widgetRadiusRatio)
+  readonly property int barRadiusXS: Math.round(8 * Settings.data.bar.widgetRadiusRatio)
+  readonly property int barRadiusS: Math.round(12 * Settings.data.bar.widgetRadiusRatio)
+  readonly property int barRadiusM: Math.round(16 * Settings.data.bar.widgetRadiusRatio)
+  readonly property int barRadiusL: Math.round(20 * Settings.data.bar.widgetRadiusRatio)
+
   readonly property int screenRadius: Math.round(20 * Settings.data.general.screenRadiusRatio)
 
   // Border

Modules/Bar/Extras/BarPillHorizontal.qml

@@ -88,7 +88,7 @@ Item {
     id: pillBackground
     width: collapseToIcon ? pillHeight : root.width
     height: pillHeight
-    radius: Style.radiusM
+    radius: Style.barRadiusM
     color: root.bgColor
     anchors.verticalCenter: parent.verticalCenter
     border.color: Style.capsuleBorderColor
@@ -124,10 +124,10 @@ Item {
     color: "transparent" // Make pill background transparent to avoid double opacity
 
     // iconPosition takes precedence, fallback to oppositeDirection
-    topLeftRadius: iconPosition ? (iconPosition === "right" ? Style.radiusM : 0) : (oppositeDirection ? 0 : Style.radiusM)
-    bottomLeftRadius: iconPosition ? (iconPosition === "right" ? Style.radiusM : 0) : (oppositeDirection ? 0 : Style.radiusM)
-    topRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.radiusM) : (oppositeDirection ? Style.radiusM : 0)
-    bottomRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.radiusM) : (oppositeDirection ? Style.radiusM : 0)
+    topLeftRadius: iconPosition ? (iconPosition === "right" ? Style.barRadiusM : 0) : (oppositeDirection ? 0 : Style.barRadiusM)
+    bottomLeftRadius: iconPosition ? (iconPosition === "right" ? Style.barRadiusM : 0) : (oppositeDirection ? 0 : Style.barRadiusM)
+    topRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.barRadiusM) : (oppositeDirection ? Style.barRadiusM : 0)
+    bottomRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.barRadiusM) : (oppositeDirection ? Style.barRadiusM : 0)
     anchors.verticalCenter: parent.verticalCenter
 
     NText {
@@ -181,7 +181,7 @@ Item {
     id: iconCircle
     width: hasIcon ? pillHeight : 0
     height: pillHeight
-    radius: Math.min(Style.radiusL, width / 2)
+    radius: Math.min(Style.barRadiusL, width / 2)
     color: "transparent" // Make icon background transparent to avoid double opacity
     anchors.verticalCenter: parent.verticalCenter
 

Modules/Bar/Extras/BarPillVertical.qml

@@ -99,7 +99,7 @@ Item {
     id: pillBackground
     width: buttonSize
     height: root.contentHeight
-    radius: Style.radiusM
+    radius: Style.barRadiusM
     color: root.bgColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth
@@ -134,10 +134,10 @@ Item {
     color: "transparent" // Make pill background transparent to avoid double opacity
 
     // Radius logic for vertical expansion - rounded on the side that connects to icon
-    topLeftRadius: openUpward ? Style.radiusM : 0
-    bottomLeftRadius: openDownward ? Style.radiusM : 0
-    topRightRadius: openUpward ? Style.radiusM : 0
-    bottomRightRadius: openDownward ? Style.radiusM : 0
+    topLeftRadius: openUpward ? Style.barRadiusM : 0
+    bottomLeftRadius: openDownward ? Style.barRadiusM : 0
+    topRightRadius: openUpward ? Style.barRadiusM : 0
+    bottomRightRadius: openDownward ? Style.barRadiusM : 0
 
     anchors.horizontalCenter: parent.horizontalCenter
 
@@ -188,7 +188,7 @@ Item {
     id: iconCircle
     width: buttonSize
     height: buttonSize
-    radius: Math.min(Style.radiusL, width / 2)
+    radius: Math.min(Style.barRadiusL, width / 2)
     color: "transparent" // Make icon background transparent to avoid double opacity
 
     // Icon positioning based on direction

Modules/Bar/Extras/BarWidgetLoader.qml

@@ -54,6 +54,24 @@ Item {
 
   // Force reload counter - incremented when plugin widget registry changes
   property int reloadCounter: 0
+  property var _pluginRadiusCache: []
+
+  function _getPluginRadiusCache(item) {
+    for (var i = 0; i < _pluginRadiusCache.length; i++) {
+      if (_pluginRadiusCache[i].item === item)
+        return _pluginRadiusCache[i];
+    }
+
+    var entry = {
+      item: item,
+      hasCustomRadius: item.hasOwnProperty("customRadius"),
+      customRadius: item.hasOwnProperty("customRadius") ? item.customRadius : undefined,
+      hasRadius: item.hasOwnProperty("radius"),
+      radius: item.hasOwnProperty("radius") ? item.radius : undefined
+    };
+    _pluginRadiusCache.push(entry);
+    return entry;
+  }
 
   // Listen for plugin widget registry changes to force reload
   Connections {
@@ -71,6 +89,16 @@ Item {
     }
   }
 
+  // Apply plugin radius override live when setting changes (no widget reload).
+  Connections {
+    target: Settings.data.bar
+    enabled: root._isPlugin
+
+    function onOverridePluginWidgetRadiusChanged() {
+      root._applyPluginRadiusOverride(loader.item);
+    }
+  }
+
   readonly property bool _isPlugin: BarWidgetRegistry.isPluginWidget(widgetId)
 
   // Build initial properties that must be available during Component.onCompleted.
@@ -113,6 +141,40 @@ Item {
     }
   }
 
+  function _applyPluginRadiusOverride(item) {
+    if (!root._isPlugin || !item)
+      return;
+
+    if (item.hasOwnProperty("disableGlobalRadiusOverride") && item.disableGlobalRadiusOverride)
+      return;
+
+    var cache = root._getPluginRadiusCache(item);
+
+    if (!Settings.data.bar.overridePluginWidgetRadius) {
+      if (cache.hasCustomRadius)
+        item.customRadius = cache.customRadius;
+      else if (cache.hasRadius)
+        item.radius = cache.radius;
+      return;
+    }
+
+    if (item.hasOwnProperty("customRadius")) {
+      item.customRadius = Qt.binding(function () {
+        return Style.barRadiusL;
+      });
+      return;
+    }
+
+    if (item.hasOwnProperty("radius")) {
+      item.radius = Qt.binding(function () {
+        var baseRadius = Style.barRadiusM;
+        if (item.hasOwnProperty("width") && item.width > 0)
+          return Math.min(baseRadius, item.width / 2);
+        return baseRadius;
+      });
+    }
+  }
+
   Loader {
     id: loader
     anchors.fill: parent
@@ -161,6 +223,9 @@ Item {
         }
       }
 
+      // Keep plugin widgets aligned with bar radius setting unless plugin opts out.
+      root._applyPluginRadiusOverride(item);
+
       // Unregister any previous registration before registering the new instance
       root._unregister();
 

Modules/Bar/Extras/WorkspacePill.qml

@@ -79,7 +79,7 @@ Item {
     height: pillContainer.pillHeight
     x: Style.pixelAlignCenter(parent.width, width)
     y: Style.pixelAlignCenter(parent.height, height)
-    radius: Style.radiusM
+    radius: Style.barRadiusXS
     z: 0
 
     color: {

Modules/Bar/Widgets/ActiveWindow.qml

@@ -202,7 +202,7 @@ Item {
     y: isVerticalBar ? 0 : Style.pixelAlignCenter(parent.height, height)
     width: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : verticalSize) : ((!hasFocusedWindow) && (hideMode === "hidden") ? 0 : dynamicWidth)
     height: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : verticalSize) : capsuleHeight
-    radius: Style.radiusM
+    radius: Style.barRadiusM
     color: Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth
@@ -279,7 +279,7 @@ Item {
           }
           forcedHover: mainMouseArea.containsMouse
           fadeExtent: 0.1
-          fadeCornerRadius: Style.radiusM
+          fadeCornerRadius: Style.barRadiusM
 
           NText {
             text: windowTitle

Modules/Bar/Widgets/AudioVisualizer.qml

@@ -99,7 +99,7 @@ Item {
     width: root.contentWidth
     height: root.contentHeight
     anchors.centerIn: parent
-    radius: Style.radiusS
+    radius: Style.barRadiusS
     color: Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth

Modules/Bar/Widgets/Battery.qml

@@ -155,7 +155,7 @@ Item {
     anchors.centerIn: nBattery
     width: root.isBarVertical ? root.capsuleHeight : nBattery.width + Style.margin2S
     height: root.isBarVertical ? nBattery.height + Style.margin2S : root.capsuleHeight
-    radius: Math.min(Style.radiusL, width / 2)
+    radius: Math.min(Style.barRadiusL, width / 2)
     color: graphicMouseArea.containsMouse ? Color.mHover : Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth

Modules/Bar/Widgets/Clock.qml

@@ -63,7 +63,7 @@ Item {
     height: root.contentHeight
     anchors.centerIn: parent
 
-    radius: Style.radiusL
+    radius: Style.barRadiusL
     color: Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth

Modules/Bar/Widgets/ControlCenter.qml

@@ -59,7 +59,7 @@ NIconButton {
   tooltipDirection: BarService.getTooltipDirection(screen?.name)
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: Style.capsuleColor
   colorFg: iconColor
   colorBgHover: Color.mHover

Modules/Bar/Widgets/DarkMode.qml

@@ -33,7 +33,7 @@ NIconButton {
   tooltipDirection: BarService.getTooltipDirection(screen?.name)
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: Style.capsuleColor
   colorFg: Color.resolveColorKey(iconColorKey)
   onClicked: Settings.data.colorSchemes.darkMode = !Settings.data.colorSchemes.darkMode

Modules/Bar/Widgets/Launcher.qml

@@ -49,7 +49,7 @@ NIconButton {
   tooltipDirection: BarService.getTooltipDirection(screenName)
   baseSize: Style.getCapsuleHeightForScreen(screenName)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: Style.capsuleColor
   colorFg: iconColor
   colorBgHover: Color.mHover

Modules/Bar/Widgets/LockKeys.qml

@@ -87,7 +87,7 @@ Item {
     color: Style.capsuleColor
     width: root.contentWidth
     height: root.contentHeight
-    radius: Style.radiusM
+    radius: Style.barRadiusM
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth
 

Modules/Bar/Widgets/MediaMini.qml

@@ -236,7 +236,7 @@ Item {
     y: Style.pixelAlignCenter(parent.height, height)
     width: Style.toOdd(isVertical ? (isHidden ? 0 : verticalSize) : (isHidden ? 0 : contentWidth))
     height: Style.toOdd(isVertical ? (isHidden ? 0 : verticalSize) : capsuleHeight)
-    radius: Style.radiusM
+    radius: Style.barRadiusM
     color: Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth
@@ -335,7 +335,7 @@ Item {
           maxWidth: root.maxWidth - root.mainContentWidth
           forcedHover: mainMouseArea.containsMouse
           fadeExtent: 0.1
-          fadeCornerRadius: Style.radiusM
+          fadeCornerRadius: Style.barRadiusM
 
           NText {
             color: hasPlayer ? root.textColor : Color.mOnSurfaceVariant

Modules/Bar/Widgets/NightLight.qml

@@ -36,7 +36,7 @@ NIconButton {
 
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: Settings.data.nightLight.enabled ? Color.mPrimary : Style.capsuleColor
   colorFg: Settings.data.nightLight.enabled ? Color.mOnPrimary : Color.resolveColorKey(iconColorKey)
   border.color: Style.capsuleBorderColor

Modules/Bar/Widgets/NoctaliaPerformance.qml

@@ -36,7 +36,7 @@ NIconButton {
 
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: PowerProfileService.noctaliaPerformanceMode ? Color.mPrimary : Style.capsuleColor
   colorFg: PowerProfileService.noctaliaPerformanceMode ? Color.mOnPrimary : Color.resolveColorKey(iconColorKey)
   border.color: Style.capsuleBorderColor

Modules/Bar/Widgets/NotificationHistory.qml

@@ -57,7 +57,7 @@ NIconButton {
 
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   icon: NotificationService.doNotDisturb ? "bell-off" : "bell"
   tooltipText: {
     if (PanelService.getPanel("notificationHistoryPanel", screen)?.isPanelOpen) {

Modules/Bar/Widgets/PowerProfile.qml

@@ -34,7 +34,7 @@ NIconButton {
 
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   visible: PowerProfileService.available
   icon: PowerProfileService.getIcon()
   tooltipText: I18n.tr("tooltips.power-profile", {

Modules/Bar/Widgets/SessionMenu.qml

@@ -35,7 +35,7 @@ NIconButton {
 
   baseSize: Style.getCapsuleHeightForScreen(screenName)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   icon: "power"
   tooltipText: {
     if (PanelService.getPanel("sessionMenuPanel", screen)?.isPanelOpen)

Modules/Bar/Widgets/Settings.qml

@@ -44,7 +44,7 @@ NIconButton {
   tooltipDirection: BarService.getTooltipDirection(screen?.name)
   baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   applyUiScale: false
-  customRadius: Style.radiusL
+  customRadius: Style.barRadiusL
   colorBg: Style.capsuleColor
   colorFg: iconColor
   colorBgHover: Color.mHover