Optional capsule bg

Commons/Settings.qml

@@ -273,6 +273,7 @@ Singleton {
         property real backgroundOpacity: 1.0
         property list<string> monitors: []
         property string density: "default" // "compact", "default", "comfortable"
+        property bool showCapsule: true
 
         // Floating bar settings
         property bool floating: false

Modules/Bar/Widgets/ActiveWindow.qml

@@ -146,7 +146,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: width / 2
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     Item {
       id: mainContainer

Modules/Bar/Widgets/Clock.qml

@@ -43,7 +43,7 @@ Rectangle {
   implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill
 
   radius: Math.round(Style.radiusS * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   Item {
     id: clockContainer

Modules/Bar/Widgets/MediaMini.qml

@@ -82,7 +82,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: (barPosition === "left" || barPosition === "right") ? width / 2 : Math.round(Style.radiusM * scaling)
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     // Used to anchor the tooltip, so the tooltip does not move when the content expands
     Item {

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -46,7 +46,7 @@ NIconButton {
   IconImage {
     id: logo
     anchors.centerIn: parent
-    width: root.width * 0.85
+    width: root.width * 0.8
     height: width
     source: useDistroLogo ? DistroLogoService.osLogo : ""
     visible: useDistroLogo && source !== ""

Modules/Bar/Widgets/SystemMonitor.qml

@@ -50,7 +50,7 @@ Rectangle {
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling)
   implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   GridLayout {
     id: mainGrid

Modules/Bar/Widgets/Taskbar.qml

@@ -21,7 +21,7 @@ Rectangle {
   implicitWidth: isVerticalBar ? Math.round(Style.capsuleHeight * scaling) : taskbarLayout.implicitWidth + Style.marginM * scaling * 2
   implicitHeight: isVerticalBar ? taskbarLayout.implicitHeight + Style.marginM * scaling * 2 : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   GridLayout {
     id: taskbarLayout

Modules/Bar/Widgets/Tray.qml

@@ -32,7 +32,7 @@ Rectangle {
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : (trayFlow.implicitWidth + Style.marginS * scaling * 2)
   implicitHeight: isVertical ? (trayFlow.implicitHeight + Style.marginS * scaling * 2) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   Layout.alignment: Qt.AlignVCenter
 

Modules/Bar/Widgets/Workspace.qml

@@ -61,12 +61,11 @@ Item {
   implicitWidth: isVertical ? Math.round(Style.barHeight * scaling) : computeWidth()
   implicitHeight: isVertical ? computeHeight() : Math.round(Style.barHeight * scaling)
 
-
   function getWorkspaceWidth(ws) {
     const d = Style.capsuleHeight * root.baseDimensionRatio
     if (ws.isFocused)
       return d * 2.5
-    else 
+    else
       return d
   }
 
@@ -74,7 +73,7 @@ Item {
     const d = Style.capsuleHeight * root.baseDimensionRatio
     if (ws.isFocused)
       return d * 3
-    else 
+    else
       return d
   }
 
@@ -184,7 +183,7 @@ Item {
     width: isVertical ? Math.round(Style.capsuleHeight * scaling) : parent.width
     height: isVertical ? parent.height : Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -205,7 +204,7 @@ Item {
         id: workspacePillContainer
         width: root.getWorkspaceWidth(model)
         height: Style.capsuleHeight * root.baseDimensionRatio
-        
+
         Rectangle {
           id: pill
           anchors.fill: parent

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -112,6 +112,15 @@ ColumnLayout {
       text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%"
     }
   }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: "Show Capsule"
+    description: "Adds a capsule behind each widget to improve readability on transparent bars."
+    checked: Settings.data.bar.showCapsule
+    onToggled: checked => Settings.data.bar.showCapsule = checked
+  }
+
   NToggle {
     Layout.fillWidth: true
     label: "Floating Bar"

Widgets/NIconButton.qml

@@ -33,7 +33,7 @@ Rectangle {
   implicitHeight: Math.round(baseSize * scaling)
 
   opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
-  color: root.enabled && root.hovering ? colorBgHover : root.compact ? Color.transparent : colorBg
+  color: root.enabled && root.hovering ? colorBgHover : Settings.data.bar.showCapsule ? colorBg : Color.transparent
   radius: width * 0.5
   border.color: root.enabled && root.hovering ? colorBorderHover : colorBorder
   border.width: Math.max(1, Style.borderS * scaling)

Widgets/NPillHorizontal.qml

@@ -54,7 +54,7 @@ Item {
                    (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
     bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
@@ -104,7 +104,7 @@ Item {
     width: pillHeight
     height: pillHeight
     radius: width * 0.5
-    color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
+    color: hovered ? Color.mTertiary : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
     anchors.verticalCenter: parent.verticalCenter
 
     x: rightOpen ? 0 : (parent.width - width)

Widgets/NPillVertical.qml

@@ -67,7 +67,7 @@ Item {
     y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     // Radius logic for vertical expansion - rounded on the side that connects to icon
     topLeftRadius: openUpward ? buttonSize * 0.5 : 0
@@ -127,7 +127,7 @@ Item {
     width: buttonSize
     height: buttonSize
     radius: width * 0.5
-    color: hovered ? Color.mTertiary : compact ? Color.transparent : Color.mSurfaceVariant
+    color: hovered ? Color.mTertiary : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     // Icon positioning based on direction
     x: 0